P18-P24
结构化语义标签（Content sectioning）
- header 表示网页的头部
- main 表示网页的主题部分（一个页面只会有一个main）
- footer 表示网页的底部
- nav 表示网页中的导航
- aside 表示和主题相关的其他内容（侧边栏）
- article 表示一个独立的文章
- section 表示一个独立的区块，上边的标签都不能表示时使用section
- div 没有语义，就用来表示一个区块，目前来讲div还是我们主要使用的布局元素（div可以代替上面的所有东西）
- span 行内元素，没有任何语义，一般用于在网页中选中文字
列表（list）
在html中可以创建列表，html列表一共有三种：
- 有序列表
- 无序列表
- 定义列表
有序列表，使用 ol 标签来创建有序列表
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
无序列表，使用 ul 标签来创建无序列表
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
定义列表，使用 dl 标签来创建一个定义列表，使用 dt 来标识定义的内容，使用 dd 来对内容进行解释说明
<dl>
<dt>结构</dt>
<dd>结构标识网页的结构，结构用来规定网页中哪里是标题，哪里是段落。</dd>
<dd>结构标识网页的结构，结构用来规定网页中哪里是标题，哪里是段落。</dd>
<dd>结构标识网页的结构，结构用来规定网页中哪里是标题，哪里是段落。</dd>
</dl>
超链接
超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置。
超链接也是一个行内元素，在a标签重可以嵌套除它自身外的任何元素
<a href="https://www.baidu.com">超链接</a>
<a href="poetea.html">超链接</a>
当我们需要跳转到一个服务器内部的页面时，一般我们都会使用相对路径
相对路径都会使用 . 或 .. 开头
./ 可以省略不写，如果不写 ./ 也不写 ../ 则就相当于写了 ./
VSCode 快速复制一行快捷键：
Alt+Shift+下（复制到下一行）
Alt+Shift+上（复制到上一行）
超链接的其他用法
可以直接将超链接的 href 属性设置为 #，这样点击超链接以后页面不会发生跳转，而是转到当前页面的顶部的位置。
id 属性（唯一不重复的）：
<a href="#id">超链接</a>
<p id="id">这里</p>
可以跳转到页面的指定位置，只需将 href 属性设置 #目标元素的id属性值
可以使用 javascript:; 来作为 href 的属性，此时点击这个超链接什么也不会发生
<a href="javascript:;">这是一个新的超链接</a>
图片标签
图片标签用于向当前页面中引入一个外部图片。
使用 img 标签来引入外部图片， img 标签时一个字节数标签。
属性：
- src 属性指定的是外部图片的路径（路径规则和超链接是一样的）
- alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示
搜索引擎会根据 alt 中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所搜索到 - width 图片的宽度
- height 图片的高度
注意：一般情况在pc都安，不建议修改图片的大小。需要多大的图片就裁多大。但是在移动端，经常需要对图片进行缩放（大图缩小）
<img src="./img/1.gif" alt="poetea">
<img width="100" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1725312127,1954776889&fm=26&gp=0.jpg">
图片的格式：
-
jpeg(jpg)：
-
gif：
-
png：
-
webp
-
base64
