HTML5基础

一、HTML5相关

前端

  • 从静态走向动态：CGI（Common Gateway Interface）出现，将数据渲染到网页模板，实现网页的动态生成。后续PHP、JSP、ASP等服务端语言出现。
  • 从后端走向前端：模板引擎，Ajax通过XMLHTTPRequest实现无刷新的数据交互，前端路由实现无刷新的页面跳转。
  • 从前端走向全端：09年Node.js问世，基于Google V8引擎，可以创建轻量级的Web服务器。小程序、快应用等问世。

名词

XML可拓展标记语言
HTML 超文本标记语言
XHTML 可拓展超文本标记语言
DOM 文档对象模型，浏览器内部模型
CSS 层叠样式表(Cascading Style Sheets)

HTML5 =标记+JavaScript API+CSS
默认为JavaScript+CSS 

1
2
3
4
5
6
	nmp install nproxy -g
```  
5、http服务器 http-server，是个零配置的HTTP服务器，安装命令：

``` bash
	nmp install http-server -g

基本概念

1、新特性：兼容、合理、效率、安全、分离、简化、通用、无插件

2、组织：WHATWG(浏览器厂商组成的Web Hypertext Applications Technology Working Group)、W3C、IETF（因特网工程任务组，下辖HTTP）

3、HTML5构成：Canvas、Channel、Cross-document、Geolocation、WebSocket、Web Storage、XMLHttpRequest

4、发展历程：HTML3.2–>4.0–>4.0.1–>XHTML1.0–>1.1–>HTML5。
XHTML失败的原因：追求理论的完满，把用户放在链条的最底端，忍受严格错误处理带来的各种麻烦。

5、伯斯塔尔法则，发送时要保守、接收时要开放。像人类社会中的一个社交原则，“对自己严格，对他人宽容”。

6、设计理念：避免不必要的复杂性、支持已有的内容、解决现实的问题、求真务实、平稳退化、最终用户优先。

7、HTML5和原生引用的优劣势比较：跨平台、开发成本、迭代、内容限制、操作体验、功能满足、离线使用、发现机会。

8、移动Web现状：浏览器种类繁多、网速造成的性能瓶颈、多框架造成高门槛。

9、知识体系：

HTML简介、特性、结构、语法、标签

1、标签：文档结构标签、文本格式标签、字符格式标签、列表标签、链接标签、多媒体标签、表格标签、表单标签
2、属性：基本属性(class/id/style)、语言属性(lang/dir)、键盘属性(accesskey/tabindex)、内容属性(alt替换文本/title提示文本)

XHTML

结构（定义文档类型、声明命名空间），语法（闭合、小写、属性引号、废除name属性等），类型（过渡型、严格型、框架型），DTD（关于标签的语法规则）

HTML5改动：（以HTML4为基础）

1、语法：精简文档类型声明、字符编码（推荐UTF-8），版本兼容性（可以省略标记的元素、具有布尔值的属性、省略引号）

2、元素：新增结构元素header、footer、nav（导航）、section（区域）、article（内容）、aside（相关内容）。新增功能元素：hgroup、figure、video、audio、embed、canvas等。废除元素frameset、frame、noframes，只支持iframe。

3、涉及到移动设备的，视口控制（Viewport），媒体查询（@media），音视频播放（Audio/Video）。

4、属性：新增表单属性、链接属性和其他属性。废除可用css替代的属性、新增全局属性（contentEditable、designMode、hidden、spellcheck、tabindex）。

5、其他功能：Selectors API，JS日志和调试（console.log替代alert()，Firebug、WebInspector等开发者工具），window.JSON（parse和stringify函数），DOM Level3，浏览器的JS引擎。

6、css前缀：
－o－：以Presto为渲染引擎的浏览Opera的私有属性。
－moz－：以Gecko为渲染引擎的浏览器Mozilla　Firefox的私有属性　
－webkit－：以Webkit为渲染引擎的浏览器Safari、Google　Chrome的私有属性
－ms－：IE的私有属性的

浏览器的内核引擎，基本上是四分天下

  • Trident: IE 以Trident 作为内核引擎;
  • Gecko: Firefox 是基于 Gecko 开发;
  • WebKit: Safari, Google Chrome,傲游3,猎豹浏览器,百度浏览器 opera浏览器 基于 Webkit 开发。
  • Presto: Opera的内核，但由于市场选择问题，主要应用在手机平台–Opera mini

