为什么没有<flex>或<grid>元素？

Question

其他display值具有一个或多个相应的HTML元素，例如：

• block-div，
• inline-跨度，强度等
• list-item-李
• table-表格，表格行-tr等
• 无-模板

但必须通过样式分配display: grid和display: flex。我可以看到，如果有<flex>和<grid>元素可用，则更容易阅读DOM。

既然可以制作自定义元素，是否没有在规范中添加新的元素类型？

Answer 1

问题的答案与将样式与要显示的数据分开有关。

用于显示数据的HTML标签应根据要显示的数据类型进行选择。例如，您在生成列表时使用<li>，而在文本突出显示时使用<strong>。 CSS为您提供了很大的灵活性来修改数据的显示方式，从而使您可以更改数据显示方式，例如<strong>或<em>标签中的文本。可以更改许多标签的样式，以使其表现得与其他标签类似。例如，您可以使<span>标签的行为类似于<div>标签，反之亦然。但是，您不应这样做。换句话说，您选择的标签应基于所显示数据的类型，例如列表项的<li>或段落的<p>。从技术上讲，您永远无法将数据与显示方式完全分开，但是您应该尽可能地做到这一点。

<flex>和<grid>对于要显示的数据类型没有任何意义。因此，它们是可以使用CSS（而不是标签）进行编辑的样式。

Answer 2

  

如果有<flex>和<grid>元素可用，我将更容易阅读DOM。

您建议将内容和表示形式结合起来，这违反了创建CSS来解决的separation of concerns原则。

HTML用于组织内容。 CSS用于表示内容。您的<flex>和<grid>元素将结合这两个方面，这就是1990年代CSS出现之前HTML兼而有之的情况。

如果我希望我的<article>是网格容器，或者我的<aside>是flex容器，该怎么办？

为什么也没有<block>和<inline>？

事情开始变得混乱。

---

此外，您的问题的前提是不正确的。

  

其他display值具有一个或多个对应的HTML元素...，但是display: grid和display: flex必须通过样式分配。

实际上，分配了 all HTML元素的display值。唯一的区别是样式来自哪里。

原始格式的HTML元素没有样式。它们只有语义。

直到浏览器分配default styles元素才具有表达意义。

因此，您可以这样说的唯一原因...

  

其他display值具有一个或多个相应的HTML元素，   例如：

     

  
• block-div，
  
• inline-跨度，强度等
  
• list-item-李
  
• table-表格，表格行-tr等
  

...是因为浏览器使用以下类似方式定义了这些元素：

Appendix D. Default style sheet for HTML 4

如您所见，分配了display个值。

因此，浏览器为HTML元素设置了基本的格式设置水平。对这些样式的更改和添加留给作者。

更多细节：

• Proper way to apply CSS to HTML5 custom elements
• <main> element not working in Internet Explorer 11