新增的结构性元素
section
定义文档中的节。比如章节、页眉、页脚或文档中的其他部分。一般用于成节<br>的内容,会在文档流中开始一个新的节<br>
article
他是一个特殊的section标签,它比section具有更明确的语义,它代表一个<br>独立的、完整的相关被熔块,可独立于页面其它内容使用<br>
nav
此标签代表页面的一个部分,表示页面中导航链接的部分
aside
它用来装载非正文的内容,被视为页面里面的一个单独的部分。<br>它包含的内容与页面的主要内容是分开的,可以被删除,而不会影响到<br>网页的内容、章节或是页面所要传达的信息
hgroup
hgroup标签是对网页或区段section 的标题元素(h1~h6)进行组合
footer
定义section或文档的页脚,包含了与页面、文章或是部分内容有关信息
header
定义文档的页眉,通常是一些引导和导航信息
figure
用于对元素进行组合。多用于图片与图片描述组合
新增的语义性元素
mark
定义带有记号的文本,需要突出显示文本时使用<mark>标签
progress
标签定义运行中的任务进度(进程)
details
此标签规定了用户可见的或者隐藏的需求的补充细节
detailist
定义选项列表。请与input元素配合使用该元素,来定义input可能的值
ruby
此标签定义ruby注释,往往与<rt>和<rp>标签一起配合使用
command
command标签可以定义用户可能调用的命令(比如单选按钮、复选框或按钮)
新增的input输入类型
range
定义用于精确值不重要的输入数字的控件<br>
Date Pickers
date:定义date控件。month:定义month和year控件(不带时区)。<br>week:定义week和year控件。time:定义用于输入时间的控件。<br>datemate:定义date和time控件,基于UTC时区。<br>datetime-local:定义date和time控件,不带时区。
新增的input属性
autocomplete
规定<input>元素输入字段是否启用自动完成功能
autofocus
规定当前页面加载<input>元素应该自动获得焦点
form
规定<input>元素所属的一个或多个表单
新增的表单重写属性
formaction
规定当表单那提交时处理输入控件的文件的URL
formenctype
规定当表单数据提交到服务器时如何编码
formmethod
定义发送表单数据到actionURL的HTTP方法
formnovalidate
formnovalidate属性覆盖<form>元素的novalidate属性
formtarget
规定表示提交表单后在哪里显示接收到响应的名称或关键词
除了formnovalidate属性,其他属性都是只针对type="submit"和type="image"
新增的height和width属性
规定<input>元素的高度和宽度。(只针对type="image")
list
属性引用<datalist>元素,其中包含<input>元素的预定义选项
新增min、max和step属性
min:规定输入框输入的最小值<br>max:规定输入框输入的最大值<br>step:为输入框规定合法的数字间隔
multiple
属性规定允许用户输入到<input>元素的多个值
pattern
规定用于验证<input>元素的值的正则表达式
placeholder
规定可描述输入<input>字段预期值的简短的提示信息
required
规定必须在提交表单之前填写输入字段
新增的form元素
datalist
datalist元素用于为输入提供一个可选列表,用户可以直接选择<br>列表中的某一项,从而免去了输入的麻烦
keygen
keygen元素是秘钥对生成器,能够使用户验证更为可靠。用户提交<br>表单时会生成两个键,一个私钥,一个公钥,私钥保存客户端而公<br>钥会发送到服务端<br>
output
output元素用于浏览器中显示计算结果式脚本输出,包含完整的开<br>始和结束标签。语法:<output name="">text</output>
新增的form属性
autocomplete
此属性用于form元素时,所有从属于该form的元素都具备自动完成<br>功能。如果要使用个别元素关闭自动完成功能,则单独为该元素指定<br>autocomplete=“off”即可
novalidate
此属性用于提交表单时取消整个表单的验证,即关闭对表单内所有元素的有效检查。<br>如果只取消表单中较少部分内容的验证而不妨碍提交的大部分内容,则可以将此属性<br>单独用于表单中的这些元素
Canvas
canvas是HTML5新增的专门用来绘制图形的元素,通过canvas技术,用户可以在Web中绘制各种图形
绘制步骤
添加canvas元素,定义id属性以便使用
使用id寻找canvas元素
通过canvas元素的getContext方法获取上下文(context)<br>创建Context对象,以获取允许进行绘制的2D环境
使用JavaScript脚本进行绘制
绘制直线
beginPath()
ding一了一个新的路径绘制动作的开始
moveTo()
为指定点创建了一个新的子路径,这个点就变成的新的上下文点。<br>我们就可以把moveTo()方法看成用来定位我们的绘图鼠标用的
lineTo()
以上下文为起点,到方法参数中指定的点之间画一条直线
stroke()
为所画的线赋予颜色,并使其可见。默认黑色
相关属性
直线端点样式
butt,round,square<br>用lineCap属性设定。缺省情况下,使用butt样式
绘制弧线和曲线
arcTo()
arcTo()方法在画布上创建介于两个切线之间的弧/曲线
quardraticCurveTo()
绘制二次曲线,每条二次曲线要由上下文点、一个控制点和一个终止点来定义
bezierCurveTo()
绘制贝塞尔曲线使用此方法。每条贝塞尔曲线需要由上下文点、两<br>个控制点和一个终止点来确定
绘制圆
arc() 起始角度为0,终止角度为2*PI
图形颜色的填充
要填充图形,需要用fillStyle属性设置填充图形用的颜色,然后<br>使用fill()方法完成对图形的填充。默认为黑色。
绘制阴影
shadowColor
shadowOffsetX
设置或返回阴影与形状的水平距离
shadowoffsetY
设置或返回阴影与形状的垂直距离
绘制透明度
globaAlpha属性设置或返回绘图的当前透明值。<br>属性值必须是介于0.0(完全透明)与1.0(不透明)之间的数字
绘制线性渐变
首先使用createLinearGradient()方法创建canvasGradient对象,语法如下<br>var grad = context.createLinearGradient(X1,Y1,X2,Y2);<br>然后使用addColorStop方法定义色标的位置并上色。<br>grad.addColor(position,color);其中参数position为渐变中色标的相对位置(偏移量)
绘制径向渐变
首先使用createRadialGradient()方法创建canvasGradient对象,语法如下<br>var grad = context.createRadialGradient(X1,Y1,R1,X2,Y2,R2);其中<br>X1,Y1,R1定义一个以(X1,Y1)为原点、半径为R1的圆。<br>X2,Y2,R2定义一个以(X2,Y2)为原点、半径为R2的圆。<br>然后使用addColorStop方法定义色标的位置并上色。<br>grad.addColor(position,color);其中参数position为渐变中色标的相对位置(偏移量)<br>
绘制图案填充
用上下对象创建createPattern()方法创建一个图案填充对象,语法如下:<br>context.createPattern(image,type);<br>其中type必须为下面字符串之一:repeat、repeat-X、repeat-Y、no-repeat
绘制图像的方法
context.drawImage(imageObj,x,y);
此方法许哟啊一个图像对象和一个起始点坐标作为参数,其<br>中起始点坐标是相对于canvas的左上角的位置
context.drawImage(imageObj,x,y,width,height);
drawImage方法还可以接受width和height两个<br>参数用来以任意指定的尺寸显示图像<br>
context.drawImage(imageObj,sx,sy,sw,sh,dx,dy,dw,dh);
drawImage方法,还可以增加另六个参数来实现对图像的裁剪。<br>这六个参数是,sourceX,sourceY,sourceWidth,sourceHeight,<br>destWidth,destHeight
绘制文本
context.fillText(Text,x1,y1);
设置文本的字体、大小和样式
normal、italic、bold
描绘文本边缘
使用strokeText()方法替代fillText()
绘制文本对齐
textAlign属性<br>start、end、left、center、right
文本度量
使用measureText()方法<br>此方法需要一个文本字符串组作为参数,并返回一个尺度度量。<br>尺度对象中的数据是基于所提供的字符串参数和当前文本字体信息而来的
文本换行
需要创建一个用户自定义函数,此函数需要canvas上下文对象、一个文本<br>字符串、一个位置、一个最大宽度和行高信息。函数将使用measure Text()计算何时换行
图形的变换
移动坐标空间
使用translate()方法可以将绘图原点横向和纵向的移动到指定的距离(x,y),<br>结果表现为整张图的移动<br>
旋转坐标空间
旋转canvas用的方法是rotate()。此方法接受一个以弧度为单位的旋转参<br>数,整个canvas将以坐标原点,也就是由translate()所确定的原点为圆心<br>进行旋转
缩放图形
缩放操作使用scale()方法,参数x,y分别代表横向与纵向的缩放比例,两个<br>参数都是浮点数,1,0表示不缩放,小于1.0表示缩小,大于1.0表示放大
保存与恢复canvas状态
使用save()和restore()方法可以实现对坐标变换状态的保存与恢复
图形的组合与裁切
图形的组合
globalCompositeOperation属性设置或返回如何将一个源(新的)图形会知道目标(已有的)的图像上
clip()方法从原始画布中剪切任意形状和尺寸
音频/视频
音频<br><audio>....</audio>
视频<br><video>....</video>
相关属性
autoplay
该属性可以实现页面加载音频后一旦就绪即开始自动播放
controls<br>
可为媒体文件提供用于播放的控制条
loop
loop属性设置或返回音频/视频是否应该在结束时重新播放
音频视频相关方法<br>
canPlayType()
检测浏览器是否能播放指定的音频/视频类型。<br>惨Play Type()方法可返回下列值之一:<br>“probably”--浏览器最可能支持该音频/视频类型<br>“maybe”--浏览器也许支持该音频/视频类型<br>“ ”--(空字符串)浏览器不支持该音频/视频类型
load()
重新加载音频/视频元素。load()方法用于在更改来源或<br>其他设置后对音频/视频元素进行更新
play()
从play()方法开始播放当前的音频或视频。<br>所有主流浏览器都支持play()方法。