HTML 文本格式化的簡單實例(詳解)
一,文本格式化:此例演示如何在一個 HTML 文件中對文本進行格式化。
- <html>
- <body>
- <b>This text is bold</b>
- <br />
- <strong>This text is strong</strong>
- <br />
- <big>This text is big</big>
- <br />
- <em>This text is emphasized</em>
- <br />
- <i>This text is italic</i>
- <br />
- <small>This text is small</small>
- <br />
- This text contains
- <sub>subscript</sub>
- <br />
- This text contains
- <sup>superscript</sup>
- </body>
- </html>
效果如下:
二,預格式文本:此例演示如何使用 pre 標簽對空行和空格進行控制。
- <html>
- <body>
- <pre>
- 這是
- 預格式文本。
- 它保留了 空格
- 和換行。
- </pre>
- <p>pre 標簽很適合顯示計算機代碼:</p>
- <pre>
- for i = 1 to 10
- print i
- next i
- </pre>
- </body>
- </html>
效果如下:
三,“計算機輸出”標簽:此例演示不同的“計算機輸出”標簽的顯示效果。
- <html>
- <body>
- <code>Computer code</code>
- <br />
- <kbd>Keyboard input</kbd>
- <br />
- <tt>Teletype text</tt>
- <br />
- <samp>Sample text</samp>
- <br />
- <var>Computer variable</var>
- <br />
- <p>
- <b>注釋:</b>這些標簽常用于顯示計算機/編程代碼。
- </p>
- </body>
- </html>
效果如下:
四,地址:此例演示如何在 HTML 文件中寫地址。
- <!DOCTYPE html>
- <html>
- <body>
- <address>
- Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br>
- Visit us at:<br>
- Example.com<br>
- Box 564, Disneyland<br>
- USA
- </address>
- </body>
- </html>
效果如下:
五,縮寫和首字母縮寫:此例演示如何實現(xiàn)縮寫或首字母縮寫。
- <html>
- <body>
- <abbr title="etcetera">etc.</abbr>
- <br />
- <acronym title="World Wide Web">WWW</acronym>
- <p>在某些瀏覽器中,當您把鼠標移至縮略詞語上時,title 可用于展示表達的完整版本。</p>
- <p>僅對于 IE 5 中的 acronym 元素有效。</p>
- <p>對于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>
- </body>
- </html>
效果如下:
六,文字方向:此例演示如何改變文字的方向。
- <html>
- <body>
- <p>
- 如果您的瀏覽器支持 bi-directional override (bdo),下一行會從右向左輸出 (rtl);
- </p>
- <bdo dir="rtl">
- Here is some Hebrew text
- </bdo>
- </body>
- </html>
效果如下:
七,塊引用:此例演示如何實現(xiàn)長短不一的引用語。
- <html>
- <body>
- 這是長的引用:
- <blockquote>
- 這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。
- </blockquote>
- 這是短的引用:
- <q>
- 這是短的引用。
- </q>
- <p>
- 使用 blockquote 元素的話,瀏覽器會插入換行和外邊距,而 q 元素不會有任何特殊的呈現(xiàn)。
- </p>
- </body>
- </html>
效果如下:
八,刪除子效果和插入子效果。
- <html>
- <body>
- <p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>
- <p>大多數(shù)瀏覽器會改寫為刪除文本和下劃線文本。</p>
- <p>一些老式的瀏覽器會把刪除文本和下劃線文本顯示為普通文本。</p>
- </body>
- </html>
效果如下:
以上這篇HTML 文本格式化的簡單實例(詳解)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持我們。
欄 目:CSS/HTML
下一篇:h5輸入框提示語 + 正常文本框提示語的實現(xiàn)方法
本文標題:HTML 文本格式化的簡單實例(詳解)
本文地址:http://mengdiqiu.com.cn/a1/CSS_HTML/9557.html
您可能感興趣的文章
- 04-02好看的字體樣式css,好看的字體樣式圖片
- 04-02html中加入css樣式的簡單介紹
- 01-10通過html為FLASH加鏈接的實現(xiàn)代碼(div層)
- 01-10IE瀏覽器HTML Hack標簽總結(jié)
- 01-10html用style添加屬性示例
- 01-10HTML中rel屬性分析
- 01-10HTML元素設置焦點的方法
- 01-10在html文件里include文件內(nèi)容的方法小結(jié)
- 01-10常用HTML meta 標簽屬性(網(wǎng)站兼容與優(yōu)化需要)
- 01-10用HTML和CSS打造屬于自己的暖男“大白”


閱讀排行
本欄相關(guān)
- 04-02表格樣式css樣式,css樣式表單
- 04-02好看的字體樣式css,好看的字體樣式圖
- 04-02分頁樣式css,分頁樣式jq
- 04-02分頁樣式css,分頁樣式欄里用來定義首
- 04-02css樣式的引入,css樣式怎么引入
- 04-02css滾動條樣式,css滾動條的樣式
- 04-02css樣式引入方式有幾種,網(wǎng)頁引入css樣
- 04-02html中加入css樣式的簡單介紹
- 04-02vue中的css樣式布局,vue添加css樣式
- 04-02內(nèi)嵌樣式css,內(nèi)嵌樣式表,內(nèi)部樣式表
隨機閱讀
- 01-10C++ 類訪問控制的條件總結(jié)
- 01-11常用的HTML富文本編譯器UEditor、CKEdi
- 08-05dedecms織夢模板全站調(diào)用收藏數(shù)的方法
- 01-10C++實現(xiàn)將數(shù)組中的值反轉(zhuǎn)
- 08-05dedecms織夢模板編輯文檔的同時自動更
- 08-05DEDECMS點擊主欄目默認顯示第一個子欄
- 01-10C語言打印楊輝三角示例匯總
- 01-10vue實現(xiàn)分頁加載效果
- 01-10bat批處理徹底隱藏文件的方法(使用
- 08-05織夢dedecms首頁調(diào)用縮略圖為背景