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

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

1.音频标签

概述：...，双标签，与图片一样需要src属性设置音频路径。不同之处在于，只写src是不会播放音频，且不会有任何展示的！

controls属性：增加该属性，可在网页中出现一个音乐播放器，支持.mp3,.ogg,.wav格式。

2.视频标签

概述：...，双标签，与音频标签使用方式大体相同。

controls属性：和音频一样，增加该属性，可在网页中出现一个视频播放器，支持.mp4,.ogg,.webm格式。

3.超链接标签

超链接：HTML使用超链接与网络上的文件相联系。超级链接可以使一个词、一个字、一张图，点击后会发生位置or文件的跳转。

a标签：...可以创建超链接，是双标签，容器级标签，元素内容通常放文字和图片。

href属性：Hypertext Reference，存放目标页面的链接。有href属性，点击超链接后才能跳转。

百度一下，你就知道

title属性：与图片标签类似，是鼠标悬停在内容上出现的提示文本。

百度一下，你就知道

target属性：定义超链接的打开方式，_self在当前页签打开，_blank在新的页签打开。(自己动手试试)

百度一下

百度一下

4.超链接锚点——页面内跳转锚点

作用：点击超链接可以实现页面内位置的跳转。

设置锚点方式1：在目标位置的任意标签内，添加id属性。

我是一个3级标题

设置锚点方式2：在目标位置设置一个空a标签，只设置一个name属性。

设置超链接：以#开头，加上锚点的id或name，作为a标签的href属性，可实现页面内跳转。(自己试试)

点我页面跳转

5.超链接锚点——跨页面跳转锚点

作用：点击超链接可以跳转到另一个页面的指定位置。

设置锚点方式：共两种，与上面相同，不赘述了。

设置超链接：方式大体类似，稍有不同。

点我跳转

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会帮我们布局即可。

我是一句话

百度一下，你就知道

span标签：小区域的意思，俗称小盒子，是双标签，容器级标签。一般用于不改变整体效果的情况下，辅助进行局部调整。

区别：div语义和权重要高于span，css样式不同，后期了解。

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