注：2013年2月Opera宣布转向WebKit引擎
注：2013年4月Opera宣布放弃WEBKIT，跟随GOOGLE的新开发的blink引擎

html5位置

navigator.geolocation包含3个方法，getCurrentPositon、watchPosition、clearWatch。

Position包含coords，Coordinates包含latitude, longitude, accuracy, altitude等

web交流

XMLHttpRequest的open、onload(onreadystatechange)、send方法，和jsonp的区别
JSON的stringify和parse

ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加script标签来调用服务器提供的js脚本。

一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准；不过我们又发现，Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力，比如script、img、iframe）；

二、HTML5表单

标签分类

1、行内元素，文本级标签：span , a , b , i , u , em

  • 与其他行内元素并排
  • 不能设置宽高，默认的宽度就是文字的宽度

2、块级元素，文本级标签：p ; 容器级标签：div , h系列 , li , dt ,dd

  • 霸占一行，不能与其他任何元素并列。
  • 能接受宽高，如果不设置宽度，那么宽度将默认变为父级的100%

input输入类型

1、原有：text、radio、checkbox、select option、password、button、submit、image、hidden、reset、file。

2、新增：email、url、number、range、date、month、week、time、datetime、datetime-local、search、tel、color等。

新增input属性
autocomplete、autofocus、form、表单重写（formaction、formmethod等） 、height与width（input的image类型）、list（配合datalist元素使用）、限值属性（min、max、step）、multiple、pattern、placeholder、require

新增form元素

datalist、keygen、output。新增form属性：autocomplete、novalidate等

三、HTML5画布

获取上下文

1
2
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

绘制矩形

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 开始绘制矩形。
ctx.fillStyle="#ff00ff";
ctx.strokeStyle="blue";
ctx.fillRect(20,20,100,100);
ctx.strokeRect(20,20,100,100);
// 保存当前Canvas状态。
ctx.save();
//绘制另外一个矩形。    
ctx.fillStyle="#ff0000";
ctx.strokeStyle="green";
ctx.fillRect(140,20,100,100);
ctx.strokeRect(140,20,100,100);
// 恢复第一个矩形的状态。
ctx.restore();
// 绘制两个矩形。
ctx.fillRect(20,140,50,50);
ctx.strokeRect(80,140,50,50);

绘制圆形

1
2
3
4
5
ctx.beginPath();
ctx.arc(100,75,75,0,Math.PI*1.5,false);
ctx.closePath();
ctx.stroke();
//ctx.fill();

绘制三角形

1
2
3
4
5
ctx.beginPath();
ctx.moveTo(25,25);
ctx.lineTo(150,25);
ctx.lineTo(25,150);
ctx.fill();

绘制贝塞尔曲线

1
2
3
4
5
6
ctx.strokeStyle="dark";
ctx.beginPath();
ctx.moveTo(0,200);
ctx.bezierCurveTo(25,50,75,50,300,200);//三次方
ctx.quadraticCurveTo(75,50,300,200);//二次方
ctx.stroke();

图片变换

1
2
3
4
5
ctx.save();
ctx.rotate(Math.PI/12);//旋转坐标空间，顺时针
ctx.translate(30,30);//移动坐标空间，右和下为正
ctx.scale(0.95,0.95);//缩放图形，x为横轴，y为纵轴
ctx.restore();

矩阵变换

1
2
3
4
ctx.save();
ctx.rotate(Math.PI/2);//旋转坐标空间，顺时针
ctx.transform(0.95,0,0,0.95,30,30);//替代图形变换的translate和scale
ctx.restore();

裁剪路径

1
2
3
ctx.beginPath();
ctx.arc(150,150,130,0,Math.PI*2,true);
ctx.clip();

图片的组合

1
context.globalCompositeOperation="source-over";

颜色和样式选项

1
2
3
4
ctx.lineWidth = i;//线条粗细
ctx.lineCap = ['butt','round','square'][i];//端点样式
ctx.lineJoin = ['round','bevel','miter'][i];//连接处样式
ctx.miterLimit = i;//lineJoin为miter时的交点方式

线性渐变

