数码控科技猎奇Iphone动漫星座游戏电竞lolcosplay王者荣耀攻略allcnewsBLOGNEWSBLOGASKBLOGBLOGZSK全部技术问答问答技术问答it问答代码软件新闻开发博客电脑/网络手机/数码笔记本电脑互联网操作系统软件硬件编程开发360产品资源分享电脑知识文档中心IT全部全部分类 全部分类技术牛文全部分类教程最新 网页制作cms教程平面设计媒体动画操作系统网站运营网络安全服务器教程数据库工具网络安全软件教学vbscript正则表达式javascript批处理更多»编程更新教程更新游戏更新allitnewsJava 新闻网络医疗信息化安全创业站长电商科技访谈域名会议专栏创业动态融资创投创业学院 / 产品经理创业公司人物访谈营销 开发数据库服务器系统虚拟化云计算 嵌入式移动开发作业作业1常见软件all电脑网络手机数码生活游戏体育运动明星影音休闲爱好文化艺术社会民生教育科学医疗健康金融管理情感社交地区其他电脑互联网软件硬件编程开发360相关产品手机平板其他电子产品摄影器材360硬件通讯智能设备购物时尚生活常识美容塑身服装服饰出行旅游交通汽车购房置业家居装修美食烹饪单机电脑游戏网页游戏电视游戏桌游棋牌游戏手机游戏小游戏掌机游戏客户端游戏集体游戏其他游戏体育赛事篮球足球其他运动球类运动赛车健身运动运动用品影视娱乐人物音乐动漫摄影摄像收藏宠物幽默搞笑起名花鸟鱼虫茶艺彩票星座占卜书画美术舞蹈小说图书器乐声乐小品相声戏剧戏曲手工艺品历史话题时事政治就业职场军事国防节日风俗法律法规宗教礼仪礼节自然灾害360维权社会人物升学入学人文社科外语资格考试公务员留学出国家庭教育学习方法语文物理生物工程学农业数学化学健康知识心理健康孕育早教内科外科妇产科儿科皮肤科五官科男科整形中医药品传染科其他疾病医院两性肿瘤科创业投资企业管理财务税务银行股票金融理财基金债券保险贸易商务文书国民经济爱情婚姻家庭烦恼北京上海重庆天津黑龙江吉林辽宁河北内蒙古山西陕西宁夏甘肃青海新疆西藏四川贵州云南河南湖北湖南山东江苏浙江安徽江西福建广东广西海南香港澳门台湾海外地区

HTML 文本格式化的简单实例(详解)

日期:2016/9/28 14:41:00 来源:本网整理
s">

HTML 文本格式化的简单实例(详解)

作者:佚名 字体:[增加 减小] 来源:互联网 时间:08-30 12:10:32 我要评论

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

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

XML/HTML Code复制内容到剪贴板
  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 标签对空行和空格进行控制。

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>  

效果如下:

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

XML/HTML Code复制内容到剪贴板
  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 文件中写地址。

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4.   
  5. <address>  
  6. Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br>    
  7. Visit us at:<br>  
  8. Example.com<br>  
  9. Box 564, Disneyland<br>  
  10. USA   
  11. </address>  
  12.   
  13. </body>  
  14. </html>  

效果如下:

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

XML/HTML Code复制内容到剪贴板
  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>  

效果如下:

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

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>  

效果如下:

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

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>  

效果如下:

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

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中的列表标签
  • HTML (css样式规范)必看篇
  • 浅谈HTML代码中的空格和空行
  • 全面了解html.css溢出
  • htm初学笔记(新手必看)
  • HTML中文件上传时使用的<input type="file">元素的样式自定义
  • 关于input的file 控件及美化
  • Html/Css(新手入门第一篇必看攻略)
  • HTML 隐藏滚动条和去除滚动条的方法
  • 浅谈html标签的显示模式(块级标签,行内标签,行内块标签)
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved