html5基础
h5的布局标签：
比如 article、footer、header、nav、section aside
表单控件：calendar、date、time、email、url、search
表单结构更自由 XHTML中需要放在form之中的诸如inpu/button/s人员配置:elect/textarea等标签元素，在HTML5中完全可以放在页面任何位置，然后通过新增的form属性指向元素所属表单的ID值，即可关联起来。 <form id="myform"></form> <input type="text" form="myform" value="">
email输入类型 说明：此类型要求输入格式正确的email地址,否则浏览器是不允许提交的,并会有一个错误信息提示.此类型必须指定name值,否则无效果. 格式：<input type=email name=email> url输入类型 说明：上面代码展示的文本域要求输入格式正确的URL地址,Opera中会自动在开始处添加http://. 格式：<input type=url>
日期时间相关输入类型 说明：这一系列是很酷的一个类型,完全解决了烦琐的JS日历控件问题.但目前MS只有Opera/Chrome新版本支持,且展示效果也不一样.. 格式： <input type=date> <inputtype=time> <input type=month> <input type=week> <input type=datetime> <input type=datetime-local/>
number输入类型 说明：输入一个数字字符,若未输入则会抛出一个错误 格式： <input type="number" max=10 min=0 step=1 value=5/> 属性 值 描述 max number 规定允许的最大值 min number 规定允许的最小值 step number 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等） value number 规定默认值
range滑块类型 说明：特定值的范围的数值，以滑动条显示 格式： <input type="range" max=10 min=0 step=1 value=5/> 属性 值 描述 max number 规定允许的最大值 min number 规定允许的最小值 step number 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等） value number 规定默认值
search输入类型 说明：此类型表示输入的将是一个搜索关键字,通过results=s可显示一个搜索小图标。 格式：<input type=search> tel输入类型 说明：此此类型要求输入一个电话号码,但实际上它并没有特殊的验证,与text类型没什么区别. 格式： <input type=tel>
color输入类型 说明：此类型表单,可让用户通过颜色选择器选择一个颜色值,并反馈到该控件的value值中 格式： <input type=color>
placeholder属性 说明：这是一个很实用的属性,免去了用JS去实现点击清除表单初始值.浏览器支持也还不错,MS除了Firefox,其他标准浏览器都能很好的支持. 格式： <INPUT id=placeholder placeholder="点击我会以清除">
placeholder属性 说明：这是一个很实用的属性,免去了用JS去实现点击清除表单初始值.浏览器支持也还不错,MS除了Firefox,其他标准浏览器都能很好的支持. 格式： <INPUT id=placeholder placeholder="点击我会以清除">
required/pattern属性 说明：这是html5新加的验证属性。 required类型，值不能为空，并会有一个提示。有两种写法，这个很有用。并且可以用于textarea以及hidden/image/submit类型 pattern类型为正则验证，可以完成各种复杂的验证。这两种类型必须指定name值，否则无效果。 格式： <input id=placeholder name=require required> <input id=placeholder name=require1 required="required"> <input name=require2 pattern="^[1-9]\d{5}$">
autofocus自动聚焦属性 说明：自动聚焦属性,可在页面加载时聚焦到一个表单控件,类似于js的focus() 格式： <input autofocus="autofocus"> 4.autocomplete自动完成属性 说明：此属性是为表单提供自动完成功能。如果该属性为打开状态可很好地自动完成。一般来说，此属性必须启动浏览器的自动完成功能。 格式： <input autocomplete="on/off">
novalidate 属性 说明：novalidate 属性规定在提交表单时不应该验证 form 或 input 域。 格式： <form action="demo_form.asp" method="get" novalidate="true"> 6.multiple 属性 说明：multiple 属性规定输入域中可选择多个.multiple 属性适用于以下类型的 <input> 标签：email 和 file。 格式： <input type="file" name="img" multiple="multiple" />
表单重写属性 说明：表单重写属性（form override attributes）允许您重写 form 元素的某些属性设定。表单重写属性适用于以下类型的 <input> 标签：submit 表单重写属性有： formaction - 重写表单的 action 属性 formenctype - 重写表单的 enctype 属性 formmethod - 重写表单的 method 属性 formnovalidate - 重写表单的 novalidate 属性 formtarget - 重写表单的 target 属性 list属性 说明：和datalist配合使用,见(第二课课件)
placeholder文本风格定义 :-moz-placeholder { color: blue; } ::-webkit-input-placeholder { color: blue; }
文本框样式 *:focus {outline: none;} 使用css的伪类选择符:required
使用css的伪类选择符:required :required 有验证规则的表单样式 :required:valid 填写正确的样式 :required:invalid 填写错误的样式
***********************************
2.svg
SVG 使用 XML 编写 他其实就是一个文本文件，交给浏览器解释执行 实例 <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> </svg>
第一行包含了 XML 声明。请注意 standalone 属性！该属性规定此 SVG 文件是否是“独立的”，或含有对外部文件的引用。 standalone="no" 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件。 第二和第三行引用了这个外部的 SVG DTD。该 DTD 位于 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”。该 DTD 位于 W3C，含有所有允许的 SVG 元素。 SVG 代码以 <svg> 元素开始，包括开启标签 <svg> 和关闭标签 </svg> 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。 SVG 的 <circle> 用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性，那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。 stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 2px 宽，黑边框。 fill 属性设置形状内的颜色。我们把填充颜色设置为红色。 关闭标签的作用是关闭 SVG 元素和文档本身。
使用 <embed> 标签 <embed src="rect.svg" width="300" height="100" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" /> 使用 <object> 标签 <object data="rect.svg" width="300" height="100" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install/" /> 使用 <iframe> 标签 <iframe src="rect.svg" width="300" height="100"> </iframe> <iframe> 标签可工作在大部分的浏览器中。
把 SVG 直接嵌入 HTML 页面 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> </svg>
矩形 <rect x="20" y="20" width="250" height="250" style="fill:blue;stroke:pink;stroke-width:5; fill-opacity:0.1;stroke-opacity:0.9"/> 圆形 <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> 线条 <line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/> 多边形 <polygon points="220,100 ,300,210 ,170,250" style="fill:#cccccc;stroke:#000000;stroke-width:1"/>
先获取页面元素 doc=document.getElementById("doc"); 获取svg对象 svg=one.getSVGDocument(); 获取svg文档对象 svgDoc=svg.documentElement; 获取svg文档对象节点 circle=svgDoc.getElementsByTagName("circle")[0];
****************************************
3.canvas
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制像。 画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
SVG SVG 是一种使用 XML 描述 2D 图形的语言。 SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。 在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。 Canvas 通过 JavaScript 来绘制 2D 图形。 Canvas 是逐像素进行渲染的。 在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
比较 canvas 依赖分辨率 不支持事件处理器 弱的文本渲染能力 能够以 .png 或 .jpg 格式保存结果图像 最适合图像密集型的游戏，其中的许多对象会被频繁重绘 SVG 不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序（比如谷歌地图） 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快） 不适合游戏应用
标签属性 width height 浏览器支持情况 替代内容 <canvas id="myCanvas">替代内容</canvas>
矩形API rect() 创建矩形 fillRect() 绘制“被填充”的矩形 strokeRect() 绘制矩形（无填充）
参数 描述
x 矩形左上角的 x 坐标
y 矩形左上角的 y 坐标
width 矩形的宽度，以像素计
height 矩形的高度，以像素计
颜色、样式和阴影方法
createLinearGradient() 创建线性渐变（用在画布内容上）
createPattern() 在指定的方向上重复指定的元素
createRadialGradient() 创建放射状/环形的渐变（用在画布内容上）
addColorStop() 规定渐变对象中的颜色和停止位置
颜色、样式和阴影属性
属性 描述
fillStyle 设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle 设置或返回用于笔触的颜色、渐变或模式
shadowColor 设置或返回用于阴影的颜色
shadowBlur 设置或返回用于阴影的模糊级别
shadowOffsetX 设置或返回阴影距形状的水平距离
shadowOffsetY 设置或返回阴影距形状的垂直距离
**文字****************************
font 设置或返回文本内容的当前字体属性
textAlign 设置或返回文本内容的当前对齐方式(水平对齐)
start：默认。文本在指定的位置开始。
end：文本在指定的位置结束。
center：文本的中心被放置在指定的位置。
left：文本左对齐。
right：文本右对齐。
textBaseline 设置或返回在绘制文本时的当前文本基线(垂直对齐)
alphabetic：默认。文本基线是普通的字母基线。
top：文本基线是 em 方框的顶端。
hanging：文本基线是悬挂基线
middle：文本基线是 em 方框的正中。
ideographic：文本基线是表意基线。
bottom：文本基线是 em 方框的底端。
fillText(text,x,y,maxWidth) 在画布上绘制“被填充的”文本 text：规定在画布上输出的文本 x:开始绘制文本的 x 坐标位置（相对于画布） y:开始绘制文本的 y 坐标位置（相对于画布） maxWidth:可选。允许的最大文本宽度，以像素计
strokeText(text,x,y,maxWidth) 在画布上绘制文本（无填充）
text：规定在画布上输出的文本
x:开始绘制文本的 x 坐标位置（相对于画布）
y:开始绘制文本的 y 坐标位置（相对于画布）
maxWidth:可选。允许的最大文本宽度，以像素计
measureText(text) 返回包含指定文本宽度的对象
text:要测量的文本
|
方法 |
描述 |
|
drawImage() |
向画布上绘制图像、画布或视频 |
drawImage() 方法在画布上绘制图像、画布或视频。 drawImage() 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸
|
img |
规定要使用的图像、画布或视频。 |
|
sx |
可选。开始剪切的 x 坐标位置。 |
|
sy |
可选。开始剪切的 y 坐标位置。 |
|
swidth |
可选。被剪切图像的宽度。 |
|
sheight |
可选。被剪切图像的高度。 |
|
x |
在画布上放置图像的 x 坐标位置。 |
|
y |
在画布上放置图像的 y 坐标位置。 |
|
width |
可选。要使用的图像的 |
globalAlpha 设置或返回绘图的当前 alpha 或透明值
globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上
globalAlpha 属性设置或返回绘图的当前透明值（alpha 或 transparency）。 globalAlpha 属性值必须是介于 0.0（完全透明） 与 1.0（不透明） 之间的数字
|
number |
透明值。必须介于 0.0（完全透明） 与 1.0（不透明） 之间。 |
globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。 源图像 = 您打算放置到画布上的绘图。 目标图像 = 您已经放置在画布上的绘图。
source-over 默认。在目标图像上显示源图像。
source-atop 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
source-in 在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。
source-out 在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。
destination-over 在源图像上方显示目标图像。
destination-atop 在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。
destination-in 在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。
destination-out 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
lighter 显示源图像 + 目标图像。
copy 显示源图像。忽略目标图像。
source-over 使用异或操作对源图像与目标图像进行组合。
**********
canvas路径
fill() 填充当前绘图（路径）
stroke() 绘制已定义的路径
beginPath() 起始一条路径，或重置当前路径
moveTo() 把路径移动到画布中的指定点，不创建线条
closePath() 创建从当前点回到起始点的路径
lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条
clip() 从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo() 创建二次贝塞尔曲线
bezierCurveTo() 创建三次方贝塞尔曲线
arc() 创建弧/曲线（用于创建圆形或部分圆）
arcTo() 创建两切线之间的弧/曲线
isPointInPath() 如果指定的点位于当前路径中，则返回 true，否则返回 false
rect(x,y,w,h) stroke() 绘制路径 fill() 填充图形
moveTo(x,y) 开始绘制一条直线，指定线条的起点 lineTo(x1,y1) 指定直线要到达的位置 stroke() 绘制路径
|
lineCap |
设置或返回线条的结束端点样式 butt:默认。向线条的每个末端添加平直的边缘 round:向线条的每个末端添加圆形线帽。 square:向线条的每个末端添加正方形线帽 |
|
lineJoin |
设置或返回两条线相交时，所创建的拐角类型 miter:默认。创建尖角;bevel:创建斜角。 round:创建圆角。 |
|
lineWidth |
设置或返回当前的线条宽度 number:当前线条的宽度，以像素计 |
|
miterLimit |
设置或返回最大斜接长度 |
beginPath() 开始一条路径，或重置当前的路径。 closePath() 创建从当前点到开始点的路径，关闭当前的绘图路径 注意: 如果画完前面的路径没有重新指定beginPath，那么画第其他路径的时候会将前面最近指定的beginPath后的全部路径重新绘制 每次调用context.fill（）的时候会自动把当次绘制的路径的开始点和结束点相连，接着填充封闭的部分
quadraticCurveTo(cpx,cpy,x,y) 通过使用表示二次贝塞尔曲线的指定控制点，向当前路径添加一个点 示例: 开始点：moveTo(20,20) 控制点：quadraticCurveTo(20,100,200,20) 结束点：quadraticCurveTo(20,100,200,20)
cpx 贝塞尔控制点的 x 坐标
cpy 贝塞尔控制点的 y 坐标
x 结束点的 x 坐标
y 结束点的 y 坐标
bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) 通过使用表示三次贝塞尔曲线的指定控制点，向当前路径添加一个点 示例: 开始点：moveTo(20,20) 控制点 1：bezierCurveTo(20,100,200,100,200,20) 控制点 2：bezierCurveTo(20,100,200,100,200,20) 结束点：bezierCurveTo(20,100,200,100,200,20)
cp1x 第一个贝塞尔控制点的 x 坐标
cp1y 第一个贝塞尔控制点的 y 坐标
cp2x 第二个贝塞尔控制点的 x 坐标
cp2y 第二个贝塞尔控制点的 y 坐标
x 结束点的 x 坐标
y 结束点的 y 坐标
arc(x,y,r,sAngle,eAngle,counterclockwise); 创建弧/曲线（用于创建圆或部分圆）
x 圆的中心的 x 坐标。
y 圆的中心的 y 坐标。
r 圆的半径。
sAngle 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle 结束角，以弧度计。
counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
arcTo(x1,y1,x2,y2,r) 方法在画布上创建介于两个切线之间的弧/曲线.
x1 弧的起点的 x 坐标
y1 弧的起点的 y 坐标
x2 弧的终点的 x 坐标
y2 弧的终点的 y 坐标
r 弧的半径
clip() 方法从原始画布中剪切任意形状和尺寸 提示：一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。您也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复 使用步骤： 使用.save保证裁切前的绘图状态； 通过context.rect()来确定要裁切的区域在位置； 通过context.clip()来执行裁切动作； 在Canvas上画图，只有在裁切区域的图形才能显示出来； 使用context.restore()再恢复到裁切前的状态
isPointInPath(x,y) 方法返回 true，说明指定的点位于当前路径中；否则返回 false
**********************************************
HTML5 提供了四种在客户端存储数据的新方法，即 localStorage 、sessionStorage、globalStorage、Web Sql Database。 前面三个适用于存储较少的数据,而Web Sql Database适用于存储大型的，复杂的数据，我习惯把前面的三个称之为小存储。
存储量大 web存储比cookie存储量更大，在数据量上可以达到5M，而cookie最多也就4KB，或者20个key/value对。 安全性高 cookie在向后台发送每一个http请求的时候都会出现在http头部，而html5的本地存储则不会，某种程度上讲是节约了一定的带宽，缩短了请求、响应的时间
localStorage ： localStorage 没有时间限制的数据存储，也就是说，localStorage是永远不会过期的，除非主动删除数据。数据可跨越多个窗口，无视当前会话，在同一个域中被共同访问、使用。 sessionStorage 针对一个 session 的数据存储，任何一个页面存储的信息在窗口中同一域下的页面都可以访问它存储的数据。每个窗口的值都是独立的，它的数据会因窗口的关闭而丢失，不同窗口间的sessionStorage是不可以共享的。 globalStorage 和sessionStorage一样，域中任何一个页面存储的信息都能被所有的页面共享。目前只有FF支持，且只支持当前域下的globalStorage存储。
localStorage ： localStorage /sessionStorage都有相同的Api 如 localStorage.length 获得storage中的个数 localStorage .key(n) 获得storage中第n个键值对的键 localStorage.key = value localStorage.setItem(key, value) 添加 localStorage.getItem(key)获取 localStorage.removeItem(key) 移除 localStorage.clear() 清除
*************************************************************************
html5多媒体组件指的是video(视频)组件和audio(音频)组件。HTML5多媒体组件可以在不借助诸如Flash Player等第三方插件的情况下，直接在你的网页上嵌入多媒体组件。浏览器提供原生支持视频的新能力使得网页开发人员更易于在不依赖于外置插件有效性的情况下，在他们的网站上添加视频组件。由于苹果公司现阶段在iPhone和iPad上使用的Flash技术的局限性，HTML5多媒体组件的能力就显得尤为重要了。
autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
poster 图片地址 置显示默认图片，而不是视频的第一帧。
src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。
音频文件提供至少两种不同的解码器才能覆盖所有支持HTML5的浏览器。 如同对视频元素的处理一样，你需要使用source元素来实现该功能。 一个audio元素能包含多种source元素，因此你能为你的音频提供多种格式支持。
|
media |
media query |
定义媒介资源的类型，供浏览器决定是否下载。 |
|
src |
url |
媒介的 URL。 |
|
type |
numeric value |
定义播放器在音频流中的什么位置开始播放。默认，音频从开头播放。
|
|
addTextTrack() |
向音频/视频添加新的文本轨道(没有浏览器支持) |
|
canPlayType() |
检测浏览器是否能播放指定的音频/视频类型 |
|
load() |
重新加载音频/视频元素 |
|
play() |
开始播放音频/视频 |
|
requestFullscreen() |
全屏。 webkit内核:webkitRequestFullScreen() moz内核:mozRequestFullScreen()
|
|
document.exitFullscreen |
退出全屏。 webkit内核:webkitCancelFullScreen() moz内核:mozCancelFullScreen() |
|
pause() |
暂停当前播放的音频<
|
