[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>来定义比较方便。


<video>标签属性和使用说明 
往网页中插入视频资源文件。
属性 描述
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值