HTML5 中常用的新特性
站长
· 阅读数 21
HTML5 针对以前的不足，增加了一些新的标签、新的表单和新的表单属性等。
1、新增的语义化标签
以前布局，基本使用 div 来做，但 div 对于浏览器来说，是没有语义的。HTML5 中新增了一批语义化标签。
<header>头部标签</header>
<nav>头部标签</nav>
<article>内容标签</article>
<section>定义文档某个区域</section>
<aside>侧边栏标签</aside>
<footer>尾部标签</footer>2、新增的多媒体标签
2.1 视频标签 <video>
HTML5 在不使用插件的情况下，也可以原生的支持视频格式文件的播放。
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签
</video>在上面的代码块中，包含了两个类型不同的 source，还有一行文字。如果浏览器支持 mp4 类型的文件，就可以直接播放 movie.mp4 这个视频；如果不支持，则尝试播放 ogg 类型的视频；如果这两种类型的文件都不支持，则会显示文字 “您的浏览器不支持 video 标签”。
video 标签常见的属性有：
| 属性 | 值 | 说明 |
|---|---|---|
| autoplay | autoplay | 视频就绪自动播放（Google 浏览器需要添加 muted 属性才能自动播放） |
| controls | controls | 显示播放控件 |
| width | 像素值 | 设置播放器宽度 |
| height | 像素值 | 设置播放器高度 |
| loop | loop | 循环播放视频 |
| preload | auto / none | 是否预加载视频。 auto - 预先加载视频｜none - 不预先加载视频 |
| src | url | 视频的地址 |
| poster | image url | 加载时等待画面的图片地址 |
| muted | muted | 静音播放 |
2.2 音频标签 <audio>
音频标签和视频标签的使用方式及属性相差无几。
<audio controls="controls">
<source src="music.mp3" type="audio/mpeg">
<source src="music.ogg" type="audio/ogg">
您的浏览器不支持 audio 标签
</audio>3、新增的 input 标签
| 属性值 | 说明 |
|---|---|
| type="email" | 限制用户输入必须为 email 格式 |
| type="url" | 限制用户输入必须为 url 格式 |
| type="date" | 限制用户输入必须为日期 |
| type="time" | 限制用户输入必须为时间 |
| type="month" | 限制用户输入必须为月类型 |
| type="week" | 限制用户输入必须为周类型 |
| type="number" | 限制用户输入必须为数字类型 |
| type="tel" | 限制用户输入必须为手机号码 |
| type="search" | 搜索框 |
| type="color" | 颜色选择器 |
4、新增的表单属性
- required： 该属性必填，不能为空
<input type="email" required />- placeholder：表单的提示信息
<input type="email" placeholder="请输入邮箱" />- autofocus： 自动聚焦
<input type="email" placeholder="请输入邮箱" autofocus/>- autocomplete：当用户开始键入时，浏览器基于之前输入过的值，是否显示出该字段中填写的选项。默认 autocomplete="on"，可以设置为关闭 autocomplete="off"。如果放在表单内，需要加上 name 属性并且成功提交。
<input type="email" placeholder="请输入邮箱" name="email" autocomplete="on" />- multiple：可以多选文件提交
<input type="file" multiple />