一、Web时代的变迁

二、HTML5与HTML4的区别

1.新增的元素：section、article、aside、header、hgroup、footer、nav、figure、video、audio、embed、mark、progress、time、ruby、rt、rp、wbr、canvas、command、details、datalist、datagrid、keygen、output、source、menu

2.新增的input元素：email、url、number、range、Date Pickers

3.废除的元素：

能使用CSS替代的元素：basefont、big、center、font、s、strike、tt、u

不再使用frame框架，仅支持iframe

applet、bsound、blink、marquee

rb、acronym、dir、isindex、listing、xmp、nextid、plaintext

4.新增的属性：

表单相关：autofocus、placeholder、form、required、autocomplete、min、max、multiple、pattern、step、list、formaction、formenctype、formmethod、formnovalidate、formtarget、novalidate

链接相关：media、hreflang、rel、sizes、target

其他属性：reversed、charset、type、label、scoped、async、manifest、sandbox、seamless、srcdoc

5.全局属性

contentEditable：允许用户编辑元素中的内容，isContentEditable

designMode：指定整个页面是否可编辑，只能在JS脚本里被编辑修改，只有"on"和"off"值

hidden：浏览器不渲染该元素，使该元素处于不可见状态

spellcheck：对用户输入的文本内容进行拼写和语法检查

tabindex：每个tab是第几个被访问到

三、HTML5的结构

A.新增的主体结构元素

1.article：代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容

2.section：用于对网站或应用程序中页面上的内容进行分块，可以理解为section元素中的内容可以单独存储到数据库中或输出到word文档中，通常不推荐为那些没有标题的内容使用section元素

3.nav：可以用作页面导航的链接组，其中导航元素链接到其他页面或当前页面的其他部分。可用于传统导航条、侧边栏导航、页内导航、翻页操作

4.aside：用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用 、侧边栏、广告、导航条，以及其他类似的有别于主要内容的部分

5.time：代表24小时中的某个时刻或某个日期，表示时刻时允许带时差

6.pubdata属性：是一个可选的，boolean值的属性，可以用到article中的time元素上，意思是time元素代表了文章或整个网页的发布日期

B.新增的非主体结构元素

1.header：是一种具有引导和导航作用的结构元素，通常用来放置整个页面内的一个内容区块的标题，但也可以包含其他内容

2.hgroup：是将标题及其子标题进行分组的元素，通过会将h1-h6元素进行分组，譬如一个内容区块的标题及其子标题算一组

3.footer：可以作为其上层父级内容区块或是一个根区块的脚注

4.address：用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、他们的网站链接、电子邮箱、真实地址、电话号码等

C.HTML5结构

1.显式编排内容区块：指明确使用section等元素创建文档结构，在每个内容区块内使用标题（h1-h6、hgroup等），尽量使用显式编排

2.隐式编排内容区块：指不明确使用section等元素，而是根据页面中所书写的各级标题（h1-h6、hgroup等 ）等把内容区块自动创建出来

四、表单与文件

A.新增元素与属性

1.form属性：表单元素放在表单外，可以用form指定表单id

2.formaction属性：按扭元素可以指定不同的action

3.formmethod属性：按扭元素可以指定不同的method

4.placeholder属性：当文本框处于未输入状态时文本框中显示的输入提示

5.autofocus属性：当页面打开时，控件自动获得光标焦点，一个页面只能有一个控件具有该属性，不要滥用

6.list属性：为单行文本增加一个list属性，该属性的值为某个datalist元素的id，实现类似下拉功能

7.autocomplete属性：配合list属性实现自动补全，可以指定on、off和""

8.增加的input元素：search、tel、url、email、datetime、date、month、week、time、datetime-local、number、range、color

9.file增加multiple属性，可以一次选择多个文件，可以通过accept属性限制文件的种类

10.output元素，定义不同类型的输出，比如计算结果或脚本的输出

B.表单验证

1.required属性：非空验证

2.pattern属性：通过正则检查内容

3.min与max属性：在数值和日期控件中使用，限制范围

