H5新增标签，水平垂直居中的几种常用方法与选项卡

H5新增了许多语义化标签，个人做出了一些整理

1. header   头部信息
2. footer   底部信息
3. nav     导航链接的部分
4. main   主体部分
5. section   独立的内容区块
6. aside   侧边栏内容
7. article   文章标签
8. mark   标记，内容显示背景颜色，可以修改
9. address   地址标签
10. time   表示日期或时间，也可以同时表示两者，相当于span标签
11. figure   figcaption
    表示一段独立的内容，一般表示文档主题流内容中的一个独立单元。figcaption表示figure的标题，从属于figure，并且figure中只能放一个figcaption
12. video   表示一段视频并提供播放的用户界面
13. audio   表示一段音频
14. canvas   使用JS代码做内容进行图像绘制

同样的新增了一些表单属性

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

水平垂直居中常用的几个方法
1.

div{
width: 200px;
height: 200px;
background: skyblue;
position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}

div{
width: 200px;
height: 200px;
background: blue;
position: absolute;
left:50%;
top:50%;
margin-left:-100px; //	1/2的容器宽度
margin-top:-100px; //	1/2的容器高度度
}

div{
width: 200px;
height: 200px;
background: blue;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

div{
width:600px;
height:600px;
display:flex;  //弹性布局是页面内的div水平垂直居中
justify-content:center;
align-items:center;
}

手写选项卡
说实话，无论是jQuery，还是vue之类的都比原生js写要方便得多😆
这里就把代码中比较重要的部分写出来
css修饰要有的代码

.show {
width: 360px;
height: 360px;
}
.show li {
width: 360px;
height: 360px;
display: none;
}
.show li img {
width: 320px;
margin: 20px;
}

html结构如下

<div>
<div class="warp" id="warp">
<ul class="btn">
<li class="active">选项1</li>
<li>选项2</li>
<li>选项3</li>
</ul>

<ul class="show">
<li style="background: #f2f2f2;;display:block">
<img src="img/2.jpg" alt="" />
</li>
<li style="background: #f2f2f2;;"><img src="img/3.jpg" alt="" /></li>
<li style="background: #f2f2f2;;"><img src="img/4.jpg" alt="" /></li>
</ul>
</div>
</div>

js的全部代码

function tab(sel) {
this.init = function() {
this.btnEn();
};
this.btnEn = function() {
this.btns = document.querySelectorAll(sel + ' .btn li');
let that = this;
for (let i = 0; i < this.btns.length; i++) {
let btn = this.btns[i];
console.log(btn);
btn.onclick = function() {
console.log(this);
for (let j = 0; j < that.btns.length; j++) {
that.btns[j].classList.remove('active');
}
this.classList.add('active');
that.showon(i);
};
}
};
this.showon = function(index) {
this.shows = document.querySelectorAll(sel + ' .show li');
for (let i = 0; i < this.shows.length; i++) {
this.shows[i].style.display = 'none';
}
this.shows[index].style.display = 'block';
};
this.init();
}

new tab('#warp');
new tab('#warp2');

大概效果如下（写的比较简陋，见笑了😆）