整體結(jié)構(gòu)

容心居 2019-03-27

展開(kāi)全文

HTML基礎(chǔ)設(shè)施

文件應(yīng)以“<!DOCTYPE ......>”首行頂格開(kāi)始，推薦使用“<!DOCTYPE html>”。
必須申明文檔的編碼charset，且與文件本身編碼保持一致，推薦使用UTF-8編碼<meta charset="utf-8"/>。
根據(jù)頁(yè)面內(nèi)容和需求填寫(xiě)適當(dāng)?shù)膋eywords和description。
頁(yè)面title是極為重要的不可缺少的一項(xiàng)。

<!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)順序和視覺(jué)順序基本保持一致

按照從上至下、從左到右的視覺(jué)順序書(shū)寫(xiě)HTML結(jié)構(gòu)。
有時(shí)候?yàn)榱吮阌谒阉饕孀ト?，我們也?huì)將重要內(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ǎn)潔的樹(shù)形結(jié)構(gòu)

每一個(gè)塊級(jí)元素都另起一行，每一行都使用Tab縮進(jìn)對(duì)齊（head和body的子元素不需要縮進(jìn)）。刪除冗余的行尾的空格。
使用4個(gè)空格代替1個(gè)Tab（大多數(shù)編輯器中可設(shè)置）。
對(duì)于內(nèi)容較為簡(jiǎn)單的表格，建議將tr寫(xiě)成單行。
你也可以在大的模塊之間用空行隔開(kāi)，使模塊更清晰。

<body>

<div class="m-side">

<div class="side">

<div class="sidein">

<div class="sideblk">

<div class="m-hd3"><h3 class="tit">熱門(mén)標(biāo)簽</h3> </div>

...

</div>

<div class="sideblk">

<div class="m-hd3"><h3 class="tit">最熱TOP5</h3> <a href="#" class="s-fc02 f-fr">更多?</a></div>

...

</div>

</body>

另外，請(qǐng)做到以下幾點(diǎn)

結(jié)構(gòu)上如果可以并列書(shū)寫(xiě)，就不要嵌套。
如果可以寫(xiě)成<div></div><div></div>那么就不要寫(xiě)成<div><div></div></div>
如果結(jié)構(gòu)已經(jīng)可以滿足視覺(jué)和語(yǔ)義的要求，那么就不要有額外的冗余的結(jié)構(gòu)。
比如<div><h2></h2></div>已經(jīng)能滿足要求，那么就不要再寫(xiě)成<div><div><h2></h2></div></div>
一個(gè)標(biāo)簽上引用的className不要過(guò)多，越少越好。
比如不要出現(xiàn)這種情況：<div class="class1 class2 class3 class4"></div>
對(duì)于一個(gè)語(yǔ)義化的內(nèi)部標(biāo)簽，應(yīng)盡量避免使用className。
比如在這樣一個(gè)列表中，li標(biāo)簽中的itm應(yīng)去除：<ul class="m-help"><li class="itm"></li><li class="itm"></li></ul>

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買(mǎi)等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自：容心居 > 《HTML規(guī)范》

舉報(bào)/認(rèn)領(lǐng)