1
2
3
4
5
6
7
8
9
10
11
var lingrad = ctx.createLinearGradient(0,0,0,200);//参数为渐变起点(x1,y1)和渐变终点(x2,y2)
lingrad.addColorStop(0, '#ff0000');//添加多个色标，0-1的浮点值
lingrad.addColorStop(1/7, '#ff9900');
lingrad.addColorStop(2/7, '#ffff00');
lingrad.addColorStop(3/7, '#00ff00');
lingrad.addColorStop(4/7, '#00ffff');
lingrad.addColorStop(5/7, '#0000ff');
lingrad.addColorStop(6/7, '#ff00ff');
lingrad.addColorStop(1, '#ff0000');
ctx.fillStyle = lingrad;
ctx.strokeStyle = lingrad;

径向渐变

1
2
3
4
5
var radgrad = ctx.createRadialGradient(55,55,20,100,100,90);//参数为渐变起点圆(x1,y1,r1)和渐变终点圆(x2,y2,r2)
radgrad.addColorStop(0,'#ffffff');
radgrad.addColorStop(0.75,'#333333');
radgrad.addColorStop(1,'#000000');
ctx.fillStyle = radgrad;

绘制图案

1
2
3
4
5
var img = new Image();
img.src = 'images/icon.jpg';
img.onload = function(){ 
var ptrn = ctx.createPattern(img,'repeat');//repeat,repeat-x,repeat-y,no-repeat
ctx.fillStyle = ptrn;

设置图形透明度

1
2
ctx.globalAlpha=0.5;//大范围使用
ctx.fillStyle='rgba(255,0,0,0.5)';//绘制使用

创建阴影

1
2
3
4
ctx.shadowOffsetX = 3;//阴影水平偏移
ctx.shadowOffsetY = 3;//阴影垂直偏移
ctx.shadowBlur = 2;  //阴影羽化程度
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";//阴影颜色

绘制文字

1
2
3
4
5
6
7
ctx.font = "bold 35px Times";//字体
ctx.textAlign = "left";	//对齐
ctx.textBaseline = "alphabetic";//文字基线：字母
ctx.fillText(text,x, y,[maxWidth]);//绘制填充文字
ctx.strokeText(text,x, y,[maxWidth]);//绘制轮廓文字

metrics=ctx.measureText(text);//测量文字宽度

使用图像

1
2
3
4
5
6
7
var img = new Image();
img.onload = function(){
	ctx.drawImage(img,x,y);
	//ctx.drawImage(img,x,y,width,height);//改变大小
	//ctx.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh);//创建图像切片
}
img.src = 'images/bg.jpg';

四、音频与视频

几个概念

1、容器，就是把编码器生成的多媒体内容（视频轨道，音频轨道，字幕、标题、作者等元数据）混合封装在一起的标准。容器使得不同多媒体内容同步播放变得很简单，同时为多媒体内容提供索引。
例如mp4,rmvb,mkv,avi，从形式上来说首先都是视频文件的扩展名，其次它们也是视频文件的封装格式（即容器）。
其中，mp4是MPEG-4标准的第14部分所制定的容器标准，亲儿子。

2、MPEG-4，是一套用于音频、视频信息的压缩编码标准，由国际标准化组织（ISO）和国际电工委员会（IEC）下属的“运动图象专家组”（Moving Picture Experts Group，即MPEG）制定。

3、视频编解码方式，就是指能够对数字视频进行压缩或者解压缩的程序或者设备。通常这种压缩属于有损数据压缩。著名的视频编码方式有：H.26X系列（由ITU[国际电传视讯联盟]主导）、MPEG系列由ISO[国际标准组织机构]下属的MPEG[运动图象专家组]开发 ）、VP8/9（被Google接手）、Ogg容器的Theora编解码器。
其中，H.264/MPEG-4第十部分，或称AVC（Advanced Video Coding，高级视频编码），是一种视频压缩标准，一种被广泛使用的高精度视频的录制、压缩和发布格式。
H.265：高效率视频编码（High Efficiency Video Coding，简称HEVC）是一种视频压缩标准，H.264/MPEG-4 AVC的继任者。较H.264有两倍之压缩率（等同于同样画面质量下比特率减少了50%），可支持到8K分辨率。（1080P=1920×1080，4K=4096×2160，8K=8192×4320）

4、音频编解码方式，包括AAC（Advanced Audio Coding，高级音频编码，苹果itunes使用），MPEG-1 音频层3（即MP3，有专利授权），WAV（微软的Windows Media），Ogg Vorbis（无专利保护）

5、H5浏览器中的音视频格式之争
视频：firefox和opera不支持H264，ie9和safari不支持video:Ogg/Theora。chrome都支持。
音频：firefox和opera不支持MP3和AAC，safari不支持audio:Ogg/Vorbis，chrome都支持。

属性、方法、事件

1、属性：autobuffer、autoplay、buffered、controls、currentTime、duration、ended、loop、paused、played、src、volume、seekable等

2、方法：canPlayType、load、pause、play等

3、事件，可使用监听addEventListener(“事件名”,处理函数,处理方式)来使用，也可以直接赋值，获取事件句柄，事件名前面加on，例如

1
<video id="movies" autoplay oncanplay="startVideo()" onended="stopTimeline()">

五、Web存储

1、HTML4中最简单、兼容最佳的方案：Cookie，缺点是安全性差、容量为4KB，每个域名存储的数量有限。ie6以上可使用userData Behavior，Firefox可使用globalStorage，Flash上课使用Flash Local Storage。HTML5上，可使用Web Storage和Web Database。

2、Web Storage，分为localStorage和sessionStorage，localStorage可用于持久化存储，sessionStorage用于会话存储，关闭浏览器后删除。优点是：存储空间更大，且独立，不会发送到服务器，提供JS的接口。缺点是：安全性方面，可跨域访问数据，未加密、不会过期等。

3、Web Storage用法
属性：length
方法：key(index)、getItem(key)、setItem(key)、removeItem(key)、clear()
事件

4、Web Database用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var db = openDatabase('db', '1.0', 'my first database', 2 * 1024 * 1024);

db.transaction(function(tx) {
	tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
	tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
});

db.transaction(function (tx) {
    tx.executeSql('SELECT * from mytable', [], function(tx, result) {
        for (var i=0; i<result.rows.length; i++) {
            //do something            
        }
    });
});

六、离线应用

1、使用：

1
<html manifest="tracker.manifest"></html>

manifest文件格式 

1
2
3
4
5
6
7
8
9
10
11
CACHE MANIFEST
CACHE:
index.html
style.css
image.jpg
image-med.jpg
image-small.jpg
NETWORK:
notre-dame.jpg
FALLBACK:

2、在chorme浏览器下，可以访问：
application cache 地址: chrome://appcache-internals/
http cache 地址 : chrome://cache/

3、相关操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
if(navigator.onLine) {
     //如果可联网   
}

//增加事件监听online/offline
window.addEventListener("online",function(e){
	log("online");
},true);

var appCache=window.applicationCache;
appCache.update();
if(appCache.status=window.applicationCache.UPDATEREADY){
	appCache.swapCache();
}

七、多线程处理workers

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//WEB页主线程
var worker = new Worker("worker.js");
//创建一个Worker对象并向它传递将在新线程中执行的脚本的URL
worker.postMessage("hello world");
//向worker发送数据
worker.onmessage = function(evt) {//接收worker传过来的数据函数
	console.log(evt.data);
	//输出worker发送来的数据
}

//worker.js
onmessage = function(evt) {
	var d = evt.data;
	//通过evt.data获得发送来的数据
	postMessage(d);
	//将获取到的数据发送会主线程
}

八、地理位置

1
2
3
4
5
6
7
8
navigator.geolocation.getCurrentPosition(
    function(position) {
        var coords = position.coords;
  	    console.log(coords.latitude+','+coords.longitude);
    },
    function (error){
        alert(error.code);
    });

九、CSS选择器

1、属性选择器
E[att^=”value”]，E元素属性的值以指定的值开始
E[att$=”value”]，E元素属性的值以指定的值结束
E[att*=”value”]，E元素属性的值包含指定的值

2、同级兄弟选择器 EF，例如divp

3、否定伪类选择器 E:not(s)，例如div p:not(.red)

4、类选择器： p.right。 id选择器 p#right

5、结构伪类选择器：E:root， 匹配E所在文档的根元素，E:nth-child(n)/E:nth-last-child(n)，匹配所有在其父元素中的正数（倒数）第n个位置的匹配E的子元素，另外，E:nth-of-type(n)/E:nth-last-of-type(n)为同类型。

6、UI伪类选择器 E:hover E:active E:focus E:enabled E:disabled E:read-only E:read-write E:checked E:default E:indeterminate E:selection

7、目标伪类选择器，E:target，需要匹配元素被相关URL指向

十、文本、字体、颜色

文本阴影
{text-shadow: 10px 10px 20px #06C;}
参数为：水平位移、垂直位移、模糊半径（可选）、阴影颜色（可选），可使用此数组，同时描绘多个阴影，可用来定义外发光、描边、立体（凸起、凹下）等文字效果。

文本样式

1、溢出文本 text-overflow

1
2
3
4
5
E {
    -o-text-overflow: ellipsis;    /* Opera */
    text-overflow: ellipsis;    /* IE, Safari (WebKit) */
    -moz-binding: url('ellipsis.xml#ellipsis');    /* Firefox */
}

2、文本换行
text-wrap 换行模式
word-warp 控制是否断词，而不是断字符
word-break 针对亚洲语言和非亚洲语言区分控制换行，值为keep-all时，对亚洲语言文字不允许字断开
white-space 格式化文本作用，值为nowrap时，强制同一行显示所有文本

3、颜色
RBGA模式 {color: rgba(255,0,0,0.6);}
HSL模式（色调、饱和度、亮度）.{color: hsl(0,75%,100%);}.
HSLA模式，增加了透明度，也可以使用opacity属性单独设置透明度，而transparent颜色值代表完全透明。

十一、背景和边框

边框背景

如需要兼容新版chrome，必须添加 border:solid; 且声明在前。
border-image，包含border-image-source,border-image-slice,border-image-repeat等。

1
2
3
4
5
6
7
border:solid;
border-color:red green blue yellow;
border-width:54px 10px 54px 10px;
-moz-border-image: url(images/border2.png) 33%;   
-webkit-border-image: url(images/border2.png) 33%;  
-o-border-image: url(images/border2.png) 33% repeat;    
border-image: url(images/border2.png) 33% round;

圆角

分为水平半径和垂直半径，用/分割，如有4个值集合，依次代表border-top-left-radius,border-top-right-radius,border-bottom-right-radius,border-bottom-left-radius。如有3个值集合，依次代表左上，右上/左下，右下。如有2个值集合，依次代表左上/右下，右上/左下。

1
2
3
4
border:10px solid red;
-moz-border-radius:10px/10px;
-webkit-border-radius:10px/10px;
border-radius:10px/10px;

块阴影和圆角阴影

参数有阴影类型、x轴位移、y轴位移、阴影大小、阴影扩展(模糊)和阴影颜色。默认阴影类型为投影效果，可设置为inset内阴影。

1
2
3
-moz-box-shadow:2px 2px 10px #06C;
-webkit-box-shadow:2px 2px 10px #06C;
box-shadow:2px 2px 10px #06C;

多背景图片

1、background-origin，背景的显示区域。background-clip，制定背景的显示范围 

1
2
3
4
5
6
7
8
9
10
11
-moz-background-origin:content;
-webkit-background-origin:padding;
-o-background-origin:content; 
-khtml-background-origin:content;                 
background-origin:border; 

-moz-background-clip:content;
-webkit-background-clip:border;
-o-background-clip:padding; 
-khtml-background-clip:content;         
background-clip:no-clip;

2、background-size，背景的图像尺寸。cover，保持宽高比例完全覆盖。contain，保持宽高比例，缩放到宽度或高度正好适应，可能会有留白

1
2
3
4
  background:url(images/img2.jpg) no-repeat center;
-moz-background-size:cover;
-webkit-background-size:contain;
background-size:cover;

3、多背景图片

1
2
3
background-image: url(images/bg3.jpg), url(images/bg11.jpg), url(images/bg22.jpg);
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: 3% 98%, 100px 200px, center top;

十二、2D形变

形变

包含2D移动、矢量缩放、2D旋转、斜切变换、矩阵变换等。
scale支持宽和高的缩放比例，如为负数，则为翻转元素。skew支持X轴和Y轴坐标倾斜角度，会改变元素形状。

1
2
3
4
-webkit-transition: rotate(30deg) scale(1.5, 1.5) skew(5deg, 8deg) translate(5px, -2px);
-moz-transition: rotate(30deg) scale(1.5, 1.5) skew(5deg, 8deg) translate(5px, -2px);
-o-transition: rotate(30deg) scale(1.5, 1.5) skew(5deg, 8deg) translate(5px, -2px);
transition: rotate(30deg) scale(1.5, 1.5) skew(5deg, 8deg) translate(5px, -2px);

矩阵变换

matrix()是矩阵函数，为3x3的矩阵。

[ a b e ]
[ c d f ]
[ 0 0 1 ] 

1
2
3
-webkit-transition: matrix(1.5,0.4,0,1.5,5,-2);
-moz-transition: matrix(1.5,0.4,0,1.5,5,-2);
-o-transition: matrix(1.5,0.4,0,1.5,5,-2);

和基本形变的关系：

transform:translate(5px,-2px) = transform:matrix(1,0,0,1,5,-2);
transform:scale(1.5,1.5) = transform:matrix(1.5,0,0,1.5,0,0);
transform:rotate(θ eg) = transform:matrix(cosθ,-sinθ,sinθ,cosθ,0,0);
transform:skew(θx eg,θy eg) = transform:matrix(1,tan(θy),tan(θx),1,0,0);
例如 transform:skew(45deg); 即对应着 transform:matrix(1,0,1,1,0,0);

自定义变形

通过transform-origin来调整变形的原点（默认是对象的中心） 

1
2
3
-moz-transform-origin: top right;
-webkit-transform-origin: top right;
-o-transform-origin: top right;

十三、设计动画

平滑过渡

通过Transitions进行处理。只能指定属性的开始和终点值来实现平滑过渡。
过渡可以和变形同时使用，如下： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
img {
    position: absolute;
    top: 40px;
    left: 0;
    height:200px;
    -webkit-transform: rotate(0deg);
    -webkit-transition: left 1s linear, -webkit-transform 1s linear;
    -moz-transform: rotate(0deg);
    -moz-transition: left 1s linear, -moz-transform 1s linear;
    -o-transform: rotate(0deg);
    -o-transition: left 1s linear, -o-transform 1s linear;
}
div:hover img {
    position: absolute;
    left: 500px;
    -webkit-transform: rotate(3000deg);
    -moz-transform: rotate(3000deg);
    -o-transform: rotate(3000deg);
}

可以通过定义过渡属性、过渡时间、过渡延迟时间、过渡效果等方式来实现。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
div {
    background-color:red;
    width:400px;
    height:200px;
}
div:hover {
    background-color:blue;
    -webkit-transition-property:background-color;
    -moz-transition-property:background-color;   
    -o-transition-property:background-color;
    
    -webkit-transition-duration:2s;
    -moz-transition-duration:2s;
    -o-transition-duration:2s;
    
    -webkit-transition-delay:2s;
    -moz-transition-delay:2s;
    -o-transition-delay:2s;  
    
    -webkit-transition-timing-function: linear;
    -moz-transition-timing-function: ease-in;
    -o-transition-timing-function: ease-out;   
}

3D动画

如需更复杂的动画效果，可使用Animatins通过关键帧的指定来实现。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
div {
	background:url(images/moto1.gif) center no-repeat;
	/* 定义3D空间 */
	-webkit-transform-style: preserve-3d;
	/* 设计沿x轴旋转、20秒线性过渡动画、无限次播放 */
	-webkit-animation-name: x-spin;
	-webkit-animation-duration: 20s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}
/* 调用动画 */
@-webkit-keyframes x-spin { 
	0% {
		-webkit-transform: rotateX(0deg);
	}
	50% {
		-webkit-transform: rotateX(180deg);
	}
	100% {
		-webkit-transform: rotateX(360deg);
	}
}

Webkit渐变效果

1、线性渐变

1
2
3
background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red),color-stop(50%, green)););
-webkit-background-origin: padding-box;
-webkit-background-clip: content-box;

