一、html5页面结构
二、html5标记
1.
2.
3.
4.,可以把图像按区域进行超链接。
三、html5结构化语义元素
1.itemscope,布尔型的属性,用于创建一个条目。
2.itemprop,用于给条目或子条目增加一个属性。
3.itemtype,用于定义自定义词汇表。
四、表单
1.页面的任何地方都可以声明表单控件,然后通过元素的form属性就可以把元素和表单关联起来。
2.使用email类型的输入,
Email输入类型的有效属性:
11 required:指明元素是否为必填;
12 size:该元素代表的控件中显示出来的字符数;
13 placeholder:元素中显示的文字(一般用作提示信息);
14 multiple:对于一个元素,是否可以指定多个电子邮件地址或文件值;
15 value:包含一个电子邮件地址或者地址列表。
3.使用url输入类型,。(一般浏览器还都不支持)
4.数字微调控件,
Number输入类型的有效属性:
5.滑动框控件,
有效属性同上。
6.发送多个文件
7.输入的自动完成
8.利用正则表达式自定义输入类型,。(不是所有浏览器都支持)
9.设置输入框的占位符文本,。(当输入域里面填写了内容时,该文本消失,没有时自动显示出来)
10.日期和时间控件
五、html5媒体元素:audio和video
1.页面嵌入视频。(由于现在每个浏览器支持的视频格式都不一样,有时会因为视频格式的原因显示不出来)
2.为视频提供交互,
3.预加载视频
值 为:①auto,页面加载后立即开始下载视频文件;
②none,不下载视频文件;
③metadata,获取资源的元数据。
4.音频,
属性:
六、html5绘图API
1.如何使用
①
②javascript代码:
//访问
var canvas=document.getElementById("myCanvas");
//获得
var context = canvas.getContext("2d");
2.使用路径和坐标
(1)
(2)绘制过程:
①调用beginPath()方法开始路径;
②用moveTo(x,y)方法定义路径起点;
③用API方法绘制图形;
④调用closePath()方法关闭路径;
(3)图形对应的API
①直线:lineTo(x,y);
②贝赛尔曲线:bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y,endPointX, endPointY);
③二次方曲线:quadraticCurveTo(controlPointX, controlPointY, endPointX, endPointY);
④圆:arc(centerX,centerY,radius,startAngle,endAngle,counter-clockwise);
centerX:圆心横坐标;
centerY:圆心纵坐标;
radius:半径;
start/end Angle:开始/结束 圆的角度;
counter-clockwise:true时是逆时针,false是顺时针。
(4)设置形状样式
①线条链接样式:lineJoin,miter(尖角)、round(圆角)、bevel(斜角)。
②线条宽度样式:lineWidth,默认值是1。
③线条结束样式:lineCap,butt(对接)、round(圆)、square(方)。
3.绘制矩形和圆形的方法
(1)绘制矩形的方法:
①rect(x,y,width,height):添加一个普通矩形
②fillRect(x,y,width,height):绘制一个填充的矩形
③strokeRect(x,y,width,height):绘制一个有线条的矩形
④clearRect(x,y,width,height):删除一个矩形。
(2)画圆的方法:
arc(centerX,centerY,radius,startAngle,endAngle,counter-clockwise),此方法后还需要调用stroke()或者fill()方法才能显示。
七、html5 Canvas
1.
①缩小/放大,scale(scaleX,scaleY);基数为1;
②移动
③旋转
④变换矩阵,transform(a,b,c,d,e,f);
2.应用阴影和模糊
①shadowColor:阴影颜色;
②shadowOffsetX:设置或者返回水平阴影偏移量;
③shadowOffsetY:设置或者返回垂直阴影偏移量;
④shadowBlur:设置或者返回模糊级别,值必须大于1;