Question

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

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

＆＃13;

.bold{
  font-weight: bold;
  }

.italic{
  font-style: italic;
  }

＆＃13;

<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>

＆＃13;

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

另外，正如马丁正确地评论的那样，以这种方式进行大量跨度也比以后阅读更难，而不仅仅是看到那些B和I标签并且知道＆＃34;它从这里开始大胆在这里，斜体从那里到那里＆＃34;。

Answer 1

合并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>

Answer 2

从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>

当我们到达标记时，我们会遇到以下步骤：

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

规范继续关闭和，并在这种情况下重新打开一个新的。因此，当你得到一个“解析错误”时，根据标准，这个标记仍然可以做你想要的。

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

我会努力坚持客观事实。

此自动修复仅限于关闭最多8级格式化标记（请参阅算法中的步骤3）。因此，它不适合作为一般技术。

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

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

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

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

2 个答案:

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