WEB UI設(shè)計之HTML標(biāo)簽以本來意義
說句實話，“DIV+CSS”這個詞匯不知道害了多少人，也許其提出者本意并沒有錯，但是跟風(fēng)者從表現(xiàn)曲解了其意思，認為整個頁面就應(yīng)當(dāng)是DIV+CSS文件的組合。這樣做，對于視覺上并沒有什么影響，因為還原了之前設(shè)計的頁面效果圖，但如果這種HTML文檔交給機器（例如蜘蛛）去分析，它可能根本找不到重點，你整個頁面對它來說，就如同一個白蟻窩，它第一件要做的事情可能就是把這些相同的東西給去掉，然后再做內(nèi)容的篩選。
搜索引擎的的發(fā)展讓互聯(lián)網(wǎng)業(yè)誕生了一個職業(yè)“SEO”，因為要做“關(guān)鍵字”，所以幾乎所有的“SEO”都把“技術(shù)核心”放在研究關(guān)鍵字上，除了讓標(biāo)題，keywords,description及整個文檔布滿可能被搜索引擎感興趣的關(guān)鍵字外。甚至于圖片的alt屬性，文字容器的title屬性都是“關(guān)鍵字”，這樣看似完美的“SEO技術(shù)”往往忽略了2個重要的地方：1、HTML標(biāo)簽的定義。2、頁面的精簡。前者讓搜索引擎對整個頁面各處的“含義”有所“了解”，后者提高了訪問速度，降低了服務(wù)器負載?？上У氖?ldquo;SEO”們往往不懂HTML及負載為何物，寫代碼的人往往又不懂“SEO技術(shù)”，這可能造成了相當(dāng)大的職業(yè)瓶頸，而急功近利的心態(tài)驅(qū)使又使得這兩種職業(yè)互不學(xué)習(xí)、各行其是。
我的開發(fā)經(jīng)歷中，曾經(jīng)遇到過通篇HTML標(biāo)簽全DIV的，貌似除了<head>之上及<body>之外，其它全是<div>（我的理解是：整個HTML是一萬個毫不相干的內(nèi)容拼裝起來）;也曾遇到過通篇是<div><ul><li>結(jié)構(gòu)的（我的理解是：這個頁面所有元素全是列表）。事實上這兩種情況還相當(dāng)普遍，因為曲解了“DIV+CSS”的真實含義，也許根本就不應(yīng)該有這個說法，因為一個完整頁面幾乎不可能僅僅DIV+CSS就能完成；這個名詞的本義可能是“以DIV進行分割的HTML + CSS呈現(xiàn)”，我相信如果說“HTML+CSS”更加靠譜，但這樣說又不能體現(xiàn)“流布局”的“普及程度”...真是傷透腦筋。
HTML標(biāo)簽有50多種，詳見http://www.w3.org/TR/html5/spec.html#contents第4章節(jié)，我們常用的HTML標(biāo)簽（除了表單標(biāo)簽）主要有以下一些：
div,ul,ol,li,dl,dt,dd,p,span,h1-h6,label,em,strong,img,a,u,b,i,s...
我覺得有必要說出它們的定義，之后給它們分分組，w3c的分組比我這科學(xué)，但沒我這好懂：
div：division(分開, 分割, 區(qū)分,分配, 分界線),標(biāo)簽可以把文檔分割為獨立的、不同的部分。作為塊級元素的代表，因為沒有固定的格式表現(xiàn)，目前濫用情況最嚴重。
ul:Unordered List（無序列表）與li元素組合成團體。
ol:ordered list （有序列表）與li元素組合成團體。
li:list item（列表的項目）"必須"在父級ul或ol容器之內(nèi)，這個必須是我自己加的。w3c只是這樣說：
Contexts in which this element can be used:
Inside ol elements.
Inside ul elements.
Inside menu elements.
我在其前面加了個must，以表示此問題的嚴峻性^^
dl:definition list（定義列表）與dt（definition term定義的項目）及dd（definition description定義的描述）組合成一個團體。
p:paragraph（段落）用于存放文章的一段。
span：Span（范圍）標(biāo)簽是被用來組合文檔中的小節(jié)內(nèi)容。作為內(nèi)聯(lián)元素，也因其沒有固定的格式表現(xiàn)，目前濫用也比較多。
h1-h6：Head（標(biāo)題1到標(biāo)題6），請注意這里的Head表示其含義，不同于<head>標(biāo)簽，也不要認為與<title>有任何關(guān)系。這里僅僅是突出文檔內(nèi)容的標(biāo)題。
注意，搜索引擎如果發(fā)現(xiàn)頁面中存在h標(biāo)簽，會認為其中的內(nèi)容比較重要，重要程度從1到6逐漸降低。
label:Label（針對表單控件的標(biāo)簽），它的名字就叫標(biāo)簽，只不過在這里，w3c給的定義是，用作表單的描述，例如我們喜歡在input標(biāo)簽前或后加上它。
em:Emphasized（加重，強調(diào)），為強調(diào)其包含的文本。默認樣式是斜體。其展示效果與<i>標(biāo)簽相似，但搜索引擎不認為它們是相同的，因為搜索引擎往往尊重w3c給出的定義，而忽略你的展示效果。
strong:Strong（加強加重，重點強調(diào)），為重點強調(diào)其包含的文本。默認樣式是粗體。其強調(diào)效果比em還要強一點。雖然<b>標(biāo)簽也能起到加粗的展示效果，但搜索引擎同樣不認為它們是相同的，理由同上。
img:Image（圖片，圖像）；
a:Anchor（錨）創(chuàng)造超級鏈接中的基本的鏈。
u：UnderLine（文本下劃線），即將淘汰。
s/strike：Strikethrough（刪除線），在文字上攔腰劃一條線。
按顯示樣式分：
塊級元素或塊狀元素，（默認樣式為block）的標(biāo)簽有：
div,ul,ol,li,p,dl,dt,dd，h1-h6...
它們在默認情況下，會獨占一行。除非你用樣式改變它們。
內(nèi)聯(lián)元素，（默認樣式為inline，不過我覺得稱之為“行內(nèi)元素”更易于理解）的標(biāo)簽有：
span,label,em,strong,img,a,u,b,i,s...
它們在默認情況下，會老老實實和其它元素并存于一行，當(dāng)給它們加上一些特定的樣式，例如：display:block，它們也會霸道地占用一行。但這里要提前說明的是，并非所有display:block就一定占一行，如果有寬度，又有float作推手把它們往前面趕，這樣它們也會乖乖和其它元素擠在一行里。
原文鏈接：http://www.cnblogs.com/CoreCaiNiao/archive/2011/06/19/2084651.html
【編輯推薦】