4.step属性：指定数值类型的步长

5.js中可以获取控件的checkValidity()方法获取验证状态，还有validity属性

6.取消验证：novalidate属性、formnovalidate属性

7.自定义错误信息：js调用setCustomValidity方法

C.增强的页面元素

1.figure元素：用来表示网页上一块独立的内容，将其从网页上移除后不会对网页上的其他内容产生任何影响 ，主要用于图片、统计图或代码示例，也可以用于其他的内容；figcaption元素表示figure元素的标题，从属于figure元素，必须在figure内部

2.details元素：用于局部区域进行展开或收缩的方法，内部需要一个summary元素，open属性表示处于展开状态

3.mark元素：表示页面中需要突出显示或高亮显示的，对于当前用户具有参考作用的一段文字

4.progress元素：代表一个任务 的完成进度，可能用0到某个最大数字之间的数字来表示 准确的进度完成情况

5.meter元素：表示规定范围内的数量值，包含六个属性：value、min、max、low、high、optimum

6.menu和command元素：表示菜单和菜单项

7.改良的ol列表：添加了start属性，表示编号的起始值，reversed属性，对列表反序

8.改良的dl列表：增加dt、dd

9.加以严格限制的cite元素：仅用于表示作品的标题

10.重新定义的small元素：专门用来标识所谓“小字印刷体”的元素，不允许被应用在页面主内容中，只允许被当做辅助信息用inline方式内嵌在页面上使用

D.文件API

1.HTML5中，添加multiple属性，file控件允许放置多个文件，FileList对象则为这些file对象的列表，代表用户选择的所有文件

2.Blob表示二进制原始数据，提供一个slice方法，有size和type属性，file对象继承了该对象

3.FileReader接口：用来把文件读入内存，并且读取文件中的数据，可以在浏览器中异步访问文件系统，读取文件中的数据，可读取为二进制码、文本、DataURL，包含读取过程事件

E.拖放API

1.实现步骤：

将对象元素的draggable属性设为true，img与a元素默认允许拖放

编写拖放相关的事件处理代码：dragstart、drag、dragenter、dragover、dragleave、drop、dragend

2.DataTransfer对象：可以实现定制拖放图标，让它只支持特定拖放等，甚至可以实现更复杂的拖放操作

属性：dropEffect、effectAllowed、types

方法：clearData、setData、getData、setDragImage

五、绘制图形

A.canvas元素的基础知识

1.在页面上放置一个canvas元素，就相当于在页面上放置了一块“画布”，可以在其中进行图形的描绘，只是一个透明的区域，需要利用JS编写在其中进行绘画的脚本

2.要指定ID、width、height三个属性

3.相关api

getContext('2d')获取context

fillRect(x,y,w,h)填充

strokeRect(x,y,w,h)边框

fillStyle填充的样式

strokeStyle边框样式

lineWidth边框宽度

clearRect(x,y,w,h)擦除指定区域中的图形

B.使用路径

1.相关api

beginPath()开始路径的创建

arc(x,y,radius,startAngle,endAngle,anticlockwise)绘制圆形

closePath()关闭路径

fill()直接填充路径

stroke()直接绘制路径边框

2.不关闭路径，已创建的路径会永远保留着，创建的图形会一次又一次地进行重叠

3.绘制线段

moveTo(x,y)将光标移动到指定的起点

lineTo(x,y)在起点与终点之间创建路径

bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)贝济埃曲线

C.绘制渐变图形

1.createLinearGradient(xStart,yStart,xEnd,yEnd)线性渐变的LinearGradient对象

2.addCOlorStop(offset,color)追加渐变的颜色，至少追加两次，开始颜色与渐变颜色

3.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd )径向渐变

D.绘制变形图形

1.坐标变换

translate(x,y)平移

scale(x,y)扩大

rotate(angle)旋转

2.transform(m11,m12,m21,m22,dx,dy)矩阵变换

E.图形组合

1.globalCompositeOperation=type，type的值：

source-over默认覆盖

destination-over在原有图形之下绘制

