首页 > 代码库 > HTML5
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="http://www.mamicode.com/苹果"></option>
<option value="http://www.mamicode.com/桃子"></option>
<option value="http://www.mamicode.com/栗子"></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