1-1-6【HTML基础】HTML常用标签2

题外话：有的时候回头看看，起码有东西留下了

---

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样式不同，后期了解。

---

结束语：一花一世界，一木一浮生，诸君共勉！