建站学 - 轻松建站从此开始!

建站学-个人建站指南,网页制作,网站设计,网站制作教程

当前位置: 建站学 > 网页设计 > html/xhtml >

HTML 文本格式化实例教程

时间:2011-02-12 21:43来源: 作者: 点击:
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>
复制代码


2.预格式文本
此例演示如何使用 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>
复制代码

3.“计算机输出”标签
此例演示不同的“计算机输出”标签的显示效果。
  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>
复制代码

4.地址
此例演示如何在 HTML 文件中写地址。
  1. <html>

  2. <body>

  3. <p>唐老鸭的地址:</p>
  4. <address>
  5. Donald Duck<br />
  6. BOX 555<br />
  7. Disneyland<br />
  8. USA<br />
  9. </address>

  10. <br />

  11. <p>W3School 的地址:</p>
  12. <address>
  13. <a href="mailto:service@w3school.com.cn">用户服务信箱</a><br />
  14. 上海赢科投资有限公司<br />
  15. 金桥开发区 789 号<br />
  16. </address>

  17. </body>
  18. </html>
复制代码

5.缩写和首字母缩写
此例演示如何实现缩写或首字母缩写。
  1. <html>

  2. <body>

  3. <abbr title="United Nations">UN</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>
复制代码

6.文字方向
此例演示如何改变文字的方向。
  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>
复制代码

7.块引用
此例演示如何实现长短不一的引用语。
  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>
复制代码

8.删除字效果和插入字效果
此例演示如何标记删除文本和插入文本。
  1. <html>

  2. <body>

  3. <p>
  4. 一打有
  5. <del>二十</del>
  6. <ins>十二</ins>
  7. 件。
  8. </p>

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

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

  15. </body>
  16. </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> 定义一个定义项目。

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片