QQ咨询 官方微信

添加微信好友

官方小程序

百度小程序

微信小程序

头条小程序

关于我们

html基础

HTML 文本格式化(W3C教程)

 admin  2013-09-01 22:01:00

 HTML 可定义很多供格式化输出的元素,比如粗体和斜体字。
下面有很多例子,您可以亲自试试:
HTML 文本格式化实例

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

  1. <html> 
  2.  
  3. <body> 
  4.  
  5. <b>This text is bold</b> 
  6.  
  7. <br /> 
  8.  
  9. <strong>This text is strong</strong> 
  10.  
  11. <br /> 
  12.  
  13. <big>This text is big</big> 
  14.  
  15. <br /> 
  16.  
  17. <em>This text is emphasized</em> 
  18.  
  19. <br /> 
  20.  
  21. <i>This text is italic</i> 
  22.  
  23. <br /> 
  24.  
  25. <small>This text is small</small> 
  26.  
  27. <br /> 
  28.  
  29. This text contains 
  30. <sub>subscript</sub> 
  31.  
  32. <br /> 
  33.  
  34. This text contains 
  35. <sup>superscript</sup> 
  36.  
  37. </body> 
  38. </html> 

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

  1. <html> 
  2.  
  3. <body> 
  4.  
  5. <pre> 
  6. 这是 
  7. 预格式文本。 
  8. 它保留了      空格 
  9. 和换行。 
  10. </pre> 
  11. <p>pre 标签很适合显示计算机代码:</p> 
  12. <pre> 
  13. for i = 1 to 10 
  14.      print i 
  15. next i 
  16. </pre> 
  17.  
  18. </body> 
  19. </html> 

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

  1. <html> 
  2.  
  3. <body> 
  4.  
  5. <code>Computer code</code> 
  6. <br /> 
  7. <kbd>Keyboard input</kbd> 
  8. <br /> 
  9. <tt>Teletype text</tt> 
  10. <br /> 
  11. <samp>Sample text</samp> 
  12. <br /> 
  13. <var>Computer variable</var> 
  14. <br /> 
  15.  
  16. <p> 
  17. <b>注释:</b>这些标签常用于显示计算机/编程代码。 
  18. </p> 
  19.  
  20. </body> 
  21. </html> 

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

  1. <html> 
  2.  
  3. <body> 
  4.  
  5. <h2>唐老鸭的地址:</h2> 
  6. <address> 
  7. Donald Duck<br /> 
  8. BOX 555<br /> 
  9. Disneyland<br /> 
  10. USA<br /> 
  11. </address> 
  12.  
  13. <br /> 
  14.  
  15. <h2>W3School 的地址:</h2> 
  16. <address> 
  17.   <a href="mailto:service@w3school.com.cn">用户服务信箱</a><br /> 
  18.   上海赢科投资有限公司<br /> 
  19.   金桥开发区 789 号<br /> 
  20. </address> 
  21.  
  22. </body> 
  23. </html> 

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

  1. <html> 
  2.  
  3. <body> 
  4.  
  5. <abbr title="etcetera">etc.</abbr> 
  6. <br /> 
  7. <acronym title="World Wide Web">WWW</acronym> 
  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> 

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

  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> 

删除字效果和插入字效果
此例演示如何标记删除文本和插入文本。

  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 代码。

 

 
HTML 文本格式化(W3C教程)

 

文本格式化标签

标签 描述
<b> 定义粗体文本。
<big> 定义大号字。
<em> 定义着重文字。
<i> 定义斜体字。
<small> 定义小号字。
<strong> 定义加重语气。
<sub> 定义下标字。
<sup> 定义上标字。
<ins> 定义插入字。
<del> 定义删除字。
<s> 不赞成使用。使用 <del> 代替。
<strike> 不赞成使用。使用 <del> 代替。
<u> 不赞成使用。使用样式(style)代替。

“计算机输出”标签

标签 描述
<code> 定义计算机代码。
<kbd> 定义键盘码。
<samp> 定义计算机代码样本。
<tt> 定义打字机代码。
<var> 定义变量。
<pre> 定义预格式文本。
<listing> 不赞成使用。使用 <pre> 代替。
<plaintext> 不赞成使用。使用 <pre> 代替。
<xmp> 不赞成使用。使用 <pre> 代替。

引用、引用和术语定义

标签 描述
<abbr> 定义缩写。
<acronym> 定义首字母缩写。
<address> 定义地址。
<bdo> 定义文字方向。
<blockquote> 定义长的引用。
<q> 定义短的引用语。
<cite> 定义引用、引证。
<dfn> 定义一个定义项目。

 

 

 

¥ 打赏
×
如果您觉得文章帮助了您就打赏一下吧
非常感谢你的打赏,我们将继续分享更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏

本文《HTML 文本格式化(W3C教程)》发布于石头博客文章,作者:admin,如若转载,请注明出处:https://www.pweb123.com/html/htmljc/140.html,否则禁止转载,谢谢配合!

文章点评

我来说两句 已有0条评论
点击图片更换

添加微信好友

添加微信好友

微信小程序

百度小程序