應用div+css網頁布局，你必須了解一些xhtml結構標簽，原則上一個xhtml文檔所有的標簽都應該是結構標簽，需要表現的地方都使用css來控制。

下面列一個完整xhtml的結構標簽：

在剛接觸XHTML+CSS設計網頁時，對于標簽的使用沒什么經驗，也很隨意，經常是想起什么就用什么，認為只要能實現效果就可以。但隨著學習的深入和對搜索引擎優化知識的了解，發現其實標簽的使用也是一門學問。
　　在這里不對各標簽在CSS中對應的屬性及用法做詳細的介紹，重點介紹在網頁中的應用，希望能對大家有些幫助。

一、DIV
　　DIV對于XHTML建站的朋友應該并不陌生，很多的網站和資料也稱Web標準網站建設為DIV+CSS網站建設。這樣叫也不是沒有道理，因為W3C不推薦Table標簽應用于網頁的布局上，而作為布局標簽的DIV自然也就承擔起布局的重任。
　　DIV也可以說是一個大的容器。除了網頁整體結構布局外，推薦應用于劃分在網頁中看起來相對獨立的區域。就好像一張報紙一樣，DIV的作用就是劃分不同內容的一個大的容器。而不同區域中在根據具體情況來選擇相應合適的標簽。

div?在我的腦子里我一直把他想作是一個瓶子或是箱子，我的感覺它挺硬的。這個div沒有什么特性的意義，可以使用在很多地方，也就是說他可以裝不同的東西。他的正確的寫法是<div></div>必需要有封口。大家都用來做布局之用，也有用來作為存放文章形成段落，實際上，這個做法并不是很好，因為作為文章的分段自然有一個特定的標簽來用。那就是下面要講的<p></p>標簽，不過用DIV來再整體的包住所有的段落。這是非常實用的。

二、H標簽
　　H標簽是一個標題標簽，常用在段落之前，用于表明段落要表達的意思。根據顯示和要表達意思的級別可以分為H1~H6。
　　H1的重要性最高，常用于表達對整個網站的作用和性質的描述，或表示網站面向的受眾群體。其他標簽根據級別的不同分別用于顯示某個專區的名稱，或某段介紹文字的大概描述。
　　因它表示對網站或某段文字的大體描述，所以相對于搜索引擎來說H標簽具有很高的價值。但這并不意味著可以隨意的使用。比如，有些網站為了刻意追求特定關鍵字的排名，而在一段文字中使用H標簽來展示關鍵字。或干脆把H標簽當做一個容器來對網頁進行布局。這樣完全混淆了H標簽的作用，也是不推薦的。
H?這是一個系列的標簽，從H1到H6，一共六個，有人說太少了，有人說正好用，有人說用不了這么多。反正我是覺得差不多。正確寫法是：<h></h>主要是用來存放標題，也有一些朋友用來作它用拿來作其它用處，個人覺得這個標簽還是讓他安生一點，就讓他做標題的作用。這六個標簽之間最好不要出現什么相互包含的事。

三、P
　　P是一個段落標簽，用于區分一組文字的不同段落。對于搜索引擎來說，按照其抓取順序，第一個P標簽中的文字也是具有很高的價值。如Baidu，它就是忽略Meta標簽description（描述）中的文字，而抓取第一個P標簽中的內容（并非絕對）。
　　有些網站為了即讓搜索引擎可以抓取更多的內容，又使用戶具有瀏覽體驗，在分段的時候使用<br?/>標簽。這也不是說不可以，有些時候根本達不到預期的效果。對于嚴格類型（Strict）的文檔來說，<br?/>是屬于表現形式的標簽，是不允許被使用的。
　　雖然大部分的網站使用的都是過渡型的文檔類型，但本人不推薦使用在文字分段上。

