立即登录 马上注册
首页 › 开发帮助文档 › 开发技术 › HTML 文本格式化的简单实例(详解)

赞

评论

收藏

[Html/CSS] HTML 文本格式化的简单实例(详解)

开发技术 开发技术 发布于：2021-09-14 22:12 | 阅读数：246 | 评论：0

一，文本格式化：此例演示如何在一个 HTML 文件中对文本进行格式化。
<html>  
    
  <body>  
    
  <b>This text is bold</b>  
    
  <br />  
    
  <strong>This text is strong</strong>  
    
  <br />  
    
  <big>This text is big</big>  
    
  <br />  
    
  <em>This text is emphasized</em>  
    
  <br />  
    
  <i>This text is italic</i>  
    
  <br />  
    
  <small>This text is small</small>  
    
  <br />  
    
  This text contains   
  <sub>subscript</sub>  
    
  <br />  
    
  This text contains   
  <sup>superscript</sup>  
    
  </body>  
  </html>
效果如下：
DSC0000.png

二，预格式文本：此例演示如何使用 pre 标签对空行和空格进行控制。
<html>  
    
  <body>  
    
  <pre>  
  这是   
  预格式文本。   
  它保留了    空格   
  和换行。   
  </pre>  
    
  <p>pre 标签很适合显示计算机代码：</p>  
    
  <pre>  
  for i = 1 to 10   
     print i   
  next i   
  </pre>  
    
  </body>  
  </html>
效果如下：
DSC0001.png

三，“计算机输出”标签：此例演示不同的“计算机输出”标签的显示效果。
<html>  
    
  <body>  
    
  <code>Computer code</code>  
  <br />  
  <kbd>Keyboard input</kbd>  
  <br />  
  <tt>Teletype text</tt>  
  <br />  
  <samp>Sample text</samp>  
  <br />  
  <var>Computer variable</var>  
  <br />  
    
  <p>  
  <b>注释：</b>这些标签常用于显示计算机/编程代码。   
  </p>  
    
  </body>  
  </html>
效果如下：
DSC0002.png

四，地址：此例演示如何在 HTML 文件中写地址。
<!DOCTYPE html>  
  <html>  
  <body>  
    
  <address>  
  Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br>  
  Visit us at:<br>  
  Example.com<br>  
  Box 564, Disneyland<br>  
  USA   
  </address>  
    
  </body>  
  </html>
效果如下：
DSC0003.png

五，缩写和首字母缩写：此例演示如何实现缩写或首字母缩写。
<html>  
    
  <body>  
    
  <abbr title="etcetera">etc.</abbr>  
  <br />  
  <acronym title="World Wide Web">WWW</acronym>  
    
  <p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p>  
    
  <p>仅对于 IE 5 中的 acronym 元素有效。</p>  
    
  <p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>  
    
  </body>  
  </html>
效果如下：
DSC0004.png

六，文字方向：此例演示如何改变文字的方向。
<html>  
    
  <body>  
    
  <p>  
  如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；   
  </p>  
    
  <bdo dir="rtl">  
  Here is some Hebrew text   
  </bdo>  
    
  </body>  
  </html>
效果如下：
DSC0005.png

七，块引用：此例演示如何实现长短不一的引用语。
<html>  
    
  <body>  
    
  这是长的引用：   
  <blockquote>  
  这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。   
  </blockquote>  
    
  这是短的引用：   
  <q>  
  这是短的引用。   
  </q>  
    
  <p>  
  使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。   
  </p>  
    
  </body>  
  </html>
效果如下：
DSC0006.png

八，删除子效果和插入子效果。
<html>  
    
  <body>  
    
  <p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>  
    
  <p>大多数浏览器会改写为删除文本和下划线文本。</p>  
    
  <p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p>  
    
  </body>  
  </html>
效果如下：
DSC0007.png

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

关注下面的标签，发现更多相似文章
免责声明：

1. 本站所有资源来自网络搜集或用户上传，仅作为参考不担保其准确性！

2. 本站内容仅供学习和交流使用，版权归原作者所有！© 查看更多

3. 如有内容侵害到您，请联系我们尽快删除，邮箱：kf@codeae.com

分享到： QQ好友和群QQ好友和群 QQ空间QQ空间

举报

返回列表
相关帖子
avatar
3335 经验
3329 文档
OPNE在线字典
  • 手机版| 免责声明|
2021-2025  版权所有：CodeAE代码之家   
粤ICP备2023096576号-2