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元素用于不同类型的输出,比如计算或脚本的输出

view code

form οnsubmit="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:

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

view code

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:

multiple:属性规定输入域中可选择多个值。

select images:

pattern (regexp):属性规定用于验证 input 域的模式(pattern)。模式(pattern) 是正则表达式

placeholder:属性提供一种提示(hint),描述输入域所期待的值

required:属性规定必须在提交之前填写输入域(不能为空)。

html5中的新标签:

标签定义声音,比如音乐或其他音频流

标签允许您设置一段文本,使其脱离其父元素的文本方向设置。

标签定义图形,比如图表和其他图像。

标签只是图形容器,您必须使用脚本来绘制图形。

标签可以定义命令按钮,比如单选按钮、复选框或按钮。

只有当 command 元素位于 menu 元素内时,该元素才是可见的。否则不会显示这个元素,但是可以用它规定键盘快捷键。

标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。

datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表

标签用于描述文档或文档某个部分的细节。目前只有谷歌浏览器--chrom支持这个标签

标签定义嵌入的内容,比如插件。

标签定义 figure 元素的标题(caption)。

"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/