HTML5

标签：ack   shadow   视频   spel   target   gradient   音频   属性选择器   编辑   

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

HTML5

标签：ack   shadow   视频   spel   target   gradient   音频   属性选择器   编辑   

原文地址：http://www.cnblogs.com/sjmbug/p/7051030.html