新增标签：
| 标签 | 介绍 |
|---|---|
| header | 标签定义文档或者文档的一部分区域的页眉。一般作为介绍内容或者导航链接栏的容器。在一个文档中，可以定义多个元素。 |
| nav | nav定义页面中导航链接部分(传统导航条、腾讯新闻、侧边栏导航、内页导航、百度百科、翻页操作) |
| article | article标签定义独立的内容。内容本身必须是有意义的且必须是独立于文档的其余部分。如：论坛帖子、博客文章、新闻故事、评论 |
| aside | aside 标签定义 article 标签外的内容。应该与附近的内容相关 |
| section | section标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。标示文档的结构 |
| footer | 标签定义文档或者文档的一部分区域的页脚。如：文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。在一个文档中，您可以定义多个 元素。 |
| figure | 定义一段独立的流内容，一般是文档主体流内容中的一个独立单元。使用figcaption元素为figure元素添加标题。 |
| figure | 是一种元素的组合，带有可选标题。用来表示网页上一块独立内容。 |
| figcaption | 表示figure的标题。从属于figure，并且，figure中只能放置一个figcaption |
| hgroup | 表示定义文件中一个区块的相关信息，一般用作放置标题标签的容器。 |
| dialog | 标签定义一个对话框、确认框或窗口 |
| video元素 | 在HTML5中专门用来播放网络上的视频或者电影。 |
| audio元素 | 在HTML5中专门用来播放网络上的音频。 |
| bdi | 定义文本的文本方向，使其脱离其周围文本的方向设置。 |
| canvas | 定义图形。 |
| mark | 定义有记号的文本 |
新增样式
一、边框
| 属性 | 描述 |
|---|---|
| border-radius | 圆角 |
| border-image | 图片边框 |
二、背景
| 属性 | 描述 |
|---|---|
| background-image | 添加背景图片 |
| background-size | 设置背景图片尺寸 |
| background-origin | 指定背景图像的位置区域 |
| background-clip | 背景剪裁 - 从指定位置开始绘制 |
三、渐变
| 属性 | 描述 |
|---|---|
| Linear Gradients | 线性渐变 - 向下/向上/向左/向右/对角方向 |
| Radial Gradients | 径向渐变 - 由它们的中心定义 |
四、文本阴影
| 属性 | 描述 |
|---|---|
| text-shadow | 文本阴影 - 指定水平阴影，垂直阴影，模糊的距离，以及阴影的颜色 |
| box-shadow | 盒子阴影 |
| text-overflow | 文本溢出 - 指定应向用户如何显示溢出内容 |
| word-wrap | 允许对长的不可分割的单词进行分割并换行到下一行 |
| word-break | 规定非中日韩文本的换行规则 |
五、字体
| 属性 | 描述 |
|---|---|
| @font-face | 首先定义字体的名称（比如 myFirstFont），然后指向该字体文件 |
六、2D转换
| 属性 | 描述 |
|---|---|
| translate() | 根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动 |
| rotate() | 在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转 |
| scale() | 该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数 |
| skew() | 包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。 |
| matrix() | matrix()方法和2D变换方法合并成一个。matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。 |
七、3D转换
| 属性 | 描述 |
|---|---|
| translate3d(x,y,z) | 定义 3D 转化 |
| translateX(x) | 定义 3D 转化，仅使用用于 X 轴的值 |
| translateY(y) | 定义 3D 转化，仅使用用于 Y 轴的值 |
| translateZ(z) | 定义 3D 转化，仅使用用于 Z 轴的值 |
| scale3d(x,y,z) | 定义 3D 缩放转换 |
| scaleX(x) | 定义 3D 缩放转换，通过给定一个 X 轴的值 |
| scaleY(y) | 定义 3D 缩放转换，通过给定一个 Y 轴的值 |
| scaleZ(z) | 定义 3D 缩放转换，通过给定一个 Z 轴的值 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转 |
| rotateX(angle) | 定义沿 X 轴的 3D 旋转 |
| rotateY(angle) | 定义沿 Y 轴的 3D 旋转 |
| rotateZ(angle) | 定义沿 Z 轴的 3D 旋转 |
| perspective(n) | 定义 3D 转换元素的透视视图 |
八、过渡
| 属性 | 描述 |
|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性 |
| transition-property | 规定应用过渡的 CSS 属性的名称 |
| transition-duration | 定义过渡效果花费的时间，默认是 0 |
| transition-timing-function | 规定过渡效果的时间曲线，默认是 “ease” |
| transition-delay | 规定过渡效果何时开始，默认是 0 |
九、动画
| 属性 | 描述 |
|---|---|
| @keyframes | 规定动画 |
| animation | 所有动画属性的简写属性，除了 animation-play-state 属性 |
| animation-name | 规定 @keyframes 动画的名称 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒，默认是 0 |
| animation-timing-function | 规定动画的速度曲线，默认是 “ease” |
| animation-delay | 规定动画何时开始，默认是 0 |
| animation-iteration-count | 规定动画被播放的次数，默认是 1 |
| animation-direction | 规定动画是否在下一周期逆向地播放，默认是 “normal” |
| animation-play-state | 规定动画是否正在运行或暂停，默认是 “running” |
| animation-fill-mode | 规定对象动画时间之外的状态 |
十、多列
| 属性 | 描述 |
|---|---|
| column-count | 规定元素应该被分隔的列数 |
| column-fill | 规定如何填充列 |
| column-gap | 规定列之间的间隔 |
| column-rule | 设置所有 column-rule-* 属性的简写属性 |
| column-rule-color | 规定列之间规则的颜色 |
| column-rule-style | 规定列之间规则的样式 |
| column-rule-width | 规定列之间规则的宽度 |
| column-span | 规定元素应该横跨的列数 |
| column-width | 规定列的宽度 |
| columns | 规定设置 column-width 和 column-count 的简写属性 |
选项卡的几种写法
html
<div id="div1">
<input class="active" type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<div style="display:block;">111</div>
<div>222</div>
<div>333</div>
</div>
css
.active{
background:red;
}
#div1 div{
width:200px;
height:200px;
border:1px solid red;
display:none;
}
js
window.onload=function(){
var oDiv=document.getElementById("div1");
var aInput=oDiv.getElementsByTagName("input");
var aDivCon=oDiv.getElementsByTagName("div");
for(var i=0;i<aInput.length;i++){
aInput[i].index=i;
aInput[i].onclick=function(){
for( var i=0;i<aInput.length;i++){
aInput[i].className="";
aDivCon[i].style.display="none";
}
this.className="active";
aDivCon[this.index].style.display="block";
}
}
}
jq写法
$(function(){
$("#div1").find("input").click(function(){
$("#div1").find("input").attr("class","");
$("#div1").find("div").css("display","none");
$(this).attr("class","active");
$("#div1").find("div").eq($(this).index()).css("display","block")
});
})