source-in作in运算，只显示新图形重叠的部分

destination-in，只显示原图形重叠的部分

source-out，只显示新图形不重叠的部分

destionation-out，只显示原图形不重叠的部分

source-atop，只显示新图片重叠及未被覆盖的原有图形部分

destionation-atop，只显示原图形重叠及未被覆盖的新图形部分

xor，只绘制新图形不重叠的部分

copy，重叠的部分透明

F.给图形绘制阴影

1.几个属性：

shadowOffsetX，阴影的横向位移量

shadowOffsetY，阴影的纵向位移量

shadowColor，阴影的颜色

shadowBlur，阴影的模糊范围

G.绘制图像

1.drawImage(image,……)绘制图像

2.createPattern(image,type)图像平铺，type，no-repeat、repeat-x、repeat-y、repeat

3.像素处理：getImageData(……)、putImageData(……)

H.绘制文字

1.fillText(text,x,y,[maxWidth])填充绘制

2.strokeText(text,x,y,[maxWidth])轮廓绘制

3.文字相关属性：font、textAlign、textBaseline

I.补充知识

1.save()将当前状态保存到栈中，restore()从栈中取出

2.toDataURL(type)，把状态输出到一个data URL中然后重新装载

六、多媒体播放

1.video：播放视频，需要指定长宽

2.audio：播放音频

3.source：为同一个媒体数据指定多个播放格式与编码方式

4.属性：

src，指定媒体数据的URL

autoplay，指定媒体是否在页面加载后自动播放

preload，指定媒体是否预加载

poster，video元素独有，当视频不可用时，可以向用户展示一幅替代用的图片

loop，指定是否循环播放视频或音频

controls，是否为视频或音频添加浏览器自带的播放用的控制条

width与height，指定视频的宽度与高度，video独有

error，只要出现错误，将返回一个MediaError对象，为只读属性，错误状态包括MEDIA_ERR_ABORTED（1）、MEDIA_ERR_NETWORK（2）、MEDIA_ERR_DECODE（3）、MEDIA_ERR_SRC_NOT_SUPPORTED（4）

networkState，读取当前网络状态，为只读属性，包括NETWORK_EMPTY（0）、NETWORK_IDLE（1）、NETWORK_LOADING（2）、NETWORK_NO_SOURCE（3）

currentSrc，读取播放中的媒体数据的URL地址，为只读

buffered，返回一个对象，该对象实现TimeRanges接口，以确认浏览器是否已缓存媒体数据

readyState，返回媒体当前播放位置的就绪状态，包括HAVE_NOTING（0）、HAVE_METADATA（1）、HAVE_CURRENT_DATA（2）、HAVE_RUTURE_DATA（3）、HAVE-ENOUGH_DATA（4）

seeking与seekable，seeking表示浏览器是否正在请求某一特定播放位置的数据，seekable返回一个TimeRanges对象，表示 请求到的数据的时间范围

currentTime，startTime、duration，currentTime读取媒体的当前播放位置，为可读写属性，startTime读取媒体播放的开始时间通常为0，duration读取媒体文件的总的播放时间

played、paused、ended，played返回一个TimeRanges对象，可以读取媒体文件的已播放部分的时间段，paused表示是否暂停播放，played返回是否播放完毕

defaultPlaybackRate、playbackRate，defaultPlaybackRate读取或修改媒体默认的播放速率，playbackRate读取或修改媒体当前的播放速率

volume、muted，volume读取或修改媒体的播放音量，muted读取或修改媒体的静音状态

5.方法

play方法，播放媒体

pause方法，暂停媒体

load方法，重新载入媒体进行播放

canPlayType方法，测试浏览器是否支持指定的媒体类型

6.事件：loadstart、progress、suspend、abort、error、emptied、stalled、play、pause、loadedmetadata、loadeddata、waiting、playing、canplay、canplaythrough、seeking、seeked、timeupdate、ended、ratechange、durationchange、volumechange

七、本地存储

A.Web Storage

1.sessionStorage：将数据保存在session对象中，临时保存

