html - 有没有办法在 HTML5 中创建自己的 html 标签？

Question

我想创建类似的东西

<menu>
    <lunch>
        <dish>aaa</dish>
        <dish>bbb</dish>
    </lunch>
    <dinner>
        <dish>ccc</dish>
    </dinner>
</menu>

可以在 HTML5 中完成吗？我知道我可以用

<ul id="menu">
    <li>
        <ul id="lunch">
            <li class="dish">aaa</li>
            <li class="dish">bbb</li>
        </ul>
    </li>
    <li>
        <ul id="dinner">
            <li class="dish">ccc</li>
        </ul>
    </li>    
</ul>

但它的可读性要差得多:(

Answer 1

您可以在浏览器中使用自定义标签，尽管它们不是 HTML5(请参阅 Are custom elements valid HTML5? 和 the HTML5 spec)。

假设您要使用名为 <stack> 的自定义标签元素 。这是您应该做的……

第一步

在您的 CSS 样式表中规范化它的属性(想想 css 重置)-示例:

 stack{display:block;margin:0;padding:0;border:0; ... }

第 2 步

要使其在旧版本的 Internet Explorer 中工作，您需要将此脚本附加到头部(如果您需要它在旧版本的 IE 中工作，这很重要!):

 <!--[if lt IE 9]> 
 <script> document.createElement("stack"); </script>
 <![endif]-->

---

然后您就可以自由使用您的自定义标签了。

<stack>Overflow</stack>

也可以随意设置属性...

<stack id="st2" class="nice"> hello </stack>