HTML5新增特性：语义化标签+多媒体标签+iuput类型+表单属性

最新推荐文章于 2025-08-08 09:07:36 发布

原创

最新推荐文章于 2025-08-08 09:07:36 发布 · 583 阅读

本文详细介绍了HTML5的新增特性，包括语义化标签如头部、导航、内容区域等，多媒体标签如视频、音频的使用方法，以及新增的input类型和表单属性。在语义化方面，强调了这些标签对搜索引擎优化的重要性。在多媒体部分，提到了支持的视频和音频格式，并讨论了兼容性问题。对于input类型，着重提及了number、tel和search等实用类型。同时，还介绍了一个修改表单placeholder颜色的示例。

HTML5新增的语义化标签

header — 头部标签
nav — 导航标签
article — 内容标签
section — 块级标签
aside — 侧边栏标签
footer — 尾部标签

<body>
    <header>头部标签</header>
    <nav>导航栏标签 </nav>
    <section>某个区域</section>
    <!--section相当于一个大号的div  -->
</body>

注意

这些新标签页面中可以使用多次
在IE9中，需要把这些元素转化为块级元素
这种语义标准化主要是针对搜索引擎的

HTML5新增的多媒体标签

（谷歌把音频和视频的自动播放都禁止了）

1. `video`视频

当前video元素支持三种视频格式：MP4 、WebM、Ogg；
尽量使用MP4格式
语法

<video src="文件地址（media）" controls="conttrols"></video>

了解

<video controls="conttrols" width="300">
    <source src="move.ogg"  type="video/ogg" >
    <source src="move.mp4"  type="video/mp4" >
</video>

属性	值	描述
autoplay	autoplay	视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放的问题）
controls	controls	向用户显示播放控件
width	pixels（像素）	设置播放器的宽度
height	pixels（像素）	设置播放器的高度
loop	loop	播放完是否继续播放该视频，循环播放
preload	auto（预先加载视频）none（