首页 >web前端 >html教程 >HTML 文本格式化的简单实例

HTML 文本格式化的简单实例

高洛峰
高洛峰原创
2017-02-11 14:18:421491浏览

下面小编就为大家带来一篇HTML 文本格式化的简单实例(详解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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


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

  1. <html>  

  2.   

  3. <body>  

  4.   

  5. <b>This text is boldb>  

  6.   

  7. <br />  

  8.   

  9. <strong>This text is strongstrong>  

  10.   

  11. <br />  

  12.   

  13. <big>This text is bigbig>  

  14.   

  15. <br />  

  16.   

  17. <em>This text is emphasizedem>  

  18.   

  19. <br />  

  20.   

  21. <i>This text is italici>  

  22.   

  23. <br />  

  24.   

  25. <small>This text is smallsmall>  

  26.   

  27. <br />  

  28.   

  29. This text contains   

  30. <sub>subscriptsub>  

  31.   

  32. <br />  

  33.   

  34. This text contains   

  35. <sup>superscriptsup>  

  36.   

  37. body>  

  38. html>  

效果如下:

HTML 文本格式化的简单实例

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


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

  1. <html>  

  2.   

  3. <body>  

  4.   

  5. <pre>  

  6. 这是   

  7. 预格式文本。   

  8. 它保留了      空格   

  9. 和换行。   

  10. pre>  

  11.   

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

  13.   

  14. <pre>  

  15. for i = 1 to 10   

  16.      print i   

  17. next i   

  18. pre>  

  19.   

  20. body>  

  21. html>  

效果如下:

HTML 文本格式化的简单实例

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


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

  1. <html>  

  2.   

  3. <body>  

  4.   

  5. <code>Computer codecode>  

  6. <br />  

  7. <kbd>Keyboard inputkbd>  

  8. <br />  

  9. <tt>Teletype texttt>  

  10. <br />  

  11. <samp>Sample textsamp>  

  12. <br />  

  13. <var>Computer variablevar>  

  14. <br />  

  15.   

  16. <p>  

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

  18. p>  

  19.   

  20. body>  

  21. html>  

效果如下:

HTML 文本格式化的简单实例

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


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

  1. >  

  2. <html>  

  3. <body>  

  4.   

  5. <address>  

  6. Written by <a href="mailto:webmaster@example.com">Donald Ducka>.<br>    

  7. Visit us at:<br>  

  8. Example.com<br>  

  9. Box 564, Disneyland<br>  

  10. USA   

  11. address>  

  12.   

  13. body>  

  14. html>  

效果如下:

HTML 文本格式化的简单实例

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


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

  1. <html>  

  2.   

  3. <body>  

  4.   

  5. <abbr title="etcetera">etc.abbr>  

  6. <br />  

  7. <acronym title="World Wide Web">WWWacronym>  

  8.   

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

  10.   

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

  12.   

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

  14.   

  15. body>  

  16. html>  

效果如下:

HTML 文本格式化的简单实例

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


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

  1. <html>  

  2.   

  3. <body>  

  4.   

  5. <p>  

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

  7. p>  

  8.   

  9. <bdo dir="rtl">  

  10. Here is some Hebrew text   

  11. bdo>  

  12.   

  13. body>  

  14. html>  

效果如下:

HTML 文本格式化的简单实例

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


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

  1. <html>  

  2.   

  3. <body>  

  4.   

  5. 这是长的引用:   

  6. <blockquote>  

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

  8. blockquote>  

  9.   

  10. 这是短的引用:   

  11. <q>  

  12. 这是短的引用。   

  13. q>  

  14.   

  15. <p>  

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

  17. p>  

  18.   

  19. body>  

  20. html>  

效果如下:

HTML 文本格式化的简单实例

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


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

  1. <html>  

  2.   

  3. <body>  

  4.   

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

  6.   

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

  8.   

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

  10.   

  11. body>  

  12. html>  

效果如下:

HTML 文本格式化的简单实例

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

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

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn