编码规范、垂直居中、伪类和伪元素

1、平时常用写代码遵守的编码规范

• HTML规范
  HTML标签语义化，减少无意义的标签
  标签名小写，正确闭合标签
  使用HTML5的doctype来启用标准模式，
  在html标签上设置正确的lang属性，一般是
  属性值必须用双引号包围
  在meta里声明字符编码为utf-8
  遵守样式分离原则，写HTML时不要想CSS的写法
  使用外链的CSS和JavaScripe，属性type可以省略
  尽量用alt标签去描述图片
  习惯性书写注释，方便日后维护
  IE 支持通过特定的 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。如
  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