WEB標準教程:功能相似的標簽的用法
互聯(lián)網(wǎng) 發(fā)布時間:2008-10-17 19:16:36 作者:佚名
我要評論

在XHTML標簽中有一些標簽的作用是相似的,當然這里的相似是指語義相似,以至于很多人都不清楚這些相似的標簽如何使用,那么今天的主題就是分解相似的標簽,明確各個標簽的用途。在前面我們已經(jīng)講過了strong與em的區(qū)別。除了strong與em之外還有一些相似的標簽比如q、cite、bl
在XHTML標簽中有一些標簽的作用是相似的,當然這里的相似是指語義相似,以至于很多人都不清楚這些相似的標簽如何使用,那么今天的主題就是分解相似的標簽,明確各個標簽的用途。在前面我們已經(jīng)講過了strong與em的區(qū)別。除了strong與em之外還有一些相似的標簽比如q、cite、blockquote。這三個都屬于引用一類,但是這里還是有一些區(qū)別的,首先來一一解釋。
<q></q>,q的作用是引用非塊元素,也就是引用不能形成段落的內(nèi)容,可能是某人說的一句話,也可能是一句文檔摘錄等,特點很明顯這里是“一句”。并且q本身并不會產(chǎn)生段落。q本身并沒有什么樣式,一般瀏覽器也不會給他設置一個默認樣式使起突出。但是我們可以通過CSS去使之與一般內(nèi)容區(qū)分開。在q標簽中還有一個屬性是非常重要的,那就是cite。在這個cite屬性值中主要是注明引用內(nèi)容的出自何處,或是給出在線的地址。
<q cite="http://chabaoo.cn/CSS/20080330/css_5013.html">這次的內(nèi)容會讓你更進一步的了解到關(guān)于段落里的細節(jié)</q>
要特別注意不要把q寫成p,這兩個標簽很容易弄錯。
在上一篇中其實已經(jīng)談到了cite,在那篇文章中我寫到
“這個標簽只表注出文獻的標題與名稱。這個標簽有點類似于我們書籍后面的參考文獻的目錄內(nèi)容,也有點像是腳注。”那么他與q之間的區(qū)別是什么呢?其實很容易理解,q是顯示內(nèi)容,而cite則是顯示說這段內(nèi)容的人名或是書名。cite與q常常混合起來使用。比如:
<cite>魯迅</cite>先生說:<q>地上本來沒有路,走得人多了,便有了路</q>。
那么blockquote與他們有什么區(qū)別呢?blockquote是塊引用,XHTML允許其包含任何標簽。而上面的q與cite則沒有這么大的包容度。blockquote的使用是當需要引用一段或是多段內(nèi)容時所采用的,瀏覽器一般默認處理會把引用內(nèi)容縮進一些以與正常的段落文章區(qū)分開。當然我們可以通過CSS樣式來改變區(qū)分的形式。
在blockquote中有一個cite屬性,與q一樣是用來注明引用來源的。可以把聯(lián)機文檔的URL注明在其中。
在XHTML標簽中還有一個叫pre的標簽,這個標簽在Dreamweaver中被稱為“格式化”,在以前使用Dreamweaver 的時候我一直不清楚這個東西是作什么用的。一直到現(xiàn)在才清楚pre通常用以顯示源代碼,并且不支持能使段落分開的標簽比如<p>,顯示內(nèi)容如需換行只要在源文件中換行即可無需要代碼實現(xiàn)。同時pre會保留注其中的所有空格并顯示出來。
一般來講pre目前是多用于顯示源代碼,這與code的用途是相似的,所不同的是pre是塊級的,而code是內(nèi)聯(lián)的。簡單說,pre可以包括多行內(nèi)容,而code只包含短小的一句或幾個字符。
這里講述的并不能完全說清楚,這就需要在看完文檔后動手操作嘗試一下,自行去發(fā)現(xiàn)其中的特別之處。有朋友說希望看到有關(guān)于CSS方面的知識。這里我想傳達我的編寫意圖。我希望一步步來,讓一些還沒從表格布局脫離出來的朋友可以先行使用一些并不會影響整體的形式切入進去。因為一涉及CSS就可能會有兼容性問題,所以這里先說文檔,然后再加入一些不影響整體布局的CSS知識。一步步的深入,最終能讓閱讀者從表格布局自然過渡到標準勢力中來。當然有朋友已經(jīng)通過自學的方式完成了這一步,那么可以到我的“雜談標準”一欄中與我交流。
相關(guān)文章
AudioContext 實現(xiàn)音頻可視化(web技術(shù)分享)
這篇文章主要分享的是web技術(shù)的 AudioContext 實現(xiàn)音頻可視化,要實現(xiàn)音頻可視化得先實現(xiàn)一些炫酷的效果需要借助 Web Audio API提供的一些方法 AudioContext,下面詳細內(nèi)容2022-02-23- 這篇文章主要給大家介紹了web技術(shù)中的WebRTC記錄音視頻流,文章內(nèi)容圍繞主題展相關(guān)資料,需要的小伙伴可以參考一下,希望對你有所幫助2022-02-23
- 這是我通過網(wǎng)上查閱資料總結(jié)的一些編碼規(guī)范,用于鞏固對html,css頁面重構(gòu)時的基礎,需要的朋友可以參考下2020-12-19
前端編碼規(guī)范(4)—— CSS 和 Sass (SCSS) 開發(fā)規(guī)范
這篇文章主要介紹了前端編碼規(guī)范(4)—— CSS 和 Sass (SCSS) 開發(fā)規(guī)范,需要的朋友可以參考下2017-01-21Web前端開發(fā)規(guī)范2017(HTML/JavaScript/CSS)
這是一份旨在增強團隊的開發(fā)協(xié)作,提高代碼質(zhì)量和打造開發(fā)基石的編碼風格規(guī)范,其中包含了 HTML, JavaScript 和 CSS/SCSS 這幾個部分。我們知道,當一個團隊開始指定并實行2017-01-21- 這篇文章主要為大家介紹了前端開發(fā)團隊遵循和約定的代碼書寫規(guī)范,意在提高代碼的規(guī)范性和可維護性,需要的朋友可以參考下2017-01-21
- 這篇文章主要為大家詳細介紹了響應式Web之流式網(wǎng)格系統(tǒng)的相關(guān)資料,感興趣的小伙伴們可以參考一下2016-07-04
在網(wǎng)頁標題欄上和收藏夾顯示網(wǎng)站logo的實現(xiàn)方法
下面小編就為大家分享一篇在網(wǎng)頁標題欄上和收藏夾顯示網(wǎng)站logo的實現(xiàn)方法。希望對大家有所幫助。一起跟隨小編過來看看吧,祝大家游戲愉快哦2016-03-16Visual Foxpro 6.0 中文版安裝向?qū)?圖解)
基于很多用戶都在下載Visual Foxpro 6.0,但是有安裝vtp6.0經(jīng)驗的朋友確很少,在安裝過程中總會出現(xiàn)這樣那樣的問題,基于這些問題,下面小編抽個時間把Visual Foxpro 6.02015-09-09網(wǎng)站日志200 0 64狀態(tài)碼的分析(協(xié)議子狀態(tài))
網(wǎng)站日志200 0 64狀態(tài)碼的分析介紹2012-10-29