HTML5与CSS3

一、HTML5与HTML4的区别

    新增的结构元素（section、article、aside、header、hgroup、footer、nav、figure、figcaption）

<header>

<nav>

<article>             <section>

<aside>

<footer>

  

   新增的其他元素

video、audio、embed、mark、meter、time、rupy、rt、rp、wbr、canvas、command、details、datalist、datagrid、keygen、output、source、menu

  新增的input元素的类型

email、url、number、range、date、month、week、time、datetime、datetime-local

  新增的表单相关属性

autofocus、placeholder、fieldset、required、autocomplete、min、max、multiple、pattern、step、formaction、formenctype、formmethod、formnovalidate、formtarget、novalidate

  新增的链接相关属性

a、area：media、area：hreflang和rel、link：sizes、base：target

  新增的其他属性

ol：reversed、meta：charset、menu：type和label、style：scoped、script：async

   全局属性

contentEditable属性、designMode属性、hidden属性、spellcheck属性、tabindex属性

 二、HTML5的结构

（一）结构元素

    1、article元素

    2、section元素

    3、nav元素

    4、aside元素

    5、time元素与微格式：<time datetime=" "></time>

    6、pubdate属性（用在article元素中的time元素上，表示是time元素代表了文章或者是整个网页的发布日期）

    7、header元素、hgroup元素：将标题及其子标题进行分组的元素、footer元素

    8、address元素：在文档中呈现联系信息

  （二）HTML5结构

    1、大纲（显式编排内容区块、隐式编排内容区块、标题分级、不同的内容区块可以使用相同级别的标题）

     2、对新的结构元素使用样式：article,aside,dialog,figure,footer,header,legend,nav,section{display:block;}；article元素的样式

 三、表单与文件

     1、新增元素与属性

新增属性：form属性、formaction属性、formmethod属性、placeholder属性、autofocus属性、list属性、autocomplete属性：on、off、“ ”；output元素的追加

     2、表单验证

required属性、pattern属性、min属性和max属性：数值类型和日期类型的input元素的专业属性、step；

显式验证：checkValidity方法：用于form元素与input元素（包括select元素与textarea元素），调用该方法可以显式地对表单内所有元素内容或单个元素内容进行有效性验证；取消验证：第一种方法是利用form元素的novalidate属性，可以关闭整个表单验证，需要提交时先设置为true，之后再设置为false。第二种方法是利用input元素或submit元素的formnovalidate属性，利用input元素的formnovalidate属性可以让表单验证对单个input元素实效，对submit按钮使用了formnovalidate属性，整个表单验证都实效了；自定义错误信息：setCustom Validity方法（属于input元素）

      3、增强的页面元素

figure元素与figcaption；details元素（summary）；mark元素；progress元素；meter元素：表示规定范围内的数量值。（value、min、max、low、high、optimun）；

menu元素与command元素；ol列表：start属性与reverse属性；改良的dl列表：dl>dt>dd；加以严格限制的cite元素：cite元素表示作品的标题，该作品可以在页面中被详细引用，也可以只在页面提一下；重新定义的small元素

       4、文件API

fileList对象与file对象：multipe属性；Blob对象：表示二进制原始数据，它提供一个slice方法，可以通过该方法访问到字节内部的原始数据库。file控件添加了accept属性；FileReader接口：主要用来把文件读入内存，并且读取文件中的数据。FileReader接口的方法：readAsBinaryString、readAsText、readAsDataURL、abort。FileReader接口的事件：onabort、onerror、onloadstart、onprogress、onload、onloadend

       5、拖放API

实施拖放的步骤：1、将要拖放的对象元素的draggable属性设为true（draggable="true"）。2、编号与拖放有关的事件处理代码：draggstart、drag、dragenter、draggover、dragleave、drap、dragend；DataTransfer对象的属性与方法；设定拖放时的视觉效果；自定义拖放图标：setDragImage()：接收三个参数，第一个参数image设定为拖放图标的图标元素，第二个参数X为拖放图标离鼠标指针的x轴方向的位移量，第二个参数Y为拖放图标离鼠标指针的Y轴方向的位移量

