1.ID和類(lèi)的選擇

我們常常會(huì)很難決定一個(gè)元素應(yīng)該使用ID還是類(lèi)名.這里先直接說(shuō)出總結(jié)的結(jié)果:

只有在目標(biāo)元素非常獨(dú)特,絕不會(huì)對(duì)網(wǎng)站上其他地方使用這個(gè)名詞時(shí),才會(huì)使用ID.換句話說(shuō),只有絕對(duì)確定這個(gè)元素只會(huì)出現(xiàn)一次的情況下,才應(yīng)該使用ID.如果你認(rèn)為以后可能需要相似的元素,就使用類(lèi).

總結(jié)上說(shuō)的已經(jīng)很明白了,就不需要過(guò)多解釋了.

下面說(shuō)一下過(guò)度使用時(shí)各自的缺點(diǎn).

過(guò)多使用ID的缺點(diǎn):如果大量使用ID,很快就會(huì)難以找到唯一的名稱,最終不得不創(chuàng)建非常長(zhǎng)、非常復(fù)雜的命名約定.解決這個(gè)問(wèn)題僅僅需要看上面的總結(jié)即可.

過(guò)多使用類(lèi)的缺點(diǎn):有人在寫(xiě)CSS樣式的時(shí)候習(xí)慣把樣式的每個(gè)地方都添加一個(gè)類(lèi),從而去更精準(zhǔn)的控制需要的樣式.這樣其實(shí)會(huì)造成代碼繁瑣,靈活性差.所以我們?cè)趯?xiě)代碼的時(shí)候,如果你發(fā)現(xiàn)了類(lèi)命中出現(xiàn)了重復(fù)的單詞,就應(yīng)該考慮把這些元素分解成他們的組成部分,這樣會(huì)大大提高靈活性,使得頁(yè)面更加簡(jiǎn)潔.看下面的示例.

  <h2 class="news-head">這是頭部</h2>    <p class="news-text">這是一個(gè)文本</p>    <p class="news-text">這是另一個(gè)文本</p>

像這種帶重復(fù)單詞,就應(yīng)該考慮是否可以把這些元素分解成他們的組成部分,讓代碼更加的"組件化".比如寫(xiě)成這樣:

<p class="news">      <h2>這是頭部</h2>      <p>這是一個(gè)文本</p>      <p>這是另一個(gè)文本</p>  </p>

然后通過(guò)層疊(cascade)來(lái)識(shí)別不同的內(nèi)容.

2.p和span

p元素是一個(gè)有助于在文檔中添加結(jié)構(gòu)的一個(gè)元素.p并不沒(méi)有語(yǔ)義的,p實(shí)際上代表部分(pision).同樣的不要過(guò)度使用p元素.
p使用需注意:應(yīng)該只有在沒(méi)有現(xiàn)有元素能夠?qū)崿F(xiàn)區(qū)域分割的情況下使用p元素.否則就會(huì)造成代碼過(guò)于繁雜.
PS:本來(lái)不想寫(xiě)關(guān)于這個(gè)的書(shū)上的例子.但是從我的角度出發(fā).僅僅是告訴我這一句話我雖然知道是應(yīng)該這樣,但是我并不知道在某一時(shí)刻到底要不要用p.

假如這是一個(gè)主導(dǎo)航列表.就不要將它保衛(wèi)在p中.

Emmet簡(jiǎn)寫(xiě)為:p>ul>li*3>a[href=#] 然后按Table鍵  <p>          <ul>              <li><a href="#"></a></li>              <li><a href="#"></a></li>              <li><a href="#"></a></li>          </ul>      </p>

但是不要機(jī)械的認(rèn)為只要是ul標(biāo)簽就不需要使用p標(biāo)簽包裹.我們看一下1中關(guān)于類(lèi)class的內(nèi)容.你覺(jué)得當(dāng)要對(duì)整個(gè)主導(dǎo)航列表的標(biāo)簽進(jìn)行一些樣式設(shè)計(jì),那是每個(gè)li標(biāo)簽都加一個(gè)class或者id呢,還是就想1中所說(shuō)的加一個(gè)p標(biāo)簽包裹來(lái)使得代碼變的"組件化".

我沒(méi)有做過(guò)H5的開(kāi)發(fā),但是我知道這種事情沒(méi)有絕對(duì),還是需要根據(jù)使用的目的去看是否使用p.我個(gè)人是覺(jué)得像這種雖然是一個(gè)導(dǎo)航列表,可以直接使用ul來(lái)構(gòu)造,但是我覺(jué)得加一個(gè)p并不是單純的讓這個(gè)導(dǎo)航列表成為一個(gè)塊,另一個(gè)是告訴我這個(gè)開(kāi)發(fā)者這個(gè)導(dǎo)航列表它是一個(gè)部分.

<span>元素的主要作用就是對(duì)行內(nèi)的元素進(jìn)行分組或標(biāo)識(shí).

<p><span class="aa">Harry Knowles</span></p>

兩者的區(qū)別已經(jīng)很明顯了.

大概就這些了.QAQ 感覺(jué)兩句話能寫(xiě)完的事情,噼里啪啦寫(xiě)了這么多.反正總結(jié)下來(lái)差不多就那么兩句,但是都是要記住的

【相關(guān)推薦】

1. 免費(fèi)h5在線視頻教程

2. HTML5 完整版手冊(cè)

3. php.cn原創(chuàng)html5視頻教程