🥙 HTML 更多元素
# HTML 列表元素
# 有序列表
使用 <ol> 标签配合 <li> 标签定义有序列表项。
使用 start 属性定义有序列表启动的数字：
使用按字母顺序排列列表项，可以使用 type 属性：
# 无序列表
使用 <ul> 标签配合 <li> 标签定义无序列表：
# 有序列表中嵌套无序列表
一些 HTML 列表样式参考：Webdesign-Lists (opens new window)
# HTML 多媒体元素
# 处理媒体路径
🌟 相对路径
当前文件相关的路径，起点是当前文件开始的文件夹时，使用 ./ ，例如使用当前文件夹的 images 文件夹中的 *.jpg 文件： ./images/example_image.jpg 。
访问当前文件上一级文件夹，使用 ../ 。
[] Lab
├──[] html
│ ├── index.html
│ └── ducks.html
├──[] css
│ └── style.css
└──[] images
└── rubber_duck.png
2
3
4
5
6
7
8
例，当前文件是 index.html ，要使用 style.css 文件时：
<link href="../css/style.css" rel="stylesheet" type="text/css" />
使用图片文件：
<img src='../images/rubber_duck.png'>
绝对路径：完整的资源 / 文件路径地址。
例如： <img src="https://placekitten.com/50/50" />
# 链接（超链接）
超链接使用 <a> 标签：
- 使用
href属性，创建指向另一个文档的链接； - 使用
name属性，创建文档内的书签。
🌰 例子：
<a href="link" target=""/>
target表示链接的打开方式，有以下属性值：属性值 说明 _self默认方式，在当前窗口打开 _blank在全新空白的窗口打开 超链接根据链接对象的不同分为：
- 外部链接
- 内部链接：（1）内部页面链接；（2）锚点链接；
- 锚点链接为：点击某一个超链接，它就会跳到当前页面的某一部分。
# 图片
相关属性：
src：图像的资源链接；alt：替换文本属性，用于添加图像的描述，有助于搜索引擎了解图像的内容。
图像可以采用宽度和高度设置，在使用宽度和高度定义图像大小时，宽高比可能会中断。要定义图片高度和宽度，浏览器将自动调整以保持正确的宽高比。
默认情况下， <img> 标签是行内元素，它将与其周围元素内联。
<p>
This is a rubber duck.
<img src="./images/rubber_duck.png" alt="rubber duck">
It is yellow and made of rubber.
</p>
2
3
4
5
可以使用 display: block; 将其调整为块元素
# 音频
使用 <audio> 标签添加音频。具有自动播放、循环和预加载等属性。类似 img 图片元素，使用 src 标识文件的资源。
autoplay属性：自动播放添加标签，则音频元素将不会显示在页面上，但在页面加载时音频文件自动播放。
<audio src="song.mp3" autoplay></audio>
controls属性：在页面上显示音频控制面板：
<audio src="song.mp3" controls></audio>
preload：该属性接受三个值：none，auto和metadata。** 默认无设置下，页面将将其视为选择了auto，预加载音频文件的所有信息。** 如果音频文件不是页面的基本组件，建议使用metadata/none提高页面加载的速度。
# 视频
使用 <video> 标签添加视频元素，接受的属性包括：
autoplay：一般用于不希望用户控制视频，且不能与controls使用。poster：设置视频的封面，最好不要与autoplay并用以免减弱效果。
🌰 例子：
<video src="video.mp4" controls poster="poster.jpg"></vide>
# <iframe> 内联框架
嵌入其他网站支持的内容，使用 <iframe> 标签。
🌰 例子：
<iframe src="URL"></iframe>
浮动框架是一种较为特殊的框架，它是在浏览器窗口中嵌套的子窗口，整个页面并不一定是框架页面，但要包含一个框架窗口。
<iframe>框架可以完全由设计者定义宽度和高度，并且可以放置在一个网页的任何位置，这极大地扩展了框架页面的应用范围。
属性：
设置框架的宽和高：
width/height设置框架是否显示滚动条
scrolling，三种取值：auto为默认值，整个表哥在浏览器页面向左对齐；yes总是显示滚动条；no任何情况都不显示。frameborder：设置边框。设置为 0 移除边框。
# HTML 表格
🌰 例子：
表头标签： <th> </th>
| 标签 | 描述 |
|---|---|
<table> | 定义表格 |
<th> | 定义表格的表头 |
<tr> | 定义表格的行 |
<td> | 定义表格单元 |
<caption> | 定义表格标题 |
<colgroup> | 定义表格列的组 |
<col> | 定义用于表格列的属性 |
<thead> | 定义表格的页眉 |
<tbody> | 定义表格的主体 |
<tfoot> | 定义表格的页脚 |