重叠的HTML格式标签总是不好的做法吗？

Question

假设我需要一个带有粗体和斜体的文本,它们相互重叠,就像你看到这句话一样.

现在,我知道正确的方法是完全分离CSS和HTML,如上例所示,但它似乎有点矫枉过正.像这样写出3个跨度并添加一个单独的粗体和斜体类意味着你的用户需要下载比你在第二个例子中使用重叠的b和i标签更多的数据:

.bold{
  font-weight: bold;
  }

.italic{
  font-style: italic;
  }

<div>I want this text to have both <span class="bold">bold</span> <span class="bold italic">and</span> <span class="italic">italic</span></div>

<div>I want this text to have both <b>bold <i>and</b> italic</i></div>

结果完全相同,但第二个消费者带宽使用量略小(可能只有几个字节,但都加起来).我知道正确的方法仍然是第一个,但这总是成立吗？HTML开发的指导方针是在20年前确定的,当时具有带宽上限的消费级移动互联网尚未成为现实.

此外,正如马丁正确地评论的那样,以这种方式进行大量跨度也比以后阅读更难,而不仅仅是看到那些B和I标签并且知道"从这里到这里是大胆的,从那里到那里是斜体".

Answer 1

从 HTML5 开始，处理这些“重叠标签”的程序是标准化的：https : //html.spec.whatwg.org/multipage/syntax.html#adoption-agency-algorithm

解析时

<div>I want this text to have both <b>bold <i>and</b> italic</i></div>

当我们到达</b>标签时，我们将遇到以下步骤：

8. 如果格式化元素 [此处，以<b>]开头的元素不是当前节点 [此处，<i>元素]，则这是解析错误。（但不要中止这些步骤。）

该规范接着关闭<i>和<b>并重新打开一个新的<i>在这种情况下。因此，虽然您确实收到了“解析错误”，但根据标准，此标记仍会执行您想要的操作。

那么为什么这可能是一种不好的做法呢？

我会尽量坚持客观事实。

这种自动修正仅限于关闭多达 8 个级别的格式化标签（请参阅算法中的第 3 步）。因此，它不适合作为通用技术。

此外，在规范的其他地方，https://html.spec.whatwg.org/multipage/syntax.html#parse-error

... 用户代理在解析 HTML 文档时，可能会在遇到他们不希望应用本规范中描述的规则的第一个解析错误时中止解析器。

如果浏览器供应商不想处理这种情况，他们可以随意停止解析器。

Answer 2

结合i并且b完全没问题,但是,您需要确保正确嵌套它们.

错误:

I want this text to have both <b>bold <i>and</b> italic</i>

右:(取决于你想要达到的目标,当然)

I want this text to have both <b>bold <i>and</i></b> <i>italic</i>