编码规范、垂直居中、伪类和伪元素
1、平时常用写代码遵守的编码规范
-
HTML规范
HTML标签语义化，减少无意义的标签
标签名小写，正确闭合标签
使用HTML5的doctype来启用标准模式，<!DOCTYPE html>
在html标签上设置正确的lang属性，一般是<html lang="zh-CN">
属性值必须用双引号包围
在meta里声明字符编码为utf-8
遵守样式分离原则，写HTML时不要想CSS的写法
使用外链的CSS和JavaScripe，属性type可以省略
尽量用alt标签去描述图片
习惯性书写注释，方便日后维护
IE 支持通过特定的 <meta>标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。如<meta http-equiv="X-UA-Compatible" content="IE=Edge">
HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。
class
id，name
data-*
src,，for， type， href
title，alt
aria-*，role -
CSS规范
tab缩进用两个空格代替
css的:后加个空格，{前加个空格
每条声明后都加分号;
换行，而不要放在同一行
颜色用小写，能缩写就缩写，如#fff
小数不用写前缀，0.5s可写成.5s，0不用加单位
尽量缩写，如margin:5px 10px 5px 10px;可写成margin:5px 10px;
缩写属性，如font: 16px/1.5 palatino, georgia, serif;
声明顺序遵循以下
结构性属性
display、position、overflow、float、margin、padding
表现性属性
width、height、background、border、font
class命名的语义化
2、垂直居中有几种实现方式，给出代码范例
写了篇文章总结了一下：CSS水平居中与垂直居中的总结
3、实现如下效果，每种效果都只使用一个html 标签来实现
image.png
预览链接：http://js.jirengu.com/fuliy/2/edit