四、绘制图形

      1、canvas元素的基础知识

绘制矩形：1、取得canvas元素，2取得上下文（getContext），3、填充与绘制边框（fill、stroke），4、设定绘图样式（style：fillStyle、strokeStyle），5、指定线宽（lineWidth），6、指定颜色值，7、绘制矩形（fillRect()、strokeRect()）,8、擦除指定的矩形区域中的图形（clearRect()）

       2、使用路径

绘制图形：1、开始创建路径（context.beginpath()），2、创建图形的路径（圆形路径：context.arc()），3、路径创建完成后，关闭路径（context.closepath()），4、设定绘制样式，调用绘制方法，绘制路径；moveTo与lineTo；使用bezierCurveTo绘制贝济埃曲线：bezierCurveTo()

       3、绘制渐变图形

绘制线性渐变：context.createLinearGradient()、context.addColorStop(offset,color)；绘制径向渐变：context.createRadialGradient()

       4、绘制变形图形

平移：context.translate()；扩大：context.scale()；旋转：context.rotate(angle)；

       5、图形组合

context.globalCompositeOperation-type：type的值：source-over（默认值）、destination-over、source-in、destination-in、source-out、destination-out、source-atop、destination-atop、lighter、xor、copy；给图形绘制阴影：shadowOffsetX：阴影的横向位移量、shadowOffsetY：阴影的纵向位移量、shadowColor：阴影的颜色、shadowBlur：阴影的模糊范围

       6、使用图像

绘制图像：context.drawImage(image,x,y)；图像平铺：context.drawImage()、context.createpattern(image,type)；图像裁剪：clip、save、restore；图像处理：context.getImageData()；绘制文字：void fillText(text,x,y,[maxWidth])与void stroke Text(text,x,y,[maxWidth])、context.measureText(text)

       7、补充知识

保存于恢复状态：save、restore；保存文件：toDataURL(type)；简单动画的制作：1、预先编写好用来绘图的函数，在该函数中先用clearRect方法将画布整体或局部擦除。2、使用setInterval方法设置动画的间隔时间

五、多媒体播放

    1、video元素与audio元素的基础知识（source）

    2、属性

src、autoplay、preload：none、metadata、auto。poster（video元素独有属性）、loop、control、width与height（video元素独有属性）、error属性、networkState属性、currentSrc属性、buffered、readyState属性与seekable属性、currentTime属性、startTime属性与duration属性）

    3、方法（play方法、pause方法、load方法、canplayType方法）

    4、事件（事件处理方式：监听的方式：videoElement.addEventListener(type,listener,useCapture)；事件介绍；事件铺抓实例）

    5、本地存储

Web Storage：sessionStorage：保存数据：sessionStorage.setItem(key,value)。读取数据：变量=sessionStorage.getItem(key)。、localStorage：保存数据loadStorage.setItem(key,value)。读取数据：变量=localStorsge.getItem(key)；简单Web留言本：savaStorage函数：newDate().getTime()、loadStorage函数：localStorage.length、localStorage.key(index)、clearStorage函数；作为简易数据库来利用

     6、本地数据库

