HTML基礎設施
- 文件應以“<!DOCTYPE ......>”首行頂格開始，推薦使用“<!DOCTYPE html>”。
- 必須申明文檔的編碼charset，且與文件本身編碼保持一致，推薦使用UTF-8編碼<meta charset="utf-8"/>。
- 根據頁面內容和需求填寫適當的keywords和description。
- 頁面title是極爲重要的不可缺少的一項。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE
html><html><head><meta charset="utf-8"/><title>NEC：更好的CSS方案</title><meta name="keywords" content=""/><meta name="description" content=""/><meta name="viewport" content="width=device-width"/><link rel="stylesheet" href="css/style.css"/><link rel="shortcut
icon" href="img/favicon.ico"/><link rel="apple-touch-icon" href="img/touchicon.png"/></head><body> </body></html> |
- 按照從上至下、從左到右的視覺順序書寫HTML結構。
- 有時候爲了便於搜索引擎抓取，我們也會將重要內容在HTML結構順序上提前。
- 用div代替table佈局，可以使HTML更具靈活性，也方便利用CSS控制。
- table不建議用於佈局，但表現具有明顯表格形式的數據，table還是首選。
- 使用link將css文件引入，並置於head中。
- 使用script將js文件引入，並置於body底部。
- 每一個塊級元素都另起一行，每一行都使用Tab縮進對齊（head和body的子元素不需要縮進）。刪除冗餘的行尾的空格。
- 使用4個空格代替1個Tab（大多數編輯器中可設置）。
- 對於內容較爲簡單的表格，建議將tr寫成單行。
- 你也可以在大的模塊之間用空行隔開，使模塊更清晰。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<body><!--
側欄內容區 --><div class="m-side"> <div class="side"> <div class="sidein"> <!--
熱門標籤 --> <div class="sideblk"> <div class="m-hd3"><h3 class="tit">熱門標籤</h3>
</div> ... </div> <!--
最熱TOP5 --> <div class="sideblk"> <div class="m-hd3"><h3 class="tit">最熱TOP5</h3>
<a href="#" class="s-fc02
f-fr">更多»</a></div> ... </div> </div> </div></div><!--
/側欄內容區 --></body> |
- 結構上如果可以並列書寫，就不要嵌套。
如果可以寫成<div></div><div></div>那麼就不要寫成<div><div></div></div>
- 如果結構已經可以滿足視覺和語義的要求，那麼就不要有額外的冗餘的結構。
比如<div><h2></h2></div>已經能滿足要求，那麼就不要再寫成<div><div><h2></h2></div></div>
- 一個標籤上引用的className不要過多，越少越好。
比如不要出現這種情況：<div class="class1 class2 class3 class4"></div>
- 對於一個語義化的內部標籤，應儘量避免使用className。
比如在這樣一個列表中，li標籤中的itm應去除：<ul class="m-help"><li class="itm"></li><li class="itm"></li></ul>
