前端基础知识 （六）HTML5新特性

HTML5 <!DOCTYPE>

声明必须位于HTML5文档中的第一行

HTML5的改进

1）新元素
2）新属性
3）完全支持CSS3
4）2D/3D转换
5）本地存储
6）本地SQL数据
7）Web应用

HTML5多媒体

HTML5 < video >
HTML5 < audio >

<video width="320" height="240" controls>
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.ogg" type="video/ogg">
 您的浏览器不支持 HTML5 video 标签。
</video>

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

HTML5图形

使用html5可以简单的绘制图形

• 使用 < canvas> 元素 定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。
• 使用内联SVG 指可伸缩矢量图形 用于定义用于网络的基于矢量的图形
• 使用CSS3 2D转换、3D转换

canvas和svg的区别：
SVG 是一种使用 XML 描述 2D 图形的语言。
Canvas 通过 JavaScript 来绘制 2D 图形。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

HTML5使用CSS3

• 新选择器
• 新属性
• 动画
• 2D/3D转换
• 圆角
• 阴影效果
• 可下载的字体

HTML5语义元素

• < article > 定义页面独立的内容区域
• < aside > 定义页面的侧边栏内容
• < bdi > 允许您设置一段文本，使其脱离其父元素的文本方向设置
• < detail > 用于描述文档或文档某个部分的细节
• < dialog > 定义对话框，比如提示框
• < summary > 标签包含detail元素的标题
• < figure> 规定独立的流内容（图像、图表、照片、代码等等）
• < figcaption > 定义 < figure > 元素的标题
• < footer > 定义section或者document的页脚
• < header > 定义文档的头部区域
• < mark > 定义带有记号的文本
• < meter > 定义度量衡，仅用于已知最大值和最小值的度量
• < nav > 定义导航链接的部分
• < progress > 定义任何类型的任务的进度
• < ruby > 定义ruby注释（中文注音或字符）
• < rt > 定义字符（中文注音或字符）的解释或发音
• < rp > 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
• < section > 定义文档中的节（section、区段 ）
• < time > 定义日期或时间
• < wbr > 规定在文本中的何处适合添加换行符

HTML5使用地理位置

请使用getCurrentPosition（）方法来获得用户的位置。

var x = document.getElementById("demo");
function getLocation() {
	if (navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(showPosition)
	} else {
		x.innerHTML="该浏览器不支持获取地理位置。";
	}
}
function showPosition(position) {
	x.innerHTML="纬度: " + position.coords.latitude + 
	"<br>经度: " + position.coords.longitude;	
}

HTML5表单

• < datalist> input标签定义选项列表，请与input元素配合使用该元素，来定义input可能的值
• < keygen> 规定用于表单的密钥的生成器的字段
• < output> 定义不同类型的输出，比如脚本的输出

<input list="browsers" name="browser">
<datalist id="browsers">
 <option value="Internet Explorer">
 <option value="Firefox">
 <option value="Chrome">
 <option value="Opera">
 <option value="Safari">
</datalist>

HTML5新的input类型

color 、date、datetime、datetime-local、email、number、range、search、tel、time、url、week

HTML5新的表单属性

HTML5 的 和 标签添加了几个新属性.
《form》新属性

• autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
• novalidate 属性是一个 boolean(布尔) 属性. 规定在提交表单时不应该验证 form 或 input 域。

《input》新属性

• autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
• autofocus 属性规定在页面加载时，域自动地获得焦点。
• form 规定输入域所属的一个或多个表单。
• formaction 用于描述表单提交的URL地址.会覆盖 元素中的action属性.
• formentype 描述了表单提交到服务器的数据编码 (只对form表单中 method=“post” 表单
• formmethod 义了表单提交的方式。get、post
• formnovalidate 描述了 元素在表单提交时无需被验证。
• formtarget 指定一个名称或一个关键字来指明表单提交数据接收后的展示。
• height、width
• list
• min、max
• multiple 规定 元素中可选择多个值。
• pattern（regexp） 描述了一个正则表达式用于验证 < input> 元素的值。
• placeholder
• required 规定必须在提交之前填写输入域（不能为空）。
• step 属性为输入域规定合法的数字间隔。

HTML5 Web存储 - localStorage 和 sessionStorage

客户端存储数据的两个对象为：

• localStorage - 用于长久存储整个网站的数据，保存的数据没有过期时间，知道手动去除。
• sessionStorage - 用于临时保存同一窗口（或标签的）的数据，在关闭窗口或标签后将会删除这些数据。

HTML5 Web Workers

当在HTML页面中执行脚本时，页面的状态时不可响应的，直到脚本完成。
Web Worker 是运行在后台的JavaScript，独立于其他脚本，不会影响页面的性能。

HTML5 WebSocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。