web
日期
学习总结之HTML5剑指前端（建议收藏，图文并茂）
前言
学习《HTML5与CSS3权威指南》这本书很不错，学完之后我颇有感触，觉得web的世界开明了许多。这本书是需要有一定基础的web前端开发工程师。
这本书主要学习HTML5和css3，看看这本书的书名就知道了，首先学习HTML5中新增的语法与标记方法，新增的元素和api。
读者了解内容：
除了HTML5还有css3需要学习，css3中有各种新增的样式和属性。
这本书也要感谢作者以及工作人员。
这本书还有实例，使用HTML5中新增结构元素来构建网页，和使用HTML5+css3来构建web应用程序。
从2010年开始HTML5地推出，受到了世界各大浏览器的热烈支持，在业界很受欢迎。那么你需要了解一下HTML5与之前版本的大致区别吗，需要了解为啥支持HTML5吗，答案是不太需要也能工作。
但是如，一份前端你能敲出代码，但是问题你懂得什么是cookie吗？也许你懂个大概，组长或者高管问你什么是cookie？有时候大部分人都是一头晕，不过，百度查一下就能知道答案。
其实需要了解一下的，关于HTML5
HTML5的出现就连微软也为此下一代的ie9做了标准上的改进，就是为了能够支持html5。
HTML4的代码示例：
用户名：
示例代码：
HTML5的示例：
...
...
...
HTML5的目的
HTML5的出现就是为了能够建立更简单的web程序，让程序员编写更简单的HTML代码，HTML5提供了很多api，新的属性，新的元素等等，这样HTML5就有理由成为受欢迎的了。
在HTML5中代替Cookie的sessionStorage功能与globalStorage功能在ie8里获得了支持。
一个新版本的出现，很多人都会有疑问，担心它会不会产生错误等。不过呢？它还是有它火的理由。
-
兼容性
-
实用性
-
非革命性的发展
HTML5的出现解决了各种问题，这是一次比较强大的版本。
contentEditable属性，designMode属性，hidden属性，spellcheck属性，tabindex属性。
HTML5
内容类型ContentType还是text/html
DOCTYPE声明，在HTML5中的DOCTYPE声明方法如下，不区分大小写：
指定字符编码，HTML5：
代码示例：
checkboxcheckbox1checkbox2checkbox3
代码：
checkbox
checkbox1
checkbox2
checkbox3
HTML5标记示例：
html5
html5
html5
新增元素
p元素，表示页面中的一个内容区块。
article元素，表示页面中的一块与上下文不相关的独立内容。
aside元素，表示article元素的内容之外的，与article元素的内容相关的辅助信息。
header元素，表示页面中一个内容区块或整个页面的标题。
hgroup元素，用于对整个页面或页面中一个内容区块的标题进行组合。
footer元素，表示整个页面或页面中一个内容区块的脚注。
nav元素，表示页面中导航链接的部分。
figure元素，表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。
效果：
web
代码：
web
web
video元素，定义视频。
audio元素，定义音频。
embed元素，用来插入各种多媒体。
mark元素，用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。
progress元素，表示运行中的进程。
time元素，表示日期或时间。
ruby元素，表示ruby注解。
rt元素，表示字符的解释或发音。
rp元素，表示在ruby注解中使用，以定义不支持ruby元素的浏览器所显示的内容。
wbr元素，表示软换行。
canvas元素，表示图形，比如图表和其他图像。
效果：
代码示例：
command元素，表示命令按钮，比如单选按钮，复选框或按钮。
代码：
details元素，表示用户要求得到并且可以得到的细节信息。
html-详情
web
代码：
html-详情
web
datalist元素，表示可选数据的列表
datagrid元素，表示可选数据的列表，它以树形的形式来显示。
keygen元素，表示生产密钥。
output元素，表示不同类型的输出，比如脚本的输出。
source元素，表示用来为媒介元素定义媒介资源。
menu元素，表示菜单列表。
效果：
-
web
-
it
代码：
input新增元素的类型
email表示必须输入E-mail地址的文本输入框。
url表示必须输入url地址的文本输入框。
number表示必须输入数值的文本输入框。
range表示必须输入一定范围内数字值的文本输入框。
Date Pickers
date-选取日，月，年
month-选取月，年
week-选取周和年
time-选取时间，日，月，年
datetime-选取时间，日，月，年
datetime-local-选取时间，日，月，年
html5已不支持frame框架，只支持iframe框架。
表单新增属性
multiple属性允许上传文件时一次上传多个文件。
为input元素，button元素，form元素增加了novalidate属性，该属性取消提交时进行的有关检查，表单可以被无条件地提交。
为ol元素添加reversed，表示列表倒序显示。
meta元素增加charset属性。
menu元素增加了两个新的属性——type与label。
为style元素增加scoped属性，用来规定样式的作用范围。
为script元素增加async属性，它定义脚本是否异步执行。
全局属性
contentEditable属性，功能是允许用户编辑元素中的内容，该元素是可以获得鼠标焦点的元素，而且在点击鼠标后，要向用户提供一个插入符号，提示用户该元素中的内容允许编辑。
除了contentEditable属性外，元素还具有一个isContentEditable属性，当元素可编辑时，该属性为true，当元素不可编辑时，该属性为false。
示例：
- 元素1
designMode属性，表示整个页面是否可编辑。使用JavaScript脚本来指定designMode属性的方法如下所示：document.designMode="on"。
hidden属性，所有的元素都允许使用一个hidden属性。该属性类似于input元素中的hidden元素，是用来不渲染该元素，让元素处于不可见状态。
spellcheck属性，是对用户输入的文本内容进行拼写和语法检查。spellcheck属性是一个布尔值的属性，具有true和false两种值。
tabindex属性，当不断敲击tab键让窗口或页面中的控件获得焦点，对窗口或页面中的所有控件进行遍历的时候，每一个控件的tabindex表示该控件是第几个被访问到的。
HTML5新增
article元素，p元素，nav元素，aside元素，header元素，hgroup元素，footer元素，address元素。
article元素代表文档，页面或应用程序中独立的，完整的，可以独自被外部引用的内容。
article示例：
aside元素用来表示当前页面或文章的附属信息部分。
time元素代表24小时中的某个时刻或某个日期，表示时刻时允许带时差。
pubdate属性是一个可选的，boolean值的属性，用于article元素中的time元素上。
代码：
页面标题
hgroup元素是将标题以及其子标题进行分组的元素。
footer元素可以作为其上层父级内容区块或是一个根区块的脚注。
代码：
内容区块的编排，可以分“显示编排”与“隐式编排”两种方式。
表单与文件
form属性示例
示例代码：
formaction属性
formaction，增加不同的此属性，可以使得点击不同的按钮，将表单提交到不同的页面。
formmethod属性
每个表单内也只有一个method属性来指统一指定提交方法。在HTML5中，可以使用formation属性来对每个表单元素分别指定不同的提交页面，同时也可以使用formmethod属性来对每个表单元素分别指定不同的提交方法。
placeholder是指当文本框处于未输入状态时显示的输入提示，autofocus属性自动获取光标焦点。
autocomplete属性，辅助输入所用的自动完成功能。
input元素，search用于搜索，tel用于电话，url用于输入url格式，email用于输入email格式的文字，number用于数值输入文本框，range只允许输入一段范围内数值的文本框。color颜色选择文本框。file文本选择文本框。
代码：
output元素的追加，定义不同类型的输出。
代码：
required属性，提示用户这个元素中必须输入内容。
pattern属性，要求输入内容符合一定的格式。
step属性控制元素中的值增加或者减少时的步幅。
显式验证，checkValidiity方法，调用该方法，显式地对表单内所有元素内容或单个元素内容进行有效性验证。
cite元素表示作品的标题。
file控件内只允许放置一个文件，multiple属性，file控件内允许一次放置多个文件。
FileList对象为这些file对象的列表，代表用户选择的所有文件。
Blob对象
Blob对象表示二进制原始数据，它提供了一个slice方法。blob对象有两个属性，size属性表示一个blob对象的字节长度，type属性表示blob的mime类型。
blob对象使用示例
var file;
// 得到用户选择的第一个文件
file=document.getElementById("file").files[0];
var size = document.getElementById("size");
// 显示文件字节长度
size.innerHTML=file.size;
var type=document.getElementById("type");
// 显示文件类型
type.innerHTML=file.type;
代码：
FileReader接口主要用来把文件读入内存，并且读取文件中的数据。
if(typeof FileReader == 'undefined'){
alert("web")
}else{
var reader = new FileReader();
}
支持拖动处理的mime的类型为以下几种：
text/plain:文本文字
text/html:HTML文字
text/xml：xml文字
text/uri-list:url列表，每个url为一行。
canvas元素
canvas元素是很重要，可以画出图形与图像。
canvas元素指定id，width，height三个属性。
在body的属性中，使用了onload="draw('canvas');"语句，调用脚本文件中的draw函数进行图形描画。
用canvas元素绘制图形时。
-
取得
canvas元素，用document.getElementById等方法取得canvas对象。 -
取得上下文，进行绘制图形时，需要使用图形上下文，它是一个封装很多绘图功能的对象，需要使用
canvas对象的getContext方法来获得图形上下文。 -
填充和绘制边框，填充为
fill，绘制边框stroke。填充表示填满图形内部，绘制边框是指只绘制图形的边框。 -
设定绘图样式，主要是用于图形的颜色，但不限于图形的颜色。第一，设定填充图形的样式，
fillStyle属性，填充的样式，在该属性中填充的颜色值。第二，设定图形边框的样式，strokeStyle属性，图形边框的样式，在该属性中填入边框的颜色值。 -
指定线宽，使用图形上下文对象的
lineWidth属性设置图形边框的宽度。在绘制图形的时候，任何直线都可以通过lineWidth属性来指定直线的宽度。 -
指定颜色值，填充颜色和边框的颜色分别通过
fillStyle属性和strokeStyle属性。（rgb（红，绿，蓝）或rgba（红，绿，蓝，通明度））。 -
绘制矩形，使用
fillRect方法和strokeRect方法来填充矩形和绘制矩形边框。
context.fillRect(x,y,width,height)context.strokeRect(x,y,width,height)
坐标原点为canvas画布的最左上角
代码示例：
clearRect方法，该方法将擦除指定的矩形区域中的图形，让矩形区域中的颜色全部变为透明。
context.clearRect(x,y,width,height)
代码：
1
图形绘制：
-
使用图形上下文对象的
beginPath方法：context.beginPath()，这个方法不使用参数。调用这个方法，开始路径的创建。 -
context.arc(x,y,radius,startAngle,endAngle,anticlockwise)创建圆形路径。
radius为原型半径，startAngle为开始角度，endAngle为结束角度，anticlockwise为是否按顺时针方向进行绘制。
arc方法可以用来绘制圆形，和绘制圆弧，开始角度与结束角度决定了弧度，anticlockwise参数为布尔值的参数。true按顺时绘制，false按逆时针方向绘制。
-
关闭路径，使用图形上下文对象的
closePath方法将路径关闭。context.closePath()，这步操作只是路径创建完成而已，并没有绘制任何图形。 -
绘制样式，
context.fillStyle='rgba(255,0,0,0.25)';
moveTo和lineTo
moveTo方法的作用是将光标移动到指定坐标点，绘制直线的时候以这个坐标点为起点。moveTo(x,y)，x为横坐标，y为纵坐标。
lineTo方法在moveTo方法中指定的直线起点与参数中指定的直线终点绘制一条直线。
lineTo(x,y)，x表示直线终点的横坐标，y为直线终点的纵坐标。
贝济埃曲线
贝济埃曲线绘制使用bezierCurveTo方法
该方法的定义：
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
拥有6个参数。绘制贝济埃曲线需要两个控制点，cp1,cp2，x,y分别为曲线终点的横纵坐标。
绘制贝济埃曲线示例：
效果
代码：
1
使用quadraticCureTo方法绘制二次样条曲线。context.quadraticCurveTo(in float cpx, in float cpy,in float x,in float y)。
二次样条曲线比绘制贝济埃曲线容易绘制，二次样条曲线需要两个控制点，贝济埃曲线只需要一个控制点。
绘制渐变图形
绘制线性渐变
fillStyle方法可以填充颜色外，还可以指定填充的对象。
渐变：指填充时从一种是颜色慢慢过渡到另外一种颜色。
两点之间的线性渐变
context.createLinearGradient(xStart, yStart, xEnd, yEnd);
使用四个参数。
使用这个方法创建了一个使用两个坐标点的LinearGradient对象。使用addColorStop方法进行设定渐变的颜色。
context.addColorStop(offset, color);
offset的值是一个范围在0到1之间的浮点值，渐变起始点的偏移量为0，结束点为1。它为所设定的颜色离开渐变起始点的偏移量。
渐变，需要至少使用两次addColorStop方法以追加两个颜色。
HTML5 canvas fillRect() 方法
绘制 150*100 像素的已填充矩形：
fillRect() 方法绘制“已填色”的矩形。默认的填充颜色是黑色。
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(20,20,150,100);
JavaScript 语法：
context.fillRect(x,y,width,height);
参数值
| 参数 | 描述 |
|---|---|
| x | 矩形左上角的 x 坐标 |
| y | 矩形左上角的 y 坐标 |
| width | 矩形的宽度，以像素计 |
| height | 矩形的高度，以像素计 |
HTML5 canvas createLinearGradient() 方法
定义从黑到白的渐变（从左向右），作为矩形的填充样式：
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
createLinearGradient() 方法创建线性的渐变对象。
JavaScript 语法：
context.createLinearGradient(x0,y0,x1,y1);
参数值
| 参数 | 描述 |
|---|---|
| x0 | 渐变开始点的 x 坐标 |
| y0 | 渐变开始点的 y 坐标 |
| x1 | 渐变结束点的 x 坐标 |
| y1 | 渐变结束点的 y 坐标 |
定义用蓝色填充的矩形：
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#0000ff";
ctx.fillRect(20,20,150,100);
渐变效果：
代码：
1
绘制径向渐变
径向渐变：指沿着圆形的半径向外进行扩散的渐变方式。
使用图形上下文对象的createRadiaGradient方法绘制。
context.createRadiaGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd);
需要使用6个参数。
| 参数 | 描述 |
|---|---|
| xStart | 渐变开始圆的圆心横坐标 |
| yStart | 渐变开始圆的圆心纵坐标 |
| radiusStart | 开始圆的半径 |
| xEnd | 渐变结束圆的圆心横坐标 |
| yEnd | 渐变结束原型纵坐标 |
| radiusEnd | 结束圆的半径 |
设定颜色也是使用addColorStop方法。同理的0到1之间的浮点数作为渐变转折点的偏移量。
绘制径向渐变效果：
使用createRadialGradient方法，使用addColorStop方法：
HTML5 canvas beginPath() 方法
在画布上绘制两条路径；红色和蓝色：
定义和用法
beginPath() 方法开始一条路径，或重置当前的路径。
开始一条路径，移动到位置 0,0。创建到达位置 300,150 的一条线：
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineWidth="5";//设置线段厚度的属性
ctx.strokeStyle="red"; // 红色路径
ctx.moveTo(0,75);
ctx.lineTo(250,75);
ctx.stroke(); // 进行绘制
ctx.beginPath();
ctx.strokeStyle="blue"; // 蓝色路径
ctx.moveTo(50,0);
ctx.lineTo(150,130);
ctx.stroke(); // 进行绘制
复制代码
绘制径向渐变效果：
代码：（注意单词拼写）
1
绘制变形图形
坐标变换
变形：使用Canvas API的坐标轴变换处理功能可以实现。
绘制图形，默认情况下，Canvas画布的最左上角对应的是坐标轴的原点。即为（0，0）。
对坐标进行处理，就可以实现图形的变形。
三种方式：
-
平移
-
扩大
-
旋转
平移：使用图形上下文对象的translate方法移动坐标轴原点。
方法：context.translate(x,y)，x,y为移动多少个单位。
扩大：使用图形上下文对象的scale方法将图形放大。
方法：context.scale(x,y)，x,y为该方向上放大倍数。
旋转：使用图形上下文对象的rotate方法将图形进行旋转。
方法：context.rotate(angle)，angle为旋转的角度，旋转为顺时针方向，逆时针需要将参数设置为负数。
坐标变换示例：
代码：
1
对使用路径绘制出来的图像进行变形
学习translate,scale,rotate方法。
效果：将坐标变换和路径结合使用
代码：
1
矩阵变换
利用矩阵变换实现的变形技术
使用图形上下文对象的transforms方法修改变换矩阵
context.transform(m11, m12, m21, m22, dx, dy)
| 参数 | 描述 |
|---|---|
| dx | 将坐标原点在x轴上向右移动x个单位 |
| dy | 将坐标原点在y轴上向下移动y个单位 |
矩阵方法需要重新找文档进行深入学习。之前的图形变形提到的三个方法，实际上是隐式地修改了变换矩阵。
下面可以使用transform方法进行代替：translate(x,y),scale(x,y),rotate(angle)。
用
transform方法实现变形的示例
代码：
1
使用setTransform方法：
context.setTransform(m11, m12, m21, m22, dx, dy)
绘制变形图形的示例：
HTML 5 canvas strokeStyle 属性
绘制一个矩形。请用蓝色的笔触颜色：
strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeStyle="#0000ff";
ctx.strokeRect(20,20,150,100);
绘制一个矩形。使用渐变笔触：
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 用渐变进行填充
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);
HTML5 canvas strokeRect() 方法
绘制 150*100 像素的矩形：
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(20,20,150,100);
效果：
代码：
1
在h5中，只要使用图形上下文对象的globalCompositeOperation属性就能决定图形的组合方式：
context.globalCompositeOperation=type
type的值：
-
source-over默认值，表示新图形覆盖在原有的图形之上。 -
destination-over，表示在原有图形之下绘制新图形。 -
source-in新图形与原有图形作in运算，只显示新图形中与原有图形相重叠的部分，新图形与原有图形的其他部分均变成透明。 -
destination-in，原有图形与新图形作in运算，只显示原有图形中与新图形重叠的部分，新图形与原有图形的其他部分均变成透明。 -
source-out新图形与原有图形作out运算，只显示新图形中与原有图形不重叠的部分，新图形与原有图形的其他部分均变成透明。 -
destination-out原有图形与新图形作out运算，只显示原有图形中与新图形不重叠的部分，新图形与原有图形的其他部分均变成透明。 -
source-atop只绘制新图形中与原有图形重叠的部分与未重叠覆盖的原有图形，新图形的其他部分变成透明。 -
destination-atop只绘制原有图形中被新图形重叠覆盖的部分与新图形的其他部分，原有图形中的其他部分变成透明，不绘制新图形中与原有图形相重叠的部分。 -
lighter原有图形与新图形均绘制，重叠部分做加色处理。 -
xor只绘制新图形中与原有图形不重叠的部分，重叠部分变成透明。 -
copy只绘制新图形，原有图形中未与新图形重叠的部分变成透明。
图形组合示例效果：
代码：
1
给图形绘制阴影
利用图形上下文对象的属性：
-
shadowOffsetX-阴影的横向位移量 -
shadowOffsetY-阴影的纵向位移量 -
shadowColor阴影的颜色 -
shadowBlur阴影的模糊范围
绘制图像
使用drawImage方法，绘制图像：
-
context.drawImage(image,x,y) -
context.drawImage(image,x,y,w,h); -
context.drawImage(image,sx,sy,sh,dx,dy,dw,dh)
平铺效果
createPattern方法：
context.createPattern(image,type)
| 参数 | 描述 |
|---|---|
| image | 要平铺的图像 |
| type | 参数的值no-repeat，repeat-x，repeat-y，repeat |
-
no-repeat不平铺 -
repeat-x橫方向平铺 -
repeat-y纵方向平铺 -
repeat全方向平铺
像素处理
使用图形上下文对象的getImageData方法来获取图像中的像素：
var imagedata = context.getImageData(sx,sy,sw,sh)
在HTML5中：绘制文字
绘制文字
使用fillText方法或者strokeText方法：
fillText方法用来填充方式绘制字符串：
void fillText(text,x,y,[maxWidth]);
strokeText方法用轮廓方式绘制字符串：
void stroke Text(text, x, y, [maxWidth]);
使用measureText方法来得到文字的宽度：
metrics = context.measureText(text)
保存与恢复状态
使用Canvas API中的save和restore两个方法。
保存文件，在Canvas API中保存文件的原理实际上是把当前的绘画状态输出到一个data URL地址所指向的数据中的过程。为data URL，是目前大多数浏览器能够识别的一种base64位编码的URL。
主要用于小型的，可以在网页中嵌入的，不需要从外部文件嵌入的数据。
使用toDataURL方法把绘画状态输出到一个data URL中，然后重新装载。
toDataURL的使用方法：
canvas.toDataURL(type)
后记
阅读文章：
《HTML5与CSS3权威指南》
-
拉你进技术群，长期交流学习...
-
欢迎关注，认真学前端，做个有专业的技术人...
扫码关注公众号，订阅更多精彩内容。
