[HTML5]：HTML5新增多媒体元素和结构语义元素

最新推荐文章于 2024-04-25 18:38:08 发布

原创

最新推荐文章于 2024-04-25 18:38:08 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#HTML5媒体元素 #结构语义化元素 #HTML5

本文介绍了HTML5中的新多媒体元素，如<audio>、<video>、<source>、<embed>和<track>，详细阐述了它们的属性和用法。同时，强调了HTML5在结构语义化方面的改进，帮助Web开发者更好地构建页面结构。此外，还提及了HTML5中被移除的一些元素。

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

首先，先要区分HTML4和HTML5，HTML5的开头文档声明第一句是<!DOCTYPE html>，简洁明了。而HTML4则会跟上一大段代码。与HTML4相比，HTML5在原来的基础上增加了许多新元素和功能，同时也删减了一些元素，例如一些纯样式元素，它们的功能应该交给CSS来做。HTML5新增了结构语义化元素，通过这些元素能更好地管理页面结构。HTML5作为下一代Web开发标准，掌握HTML5相关知识对于Web工作者来说必不可缺。

HTML5新增元素

一、新的多媒体元素

<audio> <video> <source> <embed> <track>

<audio>标签属性和使用说明

往网页中插入音频文件。

属性	值	描述
autoplayHTML5	autoplay	音频在就绪后马上播放。
controlsHTML5	controls	显示音频控件（比如播放/暂停钮）。
loopHTML5	loop	则每当音频结束时重新开始播放。
mutedHTML5	muted	如果出现该属性，则音频输出为静音。
preloadHTML5	auto 、metadata none	规定当网页加载时，音频是否默认被加载以及如何被加载。
srcHTML5	URL	规定音频文件的 URL。

<body>
    <!-- 定义音频内容 带音频控件，循环播放-->
    <audio src="./media/ai.mini - 遇.mp3" controls loop>       
        该浏览器不支持！ <!-- 当浏览器不支持该元素时，显示文本信息 -->
    </audio>
    <br>
    
    <!-- 使用source元素来获取媒体资源 -->
    <audio  controls loop>
        <!-- 每个audio元素只能对应一个音频，传入多个媒体资源以第一个为准 -->
        <source src="./media/ai.mini - 遇.mp3" type="audio/mp3">
        <source src="./media/Baby Don't Go.mp3.mp3" type="audio/mp3">
    </audio>
</body>

<source>元素的属性和具体作用会在下面进行说明。在平常使用时，直接用<audio>来定义比较方便。