2.localStorage：将数据保存在客户端本地的硬件设备中，永久保存

3.保存：

sessionStorage.setItem(key,value);

localStorage.setItem(value);

4.获取：

sessionStorage.getItem(key);

localStorage.getItem(key);

5.清除：.clear()方法

B.本地数据库

1.使用SQLLite数据库

2.var db = openDatabase(dbname,version,describe,size);

3.db.transaction(function(){})，事务

4.executeSql(sqlquery,params,dataHandler,errorHandler)方法执行SQL

八、离线应用程序

1.本地缓存与浏览器缓存的区别：

本地缓存是为整个Web应用程序服务的，而浏览器的网页缓存只服务于单个网页

网页缓存是不安全、不可靠的，本地缓存是可靠的

2.Web应用程序的本地缓存是通过每个页面的mainfest文件来管理的，需要服务器添加text/cache-manifest的mime类型

3.只要页面上的资源文件被本地缓存过，下次浏览器打开这个页面时，总是先使用本地缓存中的资源，然后请求manifest文件

4.applicationCache对象代表了本地缓存，可以用它来通知用户本地缓存中已经被更新，也允许用户手工更新本地缓存

updateReady，通知本地缓存已被更新

swapCache，手工执行本地缓存的更新

九、通信API

1.跨文档消息传输：

window.postMessage(message,targetOrigin);向其他窗口发送消息

window.addEventListener('message',function(){...},false);监听消息事件

2.Web Sockets可以在服务器与客户端之间建立一个非HTTP的双向连接，实时的、永久的，除非被显式关闭

3.使用：

var ws = new WebSocket("ws://localhost:8005/socket");

ws.send("data");发送数据

ws.onmessage=function(event){}，接收数据

ws.onopen=function(event){}，监听socket的打开事件

ws.onclose=function(event){}，监听socket的关闭事件

ws.close()，关闭socket

4.readyState属性可获取WebSocket对象的状态：CONNECTING(0)、OPEN(1)、CLOSING(2)、CLOSED(3)

十、使用Web Workers处理线程

1.在后台线程中不能访问页面或窗口对象，如果使用window或document会引起错误

2.使用：

var worker = new Worker("worker.js");

worker.onmessage = function(event){}; 处理收到的消息

worker.postMessage(message); 发送消息

3.线程中可以嵌套子纯种，可以把较大的后台线程切分成几个子线程

十一、获取地理位置信息

1.为window.navigator对象增加了一个geolocation属性

2.geolocation属性的方法：

getCurrentPosition(onSuccess,onError,options)，获取地理位置信息

watchCurrentPosition(onSuccess,onError,options)，持续监控当前位置信息

clearWatch(watchId)，停止获取当前用户的位置信息

3.position对象属性：latitude、longitude、altitude、accuracy、altitudeAccurancy、heading、speed、timestamp

十二、CSS3概述

模块与模块化结构，为了避免产生浏览器对于某个模块支持不完全的情况

十三、选择器

1.class属性缺点：本身没有语义；容易混乱；

2.CSS3提倡使用选择器来将样式与元素直接绑定，减少样式表的代码书写量

3.语法：E[foo$="val"]，可以使用^、?、*通配符

4.伪元素选择器，并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器，格式：选择器 类名:伪元素 {属性:值}

5.伪元素选择器：

:first-line：用于为某个元素中的第一行文字使用样式

:first-letter：用于为某个元素中的文字的首字母或第一个字使用样式

:before：在某个元素之前插入一些内容

:after：在某个元素之后插入一些内容

:root，将样式绑定到页面的根元素，就是元素，注意与背景色的范围

:not，如果想对某个结构元素使用样式，但是想排除指定的子结构元素

:empty，当元素内容为空白时使用的样式

:target，对页面中某个target元素指定样式，只在用户点击了页面中的超链接，并且跳转到target元素后起作用

:first-child，元素中的第一个子元素

:last-child，元素中的最后一个子元素

