请选择 进入手机版 | 继续访问电脑版

菏泽合众云课堂-菏泽最大的IT技能学习平台

快捷导航

HTML 文本格式化

[复制链接]
laozhang 发表于 2015-8-3 08:21:10 | 显示全部楼层 |阅读模式 |          
HTML 可定义很多供格式化输出的元素,比如粗体和斜体字。
下面有很多例子,您可以亲自试试:

HTML 可定义很多供格式化输出的元素,比如粗体和斜体字。
下面有很多例子,您可以亲自试试:
此例演示如何在一个 HTML 文件中对文本进行格式化
  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>
复制代码运行
此例演示如何使用 pre 标签对空行和空格进行控制。
  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>
复制代码运行
此例演示不同的“计算机输出”标签的显示效果。
  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 文件中写地址。
  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>
复制代码运行
此例演示如何实现缩写或首字母缩写。
  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>
复制代码运行
此例演示如何改变文字的方向。
  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>
复制代码运行
此例演示如何实现长短不一的引用语。
  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>
复制代码运行
此例演示如何标记删除文本和插入文本。
  1. <html>

  2. <body>

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

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

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

  6. </body>
  7. </html>
复制代码运行

如何查看 HTML 源码
您是否有过这样的经历,当你看到一个很棒的站点,你会很想知道开发人员是如何将它实现的?
你有没有看过一些网页,并且想知道它是如何做出来的呢?
要揭示一个网站的技术秘密,其实很简单。单击浏览器的“查看”菜单,选择“查看源文件”即可。随后你会看到一个弹出的窗口,窗口内就是实际的 HTML 代码。

文本格式化标签
标签描述
<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>定义一个定义项目。
提问 返回列表
关闭

小云老师推荐 上一条 /2 下一条

菏泽合众云建站|菏泽学编程|菏泽学设计|菏泽Ps培训|菏泽学建站|小黑屋| 菏泽合众云课堂

Copyright © 2015-2018 菏泽合众云课堂 鲁ICP备14026574号

 

快速回复 返回顶部 返回列表