H5知识点

一、总体变化

1、H5文档结构

<!DOCTYPE html>

<html>

<head>

</head>

<body>

页面内容部分

</body>

</html>

2、语法变化

1）标签不区分大小写

2）元素可以省略结束标签

3）允许省略属性的属性值如：boolean值，有些则为true，没写则为false :<input checked /> 原来还需写 checked="checked" ;

4）允许属性值不使用引号

3、新增的常用结构性元素

1）section：定义文档中的节。类似文章的段落。比如章节、页眉、页脚或文档中的其他部分。一般用于成节的内容，会在文档流中开始一个新的节。

2）article：它是一个特殊的section标签，它比section具有更明确的语义，它代表一个独立的、完整的相关内容块，可独立于页面其他内容使用。

3）nav：此标签代表页面的一个部分，表示页面中导航链接的部分。

4）aside：它用来装载非正文的内容，被视为页面里一个单独的部分。它包含的内容与页面的主要内容是分开的，可以被删除，而不会影响到网页的内容、章节或是页面所要传达的信息。

5）hgroup：对网页或区段section的标题元素(h1-h6)进行组合。

6）footer：定义是section 或文档的页脚，包含了与页面、文章或是部分内容有关的信息

7）header：定义文档的页眉，通常是一些引导和导航信息。它不局限于写在网页头部，也可以写在网页内容里面。

8）figure：用于对元素进行组合。多用于图片与图片描述组合

4、新增的常用语义性元素：

1）mark:定义带有记号的文本，需要突出显示文本时使用 <mark>love</mark>

2）progress:标签定义运行中的任务进度<progress value='23' max='100'></progress>

3）time：时间日期值<time>12:23</time>

4）details：规定了用户可见的(open)或者隐藏的需求的补充细节,可配合<summary>这是会显示的</summary> 不会显示的

5）datalist：定义了选项列表。请与input元素配合使用该元素，来定义input可能的值

...

</datalist>

6）ruby：定义ruby注释，往往与<rt>和<rp>标签一起使用

7）menu：菜单列表 (不大支持）

8）command：可以定义用户可能调用的命令(比如：单选按钮、复选框或按钮)--不大支持

5、废除的相关元素

1）能用css代替的元素：basefont、big、center、font、s..

2）不再使用frame框架：frameset、frame、noframes，只支持iframe

3）只有部分浏览器支持的元素：applet、blink...

4）其他：pre代替listing...

二、H5表单

1、新增的input输入类型

1）email：定义用于输入email地址的字段

<input type='submit' value='提交' /> --按钮

</form>

2）url:定义用于输入URL的字段

3）number：定义用于输入数字的字段

4）range：定义用于精确值不重要的输入数字的控件

5）DatePickers：date---定义date控件。month--定义month和year控件(不带时区）。week--定义week和year控件。time定义用于输入时间的控件。datetime：定义date和time控件，基于UTC时区。datetime-local--不带时区

<form action="#" method="get"> //action值是URL，当确认按钮被按下时，接受和处理表单数据的 URL；method--传送数据的HTTP方法

<input type='date' /> --可以让你自由选择年月日的控件

<input type='submit' value='提交' /> --按钮

</form>

6）search：定义用于输入搜索字符串的文本字段

7）tel：定义用于输入电话号码的字段

8）color：定义拾色器

2、新增input属性

1）autocomplete:规定<input>元素输入字段是否应该启用自动完成功能

自动完成on/off 开启关闭，开启后会保存之前输入的内容。当再次输入时会自动显示输入过的

2）autofocus：规定当前页面加载时<input>元素应该自动获得焦点

3）form：规定<input>元素所属的一个或多个表单。<input>可以放在外面，只要form属性的值和<form>标签的id一样就行；这样提交的action都是一样的

新增的表单重写属性：formaction--规定当表单提交时处理输入控件的文件的URL；

formenctype--规定当表单数据提交到服务器时如何编码；

formmenthod--定义发送表单数据到action URL的HTTP方法；

formnovalidate--该属性覆盖<form>元素的novalidate属性；

formtarget--规定表示提交表单后在哪里显示接收到响应的名称或关键词_blank新页面；

除了formnovalidate属性，其他属性都是只针对type="submit"和type="image"

4）新增的height和width属性：规定<input>元素的宽高(只针对type="image")

5）list：属性引用<datalist>元素，其中包含<input>元素的预定义选项

list="datalistId"--引用id为datalistId的datalist(下拉列表)

6）新增的min、max、step属性： min/max--输入框所输入的最小/大值；step--输入框规定合法的数字间隔

7）multiple:属性规定允许用户输入到<input>元素的多个值

8）pattern：规定用于验证<input>元素的值的正则表达式

9）placeholder：规定可描述<input>字段预测值的简短的提示信息

10）required：规定必须在提交表单之前填写输入字段

3、新增的form元素

1）datalist：用于为输入提供一个可选的列表，用户可以直接选择列表中的某一选项

2）keygen:密钥对生成器，能够使用户验证更为可靠。用户提交表单时会生成两个键，一个私钥，一个公钥，私钥保存客户端而公钥会发送到服务端

3）output：用于浏览器中显示计算结果或脚本输出，包含完整的开始和结束标签

4、新增的form属性

1）autocomplete：当用于form元素时，则所有从属与该form的元素都具有自动完成的功能；其中有默认不会开启的元素(如密码框），个别元素可自行设置

2）novalidate：用于提交表单时取消整个表单的验证，即关闭对表单内所有元素的有效检查。个别元素可单独设置

三、H5绘图

Canvas元素概述：canvas是H5新增的专门用来绘制图形的元素，通过Canvas技术，用户可以在Web中绘制各种图形。它是一块无色透明的区域，只是一个容器，通过js可在区域上任意绘图

您的浏览器不支持canvas元素(不支持时显示)

</canvas>

绘制步骤：

A 在页面中添加canvas，定义id属性值以便调用

B 使用id寻找到元素 getElementById

C 通过canvas元素的getContext方法获取其上下文，创建Context对象，以获取允许进行绘制的2D环境

var context=c.getContext("2d");

D 使用js脚本来进行绘制context.fillStyle="#f00"; //颜色填充样式 context.fillRect(x,y,width,height); //绘制图形(相对于画布的位置)

1、绘制简单图形：参考：详解

1）直线

beginPath()--定义了一个新的路径绘制动作的开始

moveTo()--为指定点创建了一个新的子路径，这个点就变成了新的上下文点【起点】。

lineTo()--以上下文点为起点，到方法参数中指定的点之间画一条直线【终点】

stroke()--为所画的线条赋予颜色，并使其可见。如果没有特别的指定颜色的话，默认为黑色

相关属性：lineWidth--直线的宽度、strokeStyle--直线的颜色、lineCap属性--直线端点样式： 1) butt(默认) 2) round 3)square

var canvas=document.getElementById('myCanvas');

var context=canvas.getContext("2d"); //获取2d场景

//画直线

context.fillStyle='#ff0000'; //绘制样式

//context.fillRect(50, 50, 50, 50);

context.beginPath(); //开始新的路径绘制

context.moveTo(50, 50); //起点(x,y)

context.lineTo(150, 150); //终点(x,y)

context.lineWidth=10; //线条宽度

context.lineCap='round'; //端点样式

context.strokeStyle='yellow';

context.stroke(); //使绘制的线条可见

2）弧线和曲线

arcTo()--在画布上创建介于两个切线之间的弧/曲线

quadraticCur--绘制二次曲线，每条二次曲线要由上下文点，一个控制点和一个终止点来定义

bezierCurveTo()--绘制贝塞尔曲线使用此方法。每条贝塞尔曲线需要由上下文点、两个控制点和一个终止点来确定。由于贝塞尔曲线有两个控制点，因此贝塞尔曲线可以比二次曲线更加的复杂多变

var canvas=document.getElementById('myCanvas');

var context=canvas.getContext("2d"); //获取2d场景

context.fillStyle='#ff0000'; //绘制样式

//绘制弧线

context.beginPath(); //新的路径

context.moveTo(20,20);

context.lineTo(100,20);

context.arcTo(150,20,150,70,50);

context.lineTo(150,120);

context.closePath();

context.stroke();

3）绘制路径：路径是由多条子路径连接构成的。每条子路径的终止点就将作为新的上下文点。线条的连接样式 1、miter--尖角(默认) 2、round--圆角 3、bevel--平角利用lineJoin属性设定

4）矩形：rect(x,y,width,height) 圆：arc(x, y, radius, startAngle, endAngle, anticlockwise);起始角度0，终止角度2*PI【0顺1逆时针】图形的颜色填充：fillStyle属性，默认黑色，用fill()完成填充

//圆角矩形

context.beginPath();

context.moveTo(250, 100);

context.arcTo(400, 100, 400, 400, 30); //(x1, y1, x2, y2, radius)

context.arcTo(400, 400, 100, 400, 30);

context.arcTo(100, 400, 100, 100, 30);

context.arcTo(100, 100, 400, 100, 30);

context.fillStyle='red';

context.fill();

context.stroke();

//绘制矩形

context.beginPath();

context.rect(150, 150, 40, 40); //(x, y, w, h)

context.fillStyle='blue'; //填充颜色

//阴影样式--放在fill()方法之前

