HTML文本格式化标签(用来调整文本的格式和排版)
HTML 文本格式化標(biāo)簽:
以上表格列舉的是常見(jiàn)的一些文本格式化標(biāo)簽,接下來(lái),我們用具體的代碼做一下演示和補(bǔ)充:
以上代碼運(yùn)行出來(lái)的效果是這樣:
(-----------------------------------分割線(xiàn)------------------------------------)
以上代碼運(yùn)行出來(lái)的效果是這樣:
這里,我們著重講解一下<pre>標(biāo)簽,<pre>標(biāo)簽可定義預(yù)格式化的文本,被包圍在<pre>標(biāo)簽中的文本元素通常會(huì)保留空格和換行符,文本也會(huì)呈現(xiàn)等寬字體。
(-----------------------------------分割線(xiàn)------------------------------------)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>計(jì)算機(jī)輸出標(biāo)簽</title> </head> <body><code>計(jì)算機(jī)輸出</code> <br /> <kbd>鍵盤(pán)輸入</kbd> <br /> <tt>打字機(jī)文本</tt> <br /> <samp>計(jì)算機(jī)代碼樣本</samp> <br /> <var>計(jì)算機(jī)變量</var> <br /><p> <b>注釋:</b>這些標(biāo)簽常用于顯示計(jì)算機(jī)/編程代碼。 </p></body> </html>以上代碼運(yùn)行出來(lái)的效果是這樣:
接下來(lái),我們講解一下以上代碼中的幾個(gè)標(biāo)簽:
<code>標(biāo)簽用于表示計(jì)算機(jī)源代碼或者其他機(jī)器可以閱讀的文本內(nèi)容,包含在該標(biāo)簽內(nèi)的文本將用等寬、類(lèi)似電傳打字機(jī)樣式的字體(Courier)顯示出來(lái)。雖然 <code> 標(biāo)簽通常只是把文本變成等寬字體,但它暗示著這段文本是源程序代碼。將來(lái)的瀏覽器有可能會(huì)加入其他顯示效果。例如,程序員的瀏覽器可能會(huì)尋找 <code> 片段,并執(zhí)行某些額外的文本格式化處理。
<kbd>標(biāo)簽定義鍵盤(pán)文本。它用來(lái)表示文本是從鍵盤(pán)上鍵入的。瀏覽器通常用等寬字體來(lái)顯示該標(biāo)簽中包含的文本。<kbd> 標(biāo)簽經(jīng)常用在和計(jì)算機(jī)相關(guān)的文檔和手冊(cè)中。
<tt>定義打字機(jī)代碼。<tt>標(biāo)簽呈現(xiàn)類(lèi)似打字機(jī)或者等寬的文本效果,<tt> 標(biāo)簽和必需的 </tt> 結(jié)束標(biāo)簽告訴瀏覽器,要把其中包含的文本顯示為等寬字體。對(duì)于那些已經(jīng)使用了等寬字體的瀏覽器來(lái)說(shuō),這個(gè)標(biāo)簽在文本的顯示上就沒(méi)有什么特殊效果了。
<samp>定義樣本文本。<samp> 標(biāo)簽表示一段用戶(hù)應(yīng)該對(duì)其沒(méi)有什么其他解釋的文本字符。要從正常的上下文抽取這些字符時(shí),通常要用到這個(gè)標(biāo)簽。<samp> 標(biāo)簽并不經(jīng)常使用。只有在要從正常的上下文中將某些短字符序列提取出來(lái),對(duì)它們加以強(qiáng)調(diào)的極少情況下,才使用這個(gè)標(biāo)簽。
<var>定義變量。<var> 標(biāo)簽表示變量的名稱(chēng),或者由用戶(hù)提供的值。這個(gè)標(biāo)簽經(jīng)常與 <code> 和 <pre> 標(biāo)簽一起使用,用來(lái)顯示計(jì)算機(jī)編程代碼范例及類(lèi)似方面的特定元素。
用 <var> 標(biāo)簽標(biāo)記的文本通常顯示為斜體。就像其他與計(jì)算機(jī)編程和文檔相關(guān)的標(biāo)簽一樣,<var> 標(biāo)簽不只是讓用戶(hù)更容易理解和瀏覽你的文檔,而且將來(lái)某些自動(dòng)系統(tǒng)還可以利用這些恰當(dāng)?shù)臉?biāo)簽,從你的文檔中提取信息以及文檔中提到的有用參數(shù)。
上面還有一個(gè)標(biāo)簽:<p>文本</p>
表示將包含的文本加粗加黑。
(-----------------------------------分割線(xiàn)------------------------------------)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>如何寫(xiě)地址</title> </head> <body><address> 程序員查資料平臺(tái)入口 <a href="https://www.csdn.net/?spm=1011.2124.3001.5359">CSDN論壇</a>.<br> Visit us at:<br> Welcome to My CSDN blog<br> 入口鏈接為<a href="https://blog.csdn.net/qq_51735681?spm=1000.2115.3001.5343">尤里卡的CSDN</a>.<br> </address></body> </html>以上代碼運(yùn)行出來(lái)的效果是這樣:
在以上的代碼中,我們引入了一個(gè)<address>標(biāo)簽,<address>標(biāo)簽定義文檔或文章的作者/擁有者的聯(lián)系信息。如果<address>元素位于 <body>元素內(nèi),則它表示文檔聯(lián)系信息。如果<address>元素位于 <article>元素內(nèi),則它表示文章的聯(lián)系信息。<address>元素中的文本通常呈現(xiàn)為斜體。
(-----------------------------------分割線(xiàn)------------------------------------)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>如何實(shí)現(xiàn)縮寫(xiě)或首字母縮寫(xiě)</title> </head> <body><abbr title="The People's Republic of China">PRC</abbr> <br /> <acronym title="World Wide Web">WWW</acronym><p>在某些瀏覽器中,當(dāng)您把鼠標(biāo)移至縮略詞語(yǔ)上時(shí),title 可用于展示表達(dá)的完整版本。</p><p>acronym是首字母縮寫(xiě)標(biāo)簽的一種</p><p>abbr是首字母縮寫(xiě)標(biāo)簽的一種</p></body> </html>以上代碼運(yùn)行出來(lái)的效果是這樣:
以上代碼中,出現(xiàn)了<acronym>標(biāo)簽和<abbr>標(biāo)簽,接下來(lái),我們逐一進(jìn)行講解:
對(duì)于 <acronym> 標(biāo)簽,幾乎所有主流的瀏覽器均支持 <acronym> 標(biāo)簽(除了IE 5.5 或更早版本的 IE 瀏覽器不支持 <acronym> 標(biāo)簽)。還要注意一點(diǎn):HTML5中不支持<acronym>標(biāo)簽,請(qǐng)使用<abbr>標(biāo)簽代替。
對(duì)于<abbr>標(biāo)簽,幾乎所有瀏覽器都支持 <abbr> 標(biāo)簽(除了IE 6 或更早版本的 IE 瀏覽器不支持 <abbr> 標(biāo)簽)。<abbr> 標(biāo)簽指示簡(jiǎn)稱(chēng)或縮寫(xiě),通過(guò)對(duì)縮寫(xiě)進(jìn)行標(biāo)記,您能夠?yàn)闉g覽器、拼寫(xiě)檢查和搜索引擎提供有用的信息。
注意:可以在 <abbr> 標(biāo)簽中使用全局的 title 屬性,這樣就能夠在鼠標(biāo)指針移動(dòng)到 <abbr> 元素上時(shí)顯示出簡(jiǎn)稱(chēng)/縮寫(xiě)的完整版本(比如上面代碼的效果)。
(-----------------------------------分割線(xiàn)------------------------------------)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文字方向</title> </head> <body><p>該段落文字從左到右顯示。</p> <p><bdo dir="rtl">該段落文字從右到左顯示。</bdo></p> </body> </html>以上代碼運(yùn)行出來(lái)的效果是這樣:
以上代碼中提到了一個(gè)<bdo>標(biāo)簽,這個(gè)標(biāo)簽可以改變文字方向(讓文字從左往右或者從右往左顯示)。
(-----------------------------------分割線(xiàn)------------------------------------)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>塊引用</title> </head> <body><p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q> We hope they succeed.</p></body> </html>以上代碼運(yùn)行出來(lái)的效果是這樣:
以上代碼中提到了一個(gè)<q>標(biāo)簽,這個(gè)<q>標(biāo)簽就相當(dāng)于“”(引號(hào)),可以直接引用文本。
(-----------------------------------分割線(xiàn)------------------------------------)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>實(shí)現(xiàn)刪除字和插入字的效果</title> </head> <body><p>My favorite color is <del>blue</del> <ins>red</ins>!</p></body> </html>以上代碼運(yùn)行出來(lái)的效果是這樣:
以上代碼中,<del> </del>表示刪除線(xiàn),里面包含的內(nèi)容會(huì)被劃上一條刪除線(xiàn)(例如上述例子的blue)。
<ins> </ins>表示下劃線(xiàn),里面包含的內(nèi)容下面會(huì)被劃上一條下劃線(xiàn)(例如上述例子的red)。
總結(jié)
以上是生活随笔為你收集整理的HTML文本格式化标签(用来调整文本的格式和排版)的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 来,和人工智能对对联过大年!
- 下一篇: 2017年html5行业报告,云适配发布