H5及Css3

HTML5&CSS3

新标签、新属性、新样式、新API老版本HTML&CSS的不足：

1.缺功能——视频、音频、定位

2.针对PC端

3.缺少很有用的样式HTML5HTML4.01新标签、新属性CSS3新样式HTML：

标签、属性CSS：样式API：接口、功能----------------------------------------------------

HTML5&CSS3新标签、新样式、新属性、新API1.

新标签：video、audio、mark、nav、section、header、footer、article、aside、time、bdi、canvas、command、datalist、details、dialog、embed、figcaption、figure、meter、output、progress、source、summary、track、wbr

2.新样式：圆角、阴影、变换、渐变、遮罩、动画、...

3.新属性：placeholder、autofocus、pattern...

4.本地存储：localStorage(5M)  比cookie(4K)强

5.数据交互：webSocket(双向)、ajax(单向)

6.地理信息：geolocation7.文件操作：File8.传统JS是单线程：WebWorker  单线程——1个  多线程——多个9.缓存：manifest10.canvas(画布)：网页里面绘图11.前台也有数据库：WebSQL、IndexedDB12.

移动端----------------------------------------------------HTML5&CSS3——移动端、全面优于传统HTML&CSS----------------------------------------------------flash的缺点：

1.资源占用特别大

2.移动端不支持[HTML5新标签]有用的：video、audio  1.属性：    src        源地址    poster      封面    autoplay    自动播放    controls    播放控制条  2.格式：    video      mp4    audio      mp3  3.源选择    [格式选择][负载均衡]4.跟JS配合*canvas(画布)：  画图：路径、闭合  描边(stroke()/strokeStyle/lineWidth)、填充(fill()/fillStyle)meter、progress、embedmeter-计量progress-进度条embed-一切文件都能包进来  embed          任何文件都能打开；调用本地的程序打开(风险：万一本地没有，就会显示不出来)  video、audio    音频、视频；浏览器内置的有用的：带有功能的"没用的"：语义化header        头部footer        底部nav          导航article      文章aside        侧边栏dialog        对话框summary      简介details      详情section      段、块mark          标记time          时间datalist      数据列表track        字幕figcaption    图片标题figure        包住整个图

command      命令output        输出----------------------------------------------------新样式：1.圆角    border-radius  a.写法：  border-radius:xxx;          4个角一样  border-radius:a b;          左上右下 右上左下  border-radius:a b c;        左上 右上左下 右下  border-radius:a b c d;      左上 右上 右下 左下  border-radius:x/y;  border-radius:xa xb xc xd/ya yb yc yd;  b.单位：px、em、%2.阴影  box-shadow    盒子阴影(元素)    box-shadow:[inset] x-offset y-offset [扩展] size color;  text-shadow  文字阴影    text-shadow:x y size color;3.渐变  线性渐变(直线渐变)  linear-gradient    linear-gradient(起点-left/top..., 颜色, 颜色...)    linear-gradient(角度, 颜色, 颜色...)    linear-gradient(颜色, 颜色...)  径向渐变(圆形渐变)  radial-gradient    radial-gradient(中心点, 大小, 颜色, 颜色, ...)遮罩  -webkit-mask:url(图片);          图片遮罩  -webkit-mask:linear-gradient();  渐变遮罩动画  transition  简单、容易    transition:时间 属性 ease;    linear      匀速    ease-in    加速    ease-out    减速    ease        先加后减    ease-in-out  animation  强大、复杂    keyframes  关键帧  animate.css----------------------------------------------------变换-transform  rotate      旋转  scale      缩放  translate  平移、位移  skew        斜切----------------------------------------------------transform同时用多个*反着的----------------------------------------------------表12小时        3601点          302点          60n点          30*n60分钟        3601分          62分          12n分          6*n----------------------------------------------------5:00      55:30      5.55:40      5.675:59      5.983----------------------------------------------------CSS2改变盒模型                需要重排CSS3所有的样式都不改变盒模型    不需要重排重绘、重排----------------------------------------------------浏览器前缀：chrome、Safari            webkitfirefox                  mozIE                        msOpare(欧朋)            

  o----------------------------------------------------回顾：HTML5标签CSS3样式：圆角、阴影、渐变----------------------------------------------------CSS3新单位：1.deg    degressCSS3新颜色：1.单词    red、yellow...2.#XXXXXX3.#XXX4.rgb()*5.rgba()rgba=rgb+alphargba(255,255,255,1)----------------------------------------------------见着横线，就大写  z-index              oDiv.style.zIndex  border-left-color    oDiv.style.borderLeftColor  -webkit-mask          oDiv.style.WebkitMask----------------------------------------------------pageX=clientX+scrollLeftpageY=clientY+scrollTop----------------------------------------------------