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

H5新增标签

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

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

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

4、其他功能标签
（1）mark：标注（像荧光笔做笔记）
（2）progress：进度条；
（3）time：数据标签，给搜索引擎使用；
（4）command：按钮；
（5）deteils ：展开菜单；
（6）datailst：文本域下拉提示；

手写tab切换

html

css

js

效果：

css水平垂直居中方法

方案1：position 元素已知宽度
父元素设置为：position: relative;
子元素设置为：position: absolute;
距上50%，据左50%，然后减去元素自身宽度的距离就可以实现

<div class=“box”>
<div class=“content”>
div>
div>

.box {
background-color: #FF8C00;
width: 300px;
height: 300px;
position: relative;
}
.content {
background-color: #F00;
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;
}

方案2：position transform 元素未知宽度
如果元素未知宽度，只需将上面例子中的margin: -50px 0 0 -50px;替换为：transform: translate(-50%,-50%);

<div class=“box”>
<div class=“content”>
div>
div>

.box {
background-color: #FF8C00;
width: 300px;
height: 300px;
position: relative;
}
.content {
background-color: #F00;
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}

方案3：flex布局

<div class=“box”>
<div class=“content”>
</div>
</div>

.box {
background-color: #FF8C00;
width: 300px;
height: 300px;
display: flex;//flex布局
justify-content: center;//使子项目水平居中
align-items: center;//使子项目垂直居中
}
.content {
background-color: #F00;
width: 100px;
height: 100px;
}

效果：