SQLlite：1、创建访问数据库的对象：openDatabase(数据库名，版本号，数据库的描述。数据库的大小）方法。2、使用事务处理：transaction方法；用executeSql来执行查询：transaction.executeSql(aqiquery,[ ],dataHandler,errorHandler)；transation方法中的处理：addData函数与showAllData函数

六、离线应用程序

     1、离线Web应用程序详解

     2、manifest文件（第一行必须是“CACHE MANIFEST”。资源文件有三类：CACHE、NETWORK、FALLBACK）

     3、浏览器与服务器的交互过程

     4、applicationCache对象（swapCache方法、update方法；applicationCache对象的事件）

七、通信API

     1、跨文档消息传输（postMessage（message，targetOrigin））

     2、Web Sockets 通信

八、使用Web Workers 处理线程

     1、基础知识

     2、与线程进行数据的交互

     3、线程嵌套（单层嵌套；在多个子线程中进行数据的交互；）

     4、线程中可用的变量、函数与类

self、postMessage、onmessage、importScript（urls）、navigator、sessionStorage/localStorage、XMLHttpRequest、Web Workers、setTimeout()/setInterval、close、eval()、isNAN()、escape()、object、webSockets

九、获取地理位置信息

    1、Geolocation API 的基本知识

（1、取得当前地理位置：getCurrentPosition()。2、持续监视当前地理位置的信息：watchPosition()。3、停止获取当前用户的地理位置信息：clearWatch(watchId)：该方法的参数为调用watchCurrentPosition方法监视地理位置信息时的返回的参数）

    2、position对象

（latitude、longitude、altitude、accuracy、altitudeAccurancy、heading、speed、timestamp）

    3、在页面上使用Google地图

十、CSS3

    1、选择器

（1、新增的：att*=val 、att^=val、att$=val。

    2、结构性伪类选择器：first-line、first-letter、before、after。

    3、选择器：root、not、empty和target。

   4、选择器：first-child、last-child、nth-child(even/odd/num)、nth-last-child(even/odd/num)。

   5、选择器：nth-of-type和nth-last-of-type。

   6、循环使用样式：nth-child(n)中的n用an+b的形式表示，a表示每次循环中共包含几种样式，b表示指定的样式在循环中所处的位置。

   7、only-chlid：选择器指定当某个父元素中只有一个子元素时才使用的样式。

   8、UI元素状态伪类选择器：E:hover、E:active、E:focus、E:enabled、E:disabled、E:read-write、E:checked、E:default、E:indeterminate、E::selection、E:read-only、E:read-write。

   9、通用兄弟元素选择器：<子元素> -<子元素之后的同级兄弟元素>{ }

）

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

（1、使用选择器来插入文字：使用选择器来插入内容：伪元素：after、before{content:" "}；指定个别元素不进行插入：none。

    2、插入图像文件：before/after{ content:url(mark.png)}；将alt属性的值作为图像的标题显示：attr；

    3、使用content属性来插入项目编号：<元素>:before{content:counter(计数器名)}、<元素>{counter-increment:before选择器或after选择器中指定的计数器名}、在字符串两边添加嵌套文字符号：open-quote、close-quote

）

     3、文字与字体相关样式

（1、给文字添加阴影——text-shadow属性：text-shadow:length length length color。

    2、让文本自动换行——word-break属性：normal、keep-all、break-all。

   3、让长单词与URL地址自动换行——word-wrap属性：break-word。

   4、使用服务器端字体——Web Font与@font-face属性：网页上的与本地的差别在于：src:url()与src:local()。属性值：font-style、font-variant、font-weight、font-stretch、font-size、src。

   5、修改字体种类而保持字体尺寸不变——font-size-adjust属性：aspect值=X-height除以该字体的尺寸，x-height值文常数可以查出；浏览器对于aspect值的计算方法：c=(a/b)s，a表示实际使用的字体的aspect值，b表示修改前字体的aspect值，s表示指定的字体尺寸，c为浏览器实际显示时的字体尺寸。

）

     4、盒相关样式

（1、盒的基本类型：display：block和inline；inline-block类型：并列显示的元素的垂直对齐方式是底部对齐，为了将垂直对齐方式改为顶部对齐在样式中加入vertical-align属性；inline-table类型；list-item类型；run-in类型与compact类型；表格相关类型；none类型。

    2、对于盒中容纳不下的内容的显示：overflow属性：hidden、scroll、auto、visible；overflow-x属性与overflow-y属性；text-overflow属性：white-space:nowrap、ehllipsis。

     3、对盒使用阴影：box-shadow:length length length color；对盒内子元素使用阴影；对第一个文字或第一行使用阴影；对表格及单元格使用阴影；指定针对元素的宽度与高度的计算方法：box-sizing属性：content-box、border-box

）

     5、与背景和边框相关样式

（1、与背景相关的新增属性：background-clip属性：指定背景的显示范围：border、padding；background-origin属性：指定绘制背景图像的绘制起点：padding、border、content；background-size属性：指定背景图像的尺寸；background-break属性：指定内联元素背景图像进行平铺是的循环方式：bounding-box、each-box、continuous。      

    2、在一个元素中显示多个背景图像：background-image、background-repeat、background-position、background-clip、background-origin、background-size。

    3、圆角边框的绘制：border-radius属性：指定两个半径时，在chrome浏览器与safri浏览器中，第一半径椭圆的水平方向半径，第二个半径为椭圆的垂直方向的半径；在Firefox浏览器与opera浏览器中，第一个半径作为边框左上角与右下角的圆半径，第二个半径作为边框右上角和左下角的圆半径、不显示边框的时候 border：none，浏览器将把背景四个角绘制为圆角、修改边框种类的时候、绘制四个角不同半径的圆角边框：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius。

     4、使用图像边框：border-image：url() A B C D/border-width  topbottom leftright，topbottom与leftright可以指定的值有：repeat、stretch、round

）

     6、CSS3中的变形处理

（1、transform功能的基础知识：旋转：rotate（deg）、缩放：scale()、倾斜：skew(deg,deg)、移动：translate()。

    2、对一个元素使用多种变形的方法：指定变形的基准点：transform-origin:left/center/right

）

     7、CSS3中的动画功能

（1、Transitions功能：transition:property duration timing-function、使用Transitions功能同时平滑过渡多个属性值。

    2、Animations功能：Animations功能的使用方法：开始帧、关键帧、结束帧：@-webkit-key-frames 关键帧集合名 {创建关键帧的代码}、实现多个属性值同时改变的动画：在各关键帧中同时指定这些属性，可以通过antimation-iteration-count属性指定动画的播放次数。

    3、实现动画的方法：linear、ease-in、ease-out、ease、ease-in-out。

    4、实现网页的淡入效果：在开始帧和结束帧改变页面的opacity

）

     8、布局相关样式

（1、多栏布局：column-count、column-width、column-gap、column-rule。

    2、盒布局：float、position、box-sizing:border-box；弹性盒布局：使用自适应窗口的弹性盒布局：box-flex、改变元素的显示顺序：box-ordinal-group、改变元素的排列方向：box-orient:vertical/horizontal、元素与高度的自适应：box-orient：vertical/horizontal、使用弹性盒布局来消除空白：使得多个参与排列的元素的总宽素与总高度始终等于容器的宽度和高度，使用box-flex属性的元素的宽度与高度总会自动扩大、指定水平方向与垂直方向的对齐方式：box-pack属性及box-align属性

）

     9、Media Queries相关样式

（1、根据浏览器的窗口大小来选择使用不同的样式：@media screen and (min-width:A px){ }、@media screen and (min-width:A px) and (max-width:A px){ }、@media screen and (max-width:A px){ }。

   2、在iPhone中的显示：利用<meta>标签在页面中指定Safari浏览器在处理本页面时按照多少像素的窗口宽度来进行：<meta name="viewport" content="width=" A px" ">。 

   3、Media Queries的使用方法：@media 设备类型 and （设备特性）{样式代码}、设备类型：all、screen、print、handheld、tv、speech、braille、embossed、projection、tty，在表达式中加not关键字：表示对后面的表达式执行取相反操作或only关键词：表示让那些不支持media queries但是能读取media type的设备的浏览器将表达式中的样式隐藏起来

）

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

（ 1、颜色相关样式（利用alpha通道来设定颜色：对RGB颜色设定alpha通道、对HSL颜色设定alpha通道、alpha通道与opacity属性的区别、指定颜色值为transparent。

     2、用户界面相关样式（轮廓相关样式：outline属性：outline-color、outline-style、outline-width、outline-offset；resize属性：主要用于可以使用overflow属性的任何容器元素中：none、both、horizontal、vertical、inherit。

     3、取消对元素的样式指定——initial属性值。

）

十一、综合实例

     1、使用HTML5中新增结构元素来构建网页

     2、使用HTML5+CSS3 来构建Web应用程序