:nth-child(n)，:nth-last-child(n)，对指定序号的子元素指定样式，n可以指定为数字，或odd为奇数，even为偶数，可以实现循环列表的样式如（4n+1）

:nth-of-type(n)，nth-last-of-type(n)，在计算子元素时只针对同类型的子元素计算

:only-child，:only-of-type，让样式只对唯一子元素起作用的实现方法

6.UI元素伪类选择器：

E:hover，当鼠标移动到元素上面时所使用的样式

E:active，指定元素被激活（元素在鼠标上按下还没松开时）

E:focus，指定元素获得光标焦点时使用的样式

E:enabled，当元素牌可用状态时的样式

E:disabled，当元素牌不可用状态时的样式

E:read-only，指定元素牌只读状态时的样式

E:read-write，指定元素处于非只读状态时的样式

E:checked，指定当表单中的radio或checkbox处于选中状态时的样式

E:default，指定当页面打开时默认处于选取状态的radio或checkbox的样式

E:indeterminate，指定当前页面打开 时，如果一组单选框中任何一个单选框都没有被设定为选取状态时整组单选框的样式

E:selection，指定当元素处于选中状态时的样式

7.通用兄弟元素选择器：<子元素> ~ <子元素之后的同级兄弟元素>{}

十四、使用选择器在页面中插入内容

1.使用content:''，可以指定none

2.content:url()，可以插入图像

3.content:counter(计数器名);针对多个项目追加连续编号，在元素样式中counter-increment属性设定计数器名counter-increment:before选择器或after选择器中指定的计数器名

4.content:'第'counter(计数器名)'章'，可以追加文字

5.content:counter(计数器名,编号种类)，编号种类可以是list-style-type类型

6.可以使用content属性的open-quote属性值与close-quote属性值在字符串两边添加括号、单引号、双引号之类的潜逃文字符号，在元素样式中使用quotes属性来指定使用什么嵌套文字符号

十五、文字与字体相关样式

1.text-shadow:length length length color，给页面上的文字添加阴影效果，可以指定多个阴影

2.word-break属性：normal，使用默认换行规则，keep-all，只能在半角空格或连字符处换行，break-all，允许在单词内换行

3.word-wrap属性单词换行：normal，默认，break-word，在长单词或url地址内部进行换行

4.@font-face属性可以使用服务器端字体，包括：font-family:WebFont，声明服务器端字体，src:url('xxxxx.otf') format('字体文件格式')，指定服务器端字体路径

5.@font-face中可以指定的其他属性值：font-style、font-variant（字体大小写）、font-weight、font-stretch（设置字体是否伸缩变形）、font-size

6.font-size-adjust: aspect，保持文字大小不发生变化的情况下改变字体的种类，aspect值是比例值，可以用来保持大小，计算方法为x-height值除以该字体的尺寸

十六、盒相关样式

A.盒的类型

1.基本类型：

block，一行只有一个

inline，一行并列容纳多个

2.inline-block类型，属于block类型盒的一种，但是在显示时具有inline类型盒的特点，但可以指定width和height属性，可代替float

3.inline-table类型，表格文字环绕，可以vertical-align设计对齐方式

4.list-item类型，可以将元素的类型设定为list-item类型，可以将多个元素作为列表来显示，同时在元素的开头加上列表的标记

5.run-in类型与compact类型，如果元素后面还有block类型的元素，run-in类型的元素将被包含在block类型的元素内部，而compact类型的元素将被放置在block类型的元素左边

6.表格相关类型：table、inline-table、table-row、table-cell、table-row-group、table-header-group、table-footer-group、table-column、table-column-group、table-caption

B.对于盒中容纳不下的内容的显示

1.overflow属性：hidden、scroll、auto、visiable

2.overflow-x属性与overflow-y属性：单独指定在水平方向或垂直方向上内容超出盒容纳范围时的显示方法

3.text-overflow属性，在盒的末尾显示省略符号，只在水平方向上有效

C.对盒使用阴影

1.box-shadow属性，box-shadow:length length length color

D.指定针对元素的宽度与高度的计算方法

