HTML5学习

原创 2013年12月04日 09:45:32

基于目前对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" 元素的第一个或最后一个子元素的位置。

相关文章推荐

HTML5入门学习

  • 2016年05月13日 17:09
  • 6.35MB
  • 下载

HTML5学习_day10(2)--css文件书写格式

css文件书写格式 1.尽量将样式写在一个单独的css文件里面,在head里面去引用 1)实现了内容与样式的分离, 2)减少了页面的体积 3)css文件可以被缓存,重用,维护成本低 (注...

HTML5学习资料

  • 2013年10月17日 15:54
  • 1.61MB
  • 下载

HTML5学习之FileReader接口

用来把文件读入内存,并且读取文件中的数据。FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据。到目前文职,只有FF3.6+和Chrome6...

HTML5学习---单页面手势滑屏切换原理

H5单页面手势滑屏切换原理 H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下...

html5学习简介

  • 2014年12月05日 16:46
  • 493KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5学习
举报原因:
原因补充:

(最多只允许输入30个字)