p?這是一個有特定語義的標簽，表示段落，是用來區分段落的。在大部分的瀏覽器中對P基本上都有一個上下的邊距。但是沒有行首縮進，因為行首縮進只是表示段落的方式但是不是一定或是必需的。所以在用P標簽的時候如果需要可以針對P設定一下行首縮進，我是推薦在文章以外的地方不要使用P，因為P是有一定語義的，如果用在別的地方恐不合適。正確的寫法是<p></p>
四、UL和LI標簽
　　這是無序列表，UL標簽是對列表的聲明，LI是列表項。由于其項目的相對獨立性，常常在導航、新聞或文章列表等地方使用。UL也可以做為一個容器來區分各不同的列表。
　　有些網站可以追求“Web標準”，將Table轉為用UL和LI來表現，這使得網頁難以閱讀和維護，錯誤的理解恰恰違背了Web標準向我們傳達的理念。
ul,li?這是一個列表，在列表中，除了UL還OL，不過我覺得OL有點像是雞肋。因為UL通過CSS定義一樣可以有OL的數字排序效果。所以一般我不推薦使用OL，有UL就可以了。UL是塊級的，他的子級li也是塊級標簽。正確的寫法是<ul><li></li>< /ul>?LI標簽是被UL標簽包裹的，在UL標簽里可以有無數個LI標簽，LI標簽不能獨立使用。并且LI標簽一定要封口，這不光是美觀問題，對于后期的維護也很有好處。很多程序員都不喜歡把這個LI封口。UL列表的用處主要是列舉出一維的，同一類型的數據。具體的比如使用在菜單上，文章中列數的一些條例等等。在列表中有一種特別的形式與UL是不一樣的。那就是下面的DL

五、Table
　　這里就不過多介紹Table的用法了，只是想說的是，Web標準不是說以后就不能用Table了，而是不推薦使用Table來布局，只在顯示數據的時候用。所以符合Web的網頁和Table標簽的使用并不矛盾。

六、為搜索引擎準備的標簽
　　（1）Title：網頁的標題，對網站的說明。次標簽對于搜索引擎來說也是很有價值的，常把目標關鍵字包含其中。
　　（2）Meta的keywords：網頁中的主要關鍵字。最初是為了方便搜索引擎對網站的分類而準備，但后期由于很多的網站為了使關鍵字排名更有利，經常利用此標簽作弊，所以現在此標簽對于搜索引擎來說，幾乎沒有任何意義了。
　　（3）Meta的Description：對網頁的描述。同Keywords一樣，最初也是為了方便搜索引擎分類，同樣是由于很多網站利用這個標簽作弊，所以對于搜索引擎來說也已經不那么重要了。目前，在主流搜索引擎中只有Google還在抓取其中的內容，不過也已經幾乎不按照其中的內容來確定關鍵字了。
　　其實，對于搜索引擎來說，最注重的還是內容的質量。同樣我們做網站為的也是向瀏覽者宣傳我們自己。請不要因一時之快而忘了根本。畢竟用戶關心的是資料是否是自己需要的，而不是您網站的排名。

七、span

span?這也是一個非常常用的標簽，這個標簽可以說與div很像，沒有什么特定的意義，只是他是一個級聯元素，不是塊級元素。我一直把它看作是一個袋子，他不像箱子那樣可以有自己的寬高，他的寬高只能隨著內容的多少而定，所以很像是袋子。這個標簽與div正好互補。

八、dl,dt,dd
dl,dt,dd?這是一個很特別的三個標簽的組合。這里的DT是指標題，DD是指內容。DL是包課他們的容器。正確的寫法是<dl><dt></dt><dd></dd></dl>在DL里可以有很多組的DT，DD，當出現很多組的時候盡量是一個DT配一個DD，如果DD中內容很多，可以在DD里加P標簽配合使用。DL列表是一個非常好的列表形式，可以多加利用。
九、a?
a這表示鏈接，是一個特定屬性的，也是網頁中最為神奇的標簽。因為它才讓無數的網頁都連在了一起。正確的寫法是：<a?href=”"?title=”"></a>其中的href是表示目標地址，TITLE是鼠標懸停提示文字，這是可有可無的。但是有必是利大于無。

十、img
img?這是圖片標簽，也是個特定屬性的標簽。正常寫法是：<img?src=”"?alt=”"?title=”"/>?這里的src是目標地址，ALT與TITLE是替換文字，ALT是?IE特定的，TITLE是其它瀏覽器的通用的。不過記得后面的反斜線那是一定要有的。

十一、strong?
strong這個意思是著重，這是有語義的，作用也很簡單。至于樣工，是加粗著重，還是用色彩表明著重，那都是自行選擇。正確的寫法是<strong></strong>

