修整一個月，我又回來了，好吧，咱繼續聊。

　　上篇文章中主要否定了使用div進行布局這種說法，提出div應當用于組織代碼結構，現在我們再深入一點，div擁有語義嗎？這個問題前段時間在研究群里曾激烈爭論過，當時米隨隨發問：“什么是語義化WEB，div是什么？”小毅答曰：“DIV表示無意義容器。”我說：“否定。”然后旁邊有人嘀咕：“...又要打起來了。”我大笑著進入戰斗狀態，結果迅速被圍攻了。呵呵，總是和主流格格不入的我又一次站在主流的對立面。我還是不贊成將div視為無意義容器。容器這個概念是模糊的，是與設計掛鉤的，理解成容器以后又遠離結構了。再說每一個不是自我關閉的標簽都可以視為容器，有什么區別？難道div可以包含一切（別斷章取義哈），于是就可以隨意使用了嗎？那又如何固定xhtml？所以還是要回到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。

　　阿彌陀佛，最煩人的兩個東西總算告一段落，雖然未完，但是遺憾也是美嘛，以后再說了。結構也算告一段落，下篇可以換個口味了，正式進入語義！