說句實話，“DIV+CSS”這個詞匯不知道害了多少人，也許其提出者本意并沒有錯，但是跟風(fēng)者從表現(xiàn)曲解了其意思，認(rè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ù)器負(fù)載?？上У氖恰癝EO”們往往不懂HTML及負(fù)載為何物，寫代碼的人往往又不懂“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進(jìn)行分割的HTML + CSS呈現(xiàn)”，我相信如果說“HTML+CSS”更加靠譜，但這樣說又不能體現(xiàn)“流布局”的“普及程度”...真是傷透腦筋。
HTML標(biāo)簽有50多種，詳見第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)，目前濫用情況最嚴(yán)重。
ul:Unordered List（無序列表）與li元素組合成團(tuán)體。
ol:ordered list （有序列表）與li元素組合成團(tuán)體。
li:list item（列表的項目）"必須"在父級ul或ol容器之內(nèi)，這個必須是我自己加的。w3c只是這樣說：
Contexts in which this element can be used: Inside elements. Inside elements. Inside elements.
我在其前面加了個must，以表示此問題的嚴(yán)峻性^^
dl:definition list（定義列表）與dt（definition term定義的項目）及dd（definition description定義的描述）組合成一個團(tuán)體。
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)簽，也不要認(rèn)為與<title>有任何關(guān)系。這里僅僅是突出文檔內(nèi)容的標(biāo)題。
注意，搜索引擎如果發(fā)現(xiàn)頁面中存在h標(biāo)簽，會認(rèn)為其中的內(nèi)容比較重要，重要程度從1到6逐漸降低。
label:Label（針對表單控件的標(biāo)簽），它的名字就叫標(biāo)簽，只不過在這里，w3c給的定義是，用作表單的描述，例如我們喜歡在input標(biāo)簽前或后加上它。
em:Emphasized（加重，強調(diào)），為強調(diào)其包含的文本。默認(rèn)樣式是斜體。其展示效果與<i>標(biāo)簽相似，但搜索引擎不認(rèn)為它們是相同的，因為搜索引擎往往尊重w3c給出的定義，而忽略你的展示效果。
strong:Strong（加強加重，重點強調(diào)），為重點強調(diào)其包含的文本。默認(rèn)樣式是粗體。其強調(diào)效果比em還要強一點。雖然<b>標(biāo)簽也能起到加粗的展示效果，但搜索引擎同樣不認(rèn)為它們是相同的，理由同上。
img:Image（圖片，圖像）；
a:Anchor（錨）創(chuàng)造超級鏈接中的基本的鏈。
u：UnderLine（文本下劃線），即將淘汰。
s/strike：Strikethrough（刪除線），在文字上攔腰劃一條線。
按顯示樣式分：
塊級元素或塊狀元素，（默認(rèn)樣式為block）的標(biāo)簽有：
div,ul,ol,li,p,dl,dt,dd，h1-h6...
它們在默認(rèn)情況下，會獨占一行。除非你用樣式改變它們。
內(nèi)聯(lián)元素，（默認(rèn)樣式為inline，不過我覺得稱之為“行內(nèi)元素”更易于理解）的標(biāo)簽有：
span,label,em,strong,img,a,u,b,i,s...
它們在默認(rèn)情況下，會老老實實和其它元素并存于一行，當(dāng)給它們加上一些特定的樣式，例如：display:block，它們也會霸道地占用一行。但這里要提前說明的是，并非所有display:block就一定占一行，如果有寬度，又有float作推手把它們往前面趕，這樣它們也會乖乖和其它元素擠在一行里。
按組合方式分：
固定的團(tuán)體：
ul--li
ol--li
dl--dt--dd
分散的個體：
其它...
需要作一些說明的地方：
1、內(nèi)聯(lián)元素，它們本身沒有被“框”起來，也就是它們本身的大小受其內(nèi)容控制，在它沒有變成塊級元素之前，你對它的width和height進(jìn)行控制都是徒勞的。變成塊級元素的途徑：一、display:block（直接霸占整行）二、float不會霸占整行，但是你可以控制其width或height了。
2、一些不能包含或嵌套的元素（從w3c抄來的）：
a：不能包含其它a標(biāo)簽。
must not contain other a elements.
pre：（Preformatted 預(yù)定義格式（文本 ））不能包含img, object, big, small, sub, 或 sup 元素
must not contain the img, object, big, small, sub, or sup elements.
button 按鈕，不能包含input, select, textarea, label, button, form, fieldset, iframe 或 isindex 元素.
must not contain the input, select, textarea, label, button, form, fieldset, iframe or isindex elements.
label 不能包含其它的label元素
must not contain other label elements.
form 不能包含其它的form元素
must not contain other form elements.
以上內(nèi)容來自本人，本人不清楚的地方查閱并抄襲了w3c及互聯(lián)網(wǎng)，您如果發(fā)現(xiàn)問題，請及時留言鞭策我改正，交流使人變得強大！
更多信息請查看IT技術(shù)專欄
公眾號
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試