context.shadowColor='black'; //颜色

context.shadowBlur=20; //模糊度 0 颜色最深

context.shadowOffsetX=10; //阴影与图形的水平距离

context.shadowOffsetY=23; //垂直距离

context.globalAlpha=0.3; //绘图的图形透明度0-1

context.fill();

context.stroke();

//绘制圆

context.beginPath();

context.arc(300,300,50,0,2*Math.PI,0); //(x, y, radius, startAngle, endAngle, anticlockwise)

context.fillStyle='red';

context.fill();

context.stroke();

5）阴影为图形添加阴影：shadowColor--阴影颜色 shadowBlur--阴影模糊度 shadowOffsetX/Y--设置或返回阴影与形状的水平距离/垂直距离透明度：globalAlpha属性设置或返回绘图的当前透明值(0-1)

6）线性渐变：1、createLinearGradient()创建canvasGradient对象 var grad=context.createLinearGradient(x1,y1,x2,y2);参数为渐变的起点和终点 2、addColorStop方法定义色标的位置并上色 grad.addColorStop(position,color) 参数为色标的相对位置(偏移量)

径向渐变：1、createRadialGradient()创建对象 var grad=context.createRadialGradient(x1,y1,r1,x2,y2,r2); 两个圆 2、addColorStop方法定义色标的位置并上色 grad.addColorStop(position,color) 参数为色标的相对位置(偏移量)

var canvas=document.getElementById('myCanvas');

var ctx=canvas.getContext("2d");

var clg=ctx.createLinearGradient(50,0, 200, 0); //水平渐变--类似拉一条直线渐变

clg.addColorStop(0, '#ff0000'); //红绿蓝渐变

clg.addColorStop(0.5,'#00ff00');

clg.addColorStop(1,'#0000ff');

ctx.fillStyle=clg;

//ctx.strokeStyle=grad;

ctx.fillRect(10, 10, 200, 200);

var crg=ctx.createRadialGradient(350,100,50, 350, 100,66); //径向渐变--类似拉一条直线从圆心往外渐变

crg.addColorStop(0, '#000000'); //红绿蓝渐变

crg.addColorStop(0.5,'#ffffff');

crg.addColorStop(1,'#0000ff');

ctx.fillStyle=crg;

//ctx.strokeStyle=grad;

ctx.fillRect(230, 10, 200, 200);

7）图案填充：用上下文对象的createPattern()创建一个图案填充对象--context.createPattern(image,type); 参数image为图片对象 type平铺类型为repeat/repeat-x/repeat-y/no-repeat var pattern=context.createPattern(img,type); context.fillStyle=pattern;

2、绘制图像

方法：1、context.drawImage(image, dx, dy[, dw][, dh]); 起止坐标相对于canvas左上角

2、context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh); 对图像实现裁剪之后再放置

3、绘制文本（参考：视频详解）

方法：context.fillText(text,x,y); 参数text是要绘制的文本

设置文本的字体、大小、样式：使用font属性(normal、italic、bold)

文本颜色：fillStyle属性设置

描绘文本边缘：使用strokeText()替代fillText(),同时使用strokeStyle属性替代fillStyle属性

绘制文本对齐：textAlign属性(start/end--从左到右排版，左/右对齐；left/right-- 左/右;center居中对齐

文本度量：measureText()

文本换行：创建一个自定义的函数

4、图形的变换

1）移动坐标空间：translate()将绘图原点横向和纵向的移动指定的距离(x,y),结果表现为整张图像的移动

2）旋转坐标空间：rotate(angle); 参数为旋转的弧度，整个canvas将以坐标原点[由translate()确定的原点为圆心]，进行旋转

3）缩放图形：scale(x,y); 参数为横/纵向的缩放比例，都是浮点数[1.0--不缩放；<1.0缩小；>1.0放大]

4）保存与恢复canvas状态：save()、restore() 实现对坐标变换状态的保存与恢复【最后保存的状态先恢复】

5、图形的组合/裁切（参考：文本填充，图形组合）

1）globalCompositeOperation 属性：设置或返回如何将一个源(新的)图像绘制到目标(已有的)图像上【图片的覆盖】

2）clip() 从原始画布中剪切任意的形状和尺寸：一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内(不能访问画布上的其他区域)，但在裁切之前可通过save()进行保存，然后restore()恢复

四、H5音频和视频

1、播放音频：

方式一

您的浏览器不支持audio元素

</audio> //control显示控制按键

方式二(多种格式,防止不支持)

您的浏览器不支持audio元素

</audio>

2、播放视频：

方式一

您的...

</video>

方式二(类似音频)

相关属性：src、autoplay、duration...

Mahmud

H5知识点

公告