HTML/CSS 开发人员编码规范

不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。这是个黄金定律，永远遵循同一套编码规范。

本文参考了不少文档，最后整理了这个规范，也是个人的学习总结。

需求

HTML 与 CSS 文件编码统一为不带BOM的 utf-8 编码
明确页面兼容的浏览器，以及浏览器测试权重，前台页面至少要支持 >= IE8，后台页面一般不做过高要求。
编写有效的代码，能通过代码校验工具 https://validator.w3.org/nu/ 验证 HTML，还有 http://jigsaw.w3.org/css-validator/validator.html.zh-cn 验证 CSS

规范

HTML 编码声明 <meta charset="utf-8">
HTML 语言属性 <html lang="zh-CN">，这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等。（ N年以后，应当使用<html lang="zh-cmn-Hans">，http://www.zhihu.com/question/20797118 ）
省略外链资源（图片及其它媒体资源）URL 中的 http / https 协议，使 URL 成为相对地址，避免 Mixed Content 问题，如：<script src="//www.google.com/code.js"></script>
HTML 标签、属姓、颜色使用小写字母，属性值用双引号包含
img标签尽量加上 width, height 属性，避免浏览器渲染时的较大抖动现象
单选框、复选框包含附加文字的表单输入框都应该利用 <label> 标签
语义化标签，根据 HTML 各元素设计的用途使用他们。这事关可访性、重用以及代码效率，例如h1-h6用于标题，<p> 用于段落，<a> 用于链接
使用 UTF-8 作为文件编码时，不需要使用 HTML 实体引用，如 &copyright;
虽然HTML5 定义了一些标签可以省略闭合标签，但我们建议 <br>, <hr>, <img>, <input> 等自闭合标签都应该在结尾添加 /，避免不同浏览器不可预知的问题

HTML 5 规范

使用 rem 作为字号、长度单位，需要 1px 级别精准定位的，仍然使用 px

样式统一

在统一浏览器默认样式上，reset.css 一度非常流行，normalize.css 现在取而代之：

https://github.com/necolas/normalize.css

如果项目使用 bootstrap.css，它默认集成的是 normalize.css

字体与排版

中文排版是个很麻烦的问题，如何构建最适合中文阅读的网页排版，可以使用不同的系统参考这篇文章：

type.css： http://typo.sofi.sh/

网页字体排印指南：http://aaaaaashu.me/shu/

经过调研，以下字体设置和顺序能够良好的兼容 Mac、Mac with Retina、Windows、Ubuntu。

font-family: -apple-system, "PingFang SC", "Lantinghei SC", "\5FAE\8F6F\96C5\9ED1", "Microsoft YaHei", FreeSans, "WenQuanYi Micro Hei", "Hiragino Sans GB", "Hiragino Sans GB W3", SimSun, sans-serif, tahoma, arial;

微软雅黑为 Windows 用户默认的中文字体
Lantinghei SC 为 Mac 较好的中文阅读字体，该字体在渲染比较纤细(像开启防锯齿效果)，适合阅读（参考36kr），未来可能会使用 PingFang SC,
Lucida Grande为 Mac 下西文字体。
Hiragino Sans GB 要在 Microsoft YaHei 的后面，因为Windows用户可能会安装丽黑，而丽黑在 Windows 上渲染很烂。虽然这样会让安装雅黑的Mac使用雅黑来渲染（只能牺牲这部分用户）
FreeSans 包括 Ubuntu 之类的 Linux 分发版包含的字体。（实测并没有卵用）
arial 等英文字体一般要在中文前面，但，IE8 下面某种情况会让雅黑失效，所以为兼容性考虑只能放后面。尚不知道有什么更好的解决办法?
smoothing 两个属性开启Chrome与Firefox的字体防锯齿功能，在Windows普通显示器上并没什么鸟用，如果使用 Lantinghei SC，也不用开启（因为它本来就纤细，开启后变得非常纤细）：

1 2	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;

