面试题HTML5的一些总结视频<video>和音频<audio>可以用于引用视频文件与音频文件, <video>和<au

HTML5新增了哪些东西

语义化标签

1. <header></header>  ->  头部区域标签, 块级别标签
2. <footer></footer>  ->  底部区域标签, 块级别标签
3. <nav></nav>        ->  导航区域标签, 块级别标签
4. <time></time>      ->  时间区域标签, 内联标签
5. <article></article> -> 文章段落标签, 块级标签
6. <aside></aside>    -> 侧边栏区域标签, 块级标签
7. <mark></mark>      ->  标记记号标签, 内联标签
8. <sumary></sumary>  -> 摘要标签, 定义 details 元素的标题，块级标签
9. <section></section>  -> 块/部分, 块级标签
10. <detailes></detailes>  ->  细节, 定义元素的细节，块级标签

表单的一些扩展

input类型的扩展:

<input type='email' />  e-mail 地址的输入域
<input type='number' />  数字输入域
<input type='url' /> URL 地址的输入域
<input type='range' /> range 类型显示为滑动条，默认value值是1~100的限定范围，可以通过min属性和max属性自定义范围<input type="range" name="points" min="1" max="10" />
<input type='search' /> 用于搜索域
<input type='color' /> 用于定义选择颜色
<input type='tel' /> 电话号码输入域
<input type='date' /> date类型为时间选择器

新增的一些表单属性:

contextmenu 上下文菜单属性, 可自定义右键菜单
contentEditable 规定是否可编辑元素内容 (true/false/inherit)
hidden 隐藏该元素, 即不在浏览器显示 (true/false)
draggable 规定元素是否可拖拽 (true/false/auto)
data-* 属性, 允许用户用自定义属性的方式来存储数据
autocomplete 自动补全属性，当表单元素设置了自动完成功能后，会记录用户输入过的内容，双击表单元素会显示历史输入 (on/off)
novalidate 不验证属性 规定在提交表单时不应该验证 form 或 input 域
placeholder 占位属性，简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失。
required 必填属性，是一个 boolean 属性。要求填写的输入域不能为空
pattern 正则属性，描述了一个正则表达式用于验证<input> 元素的值
min/max 属性，设置元素最小值与最大值
step 属性，为输入域规定合法的数字间隔
autofocus 属性，是一个 boolean 属性。规定在页面加载时，域自动地获得焦点
multiple 多选属性 ，是一个 boolean 属性。规定<input> 元素中可选择多个值, 如email/file域

视频 / 音频

视频<video>和音频<audio>可以用于引用视频文件与音频文件, <video>和<audio>提供了非常丰富的方法,属性和事件，用于操控这俩元素。

视频<video>和音频<audio>常用的几个方法有：

play() 开始播放音频/视频
pause() 暂停当前播放的音频/视频
load() 重新加载音频/视频元素

视频<video>和音频<audio>常用的属性有：

controls 属性设置或返回音频/视频是否显示控件（比如播放/暂停等）
defaultPlaybackRate 属性设置或返回音频/视频的默认播放速度
duration 属性返回当前音频/视频的长度（以秒计）
ended 属性返回音频/视频的播放是否已结束
loop 属性设置或返回音频/视频是否应在结束时重新播放
muted 属性设置或返回音频/视频是否静音
networkState 属性返回音频/视频的当前网络状态
src 属性设置或返回音频/视频元素的当前来源
volume 属性设置或返回音频/视频的音量
readyState 属性返回音频/视频当前的就绪状态
played 返回表示音频/视频已播放部分的 TimeRanges 对象

更详情的可以看官网介绍:

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/videodeveloper.mozilla.org

<audio>developer.mozilla.org

Canvas

<canvas>元素可被用来通过脚本（通常是JavaScript）绘制图形。

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_APIdeveloper.mozilla.org

Canvas API Canvas APIdeveloper.mozilla.org

人类身份验证 - SegmentFaultsegmentfault.com

可缩放矢量图形（Scalable Vector Graphics，SVG)，是一种用来描述二维矢量图形的 XML标记语言。简单地说，SVG 面向图形，HTML 面向文本。

SVGdeveloper.mozilla.org

关于SVG与Canvas一些探讨比较可以阅读:

SVG 与 HTML5 的 canvas 各有什么优点，哪个更有前途？www.zhihu.com

地理定位

Geolocation 接口是一个用来获取设备地理位置的可编程的对象，它可以让Web内容访问到设备的地理位置(当前设备的经纬度)，这将允许Web应用基于用户的地理位置提供定制的信息。

Geolocationdeveloper.mozilla.org

离线存储

该特性已经废弃, 有兴趣的可以了解下。

使用应用缓存developer.mozilla.org

Web 存储

web 存储就是对应用程序里的数据做存储, 提供了两种存储方式, localStorage 与sessionStorage

LocalStoragedeveloper.mozilla.org

Window.sessionStoragedeveloper.mozilla.org

WebSocket

允许在页面和服务器之间建立持久连接并通过这种方法来交换非 HTML 数据。

WebSocketsdeveloper.mozilla.org

Web Workers

能够把 JavaScript 计算委托给后台线程，通过允许这些活动以防止使交互型事件变得缓慢。

使用 Web Workersdeveloper.mozilla.org

语义化

所谓语义化, 可以简单理解就是能够描述内容的含义, 在H5中增加了很多语义化的标签, 比如<nav>, <section>, <article>, <footer>, <header>等。

语义化的好处:

1. 有利于SEO, 增强搜索引擎的优化
2. 提升代码可阅读性, 可维护性

HTML5删除了哪些东西

1. 删除basefont,big,center,font,s,strike,tt,u这些纯表现的元素,html5中提倡把画面展示性功能放在css中统一编辑
2. html5不再使用frame
3. 只有个别浏览器支持的标签, bgsound背景音乐，blink文字闪烁，marquee文字滚动,applet

推荐阅读

HTML5developer.mozilla.org