1.box-sizing属性，可以指定用width属性与height属性分别指定的宽度值与高度值是否包含元素内部的补白区域，以及边框的宽度与高度

2.box-sizeing可以指定：

content-box，表示元素的宽度与高度不包括内部补白区域，及边框的宽度与高度，默认

border-box，表示元素的宽度与高度包括内部补白区域，及边框的宽度与高度

十七、与背景和边框相关的样式

A.与背景相关的新增属性

1.background-clip:border|pading;，背景范围，包括边框或不包括

2.background-origin:border|padding|content;，背景的起始绘制范围

3.background-size:宽 高，指定背景图片的尺寸

4.background-break:bounding-box|each-box|continuous，指定平铺内联元素背景图像时的循环方式

B.在一个元素中显示多个背景图像

1.通过多个background-image、background-repeat、background-position、background-clip、background-origin、background-size来实现背景中显示多个图像文件的功能

C.圆角边框的绘制

1.border-radius，指定圆角半径，可以指定多个半径

2.border-radius-topleft、border-radius-topright、border-radius-bottomleft、border-radius-bottomright指定四个角

D.使用图像边框

border-image，指定图像边框

十八、CSS3中的变形处理

1.transform:xxx();

scale(0.5)，缩放

skew(水平角度,垂直角度)，倾斜

translate(水平方向，垂直方向)，移动

rotate(角度)，旋转

2.transform-origin:left|top|bottom|right|center，指定变形基准点，可多个参数联合设置，如左上

十九、CSS3中的动画功能

1.Transitions功能通过将元素的某个属性从一个属性值在指定的时间内平滑过滤到另一个属性值来实现动画功能，transition: property duration timing-function[,...];

2.Animations与Transitions功能相同，都是通过改变元素的属性值来实现动画效果，区别在于使用Transitions功能时只能通过指定属性的开始值与结束值，然后平滑的过度，而Animations则通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现更为复杂的动画

3.Animations：

使用keyframes建立关键帧集合

animations:keyframes duration timing-function

4.实现动画的方法：linear、ease-in、ease-out、ease、ease-in-out

二十、布局相关样式

A.多栏布局

1.通过column-count属性，将一个元素中的内容分为多栏进行显示

2.使用cloumn-width属性单独设置每一栏的宽度而不设定元素的宽度

3.使用column-gap属性来设定多栏之间的间隔距离

4.使用column-rule属性在栏与栏之间增加一条间隔线，可以设定宽度、颜色等，与border相同

B.盒布局

1.使用display:box，属性，实现盒布局

2.多栏布局宽度是相等的，盒布局不用

3.使用box-flex属性，将盒内部元素变为弹性盒布局

4.使用box-ordinal-group改变元素的显示顺序

5.使用box-orient指定元素的排列方向，垂直或水平

6.使用box-pack和box-align属性来指定元素中的文字、图像及子元素水平方向或垂直方向水平的对齐方式

二十一、Media Queries相关样式

1.媒体查询（media query）表达式，用以指定媒体类型，然后根据媒体类型来选择应该使用的样式

2.@media screen|all|print|handheld|tv|speech|braille|embossed|projection|tty and (max-width: xxxxpx){…………}

二十二、CSS3的其他重要样式和属性

A.颜色相关样式

1.rgba(x,x,x,alpha)：通过设定alpha通道的方法来定义RGBA颜色，实现透明效果

2.alpha通道不会将元素内的文字也变透明，opacity会将文字和背景色都透明

B.用户界面相关样式

1.css2中的outline属性，在元素周围绘制一条轮廓线，outline:color style width

2.css3中outline-offset属性，紧贴着边框外围绘制一条轮廓线

3.resize属性，允许用户以拖动的方式来修改元素的尺寸，主要用于可以使用overflow属性的任何容器元素中

C.取消对元素的样式指定——initial属性值

1.使用initial属性值让各种属性使用默认值，不等于直接删除对应属性

二十三、综合实例

https://github.com/zhangyue0503/html5js/tree/master/html5yucss3quanweizhinan