十二、em?這個與strong很像，是表示強調。一般瀏覽器的默認值是斜體。使用方式與strong一樣。寫法是：<em></em>

十三、表單可以用來在網頁中發送數據，特別是經常被用在聯系表單——用戶輸入信息然后發送到Email中。
實際用在HTML中的標簽有form、 input、 textarea、 select和option。
表單標簽form定義的表單里頭，必須有行為屬性action，它告訴表單當提交的時候將內容發往何處。
可選的方法屬性method告訴表單數據將怎樣發送，有get（默認的）和post兩個值。常用到的是設置post值，它可以隱藏信息（get的信息會暴露在URL中）。
所以一個表單元素看起來是這樣子的：<form?action=”processingscript.php”?method=”post”>?</form>

input標簽是表單世界中的“老大”。有10種形式，概括如下：
■　<input?type=”text”?/>是標準的文本框。它可以有一個值屬性value，用來設置文本框里的默認文本。?
■　<input?type=”password”?/>?像文本框一樣，但是會以星號代替用戶所輸入的實際字符。?
■　<input?type=”checkbox”?/>是復選框，用戶可以快速的選擇或者不選一個條目。它可以有一個預選屬性checked，像這樣的格式<input?type=”checkbox”?checked=”checked”?/>.?
■　<input?type=”radio”?/>?與復選框相似，但是用戶只可在一個組中選擇一個單選按鈕。它也有一個預選屬性checked，使用方法跟復選框一樣。?
■　<input?type=”file”?/>?是展示你電腦上的文件的一個區域，就像你在一個軟件中打開或者保存一個文檔一樣。?
■　<input?type=”submit”?/>?是一個被點擊后提交表單的按鈕。你可以用值屬性value來控制按鈕上顯示的文本（下面的button和reset類型也可以這樣，稍后介紹），如下：?<input?type=”submit”?value=”Ooo.?Look.?Text?on?a?button.?Wow”?/>.?
■　<input?type=”image”?/>以圖像代替按鈕文本，src屬性是必須的，像img標簽一樣。?
■　<input?type=”button”?/>是一個如果沒有其他代碼的話什么都不做的按鈕。?
■　<input?type=”reset”?/>?是一個點擊后會重置表單內容的按鈕。?
■　<input?type=”hidden”?/>?不會顯示任何東西，它用來傳輸諸如用戶正在用的頁面的名字或者Email地址等表單必須傳輸的東西。?
注意輸入標簽input也是用“/>”自關閉的。

多行文本輸入框標簽textarea基本上就是一個比較大的文本框。它必須有行屬性rows和列屬性cols，用法像這樣：
<textarea?rows=”5″?cols=”20″>A?big?load?of?text?here</textarea>

選定標簽select與選項標簽option一起可以制作一個下拉選框。是這樣工作的：
<select>
<option?value=”first?option”>Option?1</option>
<option?value=”second?option”>Option?2</option>
<option?value=”third?option”>Option?3</option>
</select>?

當表單被提交時，被選中選項的值將被發送。
與復選框和單選按鈕的預選屬性checked一樣，選項標簽option也有一個預選屬性selected，它可以用在這樣的格式中：<option?value=”mouse”?selected=”selected”>Rodent</option>。
上述的標簽中在網頁中看起來都不錯，但是，如果你有一個程序來處理這個表單，這些標簽都不起作用。這是因為，表單字段需要名稱。所以所有的字段中都需要增加名稱屬性name，比如?<input?type=”text”?name=”talkingsponge”?/>。
一個表單看起來應該像下面這樣（注意：這個表單不會工作，除非有一個用來提交數據的“contactus.php”的文件，它位于表單標簽form的行為屬性action中。）

我們平時常用的是< ul>< li>標簽，不過dd、dt標簽也蠻不錯，特別是發布程序的時候功能模塊列表什么的可以使用它來排版。


< dl>< /dl>< dt>< /dt>< dd>< /dd>

< dl>< /dl>用來創建一個普通的列表,< dt>< /dt>用來創建列表中的上層項目，<
dd>< /dd>用來創建列表中最下層項目，< dt>< /dt>和< dd><
/dd>都必須放在< dl>< /dl>標志對之間。看一下下邊的例子您就會明白了：