- HTML基礎(chǔ)設(shè)施
-
- 文件應(yīng)以“<!DOCTYPE ......>”首行頂格開始,，推薦使用“<!DOCTYPE html>”,。
- 必須申明文檔的編碼charset，且與文件本身編碼保持一致,，推薦使用UTF-8編碼<meta charset="utf-8"/>,。
- 根據(jù)頁面內(nèi)容和需求填寫適當(dāng)?shù)膋eywords和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>
|
- 結(jié)構(gòu)順序和視覺順序基本保持一致
-
- 按照從上至下,、從左到右的視覺順序書寫HTML結(jié)構(gòu)。
- 有時候為了便于搜索引擎抓取,，我們也會將重要內(nèi)容在HTML結(jié)構(gòu)順序上提前,。
- 用div代替table布局，可以使HTML更具靈活性,，也方便利用CSS控制,。
- table不建議用于布局，但表現(xiàn)具有明顯表格形式的數(shù)據(jù),，table還是首選,。
- 結(jié)構(gòu)、表現(xiàn),、行為三者分離,，避免內(nèi)聯(lián)
-
- 使用link將css文件引入，并置于head中,。
- 使用script將js文件引入,，并置于body底部,。
- 保持良好的簡潔的樹形結(jié)構(gòu)
-
- 每一個塊級元素都另起一行，每一行都使用Tab縮進(jìn)對齊（head和body的子元素不需要縮進(jìn)）,。刪除冗余的行尾的空格,。
- 使用4個空格代替1個Tab（大多數(shù)編輯器中可設(shè)置）。
- 對于內(nèi)容較為簡單的表格,，建議將tr寫成單行,。
- 你也可以在大的模塊之間用空行隔開，使模塊更清晰,。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <body>
<!-- 側(cè)欄內(nèi)容區(qū) -->
<div class="m-side">
<div class="side">
<div class="sidein">
<!-- 熱門標(biāo)簽 -->
<div class="sideblk">
<div class="m-hd3"><h3 class="tit">熱門標(biāo)簽</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>
<!-- /側(cè)欄內(nèi)容區(qū) -->
</body>
|
- 另外,，請做到以下幾點
-
- 結(jié)構(gòu)上如果可以并列書寫，就不要嵌套,。
如果可以寫成<div></div><div></div>那么就不要寫成<div><div></div></div>
- 如果結(jié)構(gòu)已經(jīng)可以滿足視覺和語義的要求,，那么就不要有額外的冗余的結(jié)構(gòu)。
比如<div><h2></h2></div>已經(jīng)能滿足要求,，那么就不要再寫成<div><div><h2></h2></div></div>
- 一個標(biāo)簽上引用的className不要過多,，越少越好。
比如不要出現(xiàn)這種情況：<div class="class1 class2 class3 class4"></div>
- 對于一個語義化的內(nèi)部標(biāo)簽,，應(yīng)盡量避免使用className。
比如在這樣一個列表中,，li標(biāo)簽中的itm應(yīng)去除：<ul class="m-help"><li class="itm"></li><li class="itm"></li></ul>
|
