div再議以及對(duì)span的迷惑

修整一個(gè)月，我又回來了，好吧，咱繼續(xù)聊。

上篇文章中主要否定了使用div進(jìn)行布局這種說法，提出div應(yīng)當(dāng)用于組織代碼結(jié)構(gòu)，現(xiàn)在我們?cè)偕钊胍稽c(diǎn)，div擁有語義嗎？這個(gè)問題前段時(shí)間在研究群里曾激烈爭(zhēng)論過，當(dāng)時(shí)米隨隨發(fā)問：“什么是語義化WEB，div是什么？”小毅答曰：“DIV表示無意義容器?！蔽艺f：“否定?！比缓笈赃呌腥肃止荆骸?..又要打起來了?！蔽掖笮χM(jìn)入戰(zhàn)斗狀態(tài)，結(jié)果迅速被圍攻了。呵呵，總是和主流格格不入的我又一次站在主流的對(duì)立面。我還是不贊成將div視為無意義容器。容器這個(gè)概念是模糊的，是與設(shè)計(jì)掛鉤的，理解成容器以后又遠(yuǎn)離結(jié)構(gòu)了。再說每一個(gè)不是自我關(guān)閉的標(biāo)簽都可以視為容器，有什么區(qū)別？難道div可以包含一切（別斷章取義哈），于是就可以隨意使用了嗎？那又如何固定xhtml？所以還是要回到div的語義上來，div是有語義的，只不過它的語義是面向代碼結(jié)構(gòu)的，是面向程序的。

division（分割），對(duì)了，前段時(shí)間瀏覽w3schools時(shí)，看到它是這樣定義div的：The div tag defines a division/section in a document. 我想我對(duì)div的理解是沒錯(cuò)的。在文檔中定義一個(gè)分割或者節(jié)點(diǎn)。我說div用于模塊化頁面內(nèi)容，實(shí)際上從代碼結(jié)構(gòu)角度是展現(xiàn)xml化的節(jié)點(diǎn)結(jié)構(gòu)。除了定義一個(gè)節(jié)點(diǎn)以外，div目前還用于定義一個(gè)分割，產(chǎn)生具有結(jié)構(gòu)的行。還是以登陸為例：

<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是作為產(chǎn)生節(jié)點(diǎn)使用，而用戶名和密碼部分實(shí)際上是為了產(chǎn)生具有結(jié)構(gòu)的行，這里若使用br同樣能夠產(chǎn)生行，但是缺乏結(jié)構(gòu)，所以div代替了br。猜到我要說什么了嗎？呵呵，又是xhtml 2.0，2.0中的section和line標(biāo)簽，是的，在1.X中，div同時(shí)扮演了section和line的角色，因?yàn)榉指町a(chǎn)生節(jié)點(diǎn)，因?yàn)榉指町a(chǎn)生行。但是很明顯section和line具有比div更為明確的語義，那么我們可不可以認(rèn)為div的語義和br一樣是模糊的，既然是模糊的，br已經(jīng)被斃了，我們現(xiàn)在大量使用的div會(huì)不會(huì)落到同樣的下場(chǎng)呢？不知道，至少目前的xhtml 2.0中，div仍然存在。看看上面的結(jié)構(gòu)代碼在xhtml 2.0中應(yīng)該如何展示（沒考慮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>

