我想创造一些东西
<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>
但它是这么少可读性：
解决方法
您可以在浏览器中使用自定义标记，虽然它们不是HTML5(请参阅
Are custom elements valid HTML5?和
the HTML5 spec)。
让我们假设您要使用名为< stack>的自定义标记元素。这里是你应该做的…
步骤1
在CSS样式表中规范化其属性(think css reset) –
例：
stack{display:block;margin:0;padding:0;border:0; ... }
第2步
通过将此脚本附加到头部，使其在旧版本的Internet Explorer中工作(重要！)：
<!--[if lt IE 9]>
<script> document.createElement("stack"); </script>
<![endif]-->
然后可以自由使用您的自定义标签。
<stack>Overflow</stack>
随意设置属性…
<stack id="st2" class="nice"> hello </stack>