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

ttx9n · 发表于 2016-8-30 12:10:32

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

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

XML/HTML Code复制内容到剪贴板

<html>
<body>
This text is bold
This text is strong
<big>This text is big</big>
This text is emphasized
This text is italic
This text is small
This text contains
subscript
This text contains
superscript
</body>
</html>

效果如下：

201608301213523.png

二，预格式文本：此例演示如何使用 pre 标签对空行和空格进行控制。

XML/HTML Code复制内容到剪贴板

<html>
<body>
<pre>
这是
预格式文本。
它保留了空格
和换行。
</pre>
pre 标签很适合显示计算机代码：
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>

效果如下：

201608301213524.png

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

XML/HTML Code复制内容到剪贴板

<html>
<body>
<code>Computer code</code>
<kbd>Keyboard input</kbd>
<tt>Teletype text</tt>
<samp>Sample text</samp>
<var>Computer variable</var>
注释：这些标签常用于显示计算机/编程代码。
</body>
</html>

效果如下：

201608301213525.png

四，地址：此例演示如何在 HTML 文件中写地址。

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>
<html>
<body>
<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.
Visit us at:
Example.com
Box 564, Disneyland
USA
</address>
</body>
</html>

效果如下：

201608301213526.png

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

XML/HTML Code复制内容到剪贴板

<html>
<body>
<abbr title="etcetera">etc.</abbr>
<acronym title="World Wide Web">WWW</acronym>
在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。
仅对于 IE 5 中的 acronym 元素有效。
对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。
</body>
</html>

效果如下：

201608301213527.png

六，文字方向：此例演示如何改变文字的方向。

XML/HTML Code复制内容到剪贴板

<html>
<body>
如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；
<bdo dir="rtl">
Here is some Hebrew text
</bdo>
</body>
</html>

效果如下：

201608301213528.png

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

XML/HTML Code复制内容到剪贴板

<html>
<body>
这是长的引用：
<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>
这是短的引用：
<q>
这是短的引用。
</q>
使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。
</body>
</html>

效果如下：

201608301213529.png

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

XML/HTML Code复制内容到剪贴板

<html>
<body>
一打有 <del>二十</del> <ins>十二</ins> 件。
大多数浏览器会改写为删除文本和下划线文本。
一些老式的浏览器会把删除文本和下划线文本显示为普通文本。
</body>
</html>

效果如下：

2016083012135210.png

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

回复用户5 · 发表于 2022-9-20 08:07:32

额UI废物iuhfujewfiewnnfen

wxrf98xr · 发表于 2022-11-11 17:59:02

逛逛看看瞧瞧

dm00ji1s · 发表于 2023-8-27 17:43:47

搞个免费的用用

4k0mp7m · 发表于 2023-9-9 18:27:27

你们谁看了弄洒了可能

pb_tjc · 发表于 2023-9-18 00:12:59

的谁vdvdsvdsvdsdsv

3mfwk4yf · 发表于 2024-3-11 17:16:07

这个源码不错啊

v3sfsi · 发表于 2024-3-30 08:46:11

撒旦撒旦撒擦擦擦擦

plvo189 · 发表于 2024-4-9 03:31:49

收下来看看怎么样

64000928 · 发表于 2024-4-23 05:35:15

还不错啊

账号		自动登录	找回密码
密码			立即注册

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

相关帖子