1.用于绘画的canvas元素
2.用于媒介回放的video和audio元素
3.对本地离线存储提供更好的支持
4.新的特殊内容元素,如:article、footer、header、nav、selection
5.新的表单控件,如:calendar、date、time、email、url、search
HTML5元素用于图形的绘制,提供图形容器,通过脚本(通常是JavaScript)来绘制图形
一个画布在网页中是一个矩形框,通过元素来绘制。
代码:
canvas元素本身没有绘图能力,所有的绘制工作由JavaScript内部完成
代码:
canvas是一个二维网格,左上角坐标是(0,0),横轴是x轴,竖轴是y轴。
在Canvas上画线,可以使用下列两种方法:
1.moveTo(x,y)定义线条开始坐标
2.lineTo(x,y)定义线条结束坐标
代码:
Canvas可以画圆形,具体方法是: arc(x,y,r,start,stop)
代码:
使用canvas绘制文本,重要的属性和方法如下:
1.font定义字体
2.fillText(text, x, y)在canvas上绘制实心的文本
3.strokeText(text, x, y)在canvas上绘制空心的文本
代码:
渐变可以填充在矩形、圆形、和文本等等。以下有两种不同的方式设置Canvas渐变:
1.createLinearCradient(x,y,x1,y1)创建线条渐变
2.createRadialGradient(x,y,r,x1,y1,r1)创建一个径向/圆渐变
当使用渐变对象时,必须使用两种或两种以上的停止颜色。addColorStop()方法指定颜色停止,参数使用坐标描述,可以是0或1.
代码:
将一幅图画放到画布上,使用以下方法:
drawImage(image,x,y)
代码:
HTML5支持内联SVG,SVG是使用XML格式定义图片。
在HTML5中可以使用MathML元素,对应的标签是…MathML是一个数学标记语言,是一种基于XML的标准,用来写网页版的数学符号和公式。
为了是元素可拖动,把draggable属性设置为true,则:
规定当元素被拖动时,会发生什么。ondragstart属性需要定义函数drag(event),函数中需要填入拖动的数据。
ondragover事件规定在何处放置被拖动的数据
当放置被拖动数据时,会发生drop事件
代码:
HTML5 Geolocation API用于获得用户的地理位置。该特性可能侵犯用户的隐私,HTML5可以做到
HTML5规定一种通过video元素来包含视频的标准方法,具体代码如下:
HTML5中规定音频元素标准,使用
HTML5拥有多个新的表单输入类型,新的特性提供更好的输入控制和验证。新的输入类型:color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week。
color类型用在input字段主要用于从拾色器中选择颜色
代码:
date类型允许从日期选择器选择一个日期,代码:
datetime-local类型允许你选择一个日期,但具体怎么用的,我没整明白
email类型用于应该包含e-mail的地址输入域,会进行email格式的校验。如:
month类型允许选择年/月,时间精确到月份。如:
number类型用于包含数值的输入域。该类型有较多的属性,请看下面的代码:
代码:
range类型的显示为滑动条,包括一定的范围。如: 。其中value属性是规定默认值
search类型用于定义搜索域,比如站点搜索等。如:。完全是让好理解,我觉得文本框也可以做到。
定义输入电话号码,完全是让好理解,我觉得文本框也可以做到。如:
time类型允许你选择一个时间,如:?
url类型包含URL地址输入域,在提交表单时,自动验证url域的值。如:
week类型允许选择周和年
HTML5有以下新的表单元素:
1.
2.
3.
元素规定输入域的选择列表,但是如果用户自己输入,也可以。
代码:
标签规定用于表单的密钥对生成器,我没有理解怎么用?请补充实例?
代码:
元素用于不同类型的输出,比如计算或脚本输出:
代码:
HTML的和标签新加了几个属性 的新属性:
1.autocomplete
2.novalidate
的新属性:
1.autocomplete
2.autofocus
3.form
4.formaction
5.formenctype
6.formmethod
7.formnovalidate
8.formtarget
9.height 与 Width</li>
10.list
11.min 与 max
12.multiple
13.pattern (regexp)
14.placeholder
15.required
16.step
1.autocomplete属性规定form和input域应该拥有自动完成的功能。当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项。
2.autocomplete属性有可能在form元素中开启的,而是在input元素中关闭
代码:
novalidate属性是一个boolean属性。规定在提交表单时不应该验证form或input域
代码:
autofocus属性是一个boolean属性,规定在页面加载时,域自动获得焦点
代码:
标签中有属性form,可以指明该标签属于哪个form表单,即使该标签不在其对应的form域内。比如: 例子中lastName标签不在id=form1表单中,但是提交按钮会一起打包提交。
代码:
formaction属性用于描述表单提交的URL地址,会覆盖元素中的action属性,元素中的action属性会无效
代码:
formenctype属性描述了表单提交到服务器的数据编码,只对form表单中method="post"有效。且会覆盖form元素中的enctype属性
代码
formmethod属性定义了表单提交的方式,会覆盖form元素中的method属性,formmethod="post"
novalidate属性是一个boolean属性,描述元素提交时无需验证。formnovalidate属性可实现同样的效果,注意:formnovalidate属性与type="submit"提起使用
代码:
formtarget属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。目前没有懂,下面的例子没什么用,运行结果一样的
代码:
height和width属性规定用于type="image"标签的图像大小。type="image"标签用于图片代替type="submit"提交按钮
代码:
list属性规定输入域为datalist。datalist输入域定义选项列表
代码:
min、max和step属性用于包含数字或日期的input类型的约束。适用于类型的标签: date picker、number和range。
multiple属性是一个boolean属性,规定元素中可选择多个值,使用于标签: email和file
代码:
1.pattern属性描述了一个正则表达式,用于验证元素的值。适用于一些类型标签: text、search、url、tel、email和password
2.使用title显示提示信息
代码:
placeholder属性提供一种提示(hint),描述输入域所期待的值,适用于以下类型标签:text、search、url、telephone、email和password
代码:
required属性是一个boolean属性。规定在提交之前必须填写输入域(不能为空)。适用的标签有: text、search、url、telephone、email、password、date pickers、number、checkbox、radio和file
代码:
step规定了合法的数字间隔,step属性往往和min、max属性创建一个区域值。适用的标签有:number、range、date、datetime、datetime-local、month、time和week.
语义元素指的是有意义的元素,能够清楚描述其意义给开发者。比如或就是无意义,而则是语义元素。
HTML5提供了新的语义元素来明确一个Web页面的不同部分:
1.
2.
3.
4.
5.
6.
7.
8.
具体如图所示:
标签定义文档中的节,包含一组内容及其标题
代码:
标签定义独立的内容
代码:
标签定义导航链接的部分
标签定义页面主区域内容外的内容,如侧边栏。
元素描述了文档的头部区域,在页面中可以使用多个元素
元素描述了文档底部区域,一个页脚通常包含文档的作者、联系信息等
代码:
标签规定独立的流内容,如图像、图表和代码等。标签定义元素的标题。
代码:
HTML5web存储,一个比cookie更好的本地存储方式,可以在本次存储用户的浏览数据。客户端存储数据的两个对象为:
1.localStorage:没有时间限制的数据存储
2.sessionStorage:针对一个session的数据存储
当HTML页面执行脚本时,页面的状态是不可相应,直到脚本完成。web worker是运行在后台JavaScript,独立于其他脚本,不影响页面的性能。
由于web worker位于外部文件中,因此无法访问下列JavaScript对象:
1.window对象
2.document对象
3.parent对象
如果您觉得本文的内容对您的学习有所帮助:
关键字:
jquery