HTML5学习（二）——标签探究
本文只是粗略的整理HTML5与HML的不同，目的是一个提纲挈领的效果
1、HTML文件的开始不需要一长串的标识了
<!DOCTYPE HTML> //该地方比之前更简洁 <HTML> <Head> ... </Head> <Body> </Body> </Html>
2、添加的标签
<video> 可以直接添加视频信息
<video src="/i/movie.ogg" width="320" height="240" controls="controls"> // controls是提示是否需要按钮 Your browser does not support the video tag. ///中间是当浏览器不支持的时候显示的内容（后面的audio很多都是标签都是这样提示的方式） </video> //需要多个video的话就如下 <video width="320" height="240" controls="controls"> <source src="/i/movie.ogg" type="video/ogg"> <source src="/i/movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video>
<Audio>标签使用方式与video类似
<Canvas>用于画图，自己的理解是提供要给画布，然后再画布上提供对象进行画图
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成： <script type="text/javascript"> var c=document.getElementById("myCanvas"); //获得画布 var cxt=c.getContext("2d"); //创建context对象 cxt.fillStyle="#FF0000"; //设置属性 cxt.fillRect(0,0,150,75); //在(0,0)处开始画一个150*75的矩形 </script>
canvas可以画直线、圆、渐变和写入图片
3、支持的数据存储
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
4、<input>的新Type （自动内置了格式判断）
url
number //可以设置max min step(数字间隔） value等属性
range //类型显示为滑动条
Date pickers(date,month,week,time,datetime,datetime-local)
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）
search //类型用于搜索域
5、表单元素
datalist 与select的格式相似
<datalist id="url_list"> <option label="W3School" value="http://www.W3School.com.cn" /> //value不可为空 <option label="Google" value="http://www.google.com" /> <option label="Microsoft" value="http://www.microsoft.com" /> </datalist>
keygen 密钥模式，用的较少
output 输入处理
6、表单属性
autocomplete //自动完成显示之前录入的数据 应该类似有些表单控件获得焦点时显示之前的内容 适用于<form>标签机一下类型的<input>标签的text,searcha,url,telephone,email,password,datepickers,range,color
onvalidate //属性规定当提交表单时不对其进行验证
<form action="demo_form.asp" novalidate="novalidate">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>
list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
注释：list 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, date pickers,
number, range 以及 color
<input type="url" list="url_list" name="link" /> <datalist id="url_list"> <option label="W3Schools" value="http://www.w3school.com.cn" /> <option label="Google" value="http://www.google.com" /> <option label="Microsoft" value="http://www.microsoft.com" /> </datalist>
pattern 属性规定用于验证 input 域的模式（pattern） 正则表达式
pattern 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及
password。
Country code: <input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" />
placeholder 属性
placeholder 属性提供一种提示（hint），描述输入域所期待的值。
注释：placeholder 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及
password
<input type="search" name="user_search" placeholder="Search W3School" />
required 属性
required 属性规定必须在提交之前填写输入域（不能为空）
