HTML5

1,HTML5新增结构元素
标签 说明
　　header 页面或页面中某一个区块的页眉,通常是一些引导和导航信息
　　nav 可以作为页面导航的链接组
　　section 页面中的一个内容区块,通常由内容及其标题组成
　　article 代表一个独立的,完整的相关内容块,可独立于页面其他内容使用
　　aside 非正文的内容,与页面的主要内容是分开的,被删除而不会影响到网页的内容
　　footer 页面或页面中某一个区块的脚注

2,HTML5新增网页元素
　　标签　　 说明
　　video 　　 定义视频,如电影片段或其他视频流
　　audio 　　 定义音频,如音乐或其他音频流
　　canvas 　　 定义图形
　　datalist　　 定义可选数据的列表
　　<input type="text" list="list1"/>
　　<datalist id="list1">
　　　　<option value="苹果"></option>
　　　　<option value="桃子"></option>
　　　　<option value="栗子"></option>
　　</datalist>
　　time 标签定义日期或时间
　　mark 在视觉上向用户呈现那些需要突出的文字
　　progress 运行中的进度(进程)

3,HTML废除的标签
　　能用css替代的元素:big center font s u strike等
　　不再使用frame框架
　　只有部分浏览器支持的元素:applet blink bgsound marquee等
　　其他被废除的元素:rb dir isindex listing nextid等

4,HTML新增全局属性
　　属性 　　　　 说明
　　contentEditable 规定是否允许用户编辑内容
　　designMode 　　 规定整个页面是否可以编辑
　　hidden 　　 规定对元素进行隐藏
　　spellcheck　　 规定是否必须对元素进行拼写或语法检查
　　tabindex 　　 规定元素的tab键跌制次序

5,HTML5废除的属性
　　table(align, bgcolor, border, cellpadding, width)
　　hml(version)
　　a/link(charset)
　　br(clear), img(align)

6,CSS3高级选择器
　　选择器 　　　　 描述
　　first-of-type　　 p:first-of-type选择属性其父元素的首个<p>元素的每个<p>元素
　　last-of-type 　　p:last-of-type选择属性其父元素的最后<p>元素的每个<p>元素
　　last-child 　　    p:last-child选择属性其父元素的最后一个子元素的每个<p>元素
　　first-child
　　nth-child(n)        p:nth-child(n)选择属性其父元素的第n个子元素的每个<p>元素
　　:before 　　　　p:before在每个<p>元素的内容之前插入内容
　　:after 　　　　 p:after在每个<p>元素的内容之后插入内容
　　-->clear:after { clear:both }
7,box-sizing
　　inherit
　　content-box(默认)
　　border-box : padding(内边距) 和 border(边框) 也包含在 width 和 height 中
8,等高布局
　　padding-bottom:9999px;
　　margin-bottom:-9999px;
　　原理: 内边距用来撑开放置背景
　　外边距修复布局
9,弹性盒模型,又叫伸缩盒模型(Flexible Box)
　　display: flex;
　　1)旧版本(2009)使用:display:box;
　　2)混合版本(2011)使用:display:flexbox;
　　3)新版本(当前规范):display: flex;
　　浏览器支持:
　　　　IE: 加前缀 -ms-flex
　　Chrome: 加前缀 -webkit-flex
　　Firefox: 加前缀 -moz-flex
　　标准: flex
　　display: flex;
　　display: -ms-flex;
　　display: -webkit-flex;
10,弹性盒模型的属性
　　改变元素排列方向 flex-direction
　　-row, row-reverse, column, column-reverse
　　元素伸缩性flex ,后面是比例值, 如 flex:1
　　自定义子元素的显示顺序 order
　　主轴上对齐方式 justify-content : center, space-between, space-around
　　侧轴上的对齐方式 align-self

11,HTML5新增表单元素
　　Email 电子邮件地址文本框
　　Tel 电话号码
　　url 网页的URL
　　number 只包含数字的字段
　　search 用于搜索引擎
　　range 特定值范围内的数值选择