2、径向渐变.
两个圆可以是非同心圆，但需要考虑两圆圆心距离和两圆半径的差的关系，效果不同。

1
2
background: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(red), to(green), color-stop(90%, blue));
background: -webkit-gradient(radial, 180 80, 10, 200 100, 90, from(#00C), to(rgba(1,159,98,0)), color-stop(98%, #0CF));

Gecko渐变效果（Firefox）

1、线性渐变

1
2
3
4
5
6
7
background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);

background: -moz-linear-gradient(0deg, red, rgba(255,0,0,0));

background: -moz-linear-gradient(top, blue, green 80%, orange);

background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)), url(images/bg7.jpg);

2、径向渐变 

1
2
3
4
5
background: -moz-radial-gradient(red 20%, yellow 30%, blue 40%);

background: -moz-radial-gradient(bottom left, red, yellow, blue 80%);

background: -moz-radial-gradient(left,  circle, red, yellow, blue 50%); //形状为圆形，还可以是ellipse 椭圆

3、重复线性和径向渐变

1
2
3
background: -moz-repeating-radial-gradient(circle, black, black 10px, white 10px, white 20px);

background: -moz-repeating-linear-gradient(top left 60deg,black, black 10px, white 10px, white 20px);

IE渐变，只能使用渐变滤镜

