HTML5学习

基于目前对HTML5还没有哪个浏览器对其完全支持，因此在这里学习仅仅利用谷歌浏览器----chrom10.0以上的版本或者是Opera9.0以上的版本验证测试HTML5的新特性。目前opera支持是比较好的

目前可以使用http://www.w3school.com.cn/html5/html_5_form_input_types.asp作为参考文档

HTML5新添加的表单类型：email,url,number,range,search(Opera支持),Date pickers(date,month,week,time,datetime,datetime-local)

HTML5新的表单元素

<datalist>
    <option value="1"></option>
    <option value="2"></option>
</datalist>

option元素永远都要设置value属性

keygen 元素的作用是提供一种验证用户的可靠方法。

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

<form onsubmit="return false">
    <input id="num_a"/> +
    <input id="num_b"/> =
    <output id="result" onforminput="resCalc()"></output>
</form>

function resCalc()
{
    numA=document.getElementById("num_a").value;
    numB=document.getElementById("num_b").value;
    document.getElementById("result").value=Number(numA)+Number(numB);
}

备注：onforminput事件，当表单获得用户输入时运行脚本
 新的form属性：
autocomplete:该属性适用于form和input两个标签，当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项
novalidate：该属性规定在提交表单时不应该验证form或input域
新的input属性：
autocomplete:当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项
autofocus:规定在页面加载时，域自动地获得焦点
form：该属性必须引用所属表单的id,指明具体的表单内容属于哪个具体的form表单
form overrides ：
formaction - 重写表单的 action 属性
formenctype - 重写表单的 enctype 属性
formmethod - 重写表单的 method 属性
formnovalidate - 重写表单的 novalidate 属性
formtarget - 重写表单的 target 属性

height 和 width：

<input type="image" src="/i/eg_submit.jpg" width="99" height="99" />

 list：属性规定输入域的datalist,datalist是输入域的选项列表

Webpage: <input type="url" list="url_list" name="link"/>
<datalist id="url_list">
    <option label="W3School" value="http://www.w3school.com.cn"/>
    <option label="Google" value="http://www.google.com"/>
    <option label="Microsoft" value="http://www.microsoft.com"/>
</datalist>

 min, max 和 step：
max 属性规定输入域所允许的最大值。
min 属性规定输入域所允许的最小值。
step 属性为输入域规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）。
Points: <input type="number" name="points" min="0" max="10" step="3"/>
multiple:属性规定输入域中可选择多个值。
Select images: <input type="file" name="img" multiple="multiple" />
pattern (regexp):属性规定用于验证 input 域的模式（pattern）。模式（pattern） 是正则表达式
<input type="text" name="country_code" pattern="[A-z]{3}"
title="Three letter country code" />
placeholder:属性提供一种提示（hint），描述输入域所期待的值
required：属性规定必须在提交之前填写输入域（不能为空）。

HTML5中的新标签：
<article>
<aside>
<audio>标签定义声音，比如音乐或其他音频流
<bdi> 标签允许您设置一段文本，使其脱离其父元素的文本方向设置。
<canvas> 标签定义图形，比如图表和其他图像。
         标签只是图形容器，您必须使用脚本来绘制图形。
<command> 标签可以定义命令按钮，比如单选按钮、复选框或按钮。
    只有当 command 元素位于 menu 元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键。
<datalist> 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表

<details> 标签用于描述文档或文档某个部分的细节。目前只有谷歌浏览器--chrom支持这个标签
<embed> 标签定义嵌入的内容，比如插件。
<figcaption> 标签定义 figure 元素的标题（caption）。
"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。