超文本标记语言/文本格式
文本格式元素为您的HTML文档中的短语提供逻辑结构。这种结构通常通过更改文本的外观呈现给用户。
我们在这本书的简介中看到了如何通过使用<em></em>标签来强调文本。图形浏览器通常以斜体显示强调文本。一些屏幕阅读器，即向用户朗读页面的实用程序，可能会用不同的语调朗读强调的单词。
一个常见的错误是标记元素以获得特定的外观，而不是标记其含义。 当在多个浏览器中测试时，这个问题会变得更加明显，尤其是在图形和纯文本浏览器以及屏幕阅读器中。
您可以使用层叠样式表更改任何元素的默认呈现。例如，如果您希望所有强调文本都以红色普通文本显示，您将使用以下 CSS 规则
em { font-style:normal; color:red; }
在本节中，我们将探讨一些基本方法，您可以使用这些方法来标记文档的逻辑结构。
HTML 有两种程度的强调元素
em元素用于强调文本，通常以斜体显示。strong元素用于强烈强调文本，通常以粗体显示。
强调文本示例
It is essential not only to guess but actually <em>observe</em> the results.
渲染示例
强烈强调文本示例
Let us now focus on <strong>structural markup</strong>.
渲染示例
预格式化文本使用固定宽度字体渲染，并且不会将多个空格压缩为一个空格，从而保留空格。换行符将作为换行符渲染，与预格式化文本之外的情况不同。预格式化文本中的 HTML 标记仍由浏览器解释，这意味着“<em>a</em>”仍将渲染为“a”。
要创建预格式化文本，请以<pre>开头，以</pre>结尾。
示例
<pre>
,-----------------------,
| No. | Person |
|-----------------------|
| 1. | Bill Newton |
| 2. | Magaret Clapton |
'-----------------------'
</pre>
渲染结果
,-----------------------, | No. | Person | |-----------------------| | 1. | Bill Newton | | 2. | Magaret Clapton | '-----------------------'
省略预格式化标签会导致相同的文本在一行中显示
,-----------------------, | No. | Person | |-----------------------| | 1. | Bill Newton | | 2. | Magaret Clapton | '-----------------------'
要插入非标准字符或在 HTML 中具有特殊含义的字符，需要使用字符引用。例如，要输入“&”，必须键入“&”。字符也可以通过其 ASCII 或 Unicode 编号代码插入。
|
|
缩略词
[edit | edit source]另一个有用的元素是 abbr。它可以用来为缩略词提供定义，例如：
<abbr title="HyperText Markup Language">HTML</abbr>
- 将显示为：HTML
- 当你将鼠标悬停在 HTML 上时，你会看到 HyperText Markup Language
图形浏览器通常会用虚线来显示缩略词。title 会以工具提示的形式出现。屏幕阅读器可能会根据用户的请求读取 title。
注意：非常旧的浏览器（Internet Explorer 6 及更低版本）不支持 abbr。因为它们支持相关的元素 acronym，所以该元素通常用于所有缩略词。
首字母缩略词是一种特殊的缩略词，其中几个单词的字母组合在一起发音形成一个新词（例如雷达 - 无线电探测和测距）。HTML 中的字母单独发音，从技术上来说，它是一种不同的缩略词，称为首字母缩写词。
不鼓励的格式
[edit | edit source]HTML 支持各种格式元素，不鼓励使用它们，而建议使用层叠样式表 (CSS)。以下是对不鼓励使用的格式的简要概述，以便你在某些网页中看到它们时知道它们是什么，并知道如何用 CSS 格式替换它们。一些不鼓励使用的元素只是不鼓励使用，而另一些则是除了被弃用之外，还被弃用。
| 元素 | 效果 | 示例 | 状态 | CSS 替代方案 |
|---|---|---|---|---|
b
|
粗体 | 粗体 | font-weight: bold;
| |
i
|
斜体 | 斜体 | font-style: italic;
| |
u
|
下划线 | 下划线 | 已弃用 | text-decoration: underline;
|
tt
|
打字机字体 | 打字机字体 | font-family: monospace;
| |
s
|
删除线 | 已弃用 | text-decoration: line-through;
| |
删除线
|
删除线 | <strikethrough>strikethrough</strikethrough> | 已弃用 | text-decoration: line-through;
|
big
|
大字体 | big | font-size: larger;
| |
small
|
小字体 | small | font-size: smaller;
| |
font
|
字体大小 | size=1 | 已弃用 | font-size:(value) |
center
|
居中一个块 | 已弃用 | text-align: center;
|
层叠样式表
[edit | edit source]使用诸如 <b> 用于 粗体 或 <i> 用于 斜体 的样式元素非常简单，但它将表示层与内容层耦合在一起。通过使用层叠样式表，HTML 作者可以将这两个截然不同的部分解耦，以便一个正确标记的文档可以以各种方式呈现，而文档本身保持不变。例如，如果发布者希望将文档中引用的参考文献显示为 粗体 文本，因为它们以前是 斜体，他们只需要更新样式表，而不必逐个修改文档，将 <b> 更改为 <i> 反之亦然。层叠样式表还允许读者做出这些选择，覆盖发布者的选择。
继续以上面的示例为例，假设发布者已正确标记了所有文档，将所有对引用的材料（例如书名）的引用都用<cite>标签
<cite>了不起的盖茨比</cite>
然后，要使所有引用的参考文献都为粗体，你可以在样式表中添加以下内容
cite { font-weight: bold; }
之后，有人告诉你参考文献实际上需要是斜体。在 CSS 之前，你需要在所有文档中搜索，将 <b> 和 </b> 更改为 <i> 和 </i>（但要小心不要更改那些不是引用的参考文献的粗体字）。
但有了 CSS，只需要更改样式表中的一行即可
cite { font-style: italic; }