H5
来源:互联网 发布:淘宝银饰品店铺介绍 编辑:程序博客网 时间:2024/05/01 05:12
一、总体变化
1、H5文档结构
<!DOCTYPE html><html> <head> <title> 这是标题 </title> <meta charset='utf-8' /> </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:用于对元素进行组合。多用于图片与图片 描述组合
h5
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可能的值
<input list='browers'><datalist id='browers'> <option value='ie'> <option value='chrome'>...</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地址的字段
<form action="#" method="get"><input type='email' name='user_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:用于浏览器中显示计算结果或脚本输出,包含完整的开始和结束标签
<output name="">text</output>
4、新增的form属性
1)autocomplete:当用于form元素时,则所有从属与该form的元素都具有自动完成的功能;其中有默认不会开启的元素(如密码框),个别元素可自行设置
2)novalidate:用于提交表单时取消整个表单的验证,即关闭对表单内所有元素的有效检查。个别元素可单独设置
三、H5绘图
Canvas元素概述:canvas是H5新增的专门用来绘制图形的元素,通过Canvas技术,用户可以在Web中绘制各种图形。它是一块无色透明的区域,只是一个容器,通过js可在 区域上任意绘图
<canvas id="myCanvas" width="233" height="300">您的浏览器不支持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-1context.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 src='horse.mp3' controls='controls'> 您的浏览器不支持audio元素</audio> //control显示控制按键
方式二(多种格式,防止不支持)
<audio controls='controls'> <source src=' .ogg' type='audio/ogg'><source src=' .mps' type='audio/mpeg'>您的浏览器不支持audio元素 </audio>
2、播放视频:
方式一
<video src='movie.ogg' width='230' height='230' controls>您的... </video>
方式二(类似音频)
相关属性:src、autoplay、duration...相关方法:
canPlayType() 检测浏览器是否能播放指定的音频/视频类型,返回值为 probably/maybe/""--浏览器最可能/也许/不支持 该音频/视频类型
load() 重新加载音频/视频元素(更改来源或其他设置后使用)
pause() 停止、暂停当前播放的音频或视频
play() 开始播放
相关事件:canplay、loadeddata、abort...
- h5
- h5
- h5
- H5
- H5
- h5
- h5
- h5
- h5
- H5
- H5
- H5仿吴亦凡参军H5
- h5页面
- H5 start
- H5 localStorage
- h5画圆
- Android H5
- H5规范
- PAT-A 1008. Elevator (20)
- Shader相关Mask裁切UI粒子特效或者3D模型
- git命令图
- 语义网简介(三)—RDF与RDF Schema
- 通讯录动态版本
- H5
- poj 2533 o(nlgn)做法
- boost分类
- 2.2 Unity面向组件
- SQLSERVER游标及循环语句
- 图集分配透明与不透明打包不到一起的错误
- 图集与使用
- 第六章 Realm及相关对象(二) AuthenticationToken
- 2017ROS暑期学校笔记