1
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=#9999FF, endColorStr=#ffffff);

W3C渐变，语法基本和Gecko引擎渐变一致，但常用浏览器未适配。

1
background: linear-gradient(top left, yellow, blue);

十四、网页布局(浏览器支持不完全)

盒子模型

盒子：分内部盒子（容器盒子）和外部盒子。属于传统布局，以 CSS2 为基础的布局方式，一般需要结合浮动、定位等技术手段实现布局，是目前浏览器兼容性最好的布局方式。

与其对应的是以 Flex 和 Grid 为代表的新型布局。

display:inline-block，其中inline为外部盒子，block为内部盒子。display值为inline或block，则是标准的盒子。

1.值为 block 的盒子，即块级元素，内容区域的宽度默认为 100%，高度为 0；可以设置 Content、Padding、Border 和 Margin 四个区域的属性。
2.值为 inline 的盒子，内容区域的宽高默认为其子元素的宽高；并且，设置内容区域的宽高，和上、下外边距无效。

多栏布局，设定每列宽度和列数

1
-webkit-columns: 250px 3;

也可以对多列布局中的基本属性定义和样式设置，包括列宽、列数、列间距、边框样式 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
-webkit-column-width:300px;
-moz-column-width:300px;
column-width:300px;

-webkit-column-count:3;
-moz-column-count:3;
column-count:3;

