1.基本设置
1.1 缩进使用4个空格(四个空格在所有编辑器上显示缩进一致)
1.2 嵌套的节点应该缩进
示例：
<!--bad-->
<html>
<div class="demo">我并没有缩进</div>
<div class="demo">我确实没有缩进</div>
</html>
<!--good-->
<html>
<div class="demo">我并没有缩进</div>
<div class="demo">我确实没有缩进</div>
</html>
1.3 所有标签和属性名称一律小写(否则可能导致Angular的不兼容。)
<!-- bad-->
<div class="demo" ATTR1="1">我使用的是大写</div>
<!--good-->
<div class="demo" attr1="1">我使用的是小写</div>
1.4 属性值一律使用双引号(统一标准，方便js的代码构建)
1.5 不要在自动闭合标签结尾处使用斜线（参考见HTML5 规范）
2.HTML doctype
统一在页面开头使用<!DOCTYPE html>这个doctype来启用标准模式，使其在每个浏览器中得到一致的渲染。
3.语言属性
建议html标签上加上lang属性。因为这样会给语音工具和翻译工具帮助，告诉它们应当怎么去发音和翻译。
具体可以在sitepoint上可以查到语言列表；
<!--示例-->
<html lang="zh-CN">
<!-- ... -->
</html>
4.字符编码
通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是，可以避免在 HTML 中使用字符实体标记（character entity），从而全部与文档编码一致（一般采用 UTF-8 编码）。
<!--示例-->
<head>
<meta charset="UTF-8">
</head>
5.IE兼容模式
用 <meta> 标签可以指定页面应该用什么版本的IE来渲染；详细的解读可以点击这个链接； 不同doctype在不同浏览器下会触发不同的渲染模式。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。
<!--示例-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
</head>
...
</html>
6.标签语义化
使用有良好语义的标签，能够很好地实现自我解释，方便搜索引擎理解网页的结构，抓取重要内容。去掉样式后也会根据浏览器的默认样式很好地组织网页内容，具有很好的可读性，从而实现对特殊终端的兼容。
<!--bad-->
<div class="h2">
标签的语义<a href="#">更多>></a>
</div>
<div class="p">
段落一的内容……
<span class="strong">根据浏览器的默认样式</span>。。。
</div>
<div class="p">段落二的内容……</div>
<!--good-->
<div class="title">
<h2>标签的语义</h2>
<a href="#">更多>></a>
</div>
<p>段落一的内容……<strong>根据浏览器的默认样式 </strong>……</p>
<p>段落二的内容</p>
7.布尔（boolean）型属性
boolean属性就是指不需要声明取值的属性，XHTML需要每个属性声明取值，但是HTML5并不需要； HTML5 规范中 disabled、checked、selected 等属性不用设置值。
<!--示例-->
<select>
<option value="1" selected>1</option>
</select>
<input type="text" disabled>
<input type="video" value="1" checked>
8.代码嵌套
8.1尽量减少嵌套的层次
在编写HTML代码时，需要尽量避免多余的父节点；
<!-- not well -->
<span class="imgCon">
<img src="...">
</span>
<!-- better -->
<img class="imgCon" src="...">
8.2 嵌套要合理，不要胡乱嵌套
譬如：<li>就应该用在ul,ol的下面；dd,dt就应该嵌套在dl下面。
<!--bad-->
<ul>
<div>我嵌套到ul里面了</div>
</ul>
<!--good-->
<ul>
<li>我嵌套到ul里面了</li>
</ul>
8.3 块级元素不能放在标签p里面，a里面不能再嵌套a标签。
<!--bad-->
<p><div>我是块级元素</div></p>
<a href="###"><a href="###">我是锚点</a></a>
<!--good-->
<p><span>我是块级元素</span></p>
<a href="###"><strong>我是锚点</strong></a>
9.favicon
保证favicon的可访问性。 在未指定 favicon 时，大多数浏览器会请求根目录下的 favicon.ico 。为了保证favicon可访问，可以采取下面2个方法： 1.在 Web Server 根目录放置 favicon.ico 文件。 2.使用 link 指定 favicon,如右所示：<link rel="icon" href="/icon/favicon.ico">
10.viewport
- viewport: 一般指的是浏览器窗口内容区的大小，不包含工具条、选项卡等内容；
- width: 浏览器宽度，输出设备中的页面可见区域宽度；
- device-width: 设备分辨率宽度，输出设备的屏幕可见宽度；
- initial-scale: 初始缩放比例；
- maximum-scale: 最大缩放比例；
- 页面宽度小于 980px 时，若需 iOS 设备友好，应当设置 viewport 的 width 值来适应你的页面宽度。同时因为不同移动设备分辨率不同，在设置时，应当使用 device-width 和 device-height 变量。关于 viewport 的更多介绍，可以参见 Safari Web Content Guide的介绍。
网友评论