深入學習CSS2.0結構,再談div、span的困惑

來源:互聯網
上載者:User
css

  使用div進行布局,提出div應當用於組織代碼結構,現在我們再深入一點,div擁有語義嗎?

  division(分割),對了,前段時間瀏覽w3schools時,看到它是這樣定義div的:The div tag defines a division/section in a document. 我想我對div的理解是沒錯的。在文檔中定義一個分割或者節點。我說div用於模組化頁面內容,實際上從代碼結構角度是展現xml化的節點結構。除了定義一個節點以外,div目前還用於定義一個分割,產生具有結構的行。還是以登陸為例:

<div>
    <h3>使用者登陸</h3>
    <div>
       <label for="name">使用者名稱</label>
       <input id="name" />
    </div>
    <div>
        <label for="pw">密碼</label>
        <input id="pw" />
    </div>
    <p><button /></p>
</div>

  最外層的div是作為產生節點使用,而使用者名稱和密碼部分實際上是為了產生具有結構的行,這裡若使用br同樣能夠產生行,但是缺乏結構,所以div代替了br。猜到我要說什麼了嗎?呵呵,又是xhtml 2.0,2.0中的section和line標籤,是的,在1.X中,div同時扮演了section和line的角色,因為分割產生節點,因為分割產生行。但是很明顯section和line具有比div更為明確的語義,那麼我們可不可以認為div的語義和br一樣是模糊的,既然是模糊的,br已經被斃了,我們現在大量使用的div會不會落到同樣的下場呢?不知道,至少目前的xhtml 2.0中,div仍然存在。看看上面的結構代碼在xhtml 2.0中應該如何展示(沒考慮XForm):


<section>
    <h>使用者登陸</h>
    <line>
       <label for="name">使用者名稱</label>
       <input id="name" />
    </line>
    <line>
        <label for="pw">密碼</label>
        <input id="pw" />
    </line>
    <div><button /></div>
</section>

  所以有些人單純的認為好像是div在不斷嵌套,其實不是的,是沒有辦法而產生出來的假象。這裡再請大家注意一個情況,需要和css結合起來看待,按鈕那個部分,在xhtml1.X中我使用了p,嚴格說從結構上是錯誤的,很明顯按鈕不是一個段落,我僅僅是希望它換行呈現,但是如果使用div,那麼就必須給予這個div一個class="button"以區分開來,並且在設定css的時候必須先清除公有的樣式屬性,這樣會帶來不少麻煩。另外作為節點的div和作為行的div同樣會出現這種問題。樣本:如果我定義節點div{width: 300px; padding: 10px;},那麼我就必須在定義行div時要麼覆蓋要麼清除以避免衝突,div div{width: 200px /*覆蓋*/; margin: 10px; padding: 0 /*清除*/; color: #333;},然後在定義div div.button{margin: 0 /*清除*/; color: #F60 /*覆蓋*/; background: #999;}的時候再做對行div的樣式衝突避免,為了避免這種情況,採用對節點div增加class="loginarea"和p,這樣就可以避開兩次樣式清除和覆蓋操作。這樣的情況在結構複雜的頁面中更為明顯,不要告訴我加class就行了,class越多,文檔通用性越差,xhtml越難固定。這就是在xhtml1.X 中因為div的語義模糊帶來的麻煩,回頭在xhtml 2.0的結構中就很好辦了,section{},section line{},section div{},無需class也互不干擾,誒誒誒,這裡的div貌似很適合它分隔的語義哈,不是行也不是節點,僅僅就是一個分隔,呵呵。

  在我認為標籤中最難理解的2個之一的div現在應該算是很清楚了。剩下的一個就是span,至今我仍未能理解到span如何產生結構,只好說說自己的迷惑了。

  先還是說說div和span的區別,從大的方面來說,div被歸類到Structural Module(結構模組),而span被歸類到Text Module(文本模組)。小的方面,div是block-elements(區塊層級元素),span是inline-elements(行內元素)。在所有Structural Module中,div是唯一一個語義模糊的,在所有Text Module中,span也是唯一一個語義模糊的,呵呵,兩個Tag唯一的共性:語義模糊。

  回到span的語義:跨度、範圍。這個這個……比division(分割)更為抽象,難以理解。在一陣瘋狂google後還是沒找到我想要的那種解釋,接近的都沒有,也許根本就沒有,所有的結果都指向表現,無論中英文都是指為字型添加樣式,可是可是W3中明文寫著The span element, in conjunction with the id, class and role attributes, offers a generic mechanism for adding structure to documents. 這裡的for adding structure to documents做何解釋?百思不得其解,後來氣不過,甚至開啟W3的源碼查看他是如何使用span的,雖說獲得了一些提示,但依舊不足以領悟到structure的真諦,我想應該是我的XML功力還不夠。唉,既然語義上,結構上行不通,那麼只好換個角度,從實際應用中試著去理解。span是行內元素,主要應用於文本,這點沒什麼異議,關鍵在於如何運用?為什麼我始終不認為span是個樣式容器,對,又是容器,google的時候發現清一色的容器解釋,div是大容器,span是小容器,我鬱悶。如果span因為文本的樣式而存在,它憑什麼存在?一段文本為什麼要添加樣式?如果你想強調應該使用em,如果想特彆強調應該使用strong,Text Module裡還有很多語義明確的標籤可以使用。所以span應該不是作為樣式容器而存在,就像div不是作為版面配置容器而存在一樣。但是我領悟不到span的真諦,哭啊!不過我可以拋磚引玉,在有一個地方,我一定會使用span的。那就是表單中。還是以登陸為例,如果登陸的資料需要展現出來,比如很多edit頁面和view頁面,結構應該完全相同,不同的是在edit頁面中是輸入框,而view頁面中則用span展現資料。類似如下:

<div>
    <h3>使用者登陸</h3>
    <div>
       <label for="name">使用者名稱</label>
       <span>MyName</span>
    </div>
    <div>
        <label for="pw">密碼</label>
        <span>MyPassword</span>
    </div>
    <p><button /></p>
</div>

  這樣的好處有兩點:1、和label區分開來,便於應用樣式,如下定義:div div span{}。2、可以通過節點提取所有錄入的資料。這是我目前唯一非常明確的使用span的地方,這裡除了span好像沒有更合適的了,也有點符合它的語義:範圍和結構化。這是我拋出的一塊磚頭,誰能引出玉來,或者知道玉,求之。其他span的運用仍在摸索中,包括從W3原始碼中獲得的提示。

  差不多要說完了,這時我對關於容器的說法又耿耿於懷了,於是再次以容器為關鍵詞瘋狂google,憑什麼上上下下都說是容器,我要找出根源來,終於在最後,皇天不負有心人,在我執迷不悟的,懷著容器是錯誤理解的信念下,挖出來了根源。W3在這裡對div和span進行了這樣的解釋:generic language/style container。兩者都一樣。哦,原來如此,怪說不得所有的中文翻譯都是容器,我想很少人去看英文追根到底吧。確實style container應當翻譯為樣式容器。這一點都沒錯,錯的是請注意,這是html中的div和span!!!而不是xhtml中的div和span,隨即我再查到W3在對xhtml中的div和span的解釋,已經不一樣了:對於div是Define the characteristics of a block,而對於span是Define characteristics of text。對!這才是我的理解,也是我想要的正確解釋!!因為這個是xhtml 2.0中的解釋,由於2.0中section的存在,所以在對div的解釋中,節點的含義被取消了,xhtml1.x的解釋我懶得去找了。現在回頭看我剛才試著寫下的xhtml 2.0登陸結構中的div和最後一句話。嗯,div即便不做節點也不做行,可能還是有用的。

  說到這裡,問一句,html和xhtml最大的不同在哪裡?是文法嗎?是名稱嗎?是嚴格了,xml化了嗎?不不不,本質區別是:html是面向表現的語言,而xhtml是面向結構的語言!所以我們應當從結構的角度去審視和理解與運用xhtml中的每一個Tag。比如容器的理解,在面向表現的html中,是正確的,但是在面向結構的xhtml中則錯了,應該理解為節點。理解直接影響運用,以表現的理解顯然無法寫出結構化的代碼。否則什麼合什麼離,哈哈哈,忍不住又敲出來了。

  好了,span現在總結不出來,只好先對div做個總結收尾:在當前xhtml1.x環境下,我們需要產生節點(section)和行(line)的時候選用div。最煩人的兩個東西總算告一段落!



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。