-webkit-column-gap: 3em;
-moz-column-gap: 3em;
column-gap: 3em;

-webkit-column-rule: dashed 2px gray;
-moz-column-rule: dashed 2px gray;
column-rule: dashed 2px gray;

可以定义跨列显示 

1
2
3
-webkit-column-span: all;
-moz-column-span: all;
column-span: all;

盒布局

宽度可不相等，适合结构控制。而多栏布局宽度相等，适合文章排版 

1
2
3
display: box;   
display: -moz-box;
display: -webkit-box;

可以设定盒布局格式，例如弹性盒布局（自适应宽度和高度）、列显示顺序、列排列方向、定义对齐方式 

1
2
3
4
5
6
7
8
9
10
11
12
13
-moz-box-flex:1;
-webkit-box-flex:1; //且值如果大于1，则根据数值比例决定自适应大小

-moz-box-ordinal-group: 1;
-webkit-box-ordinal-group: 1;  

-moz-box-orient: vertical;
-webkit-box-orient: vertical;

-moz-box-align: center;   //horizontal排列时，box-pack的start代表left
-webkit-box-align: center;//vertical排列时，box-pack的start代表top
-moz-box-pack: start;	  //horizontal排列时，box-align的start代表top
-webkit-box-pack: end;	 //vertical排列时，box-align的start代表left