Mac Firefox 的 Lantinghei SC 渲染粗体的时候明显粗了一号，如果使用Lantinghei SC，为了较好的兼容效果在使用粗体时可以设置font-weight:600，600这个值在普通显示器上与bold效果一样。

兼容性

不要使用 IE Tester，它不靠谱
按照微软官方的说法，IE 开发者工具中的浏览器模式也不一定靠谱
微软官方提供了各种 IE 测试虚拟机（ https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/#downloads ）
关于浏览器功能支持的更多细节请参考：http://caniuse.com/

其他兼容性问题

IE 8/9 不支持 transition
IE 8 设置min/max-width/height 会忽略 box-sizing: border-box 属性

一些兼容性方法

Placeholders

兼容 IE9 以下浏览器不支持 placeholder 属性

https://github.com/jamesallardice/Placeholders.js

html5shiv

兼容 IE9 以下浏览器不支持 H5 标签如

https://github.com/aFarkas/html5shiv

Respond

兼容 IE9 以下浏览器不支持 CSS3 媒体查询属性，如 @media

https://github.com/scottjehl/Respond

优化

工具

YSLOW，Yahoo发布的一款前端性能检测工具，提供各种浏览器插件：http://yslow.org/

浏览器渲染性能

关于浏览器渲染性能，可以参考这篇文章：
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/?hl=zh-cn

简单的理解（个人理解），就是浏览器需要加载完整个 DOM 树以及 CSSOM 树，最后才会渲染出来。所以在写 HTML/CSS 时应当避免一个大的布局 div 包含所有内容，在网速不理想的情况，页面会先是一片空白，然后突然全部展现。

尽可能的采用分级布局。

SEO优化

meta 标签中的 title, keywords, description，这个不用多说

重视 h1-h3 标签，不滥用
网站首页，h1标签可能会应用在logo上，通过text-indent隐藏h1标签文字=
网站列表页，h1标签可能会应用在频道、栏目名称上
网站内容页，h1标签通常应用在文章内容标题上，通过首页、内容页不同的导航，忽略内容页logo的h1标签
以上只是举例，没有绝对的，参考网易、搜狐等大站尚且也会这样做。

结论：对于一个页面来说，应当只有一个或极少量h1标签，少量的h2标签（频道、栏目title），适量的h3标签（推荐内容列表）。而其他使用普通的文字链接 a 标签即可。

strong 标签，仅次于 h 标签，可以少量的在页面上使用
文字链接 a 增加 title, 在页面需要截字时尤为重要
图片 img 标签需要 alt, title 属性

Demo

PC Demo

因显示原因，请自行格式化：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 必须作为head的直接子元素 -->
    <meta charset="utf-8">
    <!-- IE 版本Edge渲染，同时兼容Chrome GCF -->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,Chrome=1">
    <!-- 让山寨双核浏览器们使用webkit核心渲染，如360安全浏览器，搜狗，X -->
    <meta name="renderer" content="webkit">
    <!-- boostrap 或响应式设计要求 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- 告诉百度该页面只适合在PC上浏览 -->
     <meta name="applicable-device" content="pc">

    <title>Page title</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <!-- 浏览器默认会请求根目录favicon.ico，避免404 -->
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
    
    <!-- css 一般放在head头部，在浏览器渲染之前优先下载 -->
    <link  rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    
    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <script src="//cdn.bootcss.com/placeholders/4.0.1/placeholders.min.js"></script>
    <script src="//cdn.bootcss.com/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
     <![endif]-->
</head>

<body>
    <h1>Hello World</h1>
    
    <!-- 为了使页面更快的渲染，脚本一般放在底部，除非你的页面布局依赖js -->
    <script src="//cdn.bootcss.com/jquery/1.12.2/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

HTML5 Demo

参考文档
http://zoomzhao.github.io/code-guide/
http://amazeui.org/getting-started/html-css-guide
http://zhibimo.com/read/Ashu/front-end-style-guide/index.html