DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML和Xhtml >> 一些不太常用的XHTML標簽用法以及實例
一些不太常用的XHTML標簽用法以及實例
編輯:HTML和Xhtml     

網頁制作poluoluo文章簡介:只要制作出來的頁面能夠和設計效果圖一致就行了,管它代碼合理不合理、嚴謹不嚴謹,客戶也不要求頁面通過 W3C 驗證.

做為 XHTML+CSS 開發人員,盡可能不要讓自己有這樣的念頭:

“只要制作出來的頁面能夠和設計效果圖一致就行了,管它代碼合理不合理、嚴謹不嚴謹,客戶也不要求頁面通過 W3C 驗證……”

——我們的目的是為了要寫出盡量語義正確的合格文檔,而不是為了要通過什麼驗證,假如一點也不考慮代碼的語義性,僅僅要求能還原效果圖就好,就又退回到 table 時代了~~那下面的文字內容,也不必再看下去了。

舉一個例子:

當我們回到家以後,會把脫下來的鞋放到鞋櫃,把買回來的肉放進冰箱,我們這些做法肯定不會亂來:把臭鞋放進冰箱,把肉擱進鞋櫃?!

標簽也是這個道理,相關的內容要放入到合適的標簽內,比如主標題就放到 h1 標簽裡,p 標簽內裝的就是文本段落,這樣做,不是為了給人看的,而是要給那些:浏覽器、拼寫檢查程序、翻譯系統以及搜索引擎分度器看,畢竟最終解析這些代碼的是機器。所以我們還是用機器的語言來跟機器溝通吧!

認同以上觀點的,請繼續往下看:

今天要說的不是那些常見標簽(如:div、h1、p、dl、ul、ol、strong、span……),而是一些不太常用的標簽(“不太常用的標簽” 這個說法僅僅是個人定義),現在就大致介紹一下:

1. <abbr></abbr> ——這個標簽是用來包含縮寫的文本

舉例:

“熟練使用 PS、DW 軟件”

這一句話實際要表達的是:“熟練使用 Adobe Photoshop CS4、Adobe Dreamweaver CS4 軟件”

代碼:
<p>“熟練使用 <abbr title=’Adobe Photoshop CS4′>PS</abbr>、<abbr title=’Adobe Dreamweaver CS4′>DW</abbr> 軟件”</p>

其中的 title 屬性就是放置縮寫文本的完整內容,它可以被 浏覽器、拼寫檢查程序、翻譯系統以及搜索引擎分度器 所解析。

頁面呈現效果:

“熟練使用 PSPS、DWDW 軟件”

2. <acronym></acronym>——取首字母縮寫

舉例:

在我們熟知的語言中,諸如:HTML、CSS,這二個單詞也是縮寫,完整的英文是:

HTML:Hypertext Markup Language

CSS:Cascading Style Sheets

很明顯,上面這二句每個單詞的首字母合在一起,變成了我們最常見到的 HTML、CSS,那麼當我們在頁面中要呈現這些首字母縮寫的文本時,可以編寫如下代碼:

<acronym title="Hypertext Markup Language">HTML</acronym>

<acronym title="Cascading Style Sheets">CSS</acronym>

頁面呈現效果:HTML CSS

3. <address></address>——定義地址、簽名或者文檔的作者身份

舉例:妙味課堂所在地:北京海澱區牡丹園小區北裡1號樓811室

代碼:<address>妙味課堂所在地:北京海澱區牡丹園小區北裡1號樓811室</address>

注意:這個標簽是塊級元素(block)

頁面呈現效果:

妙味課堂所在地:北京海澱區牡丹園小區北裡1號樓811室

4. <blockquote></blockquote>——定義一個塊引用(長段文字引用)

    <q></q>——定義一個短引用

我們的頁面上有可能會引用一段文字、某人的一句話等等,最常見的是在正文之前,有一塊“引用”的簡短內容,在這個時候,就需要用到這二個標簽。

舉例:

長的引用:
<blockquote>
除非你把愛國主義從人類中驅逐出去,否則你將永遠不會擁有一個寧靜的世界。愛國主義是一種有害的、精神錯亂的白癡形式。愛國主義就是讓你確信這個國家比所有其他的國家都要出色,只因為你生在這裡。——喬治•肖伯納
</blockquote>

短的引用:
<q>有這麼一群人,在日本叫法西斯,在德國叫納粹,在中國叫愛國者! ——王朔說</q>

注意:blockquote 標簽會在文本的兩端產生縮進。

頁面呈現效果:

長的引用:

除非你把愛國主義從人類中驅逐出去,否則你將永遠不會擁有一個寧靜的世界。愛國主義是一種有害的、精神錯亂的白癡形式。愛國主義就是讓你確信這個國家比所有其他的國家都要出色,只因為你生在這裡。——喬治•肖伯納

短的引用:
有這麼一群人,在日本叫法西斯,在德國叫納粹,在中國叫愛國者! ——王朔說 

5. <del></del>——定義文檔中已被刪除的文本

    <ins></ins>——定義已經被更新的文本

舉例:

經常有商城類網站的促銷價,原價是:50元,現價是:42元

代碼:原價是:<del>50元</del>,現價是:<ins>42元</ins>

頁面呈現效果:原價是:50元,現價是: 

6. <sub></sub>——定義下標文本

    <sup></sup>——定義上標文本

這二個標簽在數學裡經常用到。

舉例:10<sub>2</sub>     10<sup>2</sup>

頁面呈現效果:102    102

看到這裡,會不會有人認為:“這樣做不就把一件很簡單的事情復雜化了嗎?”

——其實這樣想是不對的,原因除了上面提到過的語義化原則以外,還應當考慮這句話:

“(當你合理運用這些標簽的時候)浏覽器可能會根據這個信息,改變對這些文本的顯示方式,或者用其他文本代替。也許當前流行的浏覽器對此標簽中包含的文本還沒有任何處理方式,但是我們無法預測將來的浏覽器版本將會如何實現該標簽。

另外,還有一些更實際的應用促使我們將代碼寫得更嚴謹些:

假如我們希望加上一點 JSJS 的頁面展示效果:當鼠標移動到頁面中任何一個 abbr 標簽內時,有一個圖片會隨著鼠標漸漸顯示出來,並且圖片上的說明文字,就是 abbr 標簽內的 title 內的文字;

由於我們一開始就在頁面中設置好了 abbr 標簽,所以即使在頁面完成以後,要添加這樣的頁面效果,也是易如反掌、輕松之至。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved