HTML5新属性

HTML5

HTML5是(HyperText Markup Language 5) ，HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。

HTML5 是 W3C 与 WHATWG(Web Hypertext Application Technology Working Group) 合作的结果。

优缺点

1、优点：
（1）可以给站点带来更多的多媒体元素
（2）可以访问以远程方式存储在“云”中的各种内容
（3）HTML5存在较为先进的本地存储技术

2、缺点：
（1）开放性带来的困扰
（2）发展的速度有待提升
（3）技术手段的不完善

新语义标签

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

<canvas>

标 签	描 述
<canvas>	标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API

多媒体

标 签	描 述
<audio>	定义音频内容
<video>	定义视频（video 或者 movie）
<source>	定义多媒体资源 <video> 和 <audio>
<embed>	定义嵌入的内容，比如插件
<track>	为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道

已移除元素

以下的 HTML 4.01 元素在HTML5中已经被删除：

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>

HTML5 新特性

• 智能表单(input类型和属性)
• 绘图画布(canvas元素)
• 多媒体(audio、video标签)
• 地理定位(Geolocation的API)
• 数据存储(DOM Storage、Web SQL Database)
• 多线程(WebWorkerAPI)

表单

HTML5 新的 Input 类型

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

// 实例
<form action="">
	date：<input type="date"><br>
	month：<input type="month"><br>
	week：<input type="week"><br>
	time：<input type="time"><br>
	datetime：<input type="datetime"><br>
	datetime-local：<input type="datetime-local"><br>
	//数值范围
	颜色：<input type="color"><br>
	E-mail: <input type="email"><br>
	电话号码：<input type="tel"><br>
	URL：<input type="url"><br>
	数值：<input type="number" max="10" min="0" step="1" value="3"><br>
	滑动条：<input type="range" max="20" min="0" step="2" value="4"><br>
	搜索：<input type="search"><br>
	姓名: <input type="text"><br>
	<input type="submit" value="提交">
</form>

HTML5 新的表单元素

datalist 元素
datalist 元素规定输入域的选项列表
列表是通过 datalist 内的 option 元素创建的
使用 元素的列表属性与 元素绑定

// direction
<form action="">
	<input list="all_directions">
	<datalist id="all_directions">
	<option value="east">
	<option value="south">
	<option value="west">
	<option value="north">
	</datalist>
	<input type="submit">
</form>

keygen 元素
keygen 元素的作用是提供一种验证用户的可靠方法
keygen 元素是密钥对生成器（key-pair generator）
当提交表单时，会生成两个键，一个是私钥，一个公钥
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）

// usr_name
<form action="">
  用户: <input type="text" name="usr_name">
  加密: <keygen name="security">
  <input type="submit">
</form>

output 元素
output 元素用于不同类型的输出，比如计算或脚本输出

// calculate
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
	<input type="number" id="a" value="20">+
	<input type="number" id="b" value="50">=
	<output name="x" for="a b"></output>
</form>

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

HTML5 新的表单属性

<form>新属性

属性	值	描 述
autocomplete	on、off	规定 form 或 input 域拥有自动完成功能
novalidate	true、false	规定在提交表单时不验证 form 或 input 域

<input>新属性

属性	描述
autocomplete	规定 form 或 input 域应该拥有自动完成功能
autofocus	boolean属性，规定在页面加载时，域自动地获得焦点
form	规定输入域所属的一个或多个表单
formaction	用于描述表单提交的URL地址
formenctype	描述了表单提交到服务器的数据编码 (只对form表单中 method=“post” 表单)
formmethod	定义了表单提交的方式
formnovalidate	boolean属性，描述了<input>元素在表单提交时无需被验证
formtarget	一个名称或一个关键字来指明表单提交数据接收后的展示
height and width	规定用于 image 类型的<input>标签的图像高度和宽度
list	输入域的 datalist
min and max	用于为包含数字或日期的input类型规定限定
mutiple	boolean属性，<input>元素中可选择多个值
pattern(regexp)	描述了一个正则表达式用于验证<input>元素的值
placeholder	描述了一个正则表达式用于验证<input>元素的值
required	必须在提交之前填写输入域（不能为空）
step	为输入域规定合法的数字间隔

画布

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像，canvas本身是没有绘图能力的，所有的绘制工作必须在JS内部完成

// 创建一个画布
<canvas width="600" height="400"></canvas>

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成

// 使用 JavaScript 来绘制图像
var canvas = document.querySelector('canvas');	//获取画布对象
var ctx = canvas.getContext('2d');	//获取绘图上下文
ctx.moveTo(100,100);	//落笔
ctx.lineTo(100,200);	//连线
ctx.lineTo(200,200);	//连线
ctx.closePath();	//闭合路径
ctx.stroke();	//描边

多媒体

多媒体标签包含两个，具体如下：
视频：<video>
音频：<audio>

<video>

HTML5 规定了一种通过 video 元素来包含视频的标准方法
<video>元素支持三种视频格式： MP4、WebM、Ogg

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

<video>标签属性：

属性	值	描述
autoplay	autoplay	是否自动播放
controls	controls	是否展示控件(播放按钮)
height	px	视频播放器的高度
loop	loop	是否循环播放
muted	muted	视频的音频输出为静音
poster	URL	加载等待的画面图片
preload	auto(预先加载视频)、metadata(仅加载音频/视频的元数据)、none(不应加载视频)	是否预加载视频(如果有了autoplay 就忽略该属性）
src	URL	视频url地址
width	px	视频播放器的宽度

<audio>

HTML5 规定了在网页上嵌入音频元素的标准，即使用<audio>元素
audio提供了三种音频格式：Ogg、MP3(audio/mpeg)、Wav

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

&t;audio>标签属性：

属性	值	描述
autoplay	autoplay	是否自动播放
controls	controls	显示音频控件（播放/暂停按钮）
loop	loop	是否循环播放
muted	muted	音频输出为静音
preload	auto(当页面加载后载入整个音频)、metadata(当页面加载后只载入元数据)、none(当页面加载后不载入音频)	是否在页面加载后载入音频
src	URL	音频url地址