12,HTML5新增属性对表单初步验证
　　required 表示此项必填
　　placeholder 向用户显示描述性说明
　　pattern 符合控件的值得模式规则(正则表达式)
　　autofocus 自动获取焦点

　　validityState对象
　　valueMissing
　　　　目的:确保表单中的值已填写
　　　　用法:在表单中将控件required特性设置为TRUE;
　　　　如:输入值为空,valueMissing会返回true
　　typeMismatch
　　　　目的:保证控件值与预期类型相匹配(url, email等)
　　　　用法:指定表单控件的type特性值
　　　　如:输入值不符合对应的类型规则,typeMismatch 返回 true
　　patternMismatch
　　目的:根据表单控件上设置的格式规则验证输入是否为有效格式
　　用法:在表单控件上设置pattern特性
　　如:输入值不符合模式规则,返回 true

用CSS验证表单
　　不通过
　　　　input:invalid, textarea:invalid{
　　　　}
　　通过
　　　　input:valid, textarea:valid{
　　　　}

12,CSS3厂商前缀
　　Chrome -webkit-
　　FireFox -moz-
　　Opera -o-
　　IE -ms-

13,CSS3结构 伪类选择器
　　E : first-child 第一个子元素
　　E : last-child
　　E : root E元素的根元素
　　E F : nth-child(n)
　　E : only-child

　　E:target 选择匹配E的所有元素,且匹配元素被相关URL指向
　　状态伪类选择器
　　E : checked
　　E : enable
　　E : disable

　　outline:none -->去除input获得焦点的默认样式

　　E F 后代选择器
　　E>F 子选择器
　　E+F 相邻兄弟选择器
　　E~F 通用选择器
　　属性选择器(同jQuery)
　　E[att ^= "val"] 开头
　　E[att $= "val"] 结尾
　　E[att *= "val"] 包含

border-radius
　　CSS3 border-radius - 指定每个圆角
　　四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
　　三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
　　两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
　　一个值： 四个圆角值相同

box-shadow:{
　　inset x-offset y-offset blur-radius speread-radius color
　　}
　　inset 阴影类型(没有就是外阴影)
　　x-offset 阴影水平偏移量
　　y-offset 垂直偏移量
　　blur-radius 模糊半径
　　speread-radius 阴影扩展半径
　　color 阴影颜色

　　text-shadow 文本阴影
　　text-shadow{
　　　　color offset-x offset-y blur_radius
　　}

14,CSS3背景
　　background-origin 背景起源位置
　　-padding-box, border-box, content-box
　　background-clip 背景裁切
　　-border-box, padding-box, content-box, text
　　background-size 背景大小
　　-cover, contain
CSS3渐变
　　线性渐变:background:linear-gradient(angle, colorStart, colorEnd)
　　径向渐变:background:radial-gradient(circle to top, colorSart, colorEnd)
变形
　　transform
　　-translate(x, y)
　　-scale(sx, sy) 缩放 scaleX(sx) scaleY(sy)
　　-skew(s,y) 倾斜
　　-rotate(a) 旋转
3D变形
　　-translate3d(x, y, z)
　　-scale3d(sx, sy, sz)
　　-scaleZ(sz)
　　-rotate3d(x, y, z, a)
　　-rotateX(a), rotateY(a), rotateZ(a)
注意:3d缩放必须配合其他变形元素使用
　　过渡
　　transition{
　　　　property duration timing-function delay
　　}
　　-property 过渡或动画模拟的css属性
　　-duration 完成过渡需要的时间
-
-
动画
　　animation{
　　　　name duration timing-function delay iteration-count
　　}
　　-name 动画的名字
　　-duration 动画播放所需的时间
　　-timing-function 动画播放方式
　　-delay 动画开始时间
　　-iteration-count 动画的循环次数(infinite)
　　定义动画
　　@keyframes 动画名字name{
　　from{
　　　　background: red;
　　}
　　to{
　　　　background: blue;
　　　　width: 200px;
　　　　height: 200px;
　　}
建议:把js文件放在body最后面,先加载css样式

--->清除浮动
　　.clear:after{
　　　　content: "";
　　　　display: block;
　　　　clear: both;
　　}