1、HTML4.01 XHTML1.0 ----HTML5.0 谷歌苹果为首-并没有得到WC 的支持
W3C 当前推动HTML5.0的发展 新的网络标准
2、跨平台 ：桌端 手机端
系统：安卓-JAVA 、IOS-Object C 、 塞班、 WP
2011年HTML5的起步 HTML+CSS+JavaScript==网页（页游）
WEB APP
2012 H5膨胀--->"跨平台"火了
Native App 性能好 安全 成本高
WEB APP 网页去模拟应用程序的视觉效果 成本最低 用户体验最差
Hybird App (Native App+HTML5)
混合开发 （IOS人员[性能层]+HTML5人员[表现层]=应用程序）
2013年 回归平稳期的开始
2014 无限滚动 （分层滚动）+单页----视差滚动
flat UI 扁平化设计
二、HTMl5新增标签
② 文档易读 、搜索引擎能够更好的理解页面中的内容、作为开发者，能够更快更准确的搜索到信息
<新增标签>:
article 定义文章 代表文档、页面或者应用程序中独立、完整、可以独自被外部引用的内容
header 定义页眉 aside 定义文章的侧边栏
figure一组媒体对象的以及文字 nav定义导航
figcaption定义figure的标题 section定义文档中的区段
footer定义页脚 time定义日期和时间
vidio 定义视频 canvas 定义图形，提供画布
audio定义音频 command表示命令按钮
embed插入各种多媒体 details表示用户要求得到并可以得到的详细信息
mark定义需要突出显示或者高亮的文本 wbr表示软换行
progress显示js中耗费的函数进程 hgroup定义对网页标题的组合
新增的input元素类型
<email> 输入E-mail地址的文本输入框
<url> 输入URL地址
<number> 输入数值的文本输入框
<range> 表示必须输入一定范围内的数字值的文本输入框
artical： 定义文章 代表文档、页面或者应用程序中独立、完整、可以独自被外部引用的内容
section：用于对网站或应用程序中的页面上的内容进行分块，一个section元素通常由内容以及标题组成。但section元素并非一个普通的容器元素；当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素。
新增了哪些用于结构（布局）处理的标签？（列举最为常用）
header articalaside footer nav section details
？问题：如何让IE8-兼容这些标签？（需要设计JS中的DOM）
三、CSS3之圆角边框border-radius
语法：
border-radius: 1-4 length|% / 1-4 length|%;
书写顺序：
4个值 左上 右上 右下 左下 例：border-radius：5px 5px 5px 5px;
3个值 左上 右上左下 右下 例： border-radius：5px 4px 5px;
2个值 左上右下 右上左下 例：border-radius：5px 4px ;
1个值 全部 例：border-radius：5px ；
① 默认情况下：水平垂直方向一样 （1~4）用 ' / '分隔开水平和垂直方向（不一样）
例如：border-radius:50px/100px;border-radius:50px 40px/ 80px 100px;
border-radius:50px 40px 20px/ 80px 100px 60px;
border-radius:50px 40px 20px 40px / 80px 100px 60px 50px;
②/ 前面表示水平方向，后面表示垂直方向。每个方向都可以用1~4个值，缩写的规则遵循“左上开始，顺时针旋转/ 只能写一个
③ IE9.0以前版本不支持border-radius
④ border-radius数值为合模型的一半就变成圆 ，记住：不是相对于合模型的width（如：965x1611），而是整个框才是，
如图所示
【代码小示例】
<!DOCTYPE html>
<html>
<head>
<style>
div
{
text-align:center;
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:350px;
border-radius:25px;
-moz-border-radius:25px; /* 老的 Firefox */
}
</style>
</head>
<body>
<div>border-radius 属性允许您向元素添加圆角。</div>
</body>
</html>
多色彩边框 （火狐）
border-image （谷歌）：
stretch 拉伸方式来填充边框背景图
repeat 平铺 图片碰到边界时超出截断
round 平铺 图片会工具边框的尺寸动态调整图片大小直至刚 好铺满整个边框
阴影 方向 （两个值控制） 模糊值 颜色
二维平面
x水平方向，正方向向右
y垂直方向，正方向向下
text-shadow：水平偏移量 垂直偏移量 阴影模糊值 颜色，
水平偏移量 垂直偏移量 阴影模糊值 颜色； （多个阴影用，隔开）
偏移量有正负值，颜色rgb(255,0,0,1)
.con2 p {
font-size: 90px;
color:#fff;
text-shadow: -1px -1px 1px rgba(0,0,255,1),
-2px -2px 1px rgba(0,0,254,0.5),
-3px -3px 5px rgba(0,0,253,0.4),
-4px -4px 5px rgba(0,0,252,0.3),
-5px -5px 15px rgba(0,0,252,0.2),
-6px -6px 10px rgba(0,0,252,0.2);
}
语法: box-shadow: h-shadow v-shadow blur spread color inset;
background: transparent;或者background:rgba(0, 0, 0, 0);
color: transparent;或者color:rgba(0, 0, 0, 0);
博客：http://blog.163.com/hongshaoguoguo@126/blog/static/180469812012612103720195?suggestedreading
CSS3蒙版
蒙版可以是一个图片，图片应当有URL地址
需要添加内核前缀
不含浏览器内核前缀的命令应当书写在最后 冒号对齐
不同形状 不同颜色 不同透明度 分别对最终结果造成什么影响?
① 颜色对图像没有任何影响
② 透明度——不透明度的部分为显示区域 、透明度部分为隐藏区域。半透明部分半透明显示区域。
命令：-webkit-mask-image: url('1.png');
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: 水平方向 垂直方向
↓ ↓ ↓ ↓
缩写：-webkit-mask: url('1.png') center center no-repeat ;
-webkit-mask-clip 蒙版裁剪位置
-webkit-mask-origin 蒙版原点位置
蒙版是能够应用渐变的。但是因为浏览器兼容的问题比较严重，通常不使用渐变作为蒙版的属性值，而是使用有“透明度梯度”的图片替代掉渐变，产生同样的功能。
CSS3 渐变
起点 （什么颜色、透明度）
【控制点】——可以没有 可以有多个
终点：（什么颜色 透明度 位置）
两种渐变类型——线性、径向
在线设渐变工具：http://www.colorzilla.com/gradient-editor/
利用渐变的功能，实现一下如下功能：
渐变代码（最新webkit内核）提示：
div{width:500px;
border:1px solid #000;
background:-webkit-linear-gradient(left,#f00,#ff0 25%,#0f0 40%,#0ff 55%,#00f 70%,#f00);
-webkit-background-clip:text;/*只有webkit内核支持text的剪切模式*/
color:transparent;
}
CSS3 倒影 -webkit-box-reflect
1.方向 -webkit-box-reflect: below/above/left/right
2.距离
3.透明度
<style>
img{width: 200px;
-webkit-box-reflect: below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 20%,rgba(0,0,0,0.6) 100%);}
</style>
移动端：尽可能不出现渐变、透明度等特效
耗费浏览器的性能
图片的选择，尽可能的规避掉png，gif，采用jpg的图片
利用圆角，阴影，变形去替代掉图片（按钮的背景）
background：
auto： 图片的真实大小——默认值
cover： 等比例缩放，缩放到完全覆盖容器，背景图像有可能超出容器
contain：等比例缩放，（当宽度或高度和容器宽度或高度达到相同时，停止缩放） 背景图像始终包含在容器之内
长度值，百分比。
contain用在移动端适配
例子：
.con {
width: 200px;
height: 200px;
background: url('1.png') 0 0 no-repeat;
background-size: cover; /* cover | auto | contain */
}
background-clip：
border-box | padding-box | content-box
clip为裁剪，截取 ，background-clip讲背景图片做适当的裁剪
1.background-origin ： border | padding | content
取值：
border:从border区域开始显示背景。
padding:从padding区域开始显示背景。
content:从content区域开始显示背景。
注意什么浏览器就内核前缀：-webkit-background-origin: padding;
变形（二维、三维立体）、过渡、动画
二维变形的变形方式：四种
旋转（一个值）、 缩放（两个值）、 平移（两个值）、 扭曲（两个值）
rolate scale translate skew
① transform：变形种类的名称（对应的属性值），多个种类之间使用空格分隔。一个（）中的属性值之间用逗号分隔。
② 二维平面的旋转，旋转围绕点进行，而旋转正方向默认为顺时针方向
③ 默认的旋转中心就是这个块的正中心，可以通过transform-origin去改变旋转中心
水平方向 垂直方向 --left top、数值、百分比
④ scale（0.5）缩小; scale(1.2) 放大
scale（0.5,1.2）; X轴缩小 Y轴放大
-webkit-transform: translate(200px,100px) rotate(39deg) skew(30deg) ;
↑ ↑ ↑ ↑ ↑ ↑ ↑
不同属性的设置顺序不同 会影响效果
CSS transition：过渡
参与过渡的属性、过渡时间、过渡方式（动画类型） 延迟时间 【需要写前缀】
一般情况下，transition添加在基本效果上，而不是hover效果中。
css原状态和hover状态设置为两种不同的样式，然后通过CSS3过渡进行‘渐变’处理
padding、color所有浏览器都支持渐变
background部分属性只得到了部分浏览器的支持（-webkit）
a鼠标移入，有下划线，变颜色，padding值（缓动）
写法： 一种： transition:padding 1s；
多种： transition: padding 1s,color 1.4s,
text-decoration 1.3s;
全部： transition: all 1s;
linear: 线性过渡。
ease：平滑过渡。
ease-in：由慢到块。
ease-out：由快到慢。
ease-in-out :由慢到快再到慢。
cubic-bezier：特定的贝塞尔曲线类型，4个数值需要在[0,1]区间。
①Z轴 方向垂直于平面坐标系向上（默认为垂直于屏幕。指向用户）
② rotate（线） — — rotateX rotateY rotateZ （3个）
③ 2个定位处理
④ 对2个div的父级 旋转（X轴或Y轴）
⑤ 变形方式——3D变形（transform包含两种变形方式，如果使用3D变形，必须提前声明）
⑥ -webkit-transform-style：preserve-3d；（父级）
⑦ transform+transition结合使用
⑧ -webkit-backface-visibility：hidden； //取消掉透视效果
视角：
-webkit-persepective：0；
0没设置 （值） 800px; 通常在body元素下
动画 animation
.wrap {
height:100px;
margin:10px;
-webkit-animation:colorChange 10s linear 1.5s infinite;
}
/*基本参数与transition完全相同，第一个参数表示的是调用哪个动画*/
/*infinite 表示无限循环
可以定义一个动画的循环次数 默认不循环
alternate 动画播放的偶次数，反方向播放动画；奇数次数时，正方向播放动画
*/
/* 定义动画 */
@-webkit-keyframes colorChange {
0%{ background:#f00;}
10%{ background:#ff0;}
20%{ background:#ff0;}
30%{ background:#0f0;}
40%{ background:#f0f;}
50%{ background:#f0a;}
60%{ background:#fff;}
70%{ background:#ff0;}
80%{ background:#0f0;}
90%{ background:#f0f;}
100%{ background:#f0a;}
}
过渡和动画的区别：
transition animation
1、transition多两个参数，循环和动画的方式
2、transition不能自行触发，通过hover等动作，或者结合JS进行触发。anmiation可以自行运行。
3、transition可控性相对比较弱，只能指定起始状态和结束状态，而animation可以定义多个关键帧。
4、动画在运行结束之后，需要回到初始状态
5、transition的作用，可以用一句话来概括，‘平滑’改变CSS样式
自适应布局==弹性布局——兼容性问题及其严重
网格布局grid——IE10+浏览器支持
filter滤镜CSS3（用于处理图片）——webkit
384
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
