XHTML+CSS布局之XHTML應用小結

來源:互聯網
上載者:User
css|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>


註:與ul同類的還有ol、ul,使用方式較少,詳細參看
http://www.cnbruce.com/blog/showlog.asp?cat_id=5&log_id=866

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

比如:


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


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


<ul>
<li>2006-11-13</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>代替。

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。