HTML文本格式化实例

来源:互联网 发布:天下网络卡盟 编辑:程序博客网 时间:2024/05/17 23:37

(初学者,如有错误还望各位大神多多指教,多多包含)

1.文本格式化
演示如何在一个HTML文件中对文本进行格式化

<h4>文本格式化</h4><b>黑体</b><br/><strong>斜体</strong><br/><big></big><br/><em>强斜</em><br/><i>斜体</i><br/><small></small><br/>我是一个含有下标的文本<sub>subscript</sub><br/>我是一个含有上标的文本<sup>superscript</sup>

效果如下:

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

<br/><h4>预格式文本</h4><pre>    我是一个预格式文本。我保留了   空格    和换行。</pre><p>pre 标签适合显示代码(如下)</p><pre>    for (int i=0;i<10;i++)    {    NSLog(@"%d",i);    }</pre>

效果如下:
这里写图片描述

3.计算机输出标签
演示不同的“计算机输出标签的显示效果”

<br/><h4>"计算机输出标签"</h4><code>Computer code</code><br/><kbd>Keyboard input</kbd><br/><samp>Sample text</samp><br/><var>Computer variable</var><br/><p>    <b>注释:</b>这些标签常用语显示计算机、编程代码。</p>

效果如下:
这里写图片描述

4.缩写和首字母缩写
演示如何实现缩写或首字母缩写

<h4>缩写和首字母缩写</h4><abbr title="etcetera">etc.</abbr><br/><acronym title="Everymoment Of Mylife">EOM</acronym><p>    在浏览器中,把鼠标移至缩略词语上时,title可用于展示表达的完整版本。<br/>    仅对于IE 5中的 acronym 元素有效。<br/>    对于Netscape 6.2中的 abbr 和 acronym 元素都有效。</p>

效果如下:
这里写图片描述

5.文字方向
演示如何改变文字的方向

<h4>文字方向</h4><p>如果您的浏览器支持bi-directional override(bdo),下一行会从右像左输出(rtl);</p><bdo dir="rtl">This is my test</bdo><br/>

效果如下:
这里写图片描述

6.块引用(实现长短不一的引用语句)
演示如何实现长短不一的引用语

<h4>块引用</h4>我是长的引用:<blockquote>  我是一个长的引用用用用用用用用用用用用用用用用用用用用用用用用用用用用用用用用用用用用用用用用用用用用用用</blockquote>我是短的引用:<q>    我是短的引用。</q><p>    使用 blockquote 元素的话,浏览器会插入换行和外边距,而 q 元素不会有任何特殊的呈现。</p>

效果如下:
这里写图片描述

7.删除字效果和插入字效果
演示如何标记删除文本和插入文本

<h4>删除字效果和插入字效果(标记删除文本和插入文本)</h4><p>听说北方人都很<del></del><ins></ins></p><p>大多数浏览器会改写为删除文本和下划线文本。</p>

效果如下:
这里写图片描述

1 0
原创粉丝点击