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----------------------------------------------------
