說(shuō)句實(shí)話(huà)，“DIV+CSS”這個(gè)詞匯不知道害了多少人，也許其提出者本意并沒(méi)有錯(cuò)，但是跟風(fēng)者從表現(xiàn)曲解了其意思，認(rèn)為整個(gè)頁(yè)面就應(yīng)當(dāng)是DIV+CSS文件的組合。這樣做，對(duì)于視覺(jué)上并沒(méi)有什么影響，因?yàn)檫€原了之前設(shè)計(jì)的頁(yè)面效果圖，但如果這種HTML文檔交給機(jī)器（例如蜘蛛）去分析，它可能根本找不到重點(diǎn)，你整個(gè)頁(yè)面對(duì)它來(lái)說(shuō)，就如同一個(gè)白蟻窩，它第一件要做的事情可能就是把這些相同的東西給去掉，然后再做內(nèi)容的篩選。
搜索引擎的的發(fā)展讓互聯(lián)網(wǎng)業(yè)誕生了一個(gè)職業(yè)“SEO”，因?yàn)橐觥瓣P(guān)鍵字”，所以幾乎所有的“SEO”都把“技術(shù)核心”放在研究關(guān)鍵字上，除了讓標(biāo)題，keywords,description及整個(gè)文檔布滿(mǎn)可能被搜索引擎感興趣的關(guān)鍵字外。甚至于圖片的alt屬性，文字容器的title屬性都是“關(guān)鍵字”，這樣看似完美的“SEO技術(shù)”往往忽略了2個(gè)重要的地方：1、HTML標(biāo)簽的定義。2、頁(yè)面的精簡(jiǎn)。前者讓搜索引擎對(duì)整個(gè)頁(yè)面各處的“含義”有所“了解”，后者提高了訪(fǎng)問(wèn)速度，降低了服務(wù)器負(fù)載?？上У氖恰癝EO”們往往不懂HTML及負(fù)載為何物，寫(xiě)代碼的人往往又不懂“SEO技術(shù)”，這可能造成了相當(dāng)大的職業(yè)瓶頸，而急功近利的心態(tài)驅(qū)使又使得這兩種職業(yè)互不學(xué)習(xí)、各行其是。
我的開(kāi)發(fā)經(jīng)歷中，曾經(jīng)遇到過(guò)通篇HTML標(biāo)簽全DIV的，貌似除了<head>之上及<body>之外，其它全是<div>（我的理解是：整個(gè)HTML是一萬(wàn)個(gè)毫不相干的內(nèi)容拼裝起來(lái)）;也曾遇到過(guò)通篇是<div><ul><li>結(jié)構(gòu)的（我的理解是：這個(gè)頁(yè)面所有元素全是列表）。事實(shí)上這兩種情況還相當(dāng)普遍，因?yàn)榍饬恕癉IV+CSS”的真實(shí)含義，也許根本就不應(yīng)該有這個(gè)說(shuō)法，因?yàn)橐粋€(gè)完整頁(yè)面幾乎不可能僅僅DIV+CSS就能完成；這個(gè)名詞的本義可能是“以DIV進(jìn)行分割的HTML + CSS呈現(xiàn)”，我相信如果說(shuō)“HTML+CSS”更加靠譜，但這樣說(shuō)又不能體現(xiàn)“流布局”的“普及程度”...真是傷透腦筋。
HTML標(biāo)簽有50多種，詳見(jiàn)第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...
我覺(jué)得有必要說(shuō)出它們的定義，之后給它們分分組，w3c的分組比我這科學(xué)，但沒(méi)我這好懂：
div：division(分開(kāi), 分割, 區(qū)分,分配, 分界線(xiàn)),標(biāo)簽可以把文檔分割為獨(dú)立的、不同的部分。作為塊級(jí)元素的代表，因?yàn)闆](méi)有固定的格式表現(xiàn)，目前濫用情況最嚴(yán)重。
ul:Unordered List（無(wú)序列表）與li元素組合成團(tuán)體。
ol:ordered list （有序列表）與li元素組合成團(tuán)體。
li:list item（列表的項(xiàng)目）"必須"在父級(jí)ul或ol容器之內(nèi)，這個(gè)必須是我自己加的。w3c只是這樣說(shuō)：
Contexts in which this element can be used: Inside elements. Inside elements. Inside elements.
我在其前面加了個(gè)must，以表示此問(wèn)題的嚴(yán)峻性^^
dl:definition list（定義列表）與dt（definition term定義的項(xiàng)目）及dd（definition description定義的描述）組合成一個(gè)團(tuán)體。
p:paragraph（段落）用于存放文章的一段。
span：Span（范圍）標(biāo)簽是被用來(lái)組合文檔中的小節(jié)內(nèi)容。作為內(nèi)聯(lián)元素，也因其沒(méi)有固定的格式表現(xiàn)，目前濫用也比較多。
h1-h6：Head（標(biāo)題1到標(biāo)題6），請(qǐng)注意這里的Head表示其含義，不同于<head>標(biāo)簽，也不要認(rèn)為與<title>有任何關(guān)系。這里僅僅是突出文檔內(nèi)容的標(biāo)題。
注意，搜索引擎如果發(fā)現(xiàn)頁(yè)面中存在h標(biāo)簽，會(huì)認(rèn)為其中的內(nèi)容比較重要，重要程度從1到6逐漸降低。
label:Label（針對(duì)表單控件的標(biāo)簽），它的名字就叫標(biāo)簽，只不過(guò)在這里，w3c給的定義是，用作表單的描述，例如我們喜歡在input標(biāo)簽前或后加上它。
em:Emphasized（加重，強(qiáng)調(diào)），為強(qiáng)調(diào)其包含的文本。默認(rèn)樣式是斜體。其展示效果與<i>標(biāo)簽相似，但搜索引擎不認(rèn)為它們是相同的，因?yàn)樗阉饕嫱鹬豾3c給出的定義，而忽略你的展示效果。
strong:Strong（加強(qiáng)加重，重點(diǎn)強(qiáng)調(diào)），為重點(diǎn)強(qiáng)調(diào)其包含的文本。默認(rèn)樣式是粗體。其強(qiáng)調(diào)效果比em還要強(qiáng)一點(diǎn)。雖然<b>標(biāo)簽也能起到加粗的展示效果，但搜索引擎同樣不認(rèn)為它們是相同的，理由同上。
img:Image（圖片，圖像）；
a:Anchor（錨）創(chuàng)造超級(jí)鏈接中的基本的鏈。
u：UnderLine（文本下劃線(xiàn)），即將淘汰。
s/strike：Strikethrough（刪除線(xiàn)），在文字上攔腰劃一條線(xiàn)。
按顯示樣式分：
塊級(jí)元素或塊狀元素，（默認(rèn)樣式為block）的標(biāo)簽有：
div,ul,ol,li,p,dl,dt,dd，h1-h6...
它們?cè)谀J(rèn)情況下，會(huì)獨(dú)占一行。除非你用樣式改變它們。
內(nèi)聯(lián)元素，（默認(rèn)樣式為inline，不過(guò)我覺(jué)得稱(chēng)之為“行內(nèi)元素”更易于理解）的標(biāo)簽有：
span,label,em,strong,img,a,u,b,i,s...
它們?cè)谀J(rèn)情況下，會(huì)老老實(shí)實(shí)和其它元素并存于一行，當(dāng)給它們加上一些特定的樣式，例如：display:block，它們也會(huì)霸道地占用一行。但這里要提前說(shuō)明的是，并非所有display:block就一定占一行，如果有寬度，又有float作推手把它們往前面趕，這樣它們也會(huì)乖乖和其它元素?cái)D在一行里。
按組合方式分：
固定的團(tuán)體：
ul--li
ol--li
dl--dt--dd
分散的個(gè)體：
其它...
需要作一些說(shuō)明的地方：
1、內(nèi)聯(lián)元素，它們本身沒(méi)有被“框”起來(lái)，也就是它們本身的大小受其內(nèi)容控制，在它沒(méi)有變成塊級(jí)元素之前，你對(duì)它的width和height進(jìn)行控制都是徒勞的。變成塊級(jí)元素的途徑：一、display:block（直接霸占整行）二、float不會(huì)霸占整行，但是你可以控制其width或height了。
2、一些不能包含或嵌套的元素（從w3c抄來(lái)的）：
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)容來(lái)自本人，本人不清楚的地方查閱并抄襲了w3c及互聯(lián)網(wǎng)，您如果發(fā)現(xiàn)問(wèn)題，請(qǐng)及時(shí)留言鞭策我改正，交流使人變得強(qiáng)大！
更多信息請(qǐng)查看IT技術(shù)專(zhuān)欄
公考類(lèi)
招聘類(lèi)
各類(lèi)考試
公眾號(hào)
事業(yè)單位
當(dāng)前位置：