日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 前端技术 > HTML >内容正文

HTML

HTML文本格式化标签(用来调整文本的格式和排版)

發布時間:2023/12/16 HTML 41 豆豆
生活随笔 收集整理的這篇文章主要介紹了 HTML文本格式化标签(用来调整文本的格式和排版) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

HTML 文本格式化標簽:



以上表格列舉的是常見的一些文本格式化標簽,接下來,我們用具體的代碼做一下演示和補充:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文本格式化標簽</title> </head><body><b>這個文本是加粗的</b><br /><strong>這個文本是加粗的</strong><br /><big>這個文本字體放大</big><br /><em>這個文本是斜體的</em><br /><i>這個文本是斜體的</i><br /><small>這個文本是縮小的</small><br />這個文本包含 <sub>下標</sub><br />這個文本包含 <sup>上標</sup></body> </html>

以上代碼運行出來的效果是這樣:

(-----------------------------------分割線------------------------------------)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文本格式化標簽</title> </head> <body><pre> 此例演示如何使用 pre 標簽 對空行和 空格 進行控制 </pre></body> </html>

以上代碼運行出來的效果是這樣:

這里,我們著重講解一下<pre>標簽,<pre>標簽可定義預格式化的文本,被包圍在<pre>標簽中的文本元素通常會保留空格換行符,文本也會呈現等寬字體。

(-----------------------------------分割線------------------------------------)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>計算機輸出標簽</title> </head> <body><code>計算機輸出</code> <br /> <kbd>鍵盤輸入</kbd> <br /> <tt>打字機文本</tt> <br /> <samp>計算機代碼樣本</samp> <br /> <var>計算機變量</var> <br /><p> <b>注釋:</b>這些標簽常用于顯示計算機/編程代碼。 </p></body> </html>

以上代碼運行出來的效果是這樣:

接下來,我們講解一下以上代碼中的幾個標簽:
<code>標簽用于表示計算機源代碼或者其他機器可以閱讀的文本內容,包含在該標簽內的文本將用等寬、類似電傳打字機樣式的字體(Courier)顯示出來。雖然 <code> 標簽通常只是把文本變成等寬字體,但它暗示著這段文本是源程序代碼。將來的瀏覽器有可能會加入其他顯示效果。例如,程序員的瀏覽器可能會尋找 <code> 片段,并執行某些額外的文本格式化處理。

<kbd>標簽定義鍵盤文本。它用來表示文本是從鍵盤上鍵入的。瀏覽器通常用等寬字體來顯示該標簽中包含的文本。<kbd> 標簽經常用在和計算機相關的文檔和手冊中。

<tt>定義打字機代碼。<tt>標簽呈現類似打字機或者等寬的文本效果,<tt> 標簽和必需的 </tt> 結束標簽告訴瀏覽器,要把其中包含的文本顯示為等寬字體。對于那些已經使用了等寬字體的瀏覽器來說,這個標簽在文本的顯示上就沒有什么特殊效果了。

<samp>定義樣本文本。<samp> 標簽表示一段用戶應該對其沒有什么其他解釋的文本字符。要從正常的上下文抽取這些字符時,通常要用到這個標簽。<samp> 標簽并不經常使用。只有在要從正常的上下文中將某些短字符序列提取出來,對它們加以強調的極少情況下,才使用這個標簽。

<var>定義變量。<var> 標簽表示變量的名稱,或者由用戶提供的值。這個標簽經常與 <code> 和 <pre> 標簽一起使用,用來顯示計算機編程代碼范例及類似方面的特定元素。
用 <var> 標簽標記的文本通常顯示為斜體。就像其他與計算機編程和文檔相關的標簽一樣,<var> 標簽不只是讓用戶更容易理解和瀏覽你的文檔,而且將來某些自動系統還可以利用這些恰當的標簽,從你的文檔中提取信息以及文檔中提到的有用參數。

上面還有一個標簽:<p>文本</p>
表示將包含的文本加粗加黑

(-----------------------------------分割線------------------------------------)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>如何寫地址</title> </head> <body><address> 程序員查資料平臺入口 <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>

以上代碼運行出來的效果是這樣:

在以上的代碼中,我們引入了一個<address>標簽,<address>標簽定義文檔或文章的作者/擁有者的聯系信息。如果<address>元素位于 <body>元素內,則它表示文檔聯系信息。如果<address>元素位于 <article>元素內,則它表示文章的聯系信息。<address>元素中的文本通常呈現為斜體。

(-----------------------------------分割線------------------------------------)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>如何實現縮寫或首字母縮寫</title> </head> <body><abbr title="The People's Republic of China">PRC</abbr> <br /> <acronym title="World Wide Web">WWW</acronym><p>在某些瀏覽器中,當您把鼠標移至縮略詞語上時,title 可用于展示表達的完整版本。</p><p>acronym是首字母縮寫標簽的一種</p><p>abbr是首字母縮寫標簽的一種</p></body> </html>

以上代碼運行出來的效果是這樣:

以上代碼中,出現了<acronym>標簽和<abbr>標簽,接下來,我們逐一進行講解:
對于 <acronym> 標簽,幾乎所有主流的瀏覽器均支持 <acronym> 標簽(除了IE 5.5 或更早版本的 IE 瀏覽器不支持 <acronym> 標簽)。還要注意一點:HTML5中不支持<acronym>標簽,請使用<abbr>標簽代替。

對于<abbr>標簽,幾乎所有瀏覽器都支持 <abbr> 標簽(除了IE 6 或更早版本的 IE 瀏覽器不支持 <abbr> 標簽)。<abbr> 標簽指示簡稱或縮寫,通過對縮寫進行標記,您能夠為瀏覽器、拼寫檢查和搜索引擎提供有用的信息。
注意:可以在 <abbr> 標簽中使用全局的 title 屬性,這樣就能夠在鼠標指針移動到 <abbr> 元素上時顯示出簡稱/縮寫的完整版本(比如上面代碼的效果)。

(-----------------------------------分割線------------------------------------)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文字方向</title> </head> <body><p>該段落文字從左到右顯示。</p> <p><bdo dir="rtl">該段落文字從右到左顯示。</bdo></p> </body> </html>

以上代碼運行出來的效果是這樣:

以上代碼中提到了一個<bdo>標簽,這個標簽可以改變文字方向(讓文字從左往右或者從右往左顯示)。

(-----------------------------------分割線------------------------------------)

<!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>

以上代碼運行出來的效果是這樣:

以上代碼中提到了一個<q>標簽,這個<q>標簽就相當于“”(引號),可以直接引用文本。

(-----------------------------------分割線------------------------------------)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>實現刪除字和插入字的效果</title> </head> <body><p>My favorite color is <del>blue</del> <ins>red</ins>!</p></body> </html>

以上代碼運行出來的效果是這樣:

以上代碼中,<del> </del>表示刪除線,里面包含的內容會被劃上一條刪除線(例如上述例子的blue)。
<ins> </ins>表示下劃線,里面包含的內容下面會被劃上一條下劃線(例如上述例子的red)。

總結

以上是生活随笔為你收集整理的HTML文本格式化标签(用来调整文本的格式和排版)的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。