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