题外话：有的时候回头看看，起码有东西留下了
1.音频标签
- 概述：<audio>...</audio>，双标签，与图片一样需要src属性设置音频路径。不同之处在于，只写src是不会播放音频，且不会有任何展示的！
<!-- 不会自动播放，且页面无任何展示 -->
<audio src="FateSymphony.mp3"></audio>
- controls属性：增加该属性，可在网页中出现一个音乐播放器，支持.mp3,.ogg,.wav格式。
<audio src="FateSymphony.mp3" controls=“controls”></audio>
2.视频标签
- 概述：<video>...</video>，双标签，与音频标签使用方式大体相同。
<!-- 不会自动播放视频，页面展示视频第一帧的图片，无法播放-->
<video src="videoEx.mp4"></video>
- controls属性：和音频一样，增加该属性，可在网页中出现一个视频播放器，支持.mp4,.ogg,.webm格式。
<!-- controls为什么没写属性值？ -->
<!-- 在HTML5中，如果属性名和属性值相同，则不需要写属性值了，非常方便 -->
<video src="videoEx.mp4" controls></video>
3.超链接标签
- 超链接：HTML使用超链接与网络上的文件相联系。超级链接可以使一个词、一个字、一张图，点击后会发生位置or文件的跳转。
- a标签：<a>...</a>可以创建超链接，是双标签，容器级标签，元素内容通常放文字和图片。
- href属性：Hypertext Reference，存放目标页面的链接。有href属性，点击超链接后才能跳转。
<a href="https://www.baidu.com">百度一下，你就知道</a>
- title属性：与图片标签类似，是鼠标悬停在内容上出现的提示文本。
<a href="https://www.baidu.com" title="百度超链接">百度一下，你就知道</a>
- target属性：定义超链接的打开方式，_self在当前页签打开，_blank在新的页签打开。(自己动手试试)
<!-- 在当前页签打开新的网页（旧网页消失） -->
<a href="https://www.baidu.com" target="_self"> 百度一下</a>
<!-- 在新的页签打开新网页（旧网页仍在） -->
<a href="https://www.baidu.com" target="_blank"> 百度一下</a>
4.超链接锚点——页面内跳转锚点
- 作用：点击超链接可以实现页面内位置的跳转。
- 设置锚点方式1：在目标位置的任意标签内，添加id属性。
<h3 id="anchor1">我是一个3级标题</h3>
- 设置锚点方式2：在目标位置设置一个空a标签，只设置一个name属性。
<a name="anchor2"></a>
- 设置超链接：以#开头，加上锚点的id或name，作为a标签的href属性，可实现页面内跳转。（自己试试）
<a href="#anchor2">点我页面跳转</a>
5.超链接锚点——跨页面跳转锚点
- 作用：点击超链接可以跳转到另一个页面的指定位置。
- 设置锚点方式：共两种，与上面相同，不赘述了。
- 设置超链接：方式大体类似，稍有不同。
<a href="www.baidu.com#anchor1">点我跳转</a>
6.列表标签
- 作用：用于制作HTML中一系列项目，将内容相关，结构相似的内容使用列表结构进行搭建。
- 分类：无序列表、有序列表、定义列表。
7.无序列表
- 应用场景：内容间没有明显的顺序，且分类不需要解释时采用无序列表。
- 实现方式：需要两个标签配合完成，ul和li标签，其中ul标签嵌套li。
- ul标签：Unordered list，用于定义一个无序列表，是列表的外部框架。
- li标签：List item，列表项，是无序列表中的某一项。
-
注意事项：
- ul内部只能直接嵌套li标签，li不能脱离ul存在；
- li标签是容器级标签，内部可存放任意内容；
- 无序列表标签作用只是搭建结构，不管样式，css才负责样式（讲了多少遍了）。
8.有序列表
- 应用场景：内容间有顺序，且分类不需要解释时采用有序列表。
- 实现方式：需要两个标签配合完成，ol和li标签，其中ol标签嵌套li。
- ol标签：Ordered list，用于定义一个有序列表，是列表的外部框架。
- li标签：List item，列表项，是有序列表中的某一项。
-
注意事项：
- ol内部只能直接嵌套li标签，li不能脱离ol存在；
- li标签是容器级标签，内部可存放任意内容；
- 有序列表标签作用只是搭建结构，不管样式，css才负责样式（真的讲了很多遍了）。
9.定义列表
- 应用场景：需要对主题进行解释时，采用定义列表。
- 实现方式：需要3个标签配合完成，dl、dt和dd标签，其中dl标签嵌套dt和dd。
- dl标签：Definition list，用于定义一个定义列表，是列表的外部框架。
- dt标签：Definition term，定义自定义列表中的一个主题or术语。
- dd标签，Definition description，定义解释项，解释前面主题or术语的。
-
注意事项：
- dl内部只能直接嵌套dt dd标签，dt dd标签不能脱离dl单独存在；
- dl内部可存放多组dt dd，每个dd解释前一个距离最近的dt；
- dt和dd也是容器级标签，可以存放任意内容；
- 定义列表标签作用只是搭建结构，不管样式，css才负责样式。
- 为配合css布局，最好每个dl中只添加一组dt和dd，便于管理。
10.布局标签
- 概述：div和span标签，常用作布局工具，俗称盒子。
- div标签：Division，俗称大盒子，是双标签，容器级标签，目前只需了解div会帮我们布局即可。
<div style="background-color: pink;">
<p>我是一句话</p>
<img src="baidu.jpg" alt="百度">
<a href="https://www.baidu.com">百度一下，你就知道</a>
</div>
- span标签：小区域的意思，俗称小盒子，是双标签，容器级标签。一般用于不改变整体效果的情况下，辅助进行局部调整。
- 区别：div语义和权重要高于span，css样式不同，后期了解。
结束语：一花一世界，一木一浮生，诸君共勉！
网友评论