所以有些人單純的認(rèn)為好像是div在不斷嵌套，其實(shí)不是的，是沒有辦法而產(chǎn)生出來的假象。這里再請(qǐng)大家注意一個(gè)情況，需要和css結(jié)合起來看待，按鈕那個(gè)部分，在xhtml1.X中我使用了p，嚴(yán)格說從結(jié)構(gòu)上是錯(cuò)誤的，很明顯按鈕不是一個(gè)段落，我僅僅是希望它換行呈現(xiàn)，但是如果使用div，那么就必須給予這個(gè)div一個(gè)class="button"以區(qū)分開來，并且在設(shè)定css的時(shí)候必須先清除公有的樣式屬性，這樣會(huì)帶來不少麻煩。另外作為節(jié)點(diǎn)的div和作為行的div同樣會(huì)出現(xiàn)這種問題。示例：如果我定義節(jié)點(diǎn)div{width: 300px; padding: 10px;}，那么我就必須在定義行div時(shí)要么覆蓋要么清除以避免沖突，div div{width: 200px /*覆蓋*/; margin: 10px; padding: 0 /*清除*/; color: #333;}，然后在定義div div.button{margin: 0 /*清除*/; color: #F60 /*覆蓋*/; background: #999;}的時(shí)候再做對(duì)行div的樣式?jīng)_突避免，為了避免這種情況，采用對(duì)節(jié)點(diǎn)div增加class="loginarea"和p，這樣就可以避開兩次樣式清除和覆蓋操作。這樣的情況在結(jié)構(gòu)復(fù)雜的頁面中更為明顯，不要告訴我加class就行了，class越多，文檔通用性越差，xhtml越難固定。這就是在xhtml1.X 中因?yàn)閐iv的語義模糊帶來的麻煩，回頭在xhtml 2.0的結(jié)構(gòu)中就很好辦了，section{}，section line{}，section div{}，無需class也互不干擾，誒誒誒，這里的div貌似很適合它分隔的語義哈，不是行也不是節(jié)點(diǎn)，僅僅就是一個(gè)分隔，呵呵。

在我認(rèn)為標(biāo)簽中最難理解的2個(gè)之一的div現(xiàn)在應(yīng)該算是很清楚了。剩下的一個(gè)就是span，至今我仍未能理解到span如何產(chǎn)生結(jié)構(gòu)，只好說說自己的迷惑了。

先還是說說div和span的區(qū)別，從大的方面來說，div被歸類到Structural Module（結(jié)構(gòu)模塊），而span被歸類到Text Module（文本模塊）。小的方面，div是block-elements（塊級(jí)元素），span是inline-elements（行內(nèi)元素）。在所有Structural Module中，div是唯一一個(gè)語義模糊的，在所有Text Module中，span也是唯一一個(gè)語義模糊的，呵呵，兩個(gè)Tag唯一的共性：語義模糊。

回到span的語義：跨度、范圍。這個(gè)這個(gè)……比division（分割）更為抽象，難以理解。在一陣瘋狂google后還是沒找到我想要的那種解釋，接近的都沒有，也許根本就沒有，所有的結(jié)果都指向表現(xiàn)，無論中英文都是指為字體添加樣式，可是可是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的，雖說獲得了一些提示，但依舊不足以領(lǐng)悟到structure的真諦，我想應(yīng)該是我的XML功力還不夠。唉，既然語義上，結(jié)構(gòu)上行不通，那么只好換個(gè)角度，從實(shí)際應(yīng)用中試著去理解。span是行內(nèi)元素，主要應(yīng)用于文本，這點(diǎn)沒什么異議，關(guān)鍵在于如何運(yùn)用？為什么我始終不認(rèn)為span是個(gè)樣式容器，對(duì)，又是容器，google的時(shí)候發(fā)現(xiàn)清一色的容器解釋，div是大容器，span是小容器，我郁悶。如果span因?yàn)槲谋镜臉邮蕉嬖?，它憑什么存在？一段文本為什么要添加樣式？如果你想強(qiáng)調(diào)應(yīng)該使用em，如果想特別強(qiáng)調(diào)應(yīng)該使用strong，Text Module里還有很多語義明確的標(biāo)簽可以使用。所以span應(yīng)該不是作為樣式容器而存在，就像div不是作為布局容器而存在一樣。但是我領(lǐng)悟不到span的真諦，哭啊！不過我可以拋磚引玉，在有一個(gè)地方，我一定會(huì)使用span的。那就是表單中。還是以登陸為例，如果登陸的數(shù)據(jù)需要展現(xiàn)出來，比如很多edit頁面和view頁面，結(jié)構(gòu)應(yīng)該完全相同，不同的是在edit頁面中是輸入框，而view頁面中則用span展現(xiàn)數(shù)據(jù)。類似如下：

