代码之家  ›  专栏  ›  技术社区  ›  Raanan Avidor

有没有办法在HTML5中创建自己的HTML标记?

  •  103
  • Raanan Avidor  · 技术社区  · 15 年前

    我想创造一些

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

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

    18 回复  |  直到 6 年前
        1
  •  141
  •   Community CDub    8 年前

    您可以在浏览器中使用自定义标记,尽管它们不会是HTML5(请参见 Are custom elements valid HTML5? the HTML5 spec )

    假设您要使用一个名为 <stack> . 这是你应该做的…

    步骤1

    在CSS样式表中规范化其属性(想想CSS重置) 例子:

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

    步骤2

    通过将此脚本附加到头部(重要!):

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

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

    <stack>Overflow</stack>
    

    也可以自由设置属性…

    <stack id="st2" class="nice"> hello </stack>
    
        2
  •  25
  •   Alexis Wilke    8 年前

    我不太确定这些答案。正如我刚刚读到的: “HTML中始终允许使用自定义标记。”

    http://www.crockford.com/html/

    这里的重点是,HTML是基于SGML的。与具有doctypes和模式的XML不同,如果浏览器不知道一个或两个标记,HTML不会变得无效。想想<Marquee>。这还没有在官方标准中。因此,当使用它使您的HTML页面“正式未经批准”时,它也不会破坏页面。

    然后是<keygen>,它是特定于Netscape的,在HTML4中被遗忘,重新发现,现在在HTML5中被指定。 而且我们现在有了自定义的标记属性,比如在所有HTML5标记上都允许使用data xyzzz=…”。

    所以,虽然你不应该发明一个你自己的定制的未指定的标记沙拉,但是在HTML中有定制的标记并不是完全禁止的。但是,除非您希望用+xml内容类型发送它,或者嵌入其他XML名称空间,如svg或mathml。这仅适用于SGML受限HTML。

        3
  •  6
  •   Dan Menes    15 年前

    正如迈克尔在评论中所建议的,你想做的事情是完全可能的,但是你的术语是错误的。您不是“向HTML5添加标记”,而是用自己的标记创建一个新的XML文档类型。

    我在上一份工作中做过一些项目。一些实用建议:

    1. 当你说你想“把这些添加到HTML5中”时,我想你真正的意思是你想让页面在现代浏览器中正确显示,而不必在服务器端做很多工作。这可以通过在XML文件的顶部插入“样式表处理指令”来完成,例如<?XML样式表type=“text/xsl”href=“menu.xsl”?&。将“menu.xsl”替换为创建用于将自定义标记转换为HTML的XSL样式表的路径。

    2. 注意:您的文件必须是格式良好的XML文档,并带有XML头<xml version=“1.0”>。对于不匹配的标记等问题,XML比HTML更挑剔。此外,与HTML不同,标记区分大小写。您还必须确保Web服务器正在发送具有适当mime类型“application/xml”的文件。通常,如果文件扩展名为“.xml”,Web服务器将被配置为自动执行此操作,但请进行检查。

    3. 大警告:最后,正如我所描述的,使用浏览器的自动XSL转换,只对调试和有限的应用程序(在这些应用程序中您有很多控制权)才是最好的。我在上一个雇主那里成功地建立了一个简单的内部网,最多只有几十个人可以访问。并非所有的浏览器都支持XSL,而那些没有完全兼容实现的浏览器。因此,如果要将页面释放到“狂野”中,最好在服务器端将它们全部转换为HTML,这可以通过命令行工具或许多XML编辑器中的按钮来完成。

        4
  •  5
  •   LukeN    15 年前

    在HTML中创建自己的标记名是不可能的/无效的。这就是XML、SGML和其他通用标记语言的用途。

    你可能想要的是

    <div id="menu">
        <div id="lunch">
            <span class="dish">aaa</span>
            <span class="dish">bbb</span>
        </div>
        <div id="dinner">
            <span class="dish">ccc</span>
        </div>
    </div>
    

    或者代替 <div/> <span/> 类似的东西 <ul/> <li/> .

    为了让它看起来和功能正常,只需连接一些CSS和JavaScript。

        5
  •  5
  •   theplayer    6 年前

    我只想在前面的答案中添加一个含义,即只对自定义元素使用两个单词标记。 它们不应该被标准化。


    例如,要使用标记 <icon> 因为你不喜欢 <img> 你不喜欢 <i> 都不…

    好吧,记住你不是唯一一个。也许在将来,W3C和/或浏览器将指定/实现这个标记。

    此时,浏览器可能会实现此标记的本机风格,您的网站的设计可能会中断。

    所以我建议使用(根据这个例子) <img-icon> .


    事实上,标签 <menu> 定义得很好,即不是这样使用的,而是定义的。它应该包含 <menuitem> 表现得像 <li> .

        6
  •  4
  •   Chas    14 年前

    自定义标签可以在Safari、Chrome、Opera和Firefox中使用,至少可以用它们代替“class=…”。

    绿色颜色:绿色在CSS中用于

    <green>This is some text.</green>
    
        7
  •  2
  •   Ionuț G. Stan    15 年前

    对于嵌入元数据,可以尝试使用 HTML microdata 但是它比使用类名更加冗长。

    <div itemscope>
        <p>My name is <span itemprop="name">Elizabeth</span>.</p>
    </div>
    
    <div itemscope>
        <p>My name is <span itemprop="name">Daniel</span>.</p>
    </div>
    
        8
  •  2
  •   Dan Menes    15 年前

    除了写一个XSL样式表,正如我前面所描述的,还有另一种方法,至少如果您确信将使用火狐或其他成熟的XML浏览器(即,不是Internet Explorer)。跳过XSL转换,编写一个完整的CSS样式表,告诉浏览器如何直接格式化XML。这里的好处是您不必学习XSL,许多人发现它是一种困难的、违反直觉的语言。缺点是您的CSS必须完全指定样式,包括什么是块节点、什么是内联等。通常,在编写CSS时,您可以假定浏览器“知道”例如<em>是内联节点,但它不知道如何处理<dish>。

    最后,我试过了几年,但我记得IE(至少有几个版本)拒绝将CSS样式表直接应用于XML文档。

        9
  •  2
  •   Paul D. Waite    12 年前

    HTML的要点是,语言中包含的标记有一个约定的含义,世界上的每个人都可以使用和基于默认样式,或者使链接可单击,或者当您单击 <input type="submit"> .

    像你这样的人造标签对人类来说是很好的(因为我们可以学习英语,从而知道,或者至少可以猜到,你的标签是什么意思),但对机器来说却不是那么好。

        10
  •  1
  •   Kirtan    15 年前

    正如尼克所说,任何版本的HTML都不支持自定义标记。

    但是,如果在HTML中使用这种标记,它不会给出任何错误。

    似乎您想创建一个列表。您可以使用无序列表 <ul> 创建Rool元素,并使用 <li> 下面项目的标签。

    如果这不是你想要实现的,请具体说明你想要什么。那么我们可以想出一个答案。

        11
  •  1
  •   Alex Yang    13 年前

    您可以通过HTML5数据属性添加自定义属性。 例如:消息 对HTML 5有效。见 http://ejohn.org/blog/html-5-data-attributes/ 获取细节。

        12
  •  1
  •   vinyll    12 年前

    Polymer X-tags 允许您构建自己的HTML标记。它基于本地浏览器的“shadow dom”。

        13
  •  1
  •   TorKitten    10 年前

    你可以做一些自定义的CSS样式,这将创建一个标签,使背景色变红:

    redback {background-color:red;}
     
    
    <redback>This is red</redback>
        14
  •  1
  •   Mr Lister hawi    8 年前

    在某些情况下,创建自己的标记名可能会很好地工作。
    但是,这只是您的浏览器在工作时的错误处理例程。问题是,不同的浏览器有不同的错误处理例程!

    请参阅此示例。
    第一行包含两个组成元素, what ever 不同的浏览器会对它们进行不同的处理。文本在IE11和EDGE中显示为红色,而在其他浏览器中显示为黑色。
    为了进行比较,第二行与之类似,只是它只包含有效的HTML元素,因此在所有浏览器中看起来都一样。

    body {color:black; background:white;} /* reset */
    
    what, ever:nth-of-type(2) {color:red}
    code, span:nth-of-type(2) {color:red}
    <p><what></what> <ever>test</ever></p>
    
    <p><code></code> <span>test</span></p>

    组成元素的另一个问题是你不知道未来会发生什么。如果你在几年前创建了一个标签名为 picture , dialog , details , slot , template 等等,希望他们表现得像跨距,你现在有麻烦了吗?

        15
  •  0
  •   Nick Craver    15 年前

    这不是任何HTML规范中的选项:)

    你也许可以做你想做的事 <div> 元素和类,从这个问题上来说,我不确定你到底在追求什么,但不确定,创建你自己的标签不是一个选择。

        16
  •  0
  •   code-sushi    11 年前

    我发现了这篇关于创建自定义HTML标记和实例化它们的文章。它简化了这个过程,并将其分解为任何人都可以立即理解和使用的术语——但我不完全确定它包含的代码示例在所有浏览器中都是有效的,因此请注意清空并彻底测试。不过,这是一个很好的入门主题。

    Custom Elements : Defining new elements in HTML

        17
  •  0
  •   Rezoundr    9 年前

    <head>
      <lunch>
        <style type="text/css">
          lunch{
            color:blue;
            font-size:32px;
            }
          </style>
        </lunch>
      </head>
    
    <body>
      <lunch>
        This is how you create custom tags like what he is asking for its very simple just do what i wrote it works yeah no js or convoluted work arounds needed this lets you do exactly what he wrote.
        </lunch>
      </body>
        18
  •  0
  •   Lawrence Turcotte    7 年前

    您可以使用:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>MyExample</title>
    <style>bloodred {color: red;}</style>
    <body>
    <blood-red>this is BLOODRED (not to scare you)
    
    </bloodred>
    </body>
    <script>
    var btn = document.createElement("BLOODRED")
    
    </script>
    </html>
    
    推荐文章