|
一、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.废除的元素：
4.新增的属性：
5.全局属性
三、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.实现步骤：
2.DataTransfer对象：可以实现定制拖放图标，让它只支持特定拖放等，甚至可以实现更复杂的拖放操作
五、绘制图形 A.canvas元素的基础知识 1.在页面上放置一个canvas元素，就相当于在页面上放置了一块“画布”，可以在其中进行图形的描绘，只是一个透明的区域，需要利用JS编写在其中进行绘画的脚本 2.要指定ID、width、height三个属性 3.相关api
B.使用路径 1.相关api
2.不关闭路径，已创建的路径会永远保留着，创建的图形会一次又一次地进行重叠 3.绘制线段
C.绘制渐变图形 1.createLinearGradient(xStart,yStart,xEnd,yEnd)线性渐变的LinearGradient对象 2.addCOlorStop(offset,color)追加渐变的颜色，至少追加两次，开始颜色与渐变颜色 3.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd )径向渐变 D.绘制变形图形 1.坐标变换
2.transform(m11,m12,m21,m22,dx,dy)矩阵变换 E.图形组合 1.globalCompositeOperation=type，type的值：
F.给图形绘制阴影 1.几个属性：
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.属性：
5.方法
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.保存：
4.获取：
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.本地缓存与浏览器缓存的区别：
2.Web应用程序的本地缓存是通过每个页面的mainfest文件来管理的，需要服务器添加text/cache-manifest的mime类型 3.只要页面上的资源文件被本地缓存过，下次浏览器打开这个页面时，总是先使用本地缓存中的资源，然后请求manifest文件 4.applicationCache对象代表了本地缓存，可以用它来通知用户本地缓存中已经被更新，也允许用户手工更新本地缓存
九、通信API 1.跨文档消息传输：
2.Web Sockets可以在服务器与客户端之间建立一个非HTTP的双向连接，实时的、永久的，除非被显式关闭 3.使用：
4.readyState属性可获取WebSocket对象的状态：CONNECTING(0)、OPEN(1)、CLOSING(2)、CLOSED(3) 十、使用Web Workers处理线程 1.在后台线程中不能访问页面或窗口对象，如果使用window或document会引起错误 2.使用：
3.线程中可以嵌套子纯种，可以把较大的后台线程切分成几个子线程 十一、获取地理位置信息 1.为window.navigator对象增加了一个geolocation属性 2.geolocation属性的方法：
3.position对象属性：latitude、longitude、altitude、accuracy、altitudeAccurancy、heading、speed、timestamp 十二、CSS3概述
十三、选择器 1.class属性缺点：本身没有语义；容易混乱； 2.CSS3提倡使用选择器来将样式与元素直接绑定，减少样式表的代码书写量 3.语法：E[foo$="val"]，可以使用^、?、*通配符 4.伪元素选择器，并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器，格式：选择器 类名:伪元素 {属性:值} 5.伪元素选择器：
6.UI元素伪类选择器：
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.基本类型：
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可以指定：
十七、与背景和边框相关的样式 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.使用图像边框
十八、CSS3中的变形处理 1.transform:xxx();
2.transform-origin:left|top|bottom|right|center，指定变形基准点，可多个参数联合设置，如左上 十九、CSS3中的动画功能 1.Transitions功能通过将元素的某个属性从一个属性值在指定的时间内平滑过滤到另一个属性值来实现动画功能，transition: property duration timing-function[,...]; 2.Animations与Transitions功能相同，都是通过改变元素的属性值来实现动画效果，区别在于使用Transitions功能时只能通过指定属性的开始值与结束值，然后平滑的过度，而Animations则通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现更为复杂的动画 3.Animations：
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 |
|
|