<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>

這樣的好處有兩點(diǎn)：1、和label區(qū)分開來，便于應(yīng)用樣式，如下定義：div div span{}。2、可以通過節(jié)點(diǎn)提取所有錄入的數(shù)據(jù)。這是我目前唯一非常明確的使用span的地方，這里除了span好像沒有更合適的了，也有點(diǎn)符合它的語義：范圍和結(jié)構(gòu)化。這是我拋出的一塊磚頭，誰能引出玉來，或者知道玉，求之。其他span的運(yùn)用仍在摸索中，包括從W3源代碼中獲得的提示。

差不多要說完了，這時(shí)我對(duì)關(guān)于容器的說法又耿耿于懷了，于是再次以容器為關(guān)鍵詞瘋狂google，憑什么上上下下都說是容器，我要找出根源來，終于在最后，皇天不負(fù)有心人，在我執(zhí)迷不悟的，懷著容器是錯(cuò)誤理解的信念下，挖出來了根源。W3在這里對(duì)div和span進(jìn)行了這樣的解釋：generic language/style container。兩者都一樣。哦，原來如此，怪說不得所有的中文翻譯都是容器，我想很少人去看英文追根到底吧。確實(shí)style container應(yīng)當(dāng)翻譯為樣式容器。這一點(diǎn)都沒錯(cuò)，錯(cuò)的是請(qǐng)注意，這是html中的div和span！??！而不是xhtml中的div和span，隨即我再查到W3在對(duì)xhtml中的div和span的解釋，已經(jīng)不一樣了：對(duì)于div是Define the characteristics of a block，而對(duì)于span是Define characteristics of text。對(duì)！這才是我的理解，也是我想要的正確解釋??！因?yàn)檫@個(gè)是xhtml 2.0中的解釋，由于2.0中section的存在，所以在對(duì)div的解釋中，節(jié)點(diǎn)的含義被取消了，xhtml1.x的解釋我懶得去找了。現(xiàn)在回頭看我剛才試著寫下的xhtml 2.0登陸結(jié)構(gòu)中的div和最后一句話。嗯，div即便不做節(jié)點(diǎn)也不做行，可能還是有用的。

說到這里，問一句，html和xhtml大的不同在哪里？是語法嗎？是名稱嗎？是嚴(yán)格了，xml化了嗎？不不不，本質(zhì)區(qū)別是：html是面向表現(xiàn)的語言，而xhtml是面向結(jié)構(gòu)的語言！所以我們應(yīng)當(dāng)從結(jié)構(gòu)的角度去審視和理解與運(yùn)用xhtml中的每一個(gè)Tag。比如容器的理解，在面向表現(xiàn)的html中，是正確的，但是在面向結(jié)構(gòu)的xhtml中則錯(cuò)了，應(yīng)該理解為節(jié)點(diǎn)。理解直接影響運(yùn)用，以表現(xiàn)的理解顯然無法寫出結(jié)構(gòu)化的代碼。否則什么合什么離，哈哈哈，忍不住又敲出來了。

好了，span現(xiàn)在總結(jié)不出來，只好先對(duì)div做個(gè)總結(jié)收尾：在當(dāng)前xhtml1.x環(huán)境下，我們需要產(chǎn)生節(jié)點(diǎn)（section）和行（line）的時(shí)候選用div。

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

網(wǎng)頁題目：div再議以及對(duì)span的迷惑
網(wǎng)頁鏈接：http://www.bm7419.com/news40/317540.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、ChatGPT、營銷型網(wǎng)站建設(shè)、做網(wǎng)站、企業(yè)網(wǎng)站制作、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)