语法
- 标签语法无错误，需要符合语义化，便于维护
- 标签必须合法且闭合、嵌套正确，标签名需小写，即便是 doctype 标签
- 用两个空格来代替制表符（tab），具体两个或四个可以跟随开发而定，但是要统一
规范
- 通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是，可以避免在 HTML中使用字符实体标记（character entity），从而全部与文档编码一致（一般采用 UTF-8 编码）。
<head>
<meta charset="UTF-8">
</head>
- head标签常用属性设置
<head>
<!-- 字符编码 -->
<meta charset="UTF-8">
<!-- IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<!-- 移动端适配 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true" />
<!-- UC应用模式 -->
<meta name="browsermode" content="application" />
<!-- x5内核，app：网页应用模式（定制工具栏，全屏显示） -->
<meta name="x5-page-mode" content="app" />
<!-- 忽略页面中的数字识别为电话，忽略email识别 -->
<meta name="format-detection" content="telephone=no, email=no" />
<!-- 搜索引擎抓取 -->
<meta name="robots" content="all" />
<!-- 版权归属 -->
<meta name="copyright" content="Tencent" />
<!-- 页面描述（内容可替换：不超过150个字符，描述内容要和页面内容相关） -->
<meta name="description" content="竞技**" />
<!-- 页面关键字（内容可替换：Keywords为产品名、专题名、专题相关名词，之间用英文半角逗号隔开）-->
<meta name="keywords" content="***" />
<!-- 页面标题（内容可替换：页面名称、产品中文全称、官方网站、腾讯游戏、产品slogan，28个汉字以内）-->
<title>***</title>
</head>
- 链接全部采用https协议，不要协议自适应
<!-- Bad -->
2. <style>
3. <!-- CSS背景图片 -->
4. .bg{
5. background: url(//game.gtimg.cn/images/cf/cp/a20161021sqjs/hd.jpg) no-repeat;
6. }
7. </style>
8. <!-- 链接URL -->
9. <a href="//cf.qq.com/main.shtml">进入官网</a>
10. <!-- 图片SRC -->
11. <img src="//game.gtimg.cn/images/cf/web201610/logo.png">
12. <!-- JS链接 -->
13. <script src="//ossweb-img.qq.com/images/js/title.js"></script>
<!-- Good -->
15. <style>
16. <!-- CSS背景图片 -->
17. .bg{
18. background: url(https://game.gtimg.cn/images/cf/cp/a20161021sqjs/hd.jpg) no-repeat;
19. }
20. </style>
21. <!-- 链接URL -->
22. <a href="https://cf.qq.com/main.shtml">进入官网</a>
23. <!-- 图片SRC -->
24. <img src="https://game.gtimg.cn/images/cf/web201610/logo.png">
25. <!-- JS链接 -->
26. <script src="https://ossweb-img.qq.com/images/js/title.js"></script>
- HTML5 doctype为每个 HTML 页面的第一行添加 standards mode（标准模式） 声明，这样能够确保在每个浏览器中拥有一致的展现。
<!doctype html>
<html>
<head>
</head>
</html>
- 根据 HTML5 规范,强烈建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等。
更多关于 lang 属性的知识可以从此规范中了解。Sitepoint 站点上给出了一份语言代码表。
<html lang="zh-CN">
<!-- ... -->
</html>
-
HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。
class
id, name
data-*
src, for, type, href, value
title, alt
role, aria-*
class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当谨慎使用（例如，页面内的书签），因此排在第二位。
<a class="..." id="..." data-toggle="modal" href="#">Example link</a>
<input class="form-control" type="text">
<img src="..." alt="...">
-
链接
给a标签加上title属性
a标签的href属性必须写上链接地址，暂无的加上javascript:;
非本专题的页面间跳转，采用打开新窗口模式：target="_blank"
-
布尔（boolean）型属性
布尔型属性可以在声明时不赋值。XHTML 规范要求为其赋值，但是 HTML5 规范不需要。
更多信息请参考 WhatWG section on boolean attributes：
元素的布尔型属性如果有值，就是 true，如果没有值，就是 false。
如果一定要为其赋值的话，请参考 WhatWG 规范：
如果属性存在，其值必须是空字符串或 [...] 属性的规范名称，并且不要在首尾添加空白符。
简单来说，就是不用赋值。
<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
<option value="1" selected>1</option>
</select>
- 编写 HTML 代码时，尽量避免多余的父元素，避免DOM嵌套过深。
<!-- Bad -->
<div class="avatar">
<img src="...">
</div>
<!-- Good -->
<img class="avatar" src="...">
减少标签的数量
