欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

HTML 文本格式化的简单实例

程序员文章站 2022-03-31 09:53:08
...
下面小编就为大家带来一篇HTML 文本格式化的简单实例(详解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

一,文本格式化:此例演示如何在一个 HTML 文件中对文本进行格式化。


XML/HTML Code复制内容到剪贴板

  1. <html>

  2. <body>

  3. <b>This text is bold</b>

  4. <br />

  5. <strong>This text is strong</strong>

  6. <br />

  7. <big>This text is big</big>

  8. <br />

  9. <em>This text is emphasized</em>

  10. <br />

  11. <i>This text is italic</i>

  12. <br />

  13. <small>This text is small</small>

  14. <br />

  15. This text contains

  16. <sub>subscript</sub>

  17. <br />

  18. This text contains

  19. <sup>superscript</sup>

  20. </body>

  21. </html>

效果如下:

HTML 文本格式化的简单实例

二,预格式文本:此例演示如何使用 pre 标签对空行和空格进行控制。


XML/HTML Code复制内容到剪贴板

  1. <html>

  2. <body>

  3. <pre>

  4. 这是

  5. 预格式文本。

  6. 它保留了 空格

  7. 和换行。

  8. </pre>

  9. <p>pre 标签很适合显示计算机代码:</p>

  10. <pre>

  11. for i = 1 to 10

  12. print i

  13. next i

  14. </pre>

  15. </body>

  16. </html>

效果如下:

HTML 文本格式化的简单实例

三,“计算机输出”标签:此例演示不同的“计算机输出”标签的显示效果。


XML/HTML Code复制内容到剪贴板

  1. <html>

  2. <body>

  3. <code>Computer code</code>

  4. <br />

  5. <kbd>Keyboard input</kbd>

  6. <br />

  7. <tt>Teletype text</tt>

  8. <br />

  9. <samp>Sample text</samp>

  10. <br />

  11. <var>Computer variable</var>

  12. <br />

  13. <p>

  14. <b>注释:</b>这些标签常用于显示计算机/编程代码。

  15. </p>

  16. </body>

  17. </html>

效果如下:

HTML 文本格式化的简单实例

四,地址:此例演示如何在 HTML 文件中写地址。


XML/HTML Code复制内容到剪贴板

  1. <!DOCTYPE html>

  2. <html>

  3. <body>

  4. <address>

  5. Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br>

  6. Visit us at:<br>

  7. Example.com<br>

  8. Box 564, Disneyland<br>

  9. USA

  10. </address>

  11. </body>

  12. </html>

效果如下:

HTML 文本格式化的简单实例

五,缩写和首字母缩写:此例演示如何实现缩写或首字母缩写。


XML/HTML Code复制内容到剪贴板

  1. <html>

  2. <body>

  3. <abbr title="etcetera">etc.</abbr>

  4. <br />

  5. <acronym title="World Wide Web">WWW</acronym>

  6. <p>在某些浏览器中,当您把鼠标移至缩略词语上时,title 可用于展示表达的完整版本。</p>

  7. <p>仅对于 IE 5 中的 acronym 元素有效。</p>

  8. <p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>

  9. </body>

  10. </html>

效果如下:

HTML 文本格式化的简单实例

六,文字方向:此例演示如何改变文字的方向。


XML/HTML Code复制内容到剪贴板

  1. <html>

  2. <body>

  3. <p>

  4. 如果您的浏览器支持 bi-directional override (bdo),下一行会从右向左输出 (rtl);

  5. </p>

  6. <bdo dir="rtl">

  7. Here is some Hebrew text

  8. </bdo>

  9. </body>

  10. </html>

效果如下:

HTML 文本格式化的简单实例

七,块引用:此例演示如何实现长短不一的引用语。


XML/HTML Code复制内容到剪贴板

  1. <html>

  2. <body>

  3. 这是长的引用:

  4. <blockquote>

  5. 这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。

  6. </blockquote>

  7. 这是短的引用:

  8. <q>

  9. 这是短的引用。

  10. </q>

  11. <p>

  12. 使用 blockquote 元素的话,浏览器会插入换行和外边距,而 q 元素不会有任何特殊的呈现。

  13. </p>

  14. </body>

  15. </html>

效果如下:

HTML 文本格式化的简单实例

八,删除子效果和插入子效果。


XML/HTML Code复制内容到剪贴板

  1. <html>

  2. <body>

  3. <p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>

  4. <p>大多数浏览器会改写为删除文本和下划线文本。</p>

  5. <p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p>

  6. </body>

  7. </html>

效果如下:

HTML 文本格式化的简单实例

以上这篇HTML 文本格式化的简单实例(详解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持PHP中文网。

更多HTML 文本格式化的简单实例相关文章请关注PHP中文网!