标签可以被嵌套,但不能交叉

像上一章那种,一层标签,套着一层标签,这叫做嵌套。在这种情况下,每一个元素都被完整的套在另一个元素之中,除了最顶层的 html 元素。

我们要说的是,不可以将一个元素的开始和结束标签,分别放在两个元素之中。说直白一点,就是不能让人家一对分隔两地。

简单举个例子,我们有两段内容,第一段的末尾需要被强调,而下一段的开头也需要被强调。可能有的同学会这样写:

<!-- 注意这里是错误的代码演示 -->
<p>这里是第一段的内容,<strong>这里需要被强调</p>
<p>这里也需要被强调</strong>,strong 标签标记了强调的开始和结束。</p>
<!-- 注意这里是错误的代码演示,我努力地再强调一遍 -->

这样写是不可以的,因为 strong 的开始标签和结束标签,被分别放进了两个 p 元素中。他们分隔两地,很伤心,都是你的错!

那么从道理上讲,也是完全可以解释的,这是两个段落,说的就是两个意思,虽然前面的强调和后面的强调,是紧挨着的,但它们并不是连续的。既然是两个内容,当然要分别进行标记。所以正确的写法如下,:

<p>这里是第一段的内容,<strong>这里需要被强调</strong></p>
<p><strong>这里也需要被强调</strong>,strong 标签一家人整整齐齐的在一起,感到十分的开心,</p>

编码的切换

我们在 第七章 基本模板 讲到了编码的问题,那里涉及东西太多,为了避免把大家绕晕,所以没有深入。不过编码这个问题太常见了,在这里简单的说一下切换的方式。

首先,保证网页中 <meta charset="UTF-8"> 和编辑器右下角的编码保持一致,大小写可以不区分。然后你在编辑器中查看这个文件,没有乱码,那就没有问题了。

这时候我们要先说一下编码是怎么回事,既然我们已经说明了这个文档使用的代码语言是 HTML,电脑应该就能够理解了啊,怎么又冒出来一个编码了呢?

那么还是用语言来打比方,我写的是中文,但是我是从上往下写,还是从左往右写,或是从右往左写(中文确实有这几种书写方向),这仍然是一个问题。当我们遇到一些匾额的时候,还要努力思考一下,究竟应该怎么读。电脑这么死板,遇到这类问题,一定也会迷糊。那么编码就是说电脑用何种格式把这些内容记录下来的意思。当然对于他具体使用的格式我们不需要深究,你只要知道用一种编码写下的东西,用另外一种编码去读就会产生乱码。这就好像,你按照从左到右的方式,去阅读我从上往下书写的文字,肯定觉得一片茫然,完全搞不懂什么意思。

那么编辑器右下角显示的是我们当前这个文档用何种编码书写,而 <meta charset="UTF-8"> 所规定的是浏览器用何种编码进行读取。

理解这个道理以后,问题就好办多了。现在你点击编辑器右下角的编码位置。

在编辑器的中上部会弹出一个提示,请问你是打算用其他编码打开当前文档,还是将当前文档保存为其他编码。那么在需要的时候,跟着提示进行选择就可以了。[1]

掌握了这个方法,你就能够解决大部分的乱码问题。理解了其中的道理,遇到复杂一点的乱码问题,也可以试着分析产生的原因了。


这两章讲了很多细节,都不复杂,但都很重要。我知道,现在我说他们很重要,你可能并没有什么实际的感觉。不过我真的不希望看到你们将来为了一个标点的问题,而查了几个小时的错。

【本章助记卡片:卡片 for 第十章

>注释 1: 编辑器里面实际对这个功能的提示文字略少,显得不容易理解,所以你多读一遍这段解释,到实际使用的时候,你就能够理解编辑器中所说的意思了。

如果是新建文档,提示的并不是这两个问题,而是直接让你选择当前文档想要使用的编码,一般的我们使用 UTF-8 就好。