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学习开发指南

本文发表于CSDN《程序员》杂志2016年8月期,未经允许不得转载!概述:随着移动互联网的兴起,前端开发工程师的岗位也随着兴起。前端工程师不仅在用户和产品之间扮演着越来越重要的角色,而且前端的职能也能...
  • yisuowushinian
  • yisuowushinian
  • 2016年08月05日 15:12
  • 3071

Html5学习之路 基础

对于我们刚开始学习html的学生来说 ,繁杂的标签是非常麻烦的  而且不好记,闲话少说,首先我推荐的编译器是Hbuider,作为我们中国人开发的第一个编译器,我们理所当然支持一下。不过个人使用的是PH...
  • qq_28292937
  • qq_28292937
  • 2016年05月27日 20:54
  • 1017

HTML5入门学习总结

这两天了解学习了一下HTML5的一些特性,做一些简单的知识总结HTML5的设计 吸取了XHTML2的教训,HTML5的设计有一个主要的原则就是“支持已有的内容”,对于HTML5来说,并不存在创立的起始...
  • ST_Pace
  • ST_Pace
  • 2017年05月10日 21:59
  • 388

Html5学习心得

今天在form表单中写个4个按钮,绑定监听事件后怎么都改不了颜色。点击会触发事件,颜色闪一下就没了,没发儿写个test对照,找了好久才发现问题出在form标签。form标签似乎会在点击事件后使按钮回归...
  • u010737114
  • u010737114
  • 2016年03月30日 22:41
  • 221

HTML5学习总结

1      表格元素 table、thead、tbody、tfoot、tr、th、td、col、colgroup、caption   均属于单元格,包含两个合并属性:colspan、rowsp...
  • JourneyX
  • JourneyX
  • 2016年11月19日 17:35
  • 1859

HTML5学习小结

HTML5是用于取代1999年所制定的 HTML4.01和XHTML1.0标准的HTML标准版本。 HTML5的第一份正式草案已于2008年1月公布;2012年12月,规范已经正式定稿。 W3C计...
  • gaojinshan
  • gaojinshan
  • 2014年03月27日 16:10
  • 2021

HTML5学习路线图

如何学习HTML5?这个话题,问的人很多,随便百度一下就能看到各种各样的回答。不过感觉每种回答都不给力。下面我给出一个自己理解的HTML5学习的路线图,按照这个路线图学习以后,一般的HTML5项目开发...
  • arui319
  • arui319
  • 2011年12月16日 10:45
  • 14925

自学html5开发要学哪些?

HTML5开发是当今比较火热的一个专业,它相对于iOS开发、Android开发来说,学习门槛比较低,不需要任何编程基础,所以对于没有编程基础的同学来说,学HTML5开发是比iOS开发和Android开...
  • shenzhenfeng
  • shenzhenfeng
  • 2016年12月09日 20:46
  • 1388

学习日记-html5

已掌握:学习并使用过HTML, CSS, 但并不熟练,特别是css常用效果了解但对于不常用的能实现的效果不清晰,html的各种标签除常用部分,其他在使用时需要去查询. 今日学习:html5 发展,与...
  • trch1989
  • trch1989
  • 2017年02月06日 16:50
  • 177

HTML5基础入门学习心得体会

1.在书写HTML代码之前以下几个条件一定要熟记: HTML文件中的标记是不区分大小写的; 文件名的格式为index.html; 任何一种纯文本编辑可以编辑HTML文件; 浏览器要求是IE,G...
  • xiaohen123456
  • xiaohen123456
  • 2017年08月16日 15:07
  • 629
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5学习
举报原因:
原因补充:

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