網頁設計學習XHTML的應用

  籠統來說，“標準網頁”的檔案組織就是XHTML+CSS。其中XHTML主要用來表示網頁結構和顯示內容，而CSS則是定義結構布局和修飾內容樣式。

常用於布局的XHTML一般有：

DIV：主要用於頁面內容邏輯上的分塊，比如一張網頁一般包括頭部、導航、側欄、內容和著作權等責任分區。此時即可使用DIV標籤分割。

同時對各區塊建議這樣的命名：

以下為引用的內容：

頭部：<divid="masthead"></div>

導航：<divid="globalnav"></div>

側欄：<divid="navbar"></div>

內容：<divid="content"></div>

著作權：<divid="copyright"></div>

註：id具有唯一性，即在同一頁面中不得重複出現該ID兩次以上。否則使用class。

ul：其原本是無序列表，在XHTML+CSS的應用中常用來表示非結構類的同等元素。需要和UL的子項目LI配合使用。

以下為引用的內容：

<div>

<ul>

<li><ahref="#">Link1</a></li>

<li><ahref="#">Link2</a></li>

<li><ahref="#">Link3</a></li>

</ul>

</div>

span：如果拿這個元素和DIV進行比較，那麼span是個袋子而div則是個箱子（語出小毅：XHTML代碼的基本應用）。其實div是個區塊層級元素，而span是個行內元素（參見有關內聯（行內）元素、區塊層級元素），通過span就可對一段或一行元素集中的某片斷元素進行單獨定義。

比如：

以下為引用的內容：

<ul>

<li><span>(2006-11-13)</span>XHML+CSS布局之XHTML應用小結</li>

</ul>

在css中定義span為左/右浮動，就能實現日期和標題的分兩側顯示。這相對使用

以下為引用的內容：

<ul>

<li>2007-11-5webjx.com</li>

<li>XHML+CSS布局小結</li>

</ul>

要簡單得多。

=======================================

在說完了常見的用於布局的XHTML標籤後，還有的XHTML標籤則是用來顯示網頁內容的。比如：

以下為引用的內容：

<imgsrc=""alt=""title=""/>表示映像

<ahref=""title=""></a>表示超級連結

<hn></hn>(n=1,2,...,6)表示頁內容標題

其中建議h1-h6根據重要性依次遞減，h1為最重要的標題（參見greengnn：div+css命名參考）

原本使用<b></b>和<i></i>表示粗體和斜體的標籤，選擇使用<strong></strong>和<em></em>代替。