有没有办法在HTML5中创建自己的HTML标签？ [英] Is there a way to create your own html tag in HTML5?

问题描述

我想创建类似于

 < menu> 
< lunch> 
< dish> aaa< / dish> 
< dish> bbb< / dish> 
< / lunch> 
<晚餐> 
  < / 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（请参阅自定义元素是否为有效的HTML5？和我们假设您要使用名为 < stack>的定制标记元素 code> 。这是你应该做的......

第1步

在CSS样式表中标准化它的属性（认为css reset） -
示例：

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

第2步

通过将此脚本附加到头部（重要！），使其在旧版Internet Explorer中可用：

 <！ -  [if lt IE 9]> 
< script>使用document.createElement（ 堆叠）; < /脚本> 
<！[endif]  - > 
  

---

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

 < stack>溢出< / stack> 
  

随意设置属性......

 < stack id =st2class =nice>你好< / stack> 
  

I want to create something like

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

Can it be done in HTML5? I know I can do it with

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

but it is so much less readable :(

解决方案

You can use custom tags in browsers, although they won’t be HTML5 (see Are custom elements valid HTML5? and the HTML5 spec).

Let's assume you want to use a custom tag element called <stack>. Here's what you should do...

STEP 1

Normalize its attributes in your CSS Stylesheet (think css reset) - Example:

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

STEP 2

Make it work in old versions of Internet Explorer by appending this script to the head (Important!):

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

---

Then you can use your custom tag freely.

<stack>Overflow</stack>

Feel free to set attributes as well...

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

这篇关于有没有办法在HTML5中创建自己的HTML标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！