本文主要是介绍coderwhy前端学习笔记五，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
HTML常见的元素
- HTML结构分析
- h1-h6和p元素
- img、a、iframe元素
- div、span元素
- 不常用元素
- HTML全局属性
完整的HTML结构
文档声明
html元素
head元素
<!DOCTYPE html>
<html lang="en"><!-- 编写文档的配置信息 -->
<head><meta charset="UTF-8"><!-- 网页的标题 --><title>head元素的学习</title>
</head>
<body></body>
</html>body元素
HTML元素
案例分析 – 使用什么元素
常见元素 – h元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- h元素 h1~h6 --><h1>我是h1标题</h1><h2>我是h2标题</h2><h3>我是h3标题</h3><h4>我是h4标题</h4><h5>我是h5标题</h5><h6>我是h6标题</h6><!-- 额外: 浏览器到底是通过什么来区分出来h1~h6(呈现的时候) --></body>
</html>效果图:
常见元素 – p元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p>最后一个是国王，他是小王子在离开自己的星球后拜访的第一个小星球325上仅有的居民。这个国王称自己统治所有一切，他的统治必须被尊敬和不容忤逆;然而，事实上他只是徒有虚名，他只能让别人去做别人自己想做的事。</p><p>这些都是光遇里的小王子季节留下的一个独立的小星球，这里包括了小王子遇到的很多人，每个人都是独立的一个小星球，虽然小王子遇到他们虽然不理解，但是他们都是独立的人格，每个人都是自己独立的星球。</p></body>
</html>效果图:
案例练习
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>史蒂夫·乔布斯</h1><p>（美国苹果公司联合创始人）</p><p>史蒂夫·乔布斯（Steve Jobs，1955年2月24日—2011年10月5日 [1] ），出生于美国加利福尼亚州旧金山，美国发明家、企业家、苹果公司联合创始人。</p> <p>1976年4月1日，乔布斯签署了一份合同，决定成立一家电脑公司。 [2] 1977年4月，乔布斯在美国第一次计算机展览会展示了苹果Ⅱ号样机。1998年苹果推出iMac [3] ，创新的外壳颜色透明设计使得产品大卖，并让苹果度过财政危机。2011年8月24日，史蒂夫·乔布斯向苹果董事会提交辞职申请。 [4] </p><p>乔布斯被认为是计算机业界与娱乐业界的标志性人物，他经历了苹果公司几十年的起落与兴衰，先后领导和推出了麦金塔计算机、iMac、iPod、iPhone、iPad等风靡全球的电子产品，深刻地改变了现代通讯、娱乐、生活方式。乔布斯同时也是前皮克斯动画工作室的董事长及首席执行官。</p><p>2011年10月5日，史蒂夫·乔布斯因患胰腺神经内分泌肿瘤 [5] 病逝，享年56岁。 [1] </p></body>
</html>效果图:
常见元素 - img元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p>哈哈哈哈</p><!-- src -> source(源) --><img width="300" src="https://p6.toutiagin/tos-cn-i-qvj2lq49k0/ec7d03634695464cab47abfe2a00efb0?from=pc" alt="小王子图片"><p>呵呵呵呵</p></body>
</html>效果图:
img元素 - 图片的路径
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="box">fdafdas</div><!-- src:1.网络图片2.--><!-- <img src="https://s10.mogucdn.com/mlcdn/c45406/180919_3f62ijgkj656k2lj03dh0di4iflea_750x390.jpg"> --><!-- 本地图片图片的路径: 1> 绝对(absolute)路径: 根盘符开始查找, 一直找到这个资源2> 相对(relative)路径: bx--><!-- <img src="F:\共享给学生文件夹\上课资料\01_阶段一-HTML+CSS\Learn_HTML_CSS\images\gouwujie01.jpg" alt=""> --><img src="../images/gouwujie01.jpg" alt=""></body>
</html>效果图:
img元素 - 图片的格式
常见元素 – a元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- blank: 空白的 --><!-- http://www.baidu.com -> 百度的服务器 -> index.html文件 --><a href="http://www.baidu.com" target="_blank">百度一下</a><!-- 链接到本地的网页(本地的资源地址) --><a href="./09_img元素中的图片路径.html" target="_self">本地网站</a><!-- 案例: 头条新闻的跳转 --><a href="https://www.toutiao.com/amos_land_page/?category_name=topic_innerflow&event_type=hot_board&log_pb=%7B%22category_name%22%3A%22topic_innerflow%22%2C%22cluster_type%22%3A%222%22%2C%22enter_from%22%3A%22click_category%22%2C%22entrance_hotspot%22%3A%22outside%22%2C%22event_type%22%3A%22hot_board%22%2C%22hot_board_cluster_id%22%3A%227078044780403359777%22%2C%22hot_board_impr_id%22%3A%22202203251152380102112151401FC722C2%22%2C%22jump_page%22%3A%22hot_board_page%22%2C%22location%22%3A%22news_hot_card%22%2C%22page_location%22%3A%22hot_board_page%22%2C%22rank%22%3A%223%22%2C%22source%22%3A%22trending_tab%22%2C%22style_id%22%3A%2240132%22%2C%22title%22%3A%22%E4%BB%A5%E7%A7%91%E6%8A%80%E5%88%9B%E6%96%B0%E6%8E%A8%E5%8A%A8%E9%AB%98%E8%B4%A8%E9%87%8F%E5%8F%91%E5%B1%95%22%7D&rank=3&style_id=40132&topic_id=7078044780403359777">以科技创新推动高质量发展</a></body>
</html>效果图:
a元素 - 锚点链接
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 页面内的锚点效果1. 在跳转到的元素上添加id2. 定义a元素, 并且a元素的href属性指向id--><a href="#theme01">跳转到主题一</a><a href="#theme02">跳转到主题二</a><a href="#theme03">跳转到主题三</a><h2 id="theme01">主题一</h2><p>我是coderwhy <br> 哈哈哈哈哈哈<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p><h2 id="theme02">主题二</h2><p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p><h2 id="theme03">主题三</h2><p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p></body>
</html>效果图:
a元素 - 图片链接
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><a href="https://www.mi.com/redmik50" target="_blank"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0ab8e5096ac6f08bd632e4d5a15d1792.jpg?w=632&h=340" alt=""></a></body>
</html>效果图:
a元素 – 其他URL地址
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 指向链接: zip压缩包 --><a href="https://github.com/coderwhy/HYMiniMall/archive/master.zip">下载zip包</a><!-- 指向其他协议地址: mailto --><a href="mailto:123@qq.com">发邮件给123@qq.com</a></body>
</html>效果图:
iframe元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><iframe src="./other/iframe元素所在的页面.html" frameborder="1"></iframe></body>
</html><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><a href="http://www.taobao.com" target="_top">打开淘宝</a></body>
</html><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><iframe src="./a元素所在的网页.html" frameborder="1"></iframe></body>
</html>效果图:
div元素、 span元素的历史
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.area {border: 1px solid red;}.keyword {font-size: 30px;font-weight: 700;color: blue;}</style>
</head>
<body><h1>学习前端</h1><div class="area"><h2>1.学习HTML+CSS</h2><p>先学习HTML, 再学习CSS, 了解一些历史/本质等等</p></div><div class="area"><h2>2.学习JavaScript</h2><p>学习<span class="keyword">JavaScript</span>的基本语法, BOM/DOM, 学网络请求, 学习ES6~12, 学习一些高级语法, 原理</p></div><div class="area"><h2>3.学习工具</h2><p>npm/node/webpack/git</p></div></body>
</html>div元素、span元素的区别
不常用元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p>好好<strong>学习</strong>, 天天<i>向上</i></p></body>
</html>HTML全局属性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p title="coderwhy">我是段落</p></body>
</html> 
字符实体
常见的字符实体
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><span><hehehehe</span><p>我是fdafadfadfadfasfdasfasdfadsffdafadfafaasdfa段落, <span>哈哈 哈哈</span>, 呵fdasfadsfdasfadsfasdfasdfadsfasdfasdfasdfadsfadsfdas呵呵呵</p><!-- 具体的实现 --><span><hehehehe></span></body>
</html> 效果图:
认识URL
URL的格式
和URI的区别
内容回顾
一. 完成课堂所有的代码练习（必须全部自己实现）
01.文档类型声明
<!DOCTYPE html> 01.文档类型声明
02.HTML元素的属性
<html lang="en"><head></head><body>内容</body>
</html>
<html lang="zh-CN"><head></head><body>内容</body>
</html> 02.HTML元素的属性,lang：1.帮助语言合成工具确定要使用的发音2.帮助翻译工具确定使用翻译规则03.head元素的属性
<html><head><meta charest="utf-8"><title>我是标题</title></head><body></body>
</html> 03.head元素的属性，两个元素一个title设置网页的标题，一个meta设置网页的编码形式04.h元素的用法
<html><head></head><body><h1>标题1</h1><h2>标题2</h2><h3>标题3</h3><h4>标题4</h4><h5>标题5</h5><h6>标题6</h6></body>
</html> 04.h元素的用法,通常用作标题,h1最大,h6最小05.p元素的用法
<html><head></head><body><p>昨天一个朋友问我，怎么才能让房价迅速降下来？</p><p>有人说，这还用问，当然是调控。</p><p>的确，2021年，二手房指导价出台，成为众多城市楼市的梦魇，就连不可一世的炒房第一城深圳，也被立斩于马下，学区房一夜掉价几百万，至今缓不过来。</p></body>
</html> 05.p元素的用法,作用是段落,分段06.h元素和p元素的案例
<html><head><h1>这些城市，房子真的太多了</h1></head><body><p>昨天一个朋友问我，怎么才能让房价迅速降下来？</p><p>有人说，这还用问，当然是调控。</p><p>的确，2021年，二手房指导价出台，成为众多城市楼市的梦魇，就连不可一世的炒房第一城深圳，也被立斩于马下，学区房一夜掉价几百万，至今缓不过来。</p></body>
</html> 06.h元素和p元素的案例07.img元素的基本使用
<html><head></head><body><img src="https://p6.toutiagin/tos-cn-i-qvj2lq49k0/ec7d03634695464cab47abfe2a00efb0?from=pc" alt="小王子"></body>
</html> 07.img元素的基本使用,src填写目标图片的文件路径,有相对路径跟绝对路径,alt图片加载不成功显示文本,屏幕阅读器可将图片信息传达给需要的人听08.相对路径跟绝对路径
<html><head></head><body><img src="../images/gouwujie01.jpg" alt=""><!--相对路径--><img src="C:\Users\Administrator\Desktop\新建文件夹\Day02\Learn_HTML_CSS\images\gouwujie01.jpg" alt="图片"><!--绝对路径--></body>
</html> 08.相对路径跟绝对路径09.a元素的使用
<html><head></head><body><a href="https://www.toutiao.com/?wid=1648208779618" target="_blank">今日头条</a><a href="./08.相对路径跟绝对路径.html" target="_self">本地</a><a href="https://www.toutiao.com/?wid=1648208779618" target="_self">头条</a></body>
</html> 09.a元素的使用10.a元素的在本页面的锚点链接
<html><head></head><body><a href="#table1" >跳转到第一个</a><a href="#table2" >跳转到第二个</a><a href="#table3" >跳转到第三个</a><h3 id="table1">第一个标题</h3><p>66666</p><h3 id="table2">第二个标题</h3><p>66666</p><h3 id="table3">第三个标题</h3><p>66666</p></body>
</html> 10.a元素的在本页面的锚点链接11.a元素跟img元素的结合使用
<html><head></head><body><a href="https://www.toutiao.com/article/7078655559993508352/?log_from=fd63341789015_1648211460637"><img src="https://p6.toutiaoimg.com/origin/tos-cn-i-qvj2lq49k0/b84a189a99204c269221fdfccf9d6998?from=pc"></a></body>
</html> 11.a元素跟img元素的结合使用12.a元素跟其他元素的链接
<html><head></head><body><a href="https://github.com/coderwhy/HYMiniMall/archive/master.zip">下载</a><a href="mailto:12345@qq.com">发送邮件到12345qq邮箱</a></body>
</html> 12.a元素跟其他元素的链接13.iframe元素的使用
<html><head></head><body><iframe src="https://www.toutiao.com/?wid=1648208779618" frameborder="1"></iframe></body>
</html> 13.iframe元素的使用14.iframe元素和a元素的结合使用
<html><head></head><body><iframe src="./others/a元素的网页.html" frameborder="1"></iframe></body>
</html> 14.iframe元素和a元素的结合使用15.div元素和span元素的调用
<html><head></head><body><h1>学习前端</h1><div><h2>学习前端</h2><p>学习html</p></div><div><h2>学习前端</h2><p>学习<span>css</span></p></div><div><h2>学习前端</h2><p>学习js</p></div></body>
</html> 15.div元素和span元素的调用16.不太常用的元素演练
<html><head></head><body><p>hello<strong>你好</strong>,真的<i>好的</i> </p></body>
</html> 16.不太常用的元素演练17.全局属性-title属性
<html><head></head><body><p title="你好,世界">helloworld</p></body>
</html> 17.全局属性-title属性18.字符实体-额外补充
<html><head></head><body><span> 你好你好 </span><span><你好你好<</span><span>>你好你好></span></body>
</html> 18.字符实体-额外补充二. 寻找h元素和p元素的案例，并且实现
<html><head><h1>这些城市，房子真的太多了</h1></head><body><p>昨天一个朋友问我，怎么才能让房价迅速降下来？</p><p>有人说，这还用问，当然是调控。</p><p>的确，2021年，二手房指导价出台，成为众多城市楼市的梦魇，就连不可一世的炒房第一城深圳，也被立斩于马下，学区房一夜掉价几百万，至今缓不过来。</p></body>
</html> 三. 寻找a元素结合img元素的案例（3个）
<html><head> </head><body><a href="https://shouji.jd.com/?skuId=100025047302_100004325476&groupId=03312682&productId=09173749"><img src="https://img20.360buyimg.com/img/s100x100_jfs/t1/193030/20/17827/75476/6110f9eeE3b3eec9f/6e32be8839b5a110.jpg!cc_100x100.webp"></a></body>
</html><html><head> </head><body><a href="https://www.vivo.com.cn/brand/news/detail?id=956&type=0"><img src="https://wwwstatic.vivo.com.cn/vivoportal/files/image/brand/20210719/1e632d569ea1da9b277254fc8e6d0356.jpg"></a></body>
</html><html><head> </head><body><a href="https://www.baidu.com/s?wd=%E7%99%BE%E5%BA%A6%E7%83%AD%E6%90%9C&sa=ire_dl_gh_logo_texing&rsv_dl=igh_logo_pcs"><img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"></a></body>
</html>四. 说出div元素和span元素的作用和区别
div元素跟span元素都是纯粹的容器,也可以称作"盒子",都是用来包裹内容的
div元素包裹的内容会显示在不同的行,可以把网页分成多个独立的部分,一般作为其他的元素的父容器
span元素包裹的内容会显示在同一行,默认情况下是跟普通的文本没有区别,可以用来凸显一些关键字
五. HTML全局属性有哪些？分别是什么作用。
-
id:唯一的标识符,在文档内必须要是唯一的
-
class:一个以空格分割的元素的类名列表,它允许css,js通过类选择器(或者dom方法)选择和访问特定的元素
-
title:包含表示与其所属元素相关信息的文本,可以呈现给用户看,不是必须
-
style:是给元素添加样式
六.预习CSS（按照MDN文档）
CSS 入门概述 - 学习 Web 开发 | MDN
这篇关于coderwhy前端学习笔记五的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
