HTML5新特性汇总( 一 )

HTML5新特性及功能汇总 ( 一 )

HTML5添加了很多的新特性及功能，废话不多说，本篇文章干货满满，开始吧

---

(1)语义标签

//新标签
<hrader></hrader>         定义了文档的头部区域
<footer></footer>         定义了文档的尾部区域
<nav></nav>               定义文档的导航
<section></section>       定义文档中的节
<article></article>       定义页面独立的内容区域
<aside></aside>           一定页面侧边栏内容
<detailes></detailes>     用于描述文档或文档某个部分的细节
<summary></summary>       标签包含 details 元素的标题
<dialog></dialog>         定义对话框，比如提示框

---

(2)增强型表单

HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证。

输入类型	描述
color	主要用户取颜色
date	从一个日期选择器选择一个日期
datetime	选择一个日期（UTC 时间）
datetime-local	选择一个日期和时间 (无时区)
email	包含 e-mail 地址的输入域
month	选择一个月份
number	数值的输入域
range	一定范围内数字值的输入域
search	用于搜索域
tel	定义输入电话号码字段
time	选择一个时间
url	URL 地址的输入域
week	选择周和年

---

(3)视频和音频 ( 重点指数满天星 )

HTML5 提供了播放音频文件的标准，即使用 元素。

<video>
	<source src="x.flv">
	<source src="x.mp4">
	<source src="x.webm">
	<source src="x.ogg">
</video>
可简写为 :
<video src="x.mp4"></video>

常见的属性

视频常用属性	描述
controls	是否显示播放控件
autoplay	是否自动播发
loop	是否循环播放
muted	是否静音播放
poster	在播放视频之前显示图片
preload	预加载方式 取值: none \ metadata \ auto
…	…

---

常见的方法与事件

视频的方法与事件	描述
volume	当前视频的音量 取值0~1
playbackRate	视频播放速率 大于1快放 / 小于1慢放
play()	播放视频
pause()	暂停视频
paused:true / false	当前视频是否处于暂停状态
canplaythrough	当前视频加载结束后可以播放触发事件
duration	获取视频时长
ended	视频播放结束触发事件
timeupdate	视频播放时触发事件(触发多次)
currentTime	当前播放时间点
…	…

---

视频的专用样式

video元素专用样式object-fit：
fill “填充” 默认值，将视频拉伸，让视频大小宽高填满父元素;
contain “包含” 保持原有视频尺寸，父元素留有空白区域;
cover “覆盖” 保持原有视频尺寸，宽度或高度至少有一个与父元素一致( 裁切 );

---

音频
音频支持文件格式: x.mp3 x.wav x.ogg …
<audio src= " x.mp3 " ></audio>
特性1：属性方法事件大多与视频相同
特性2: 默认不可见，如果添加controls属性可见…

---

本片文章为第一篇，后期会在第二篇更新绘图(重点)和svg(重点)

感谢观看~