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