HTML5新增的语义化标签-优快云博客

本文链接：https://blog.youkuaiyun.com/begin_glory/article/details/113446114

本文介绍了HTML5新增的语义化标签如<header>至<footer>，如何简化代码和增强可读性，同时讲述了在网页中添加视频和音频元素的方法，包括src、controls等属性的使用。还提及了user-select:none;的样式和背景颜色渐变的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、HTML5新增的语义化标签

1.<header>头部标签

2.<nav>导航标签

3.<content>内容标签

4.<section>定义文档某个区域

5.<aside>侧边栏标签

6.<footer>尾部标签

定义这些语义化标签的目的是为了简化代码，不需要整个网页都用div标签定义再class，可以直接写<header></header>。并且这些语义化标签可读性更强，看到这个标签就知道是哪个部分。

注意：

①这种语义化标签主要是针对搜索引擎的

②这些新标签页面中可以使用多次

③在IE9中，需要把这些元素转换为块级元素

二、在网页中添加视频文件

语法：<video src="文件地址" controls="controls"></video>

或

<video width=" 设置宽度" height="设置高度" controls>

           <source src="movie.mp4" type="video/mp4">

</video>

autoplay设置视频自动播放（谷歌浏览器需要添加muted才能自动播放）
controls可以向用户显示播放控件（播放按钮，进度条，全屏等）
width设置播放器宽度
height设置高度
loop设置视频循环播放
muted设置静音播放
preload:auto;(预先加载视频)/none(不预先加载) 如果设置了autoplay就忽略该操作
poster:imgurl设置加载等待时的画面图片

三、添加音频

语法:

<audio src="文件地址" controls="controls"></audio>

或

<audio controls="controls">

           <source src="happy.mp3" type="audio/mpeg">

            <source src="happy.ogg" type="audio/ogg">

             您的浏览器暂不支持<audio>标签。

</audio>

它的值有autoplay(自动播放）, controls（显示音频控件）, loop（循环播放）,muted（静音播放），preload（预先加载），src（音频文件的url）

四、user-select:none;禁止鼠标移动选择文字
五、设置背景颜色渐变
语法：background-image:liner-gradient(to right,red,green);
to right 表示颜色渐变方向是从左到右，也可以设置to top(从上到下），to left 和to bottom等等。red，green表示颜色从红色变到绿色。