HTML5的新特性

273 阅读2分钟
1,新增的语义标签

所谓的HTML5的新特性,就是相比以前的不足的地方,添加了一些新标签,新表单以及新的表单属性,但是这些新特性讲究兼容性,基本只支持IE9+以上的浏览器。

image.png

以前我们的布局都是用div来写,<div class="header">头部</div>,<div class="nav">导航栏</div><div class="aside">侧边栏</div><div class="article">正文</div><div class="footer">底部</div>

div没有语义,它就是一个盒子,我们看起来就很麻烦,

现在我们可以直接用新标签来写,新标签带有语义,我们一眼就能看出这个标签的作用了:

<header>头部标签</header>

<nav>导航栏标签</nav>

<aside>侧边栏标签</aside>

<article>内容标签</article>

<footer>底部标签</footer>

2,新增的视频标签

现在,我们在不使用插件的情况下,在我们的网页中也可以投放小视频了,只需用到我们新增的视频标签即可,接下来让我们看下视频标签的代码样式吧:

<video src="./新建文件夹/vedio.mp4" autoplay controls muted loop></video>

autoplay 是自动播放的意思,有了它我们打开网页后,视频就能自动播放了。 controls是播放控件的意思,有了它我们就能调节视频的进度,暂停播放等功能 loop是循环播放的意思,有了它就可以实现视频循环播放的功能
muted是静音的意思,有了它就可以实现视频静音的效果

image.png

image.png

3,新增的音频标签

既然我们有播放视频的标签,那我们也可以有音频标签,接下来让我们看下音标签的代码样式吧:

<audio src="./新建文件夹/song.ogg" autoplay controls muted loop></audio>

image.png

image.png

autoplay 是自动播放的意思,有了它我们打开网页后,音频就能自动播放了。 controls是播放控件的意思,有了它我们就能调节音频的进度,暂停播放等功能 loop是循环播放的意思,有了它就可以实现音频循环播放的功能
muted是静音的意思,有了它就可以实现音频静音的效果