DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML和Xhtml >> 網頁設計學習XHTML應用小結
網頁設計學習XHTML應用小結
編輯:HTML和Xhtml     

籠統來說,“標准網頁”的文件組織就是XHTML CSS。其中XHTML主要用來表示網頁結構和顯示內容,而CSS則是定義結構布局和修飾內容樣式。
常用於布局的XHTML一般有:
DIV:主要用於頁面內容邏輯上的分塊,比如一張網頁一般包括頭部、導航、側欄、內容和版權等責任分區。此時即可使用DIV標簽分割。
同時對各區塊建議這樣的命名:
以下為引用的內容:
頭部:<div id="masthead"></div>
導航:<div id="globalnav"></div>
側欄:<div id="navbar"></div>
內容:<div id="content"></div>
版權:<div id="copyright"></div>
注:id具有唯一性,即在同一頁面中不得重復出現該ID兩次以上。否則使用class。
ul:其原本是無序列表,在XHTML CSS的應用中常用來表示非結構類的同等元素。需要和UL的子元素LI配合使用。
以下為引用的內容:
<div>
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">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-5jb51.net</li>
<li>XHML CSS布局小結</li>
</ul>
要簡單得多。
=======================================
在說完了常見的用於布局的XHTML標簽後,還有的XHTML標簽則是用來顯示網頁內容的。比如:
以下為引用的內容:

<img src="" alt="" title="" />表示圖像
<a href="" title=""></a>表示超級鏈接
<hn></hn>(n=1,2,...,6)表示頁內容標題
其中建議h1-h6根據重要性依次遞減,h1為最重要的標題(參見greengnn:div css命名參考)
原本使用<b></b>和<i></i>表示粗體和斜體的標簽,選擇使用<strong></strong>和<em></em>代替。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved