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

一尘不染

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

html

我想创建类似

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

但它的可读性很差:(

阅读 471

2020-05-10

共1个答案

一尘不染

您可以在浏览器中使用自定义标签，尽管它们不是HTML5请参阅自定义元素是否有效？和HTML5规范。

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

步骤1

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

2020-05-10