首頁 > web前端 > H5教程 > 主體

關於HTML5中p與span標籤的介紹

零下一度
發布: 2017-05-06 11:50:57
原創
6636 人瀏覽過

1.ID和類別的選擇

我們常常會很難決定一個元素應該使用ID還是類別名稱.這裡先直接說出總結的結果:

只有在目標元素非常獨特,絕不會對網站上其他地方使用這個名詞時,才會使用ID.換句話說,只有絕對確定這個元素只會出現一次的情況下,才應該使用ID.如果你認為以後可能需要相似的元素,就使用類別.

總結上說的已經很明白了,就不需要過多解釋了.

#下面說一下過度使用時各自的缺點.

過多使用ID的缺點:如果大量使用ID,很快就會難以找到唯一的名稱,最終不得不創建非常長、非常複雜的命名約定.解決這個問題只要看上面的總結即可.

過多使用類別的缺點:有人在寫CSS樣式的時候習慣把樣式的每個地方都添加一個類別,從而去更精準的控制需要的樣式.這樣其實會造成代碼繁瑣,靈活性差.所以我們在寫代碼的時候,如果你發現了類命中出現了重複的單詞,就應該考慮把這些元素分解成他們的組成部分,這樣會大大提高靈活性,使得頁面更加簡潔.看下面的示例.

  <h2 class="news-head">这是头部</h2>
  <p class="news-text">这是一个文本</p>
  <p class="news-text">这是另一个文本</p>
登入後複製

像這種帶重複單詞,就應該考慮是否可以把這些元素分解成他們的組成部分,讓代碼更加的"元件化".例如寫成這樣:

<p class="news">
    <h2>这是头部</h2>
    <p>这是一个文本</p>
    <p>这是另一个文本</p>
</p>
登入後複製

然後透過層疊(cascade)來識別不同的內容.

2.p和span

p元素是一個有助於在文檔中添加結構的一個元素.p並不沒有語義的,p實際上代表部分(pision).同樣的不要過度使用p元素.
p使用需注意:應該只有在沒有現有元素能夠實現區域分割的情況下使用p元素.否則就會造成代碼過於繁雜.
PS:本來不想寫關於這個的書上的例子.但是從我的角度出發.只是告訴我這句話我雖然知道是應該這樣,但是我並不知道在某一時刻到底要不要用p.

假如這是一個主導航列表.就不要將它保衛在p中.

Emmet简写为: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>
登入後複製

但是不要機械的認為只要是ul標籤就不需要使用p標籤包裹.我們看一下1中關於類class的內容.你覺得當要對整個主導航列表的標籤進行一些樣式設計,那是每個li標籤都加一個class或者id呢,還是就想1中所說的加一個p標籤包裹來使得代碼變的"組件化".

我沒有做過H5的開發,但是我知道這種事情沒有絕對,還是需要根據使用的目的去看是否使用p.我個人是覺得像這種雖然是一個導航列表,可以直接用ul來建構,但是我覺得加一個p並不是單純的讓這個導航列表成為一個塊,另一個是告訴我這個開發者這個導航列表它是一個部分.

# 元素的主要作用就是對行內的元素進行分組或標識.

<p><span class="aa">Harry Knowles</span></p>
登入後複製

兩者的區別已經很明顯了.

大概就這些了.QAQ 感覺兩句話能寫完的事情,噼裡啪啦寫了這麼多.反正總結下來差不多就那麼兩句,但是都是要記住的

【相關推薦】

1. 免費h5線上影片教學

2. HTML5 完整版手冊

3. php.cn原廠html5影片教學

以上是關於HTML5中p與span標籤的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板