另外，盒模型的尺寸解析方式，默认为content-box，即width/height=border+padding+content。而border-box则width/height=content。

1
2
-moz-box-sizing: border-box;
-webkit-box-sizing: content-box;

十五、其他特性

1、调节元素尺寸，resize属性，可设置both、horizontal、vertical等。 

1
2
3
4
5
width:200px;
height:120px;
max-width:800px;
max-height:600px;
resize: both;

2、设计轮廓，outline属性，包括outline-width、outline-style、outline-color和outline-offset

1
2
outline: thick solid #b7ddf2
outline-offset: 4px;

3、设计导航，nav-index属性，来替代tabindex。同时可以控制4个方向键。 

1
2
3
4
5
nav-index:1;
nav-right:#id1;
nav-left:#id2;
nav-down:#id3;
nav-up:#id4;

4、添加显示内容，content属性，可为string、attr()、uri()等

1
content: url(images/xinzhi.png);

5、恢复默认样式，针对元素取消某样式指定 

1
2
color: initial;
font-size: -moz-initial;

6、溢出处理，overflow-x和overflow-y，尽量同时设置。 

1
2
overflow-x:visible | hidden | scroll | auto ;
overflow-y:visible | hidden | scroll | auto ;

7、自定义字体类型 

1
2
3
4
5
6
7
8
@font-face {
	font-family: '徐静蕾手写体';
	src: url('徐静蕾手写体.eot'); /* IE9 Compat Modes */
	src: url('徐静蕾手写体.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('徐静蕾手写体.woff') format('woff'), /* 所有现代浏览器 */
	url('徐静蕾手写体.ttf')  format('truetype'), /* Safari, Android, iOS */
	url('徐静蕾手写体.svg#svgFontName') format('svg'); /* Legacy iOS */
}

8、定义设备类型 @media 设备类型 and （设备特性）{ 样式代码 } 

1
2
3
@media screen and (min-width: 600px) and (max-width: 900px) {
    //样式
}

9、语音功能，只在opera实现。设计倒影，Reflections只在Webkit引擎实现。

1
-webkit-box-reflect:below | above | left | right 10px;

window对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<script>
    onload=function(){
        console.log(closed); //返回窗口是否已被关闭。
        console.log(defaultStatus); //设置或返回窗口状态栏中的默认文本。
        console.log(document); //Document 对象的只读引用
        console.log(history); // History 对象的只读引用
        console.log(history.length); // 返回浏览器历史列表中的 URL 数量。

        console.log(innerWidth);//返回窗口的文档显示区的宽度。
        console.log(innerHeight);//返回窗口的文档显示区的高度。
        console.log(length);//设置或返回窗口中的框架数量。
        console.log(location);//Location 对象
        console.log(location.hash);//设置或返回从井号 (#) 开始的 URL（锚）。
        console.log(location.host);//设置或返回主机名和当前 URL 的端口号。
        console.log(location.hostname);//设置或返回当前 URL 的主机名。
        console.log(location.href);//设置或返回完整的 URL。
        console.log(location.pathname);//设置或返回当前 URL 的路径部分。
        console.log(location.port);//设置或返回当前 URL 的端口号。
        console.log(location.protocol);//设置或返回当前 URL 的协议。
        console.log(location.search);//设置或返回从问号 (?) 开始的 URL（查询部分）。

        console.log(name);//设置或返回窗口的名称。
        console.log(navigator);//Navigator 对象的只读引用。
        console.log(navigator.appCodeName);//返回浏览器的代码名。
        console.log(navigator.appName);//返回浏览器的名称。
        console.log(navigator.appVersion);//返回浏览器的平台和版本信息。
        console.log(navigator.cookieEnabled);//返回指明浏览器中是否启用 cookie 的布尔值。
        console.log(navigator.onLine);//返回指明系统是否处于脱机模式的布尔值。
        console.log(navigator.platform);//返回运行浏览器的操作系统平台。
        console.log(navigator.userAgent);//返回由客户机发送服务器的 user-agent 头部的值

        console.log(opener);//返回对创建此窗口的窗口的引用。
        console.log(outerWidth);//返回窗口的外部宽度。
        console.log(outerHeight);//返回窗口的外部高度。
        console.log(pageXOffset);//设置或返回当前页面相对于窗口显示区左上角的 X 位置。
        console.log(pageYOffset);//设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
        console.log(parent);//返回父窗口。
        console.log(screen);//Screen 对象的只读引用
        console.log(self);//返回对当前窗口的引用。
        console.log(status);//设置窗口状态栏的文本。
        console.log(top);//返回最顶层的先辈窗口。
        console.log(screenLeft);// 声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。
        console.log(screenTop);//
        console.log(screenX);//
        console.log(screenY);//
    }
</script>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true