HTML5与CSS3实现动态网页（上）
结构标签
article：标记定义一篇文章
header：标记定义一个页面后者一个区域的头部
nav：标记定义导航链接
section：标记定义一个区域
aside：标记定义页面内容部分的侧边栏
hgroup：标记定义文件中一个区块的相关信息
figure：标记定义一组媒体内容以及他们的标题
figcaption：标签定义figure元素的标题
footer：标记定义一个页面或一个区域的底部
dialog：标记定义一个对话框（会话框）类似微信
第一点补充：header/section/aside/article/footer
第二点补充：header/section/foooter >aside/article/figure/htroup/nav
多媒体标签
video：标记定义一个视频
audio：标记定义音频内容
source：标记定义媒体资源
canvas：画布很强大的API
embed：标记定义外部的可交互的内容或插件
多媒体标签意义：多媒体标签的出现亦为之富媒体的发展以及支持不适用插件的抢矿下即可操作媒体文件，极大的提升了用户体验
Web应用标签
状态标签
meter：状态标签（实时状体显示：气压气温）（Chrome Opera）
progress：状态标签（任务过程啊：安装 加载） (Chrome Firefox Opera)
列表标签
datalist：为input标记定义一个下拉列表，配合option（Firefox Opera）
details：标记定义一个元素的详细内容，配合summary( Chrome)
Menu标签
menu：命令列表（目前所有主流浏览器都不支持）
menuitem：menu命令里列表（只有FireFox8.0）支持
command：menu 标记定义一个命令按钮（只有IE9支持）
注释标签
ruby：标记定义注释或音标
rt：标记定义对ruby真的注释内容文本
rp：告诉那些不支持ruby元素的浏览器如何去显示
rp：不要放在rt标签内
其他标签
mark ：标记定义有标记的文本
output ：标记定义一些输入类型，计算表单结果配合oninput时间
keygen：标记定义表单里一个生成的建值
time：标记定义一个日期/时间，目前所有主流浏览器都不支持
删除的标签
纯表现的元素
Basefont big center font s strike tt u
对可用性产生负面影响的元素
frane frameset noframes
产生混淆的元素
acribym applet isindex dir
重定义标签
b：代表内联文本 通常是粗体 没有传递表示重要的意思
i：代表内联文本 通常是斜体 没有表示传递表示重要的意思
dd：可以同details与figure 一同使用，定义包含文本 dialog也可用
dt：可以同details与figure 一同使用，汇总细节，dialog也可以用
hr：表示主题结束，而不是水平线，虽然显示相同
menu：重新定义用户界面的菜单，配合commond或者menuitem使用
small：表示小字体，例如打印注释或者法律条款
strong：表示重要性而不是强调符号
input
date Pickers input 类型
Date——选取日，月，年
Month——选取月，年
Week——选取周和年
Time——选取时间（小时和分钟）
Datetime——选取时间，日，月，年（UTC时间）
Datetime-local——选取时间，日，月，年（本地时间）
新布局意义
语义化
html5 可以让很多更语义化的结构化代码标签代替大量无意义的地v标签
1：这种语义化大的特性提升了网页的质量和语义
2：减少了以前用于css调用的class和id属性
对搜索引擎的友好
新的结构标签带来的网页布局的改变及其提升对搜索引擎的友好
HTML5属性变化
input
email /url/ number/ range /Date picker /search /color/ tel
表单属性
autocomplete/ autofocus /muiltiple/ placeholder /required
链接属性
<link rel='icon' href= 'icon.git' type='images/gif' sezes = '16*16' />
target
<base href = "http://localhost/" target = "_blank" >
a:media "" (handhelp tv )
a:hreflang="zh" (设置语言 这里设置是中文)
a:rel = "external" （设置超链接的引用，这里超链接卫外部链接）
其他属性
script
defer：加载完脚本后并不执行，而是等整个页面加载完成之后执行
<script defer src="URl"></script>
async ：加载完脚本之后立刻执行，不用等整个页面都加载完成，异步执行
ol 有序列表
Start - 起始值
Reversed - 倒叙排序
html
manifest = "cache.manifest" (定义页面离线应用文件)
<html manifest = 'cache.manifest'>
简述API
简述Canvas
移动端应用
*CSS3*****
基本选择器
通配符选择器，元素选择器，类选择器，id选择器，后代选择器
新增加的选择器
子元素选择器，相邻兄弟选择器，通用兄弟选择器，群组选择器
属性选择器
对带有指定属性的HTML元素设置样式
使用CSS3 属性选择器，你可以指定元素的某个属性，或者你还可以同时指定元素的某个属性和其对应的属性值。
a[htrf]{} 带有atribute属性的Element元素设置样式
a[href=""]{} 为attribute="value" 属性的Element元素设置样式
a[href~=""]{} 包含value值
a[href^=""]{} 以value值开头的所有Element元素的样式
a[href$=""]{} 以value值结尾的所有Element元素的样式
a[href*=""]{} 包含value值的所有Element元素的样式
a[href|=""]{} 选择器attribute属性值为'value-' 或以'value' 开头的元素
伪类选择器
动态伪类
锚点伪类:：link :visited
用户行为伪类：:hover :active :focus
UI元素状态伪类：我们把：enabled ：disabled ：checked （opera）
CSS3结构类：
:first-child 选择属于父元素的首个子元素的每个Element元素
:last-child 选择属于父元素的最后一个子元素的element 元素的样式
:nth-child() 匹配属于其父元素的第N个子元素 ，不论元素类型
:nth-child(n) :nth-child(2n+1) :nth-child(odd):nth-child(even)
:nth-last-child() 匹配属于其元素第n个元素的每个元素 不论类型从最后
一个子元素开始计数
:nth-of-type(N)选择器匹配属于父元素的特定类型的第N个子元素每个
元素
:nth-last-of-type（n）指定元素类型
nth-last-child（n）不限定元素类型
:first-of-type 匹配属于其父元素的特定类型的首个子元素的每个元素
:last-of-type 匹配属于其父元素的特定类型的最后一个子元素的每个元素
:only-child 匹配属于其父元素的唯一子元素的每个元素
:only-of-type 匹配属于其父元素的特定类型的唯一子元素的每个元素
:empty 匹配没有子元素（包括文本节点）的每个元素
否定选择器
:not(Element/selector) 选择器匹配非指定元素/选择器的每个元素
父元素：not(子元素/子选择器) （Father:not(Children/selector)）
a:not(:last-of-type)
权重
权重等级与权值
行内样式（1000）> ID选择器 >类属性选择器和伪类选择器（10）> 元素和伪元素( 1 ) > * （0）
包含更高权重的选择器的一条规则拥有更高的权重
ID选择器（#idValue）的权重比属性选择器[id='idValue']高
带有上线文关系的选择器比单纯的元素选择器权重高
无论多少元素组成的选择器，都没有一个class 选择器权重高
通配符选择器权重是0，被继承的css属性也带有权重 ，权重也是0
伪元素
css伪元素用于向某些选择器设置特殊效果
语法格式
元素::伪元素 （Element::pseudo-element）
Element::first-line 样式对element第一行文本格式化 (只能用于块级元素)
Element::first-letter 第一个首字母设置特殊样式 （只用于块级元素）
Element::before 在元素内容前面插入新内容 行级元素
Elemetn::after 在元素内容后面插入新内容
Element::selection 用于设置在浏览器中选中文本后的背景色和前景色
圆角理论：
border-radius
一个值：四个圆角值相同
两个值：第一个值为左上角与右下角，第二个值为右上角与左下角
三个值：第一个值为左上角，第二个值为右上角与左下角，第三个值为右下
第四个值：左上角，第二个至为右上角，第三个值为右下角，第四个值左下
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
-webkit-border-radius:50%;
-moz-border-radius:50%;
-ms-border-radius:50%;
-o-border-radius:50%;
border-radius:50%;盒阴影
box-shadow 属性
box-shadow:h-shadow v-shadow blur spread color inset;
边界图片
border-image 属性
border-image:source slice width outset repeat;
background-clip： border-box：背景被裁剪到边框盒
background-clip：padding-box：背景被裁剪到内边距盒
background-clip：content-box：背景被裁剪到内容盒
background-origin属性
background-origin 属性指定backg-position属性应该是相对位置
background-origin：padding-box border-box content-box
background-size：length|percentage|cover|contain
当只设置一个值时，第二个值根据图片的宽度值来等比缩放
当两个值都有，按设置值大小来显示图片
cover 即将背景图片等比例缩放以填满整个容器
background-image：url（"bg2.png"）,url("bg1.jpg"):
整个background
background：color position size repeat origin clip attachment image;
background-size: 90%;
background-origin: content-box;
background-clip: content-box;
background-attachment: fixed;
渐变
线性渐变 linear Gradients
background：linear-gradient（direction,color-stip1, color-stop2）
background：-o-linear-gradient（direction,color-stip1, color-stop2）
background:linear-gradient(angle.color-stop1.stop2,...)
径向渐变（radial gradients）
从起点到终点颜色从内想外进行圆形渐变（从中间向外拉）
background:radial-gradient(shape,color-stop1,color-stop2,...)
形状说明
circle - 圆形
ellipse - 椭圆（默认）
径向渐变 尺寸大小关键字
语法
background:radial-gradient(size,color-stop1,color-stop2,...)
关键字说明
closest-side : 最近边 farthest-side : 最远边
closest-corner: 最近角 farthest-corner ： 最远角
background: -webkit-repeating-radial-gradient(30% 70%, closest-side circle, red, yellow, blue, green);
CSS3转换
css3 rotate() 转换
通过制定的角度参数对原元素制定一个2D rotation （ 2D旋转）
语法
transform ：rotate（<angle>） 角度可以为正值或者负值
css3 translate() 平移
移动translate（）方法 根据X轴和顶部Y轴位置给定的参数，从当前元素位置移动
translateX（x）仅水平方向移动（X轴移动）
translateY（Y）仅垂直方向移动（Y轴移动）
translate（x,y）水平方向移动和垂直方向移动（同时移动）
transform:translateX(200px);
css3 scale（） 缩放
缩放 scale
scale（）方法 指定对象2D scale （2D 缩放）
三种情况
scaleX(x) 元素仅水平方向缩放（X轴缩放）
scaleY( y) 元素仅谁知方向缩放 （Y轴缩放）
scale（x,y） 是元素水平方向和垂直方向同时缩放
语法
transform:scaleX(<number>)
transform:scaleY(<number>)
css3 skew（） 扭曲或者斜切
css3 matrix（） 矩阵或者混合
矩阵matrix
以一个含六值得（a,b,c,d,e,f）变换矩阵的形式指定一个2D变换
相当于直接饮用一个[a,b,c,d,e,f]变换矩阵
语法
transform：matrix(a,b,c,d,tx,ty);
参数说明
tx,ty ,就是基于X和Y坐标重新定位元素
是一个混合 rotate 旋转 translate 平移 移动 scale 缩放 skew 斜切
css3 rotate3d()
css3 translate3d()
css3 scale3d()
css3 matrix3d()
css3 perspective()
旋转rotateX
rotateX方法指定对象在X轴上的旋转角度
语法
transform:ratoteX(angle)
参数说明
angle表示旋转的角度
旋转rotate3d
rotate3d方法指定对象的3d旋转角度
语法
transform:rotate3d(x,y,z,angle);
参数说明
前三个参数分别表示旋转的方向想，x,y,z,第四个参数表示旋转角度
参数不允许忽略
移动 translateZ
translateZ方法制定对象Z轴的平移
语法
transform:translateZ(z);
参数说明
参数对应Z轴，不允许省略
移动translate3d()
trans;ate3d(x,y,z)
参数说明
分别对应X，Y，Z，轴 参数不允许省略
缩放scaleZ
scaleZ方法指定对象的z轴缩放
语法
transform:scaleZ(z);
参数说明
参数对象的Z轴，不允许省略
缩放scale3d
scale3d方法制定对象的3d缩放
语法
transform:scale3d(x,y,z)；
参数说明
分别对象x,y,z,参数不允许省略
transform-origin属性
语法
transform-origin:x-axis y-axis z-axis;
css3中的矩阵
css3中矩阵指的是一个方法 书写为matrix 和matrix3d
matrix 是元素的移动变换trasform 2D 变换矩阵为3*3
matrix3d 是元素的移动变换transform 3D变换规则是4*4 的矩阵
transform-style属性
transform-style属性指定嵌套元素是怎样在三维空间中呈现
语法
transform-style:flat/preserve-3d
perspective 属性
指定观察者[z=0]平面的距离 使具有三维位置变换的元素产生透视效果
语法
perspective:number | none
默认值
perspective:none:
perspective-origin属性
指定透视点的位置
语法
perspective-origin:x-axis,y-axis
backface-visibility属性
指定元素背面面向用户是否可见
语法
backface-visibility:visible | hidden;
css3过渡 transition
兼容性 IE10+ FireFox16+ CHrome26+ Safari6.1 Opera12.1
transtion-property 属性
检测或设置对象中参与过渡的属性（指定那个过渡的名称）
语法
transition-property ：none /all / property
transition-duration 属性
检测或设置对象过渡的秩序时间
语法
transtion-duration：time；
css3 transition 属性
transition-timing-function 属性
检索或设置对象中过渡的动画类型
transtion-property 指定属性名
transition-duration 过渡时间
transition-timing-function 过渡方法
transition-delay 延迟
css3 动画
animation 动画 anima 灵魂 animate 赋予生命
视觉暂留原理
人类具有‘视觉暂留’的特性 人的眼睛看到一幅画后或一个物体后，在0.34秒 内不会消失
动画原理
通过把任务的表情动作变化等分级后画成许多 瞬间的画幅，利用视觉暂留的原理。在一幅画还没有消失之前播放下一幅画，就会给你一种流畅的视觉变化效果
css3 动画
animation-name 属性
检测或设置对象所应用的动画名称
语法
animaiton-name : keyframename | none
animation-duration 属性
检索或设置对象动画的持续时间
语法
animation-duration :time
参数说明
time 指定动画播放完成花费的时间，默认的数值是0
animation-timing-function
timing 定时 调整 时间选择
animation-delay 属性
检索或这是对象动画的延迟时间
语法
animaiton-delay: time;
定义的是动画之外的事情
animation-iteration-count 属性
iteration 迭代 反复 重复
animation-iteration-count:infinte | <number>;
animation-direction 属性
检测或设置对象动画在循环中是否反向运动
animiatoin-direction: normal | reverse | akterbate | alternate-reverse
initial | inherit
normal 正常方向
reverse 反方向方向
alternate 动画先正常和运行再反向运行 并持续交替运行
alternate-reverse : 动画先反向运行再正方向运行，并持续交替运行
(上面的属性一定要设置为循环播放才能起作用)
animaiton-fill-node 属性
规定动画不播放时（当动画完后才能或当动画有延迟未播放时）要应用的元素样式
语法
animation-fil-mode:;
参数说明
none 默认值不设置对象动画之外的状态
forwards 设置对象状态动画结束时的状态
backwards 设置对象状态动画开始时的状态
both 设置对象状态为动画结束或开始的状态
naimation-play-state 属性
指定动画是否正常运行或已暂停
语法
animation-play-state : paused | running ；
参数说明
paused ： 指定暂停动画
running : 默认值 指定正在运行的动画
animation 属性
符合属性 检索或设置对象所应用的动画特效
语法
animation name duration timeing-function delay iteration-count direction fill-mode play-state;
css3 @keyframes {
keyframes-selector {
css-styles ; }
}
参数说明
animationname :必须写 定义 animation 的名称
keyframes-selector 必须写 动画持续时间的百分比 0 - 100% form(0%)
to(100%)
css-styles ： 必须写 一个或者多个合法的css样式属性
css3 will-change
1:position-fixed 替代 background-atachment
2:带图的元素放在伪元素中
3：巧用will-change
目标
增强页面渲染性能
CPU 和GPU
CPU即中央处理器解释计算机指令以及处理计算机软件中的数据
GPU即图形处理器 专门处理和绘制图形相关的硬件 GPU 是专为执行复杂
的数学和几何计算而设计的 有了它 CPU 就从图形处理的任务任务重解放出来
可以执行其他更多的系统任务
现状
css的动画 变形 渐变 并不会自动触发GPU加速 而是使用浏览器稍慢的软件渲染引擎在 transition transform和animation的世界里应该写在进度到GPU加快速度 只有3D 变形会有自己的layer 2D变形不会
translateZ() (or translate3D) Hack
为元素添加没有变化德3D变形 骗取浏览器触发硬件加速
代价
这种情况通过向他自己的层叠加元素 占用RAM和GPU存储空间
vill-change
提前通知浏览器匀速将要做什么动画 让浏览器提前准备何时的优化设置
语法
will-change ：auto scroll-position contents
auto 此关键字表示没有特定的意图 使用与他通常所做的任何启发式优化
scroll-position 表示将要改变元素的滚动位置
custom-ident 明确指定将要改变的睡醒与给定的名称
animateable-feature 可动画一些特定值 比如 left to[ margin 等
注意
勿滥用 提前生命 remove
/***/
