本节课，我们学习HTML 文本格式化。
HTML 格式化标签
HTML 使用标签 <b>(“bold”) 与 <i>(“italic”) 对输出的文本进行格式, 如：粗体 or 斜体
这些HTML标签被称为格式化标签（请查看底部完整标签参考手册）。
通常标签
替换加粗标签 来使用, 替换 标签使用。
然而，这些标签的含义是不同的： b与 i 定义粗体或斜体文本。
strong或者 em意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。
HTML 文本格式化标签
| 标签 | 描述 |
|---|---|
| <b> | 定义粗体文本 |
| <em> | 定义着重文字 |
| <i> | 定义斜体字 |
| <small> | 定义小号字 |
| <strong> | 定义加重语气 |
| <sub> | 定义下标字 |
| <sup> | 定义上标字 |
| <ins> | 定义插入字 |
| <del> | 定义删除字 |
HTML “计算机输出” 标签
| 标签 | 描述 |
|---|---|
| <code> | 定义计算机代码 |
| <kbd> | 定义键盘码 |
| <samp> | 定义计算机代码样本 |
| <var> | 定义变量 |
| <pre> | 定义预格式文本 |
HTML 引文, 引用, 及标签定义
| 标签 | 描述 |
|---|---|
| <abbr> | 定义缩写 |
| <address> | 定义地址 |
| <bdo> | 定义文字方向 |
| <blockquote> | 定义长的引用 |
| <q> | 定义短的引用语 |
| <cite> | 定义引用、引证 |
| <dfn> | 定义一个定义项目。 |
在线实例
1、在一个 HTML 文件中对文本进行格式化
HTML
x
43
43
1
2
<html>3
<head>4
<meta charset="utf-8">5
<title>Web176教程(web176.com)</title> 6
</head>7
8
<body>9
10
<b>这个文本是加粗的</b>11
12
<br />13
14
<strong>这个文本是加粗的</strong>15
16
<br />17
18
<big>这个文本字体放大</big>19
20
<br />21
22
<em>这个文本是斜体的</em>23
24
<br />25
26
<i>这个文本是斜体的</i>27
28
<br />29
30
<small>这个文本是缩小的</small>31
32
<br />33
34
这个文本包含35
<sub>下标</sub>36
37
<br />38
39
这个文本包含40
<sup>上标</sup>41
42
</body>43
</html>2、使用 pre 标签对空行和空格进行控制
HTML
xxxxxxxxxx1
16
16
1
2
<html>3
<head> 4
<meta charset="utf-8"> 5
<title>Web176教程(web176.com)</title> 6
</head>7
<body>8
9
<pre>10
此例演示如何使用 pre 标签11
对空行和 空格12
进行控制13
</pre>14
15
</body>16
</html>3、不同的”计算机输出”标签的显示效果
HTML
xxxxxxxxxx1
25
25
1
2
<html>3
<head> 4
<meta charset="utf-8"> 5
<title>Web176教程(web176.com)</title> 6
</head>7
<body>8
9
<code>计算机输出</code>10
<br />11
<kbd>键盘输入</kbd>12
<br />13
<tt>打字机文本</tt>14
<br />15
<samp>计算机代码样本</samp>16
<br />17
<var>计算机变量</var>18
<br />19
20
<p>21
<b>注释：</b>这些标签常用于显示计算机/编程代码。22
</p>23
24
</body>25
</html>4、在 HTML 文件中写地址
HTML
xxxxxxxxxx1
18
18
1
2
<html>3
<head> 4
<meta charset="utf-8"> 5
<title>Web176教程(web176.com)</title> 6
</head>7
<body>8
9
<address>10
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> 11
Visit us at:<br>12
Example.com<br>13
Box 564, Disneyland<br>14
USA15
</address>16
17
</body>18
</html>5、实现缩写或首字母缩写
HTML
xxxxxxxxxx1
20
20
1
2
<html>3
<head> 4
<meta charset="utf-8"> 5
<title>Web176教程(web176.com)</title> 6
</head>7
<body>8
9
<abbr title="etcetera">etc.</abbr>10
<br />11
<acronym title="World Wide Web">WWW</acronym>12
13
<p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p>14
15
<p>仅对于 IE 5 中的 acronym 元素有效。</p>16
17
<p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>18
19
</body>20
</html>6、文字方向
HTML
xxxxxxxxxx1
12
12
1
2
<html>3
<head> 4
<meta charset="utf-8"> <title>Web176教程(web176.com)</title> 5
</head> 6
<body>7
8
<p>该段落文字从左到右显示。</p> 9
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p> 10
11
</body>12
</html>7、实现长短不一的引用语
HTML
xxxxxxxxxx1
14
14
1
2
<html>3
<head> 4
<meta charset="utf-8"> 5
<title>Web176教程(web176.com)</title> 6
</head>7
<body>8
9
<p>WWF's goal is to: 10
<q>Build a future where people live in harmony with nature.</q>11
We hope they succeed.</p>12
13
</body>14
</html>8、标记删除文本和插入文本
HTML
xxxxxxxxxx1
12
12
1
2
<html>3
<head> 4
<meta charset="utf-8"> 5
<title>Web176教程(web176.com)</title> 6
</head>7
<body>8
9
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>10
11
</body>12
</html>阅读剩余 88%
作者：terry，如若转载，请注明出处：https://www.web176.com/html4/7036.html
支付宝 
微信 