HTML規範 - 代碼格式

說明文案的註釋方法

採用類似標籤閉合的寫法，與HTML統一格式；註釋文案兩頭空格，與CSS註釋統一格式。

開始註釋：（文案兩頭空格）。
結束註釋：（文案前加“/”符號，類似標籤的閉合）。
允許只有開始註釋！

<!--
頭部 -->

<div class="g-hd">

    <!--
LOGO -->

    <h1 class="m-logo"><a href="#">LOGO</a></h1>

    <!--
/LOGO -->

    <!--
導航 -->

    <ul class="m-nav">

        <li><a href="#">NAV1</a></li>

        <li><a href="#">NAV2</a></li>

        <!--
更多導航項 -->

    </ul>

    <!--
/導航 -->

</div>

<!--
/頭部 -->

代碼本身的註釋方法

單行代碼的註釋也保持同行，兩端空格；多行代碼的註釋起始和結尾都另起一行並左縮進對齊。

<!--
<h1 class="m-logo"><a href="#">LOGO</a></h1> -->

<!--

<ul
class="m-nav">

    <li><a
href="#">NAV1</a></li>

    <li><a
href="#">NAV2</a></li>

</ul>

-->

HTML註釋在IE6中的BUG

如果兩個浮動元素之間存在註釋，那麼可能導致佈局錯位或文字的BUG。
所以，這種情況下，我們通常將註釋去掉，或者索性採用模板語言（ftl、vm）的註釋。

嚴格的嵌套

儘可能以最嚴格的xhtml strict標準來嵌套，比如內聯元素不能包含塊級元素等等。
正確閉合標籤且必須閉合。

嚴格的屬性

屬性和值全部小寫，每個屬性都必須有一個值，每個值必須加雙引號。
沒有值的屬性必須使用自己的名稱做爲值（checked、disabled、readonly、selected等等）。
可以省略style標籤和script標籤的type屬性。

常用的標籤

常見標籤表
標籤	語義	嵌套常見錯誤	常用屬性（加粗的爲不可缺少的或建議的）
<a></a>	超鏈接/錨	a不可嵌套a	href,name,title,rel,target
<br />	換行
<button></button>	按鈕	不可嵌套表單元素	type,disabled
<dd></dd>	定義列表中的定義（描述內容）	只能以dl爲父容器，對應一個dt
<del></del>	文本刪除
<div></div>	塊級容器
<dl></dl>	定義列表	只能嵌套dt和dd
<dt></dt>	定義列表中的定義術語	只能以dl爲父容器，對應多個dd
<em></em>	強調文本
<form></form>	表單		action,target,method,name
<h1></h1>	標題	從h1到h6，不可嵌套塊級元素
<iframe></iframe>	內嵌一個網頁		frameborder,width,height,src,scrolling,name
<img />	圖像		alt,src,width,height
<input />	各種表單控件		type,name,value,checked,disabled,maxlength,readonly,accesskey
<label></label>	標籤爲input元素定義標註		for
<li></li>	列表項	只能以ul或ol爲父容器
<link />	引用樣式或icon	不可嵌套任何元素	type,rel,href
<meta />	文檔信息	只用於head	content,http-equiv,name
<ol></ol>	有序列表	只能嵌套li
<option></option>	select中的一個選項	僅用於select	value,selected,disabled
<p></p>	段落	不能嵌套塊級元素
<script></script>	引用腳本	不可嵌套任何元素	type,src
<select></select>	列表框或下拉框	只能嵌套option或optgroup	name,disabled,multiple
<span></span>	內聯容器
<strong></strong>	強調文本
<style></style>	引用樣式	不可嵌套任何元素	type,media
<sub></sub>	下標
<sup></sup>	上標
<table></table>	表格	只可嵌套表格元素	width,align,background,cellpadding,cellspacing,summary,border
<tbody></tbody>	表格主體	只用於table
<td></td>	表格中的單元格	只用於tr	colspan,rowspan
<textarea></textarea>	多行文本輸入控件		name,accesskey,disabled,readonly,rows,cols
<tfoot></tfoot>	表格表尾	只用於table
<th></th>	表格中的標題單元格	只用於tr	colspan,rowspan
<thead></thead>	表格表頭	只用於table
<title></title>	文檔標題	只用於head
<tr></tr>	表格行	嵌套於table或thead、tbody、tfoot
<ul></ul>	無序列表	只能嵌套li