> 參考：[華南城網前端編碼規范 1.0](http://res.csc86.com/readme/%E5%8D%8E%E5%8D%97%E5%9F%8E%E7%BD%91%E5%89%8D%E7%AB%AF%E7%BC%96%E7%A0%81%E8%A7%84%E8%8C%83%201.0.html)
xhtml**區分大小寫**，xhtml要求標簽名、屬性名、值**都要小寫**，并且要有雙引號和標簽閉合。
因為XHTML文檔是XML應用產物，**XML是區分大小寫的**，所以`<br>`和`<BR>`會被認為是兩種不同的標簽。
> **`注意`：HTML5不區分大小寫！**
[TOC]
## 1、DOCTYPE
? ? ? ? 頁面文檔類型統一使用HTML5 DOCTYPE. 代碼如下：
~~~
<!DOCTYPE html>
~~~
## 2、編碼
? ? ? ? 聲明方法遵規循HTML5的范. 代碼如下：
~~~
<meta charset="utf-8" />
~~~
## 3、語義化
? ? ? ? 使用符合語義的標簽書寫 HTML 文檔, 選擇恰當的元素表達所需的含義。
* **結構性元素**
* `p` 表示段落. 只能包含內聯元素, 不能包含塊級元素;
* `li` 本身無特殊含義, 可用于布局. 幾乎可以包含任何元素;
* `br` 表示換行符;
* `hr` 表示水平分割線;
* `h1`-`h6` 表示標題. 其中 h1 用于表示當前頁面最重要的內容的標題;
* `blockquote` 表示引用, 可以包含多個段落. 請勿純粹為了縮進而使用blockquote, 大部分瀏覽器默認將 blockquote 渲染為帶有左右縮進;
* ``pre`` 表示一段格式化好的文本；
* **頭部元素**
* `title` 每個頁面必須有且僅有一個 title 元素;
* `base` 可用場景：首頁、頻道等大部分鏈接都為新窗口打開的頁面;
* `link `用于引入 css 資源時, 可省去 media(默認為all) 和 type(默認為text/css) 屬性;
* `style` `type` 默認為 text/css, 可以省去;
* `script` `type` 屬性可以省去; 不贊成使用lang屬性; 不要使用古老的<!– //–>這種hack腳本, 它用于阻止第一代瀏覽器(Netscape 1和Mosaic)將腳本顯示成文字;
* `noscript` 在用戶代理不支持 JavaScript 的情況下提供說明；
* **文本元素**
* `a` 存在 href 屬性時表示鏈接, 無 href 屬性但有 name 屬性表示錨點;
* `em,strong` em 表示句意強調, 加與不加會引起語義變化, 可用于表示不同的心情或語調; strong 表示重要性強調, 可用于局部或全局, strong強調的是重要性, 不會改變句意;
* `abbr` 表示縮寫;
* `sub,sup` 主要用于數學和化學公式, sup還可用于腳注;
* `span` 本身無特殊含義;
* `ins,del` 分別表示從文檔中增加(插入)和刪除；
* **媒體元素**
* `img` 請勿將img元素作為定位布局的工具, 不要用他顯示空白圖片; 必要時給img元素增加alt屬性;
* `object` 可以用來插入Flash;
* **列表元素**
* `dl` 表示關聯列表, dd是對dt的解釋; dt和dd的對應關系比較隨意：一個dt對應多個dd、多個dt對應一個dd、多個dt對應多個dd, 都合法; 可用于名詞/單詞解釋、日程列表、站點目錄;
* `ul` 表示無序列表;
* `ol` 表示有序列表, 可用于排行榜等;
* `li` 表示列表項, 必須是ul/ol的子元素;
* **表單元素**
* 推薦使用 `button` 代替 input, 但必須聲明 type;
* 推薦使用 `fieldset`, `legend` 組織表單；
* 表單元素的 `name` 不能設定為 action, enctype, method, novalidate, target, submit 會導致表單提交混亂；
## 4、大小寫，屬性值
元素的標簽和屬性名必須小寫, 屬性值必須加雙引號。
## 5、html模板
```HTML
<!DOCTYPE HTML>
<html lang="zh-cmn-hans">
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<title>title不可缺少，控制在25個字、50個字節以內。“二級欄目 - 一級欄目 - 網站名稱”。</title>
<meta name="keywords" content="關鍵詞,5個左右,單個8漢字以內">
<meta name="description" content="網站描述，字數盡量空制在80個漢字，160個字符以內！">
<link rel="Bookmark" href="/favicon.ico" >
<link rel="Shortcut Icon" href="/favicon.ico" />
<!--[if lt IE 9]>
<script>
(function(){var e="abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');var i=e.length;while(i--){document.createElement(e[i])}})()
</script>
<![endif]-->
<link href="http://www.a.com/css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.2/jquery.js"></script>
</head>
<body>
<header> <!--頭部--> </header>
<div> <!--內容--> </div>
<footer> <!--頭部--> </footer>
<!--End of Footer-->
<script type="text/javascript" src="http://www.a.com/Lib/a.min.js"></script>
<!--下方是cnzz統計代碼，請在自己項目中干掉-->
<script type="text/javascript">var cnzz_protocol= ...</script>
</body>
</html>
```
? ?
?
