作业布置
http://localhost:3000/30.作业布置.html
完成课堂所有的代码练习（必须全部自己实现）
文档类型声明
<!DOCTYPE html>
HTML 元素的属性
<html lang="zh"></html>
<html lang="en"></html>
head 元素的使用
，meta 设置网页的编码形式。
<head>
<!-- 设置网页的编码形式 -->
<meta charset="UTF-8" />
<!-- 这个是 IE8 或 IE8 以后的浏览器写法。Edge 模式将告诉 Internet Explorer 以可用的最高级别模式显示内容。对于 Internet Explorer 8，这等同于 IE8 模式。假设 Internet Explorer 的将来版本支持更高级别的兼容性模式，那么，设置为 Edge 模式的页面将以该版本支持的最高级别的模式显示。当使用 Internet Explorer 8 查看时，这些相同的页面仍会以 IE8 模式显示。 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--
viewport 标记，用于指定用户是否可以缩放 Web 页面，并对相关的选项进行设定。
width 和 height 指令分别指定视区的逻辑宽度和高度。它们的值可以是以像素为单位的数字，也可以是一个特殊的标记符号。如上文代码中 device-width 即表示，视区宽度应为设备的屏幕宽度。类似的，device-height 即表示设备的屏幕高度。
initial-scale 用于设置 Web 页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异，通常情况下，设备会在浏览器中呈现出整个 Web 页面。设为 1.0 则显示未经缩放的 Web 页面。
maximum-scale 和 minimum-scale 用于设置用户对于 Web 页面缩放比例的限制。值的范围为 0.25~10.0 之间
user-scalable 指定用户是否可以缩放视区，即缩放 Web 页面的视图。值为 yes 时允许用户进行缩放，值为 no 时不允许缩放。
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- title 设置网页的标题 -->
<title>head 元素的使用</title>
</head>
h 元素的用法
通常用作标题，h1 最大，h6 最小。
<!-- h 元素 h1~h6，通常用作标题，h1 最大，h6 最小。 -->
<h1>我是 h1 标题</h1>
<h2>我是 h2 标题</h2>
<h3>我是 h3 标题</h3>
<h4>我是 h4 标题</h4>
<h5>我是 H5 标题</h5>
<h6>我是 h6 标题</h6>
p 元素的用法
<p>
都说"中国五千年历史看山西"，山西地界上的古迹古建可太多了，如果第一次来山西的您，在旅行时间上有限，能领略的三晋大地实在有限。所以要补上这个课，就一定得去山西博物院好好转转，五十余万件藏品足可以让人感受到山西的底蕴深厚。
</p>
<p>
山西博物院的陈列以"晋魂"为主题，由文明摇篮、夏商踪迹、晋国霸业、民族熔炉、佛风遗韵、戏曲故乡、明清晋商等 7
个历史文化专题和土木华章、山川精英、翰墨丹青、方圆世界、瓷苑艺葩等 5 个艺术专题构成。
</p>
img 元素的基本使用
<img
src="//p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/7dd9d237f28044d3999cad1cc338bc5e~noop.image?_iz=58558&from=article.pc_detail&x-expires=1675757010&x-signature=r6bjuckeCL7Baupd1WO9%2FUBK1Zs%3D"
alt="无量山翅包饭"
referrerpolicy="no-referrer" />
相对路径跟绝对路径
<img
src="E:\git\JaimeZeng\web-note\docs\html\day02\img\dali-cuisine.png"
alt="无量山翅包饭"
referrerpolicy="no-referrer" />
<img src=".\img\dali-cuisine.png" alt="无量山翅包饭" referrerpolicy="no-referrer" />
a 元素跟 img 元素的结合使用
<a href="//home.jd.com" target="_blank" rel="noopener noreferrer">
<img src="data:image/png;base64,iVBORw0KG=" alt="jd-login" referrerpolicy="no-referrer" />
</a>
a 元素的使用
<a href="http://www.baidu.com" target="_blank" rel="noopener noreferrer">百度一下</a>
a 元素的在本页面的锚点链接
<a href="#beijing">跳转到第一个</a>
<h2 id="shanxi">山西美食</h2>
<h2 id="beijing">北京美食</h2>
a 元素跟其他元素的链接
<a href="https://github.com/coderwhy/HYMiniMall/archive/master.zip">下载源码</a>
<a href="mailto:12345@qq.com">发送邮件到 12345qq 邮箱</a>
iframe 元素的使用
<iframe src="https://www.toutiao.com/article/7163844896972046848" frameborder="0"></iframe>
iframe 元素和 a 元素的结合使用
<!-- index.html -->
<iframe src="./iframe元素所在的页面.html" frameborder="1"></iframe>
<!-- iframe 元素所在的页面.html -->
<iframe src="./a元素所在的网页.html" frameborder="1"></iframe>
<!-- a 元素所在的网页.html -->
<a href="https://www.taobao.com/" target="_top">打开淘宝</a>
div 元素和 span 元素的调用
<div>
<h3>推荐四 · 云冈石窟</h3>
<p>
到山西看古建，古建不只是包含了土木工程，石窟也是古建的一种类型。石窟是建筑艺术，也是宗教艺术。作为中国规模最大的古代石窟群之一，也是世界佛教石窟雕刻艺术的巅峰之作。到山西不能不去的地方当然要有云冈石窟。
</p>
<p>
云冈石窟是在<span>敦煌莫高窟</span>之后，<span>龙门</span>之前。开凿于北魏时期，距今已有 1500
余年的历史，处在承上启下的阶段；处在敦煌西域文化与唐代龙门曼妙风格之间，代表了石窟造像汉化的起步。
</p>
</div>
不太常用的元素
<p>I <strong>love</strong> you</p>
<p>I <em>love</em> you</p>
<p>I <b>love</b> you</p>
<p>I <i>love</i> you</p>
<p><code>color: red;</code></p>
<br />
全局属性 - title 属性
<p title="para">我是段落</p>
<img title="hot-icon" src="./hot.svg" alt="hot-svg" />
字符实体
<p>10 - 1 < 5 ?</p>
<p>2 * 5 > 10 ?</p>
<p><p> 中 p 是 paragraph 的缩写，表示段落。</p>
<p></p> 是结束标签，表示段落结束。</p>
寻找 h 元素和 p 元素的案例，并且实现
案例一 治疗失眠
<h2>失眠多是"肝火旺"，建议多吃这 3 个菜，养肝下火，有助于睡眠</h2>
<p>
晚上睡不着是真的难受，辗转反侧，而且很多人都被睡眠问题困扰着，不仅有害身体健康，而且还影响第二天精神状态。失眠不好的原因，其实很多都是因为"肝火旺"，所以建议大家，如果失眠的话，可以多吃这
3 个菜，养肝下火，有助于睡眠。
</p>
http://localhost:3000/html-h2-p-demo.html
失眠多是"肝火旺"，建议多吃这 3 个菜，养肝下火，有助于睡眠
晚上睡不着是真的难受，辗转反侧，而且很多人都被睡眠问题困扰着，不仅有害身体健康，而且还影响第二天精神状态。失眠不好的原因，其实很多都是因为"肝火旺"，所以建议大家，如果失眠的话，可以多吃这 3 个菜，养肝下火，有助于睡眠。
案例二 早上空腹喝水
<h2>早上空腹喝水能给身体带来什么好处？</h2>
<p>1、早上空腹喝水可以促进身体产生全新的细胞，能够带来增强体质以及延缓衰老等方面的效果；</p>
<p>
2、身体里的水分是不可缺乏的一种成分，不仅可以有效地参与身体的新陈代谢，还可以把身体里的毒素垃圾排出身体之外，早上空腹饮水可以增强肠胃蠕动，将毒素垃圾排出身体之外；
</p>
<p>
3、身体在一整夜没有水分的摄入，身体会消耗储存的水分，在早上起床之后会容易出现缺水问题，此时喝水可以很好的补充身体流失的水分；
</p>
<p>4、水分在进入到我们的胃部以后，还能够起到对胃酸的稀释，可以帮助减少肠胃问题出现；</p>
<p>5、早上空腹饮水可以很好的润滑肠道，促进消化和吸收，提升肠胃的消化能力，使我们身体可以吸收充足的营养物质。</p>
http://localhost:3000/30.作业布置.html
早上空腹喝水能给身体带来什么好处？
1、早上空腹喝水可以促进身体产生全新的细胞，能够带来增强体质以及延缓衰老等方面的效果；
2、身体里的水分是不可缺乏的一种成分，不仅可以有效地参与身体的新陈代谢，还可以把身体里的毒素垃圾排出身体之外，早上空腹饮水可以增强肠胃蠕动，将毒素垃圾排出身体之外；
3、身体在一整夜没有水分的摄入，身体会消耗储存的水分，在早上起床之后会容易出现缺水问题，此时喝水可以很好的补充身体流失的水分；
4、水分在进入到我们的胃部以后，还能够起到对胃酸的稀释，可以帮助减少肠胃问题出现；
5、早上空腹饮水可以很好的润滑肠道，促进消化和吸收，提升肠胃的消化能力，使我们身体可以吸收充足的营养物质。
案例三 豆浆 VS 牛奶
<h1>豆浆 VS 牛奶</h1>
<p>食物不仅是为了果腹，更是为了获取营养，因而我们先从两者的营养成分来对比看看：</p>
<h2>1、蛋白质</h2>
<p>每 100 克牛奶含蛋白质约为 3.6 克；每 100 克豆浆含蛋白质约为 3 克。二者含量相差并不大，而且都属于优质蛋白。</p>
<p>
但是，豆浆中主要是大豆蛋白，其外周有纤维薄膜的包裹，消化吸收率只有
70-80%；而牛奶中主要以酪蛋白为主，其次是乳清蛋白，还有血清白蛋白、免疫球蛋白及酶等，消化率为 96% 左右。
</p>
<p>
另外，动物蛋白中含有 8 种人体必需的氨基酸，但植物蛋白中却缺少色氨酸。这样相比的话，牛奶中的蛋白质营养价值更甚一筹。
</p>
<h2>2、膳食纤维</h2>
<p>膳食纤维近几年来越来越得到重视，可以刺激肠道蠕动，保护肠道，缓解便秘。甚至被公认为"第七大营养素"。</p>
<p>让我们看牛奶和豆浆在膳食纤维含量上的差别：</p>
<ul>
<li>牛奶：牛奶基本不含膳食纤维；</li>
<li>豆浆：每 100g 豆浆，膳食纤维的含量约为 1.1g。</li>
</ul>
<p>豆浆是豆类制作而成，膳食纤维较多，而牛奶几乎不含膳食纤维。</p>
<p>豆浆中大部分的膳食纤维其实都存在于豆渣中。所以想摄入更多的膳食纤维，直接吃豆类效果会更好。</p>
<h2>3、脂肪与胆固醇</h2>
<p>相较而言，100 克牛奶脂肪约为 3.2 克，胆固醇约为 15 毫克；100 克豆浆脂肪约为 1.6 克，胆固醇为 0。</p>
<p>除了含量有所差异，种类也不同。</p>
<ol>
<li>
牛奶中的脂肪以饱和脂肪为主，占
65%，主要功能是为机体提供能量；但其中也有少量的共轭亚油酸，可以帮助降低肥胖、代谢综合征和心血管疾病的风险。
</li>
<li>
豆浆所含脂肪的 85% 为不饱和脂肪，其中卵磷脂、脑磷脂含量丰富，它们不仅能养护脑细胞，还能抑制人体对胆固醇的吸收。
</li>
</ol>
<p>所以，对于高血脂的人群，豆浆看起来更加健康，而对于健康人来说，牛奶和豆浆的这点脂肪差异，意义其实不大。</p>
<h2>4、维生素</h2>
<p>
相较而言，牛奶比豆浆维生素含量更为丰富。牛奶不仅含有豆浆中没有的维生素 A 和 D，而且其中的维生素 B2 和 B6 也高于豆浆。
</p>
<h2>5、钙</h2>
<p>
100 克牛奶含钙量约为 104 毫克，多为乳清钙，吸收率高达 98%；100 克豆浆含钙量约为 5
毫克，进入人体后与有一定的可能形成草酸钙结石、磷酸钙结石。可以说在补钙方面牛奶完胜！
</p>
<p>
<strong>提示：</strong>
其实豆类中钙含量并不少，但加水磨成豆浆后，含量就被稀释得很低了。而含钙稍多的豆渣很多时候也因为口感不好，被我们倒掉了。
</p>
<p>经过上述的对比，大家应该也发现了，豆浆和牛奶这两种不同的饮品，各有各的优势，不能客观地分出个高下来。</p>
<p>并且，豆浆和牛奶不能互相替代，只有既喝豆浆又喝牛奶，才能取长补短，同时摄取两种饮品的好处。</p>
<p>对于健康人群而言，豆浆、牛奶可以轮着喝。当然，每天能喝 1 杯牛奶 +1 杯豆浆就更好了。</p>
http://localhost:3000/30.作业布置.html
豆浆 VS 牛奶
食物不仅是为了果腹，更是为了获取营养，因而我们先从两者的营养成分来对比看看：
1、蛋白质
每 100 克牛奶含蛋白质约为 3.6 克；每 100 克豆浆含蛋白质约为 3 克。二者含量相差并不大，而且都属于优质蛋白。
但是，豆浆中主要是大豆蛋白，其外周有纤维薄膜的包裹，消化吸收率只有 70-80%；而牛奶中主要以酪蛋白为主，其次是乳清蛋白，还有血清白蛋白、免疫球蛋白及酶等，消化率为 96% 左右。
另外，动物蛋白中含有 8 种人体必需的氨基酸，但植物蛋白中却缺少色氨酸。这样相比的话，牛奶中的蛋白质营养价值更甚一筹。
2、膳食纤维
膳食纤维近几年来越来越得到重视，可以刺激肠道蠕动，保护肠道，缓解便秘。甚至被公认为"第七大营养素"。
让我们看牛奶和豆浆在膳食纤维含量上的差别：
- 牛奶：牛奶基本不含膳食纤维；
- 豆浆：每 100g 豆浆，膳食纤维的含量约为 1.1g。
豆浆是豆类制作而成，膳食纤维较多，而牛奶几乎不含膳食纤维。
豆浆中大部分的膳食纤维其实都存在于豆渣中。所以想摄入更多的膳食纤维，直接吃豆类效果会更好。
3、脂肪与胆固醇
相较而言，100 克牛奶脂肪约为 3.2 克，胆固醇约为 15 毫克；100 克豆浆脂肪约为 1.6 克，胆固醇为 0。
除了含量有所差异，种类也不同。
- 牛奶中的脂肪以饱和脂肪为主，占 65%，主要功能是为机体提供能量；但其中也有少量的共轭亚油酸，可以帮助降低肥胖、代谢综合征和心血管疾病的风险。
- 豆浆所含脂肪的 85% 为不饱和脂肪，其中卵磷脂、脑磷脂含量丰富，它们不仅能养护脑细胞，还能抑制人体对胆固醇的吸收。
所以，对于高血脂的人群，豆浆看起来更加健康，而对于健康人来说，牛奶和豆浆的这点脂肪差异，意义其实不大。
4、维生素
相较而言，牛奶比豆浆维生素含量更为丰富。牛奶不仅含有豆浆中没有的维生素 A 和 D，而且其中的维生素 B2 和 B6 也高于豆浆。
5、钙
100 克牛奶含钙量约为 104 毫克，多为乳清钙，吸收率高达 98%；100 克豆浆含钙量约为 5 毫克，进入人体后与有一定的可能形成草酸钙结石、磷酸钙结石。可以说在补钙方面牛奶完胜！
提示：其实豆类中钙含量并不少，但加水磨成豆浆后，含量就被稀释得很低了。而含钙稍多的豆渣很多时候也因为口感不好，被我们倒掉了。
经过上述的对比，大家应该也发现了，豆浆和牛奶这两种不同的饮品，各有各的优势，不能客观地分出个高下来。
并且，豆浆和牛奶不能互相替代，只有既喝豆浆又喝牛奶，才能取长补短，同时摄取两种饮品的好处。
对于健康人群而言，豆浆、牛奶可以轮着喝。当然，每天能喝 1 杯牛奶 +1 杯豆浆就更好了。
寻找 a 元素结合 img 元素的案例
案例一 网易云音乐
<a href="//music.163.com/#/user/home?id=29879272" target="_blank" rel="noopener noreferrer">
<img
src="//p2.music.126.net/rCsLFXha6SLis0tV7yZ5fA==/109951165588539704.jpg?param=62y62"
alt="台湾歌手张惠妹"
referrerpolicy="no-referrer" />
<p class="f-thide s-fc3">台湾歌手张惠妹</p>
</a>
http://localhost:3000/30.作业布置.html
案例二 京东商城
<a
href="//item.jd.com/329873.html"
target="_blank"
title="蓝月亮 亮白增艳洗衣液（自然清香）3kg/瓶 （新老包装随机发货）"
rel="noopener noreferrer">
<img
src="//img13.360buyimg.com/n2/jfs/t7852/219/1910955190/255075/e66f619b/59a3be83N67d92648.jpg!q80.webp"
alt="蓝月亮 亮白增艳洗衣液（自然清香）3kg/瓶 （新老包装随机发货）"
referrerpolicy="no-referrer" />
</a>
http://localhost:3000/30.作业布置.html
案例三 bilibili
<a href="//www.bilibili.com/video/BV1ED4y1Y7dc" target="_blank" rel="noopener noreferrer">
<img
src="//i0.hdslb.com/bfs/archive/937f11ce1ddf148be74a772fbd1b5a9d32e462c8.jpg@412w_232h_1c.webp"
referrerpolicy="no-referrer"
alt="一位粉丝想看到自己奔跑的样子" />
</a>
http://localhost:3000/30.作业布置.html
说出 div 元素和 span 元素的作用和区别
作用
<div>元素用来创建块级容器，它本身不会对内容产生特殊样式。相反，它用来对内容进行组织，以便使用 CSS 添加样式。它可以包含行内元素和块级元素。<span>元素用来创建行内容块，它本身也不会对内容产生特殊样式。它实质上是将文本块与它所包围的 HTML 元素分离开来，仅仅用来表达文本的样式和位置。
区别：div(block-level) ,而 span(inline-level)
<div>元素本身不会对内容产生特殊样式，而<span>元素本身不会对内容产生特殊样式；<div>元素用于创建块级容器，<span>元素用于创建行内容块；<div>元素可以包含行内元素和块级元素，而<span>元素仅可以包含行内元素；<div>元素有自己的空间，而<span>元素没有自己的空间；
HTML 全局属性有哪些？分别是什么作用
HTML 全局属性可以应用到任何 HTML 元素，可以定义元素的特定行为，下面是一些常见的属性：
- accesskey：定义快捷键绑定到元素
- class：定义一个或多个类名，用于引用样式表中的类
- contenteditable：定义元素是否可编辑
- data-*：可以在元素上定义用户自定义数据属性
- dir：定义元素内容的文本方向
- draggable：定义元素是否可以拖动
- dropzone：定义元素是否可以作为拖放目标
- hidden：定义元素是否可以见
- id：定义元素的唯一标识符
- lang：定义元素内容的语言
- spellcheck：定义是否对元素进行拼写检查
- style：定义元素的内联样式
- tabindex：定义元素的 tab 键顺序
- title：定义元素的附加信息