H5 新增标签、css新增样式，手写 tab 切换 水平垂直居中

H5新增标签

1、结构标签

标签	描述
section	独立内容区块，可以用h1~h6组成大纲，表示文档结构，也可以有章节、页眉、页脚或页眉的其他部分
article	特殊独立区块，表示这篇页眉中的核心内容
aside	标签内容之外与标签内容相关的辅助信息
header	某个区块的头部信息/标题
hgroup	头部信息/标题的补充内容
footer	底部信息
nav	导航条部分信息
figure	独立的单元，例如某个有图片与内容的新闻块

2、表单标签

标签	描述
email	必须输入邮件
url	必须输入url地址
number	必须输入数值
range	必须输入一定范围内的数值
Date Pickers	日期选择器
a.date	选取日、月、年
b.month	选取月、年
c.week	选取周和年
d.time	选取时间（小时和分钟）
e.datetime	选取时间、日、月、年（UTC时间）
f.datetime-local	选取时间、日、月、年（本地时间）
search	搜索常规的文本域
color	颜色

3、媒体标签

标签	描述
video	视频
audio	音频
embed	嵌入内容（包括各种媒体），Midi、Wav、AU、MP3、Flash、AIFF等

4、其他功能标签

标签	描述
mark	标注（像荧光笔做笔记）
progress	进度条；<progress max="最大进度条的值" value="当前进度条的值">
time	数据标签，给搜索引擎使用；
	发布日期<time datetime="2014-12-25T09:00">9：00</time>
	更新日期<time datetime="2015- 01-23T04:00" pubdate>4:00</time>
ruby和rt	对某一个字进行注释
	<ruby><rt>注释内容</rt><rp>浏览器不支持时如何显示</rp></ruby>
wbr	软换行，页面宽度到需要换行时换行
canvas	使用JS代码做内容进行图像绘制
command	按钮
deteils	展开菜单
datailst	文本域下拉提示
keygen	加密
bdi	定义文本的文本方向，使其脱离其周围文本的方向设置

CSS3新增样式

一、边框

属性	描述
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 的简写属性

JS中选项卡的几种写法

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

script：

一、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";
        }
    }
}

二、jQuery写法

$(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")
    });
})

元素水平居中的几种方式

html:

<div class="parent">
    <div class="children">实现元素垂直居中的方法</div>
</div>

css:
1、通过定位和translate实现

<style>
        .parent{
            width:100%;
            height:400px;
            background:#666;
            position:relative;
        }
        /* 未知宽高 */
        .children{
            position:absolute;
            top:50%;
            left:50%;
            background:red;
            transform:translate(-50%,-50%);
        }
    </style>

2、通过定位和margin实现

<style>
        .parent{
            width:100%;
            height:400px;
            background:#666;
            position:relative;
        }
         /* 已知宽高 */
        .children{
            width:200px;
            height:200px;
            position:absolute;
            top:50%;
            left:50%;
            background:red;
            margin-left：-100px;
            margin-top:-100px;
        }
    </style>

3、通过定位和margin实现

<style>
        .parent{
            width:100%;
            height:400px;
            background:#666;
            position:relative;
        }
         /* 已知宽高 */
        .children{
            width:200px;
            height:200px;
            position:absolute;
            top:0;
            right:0;
            bottom:0;
            left:0;
           margin:  auto;
        }
    </style>

4、通过flex实现

<style>
        .parent{
            width:100%;
            height:400px;
            background:#666;
            display:flex;
            align-items:center;
            justify-content:center;
        }
        .children{
            background:red;
        }
    </style>

5、通过table属性实现

<style>
	/* 将父元素设置为table，子元素设置为table-cell，利用table属性实现 */
        .parent{
            display:table;
            width:100%;
            height:400px;
            background:#666;
        }
        .children{
            display:table-cell;
            vertical-align:middle;
            text-align:center;
            background:red;
        }
    </style>