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> 的自定义标记元素。这是你应该做的......

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

Answer 2

我对这些答案不太确定。正如我刚读过的那样： “在HTML中一直都允许使用自定义标记。”

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

这里的重点是，HTML基于SGML。与具有其文档类型和模式的XML不同，如果浏览器不知道一个或两个标记，则HTML不会变为无效。想想＆lt; marquee＆gt;。这还没有达到官方标准。因此，在使用它时，您的HTML页面“正式未经批准”，它也没有破坏页面。

然后有＆lt; keygen＆gt;，这是特定于Netscape的，在HTML4中被遗忘并重新发现，现在在HTML5中指定。此外，我们现在还有自定义标记属性，例如所有HTML5标记上允许的数据-XyZzz =“...”。

因此，虽然您不应该发明自己的整个自定义未指定标记沙拉，但并不完全禁止在HTML中使用自定义标记。但是，除非您希望使用+ xml Content-Type发送它或嵌入其他XML命名空间，例如SVG或MathML。这仅适用于SGML限制的HTML。

Answer 3

正如迈克尔在评论中所说，你想做的事情很有可能，但你的命名是错误的。您不是“向HTML 5添加标记”，而是使用自己的标记创建新的XML文档类型。

我在上一份工作中为一些项目做过这个。一些实用的建议：

当你说你想“将这些添加到HTML 5”时，我认为你真正想要的是你希望页面在现代浏览器中正确显示，而不必在服务器端。这可以通过在xml文件的顶部插入“样式表处理指令”来实现，例如＆lt;？xml-stylesheet type =“text / xsl”href =“menu.xsl”？＆gt;。将“menu.xsl”替换为您创建的XSL样式表的路径，以将自定义标记转换为HTML。
警告：您的文件必须是格式良好的XML文档，并带有XML标头＆lt; xml version =“1.0”＆gt;。关于诸如不匹配的标签之类的东西，XML比HTML更挑剔。此外，与HTML不同，标签区分大小写。您还必须确保Web服务器正在使用适当的mime类型“application / xml”发送文件。如果文件扩展名为“.xml”，Web服务器通常会配置为自动执行此操作，但请检查。
Big Caveat：最后，正如我所描述的那样，使用浏览器的自动XSL转换，最好只用于调试以及有很多控制权的有限应用程序。我成功地在我上一个雇主那里建立了一个简单的内联网，最多只有几十个人访问过。并非所有浏览器都支持XSL，并且那些浏览器不支持完全兼容的实现。因此，如果要将页面发布到“狂野”中，最好将它们全部转换为服务器端的HTML，这可以通过命令行工具或许多XML编辑器中的按钮来完成。

Answer 4

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

Answer 5

我只想在前面的答案中添加一个含义，即只为自定义元素使用双字标签。它们永远不应该标准化。

例如，您想要使用标记<icon>，因为您不喜欢<img>，并且您不喜欢<i> ...

好吧，请记住，你不是唯一一个。也许在将来，w3c和/或浏览器将指定/实现此标记。

此时，浏览器可能会为此标记实现本机样式，并且您的网站设计可能会中断。

所以我建议使用（根据这个例子）<img-icon>。

事实上，标签<menu>已明确定义，即未如此使用，但已定义。它应包含<menuitem>，其行为类似于<li>。

Answer 6

自定义标签可以在Safari，Chrome，Opera和Firefox中使用，至少就使用它们代替“class = ...”来说。

绿色{color：green}在css中适用于

<green>This is some text.</green>

Answer 7

对于嵌入元数据，您可以尝试使用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>

Answer 8

除了编写XSL样式表之外，如前所述，还有另一种方法，至少如果您确定将使用Firefox或其他成熟的XML浏览器（即非Internet Explorer）。跳过XSL转换，编写一个完整的CSS样式表，告诉浏览器如何直接格式化XML。这里的优点是你不必学习XSL，许多人认为XSL是一种困难和违反直觉的语言。缺点是你的CSS必须非常完整地指定样式，包括什么是块节点，什么是内联等。通常，在编写CSS时，你可以假设浏览器“知道”＆lt; em＆gt;，例如，是一个内联节点，但它不知道如何处理＆lt; dish＆gt;。

最后，我尝试了几年，但我的回忆是IE（至少有几个版本）拒绝将CSS样式表直接应用于XML文档。

Answer 9

HTML的一点是，语言中包含的标签具有一致的含义，世界上的每个人都可以使用和做出决策 - 例如默认样式，或使链接可点击，或者在您点击时提交表单<input type="submit">。

像你这样的彩妆标签非常适合人类（因为我们可以学习英语，因此知道，或至少猜测你的标签意味着什么），但对机器来说却不太好。

Answer 10

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

但是，如果您在HTML中使用此类标记，则不会出现任何错误。

好像你想创建一个列表。您可以使用无序列表<ul>来创建rool元素，并使用<li>标记来显示下面的项目。

如果这不是您想要达到的目标，请准确说明您想要的内容。那我们可以拿出一个答案。

Answer 11

在某些情况下，创建自己的标记名称可能看起来很正常但是，这只是您的浏览器在工作中的错误处理例程。问题是，不同的浏览器有不同的错误处理例程！

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

＆＃13;

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

＆＃13;

<p><what></what> <ever>test</ever></p>

<p><code></code> <span>test</span></p>

＆＃13;

制作元素的另一个问题是你不知道未来会怎样。如果您在几年前创建了一个网站，其标记名称为picture，dialog，details，slot，template等，则希望它们的行为类似跨度，你现在有麻烦了吗？

Answer 12

你可以做一些自定义的CSS样式，这将创建一个标记，使背景颜色变为红色：

redback {background-color:red;}

 

<redback>This is red</redback>

Answer 13

Polymer或X-tags允许您构建自己的html标记。它基于本机浏览器的“影子DOM”。

Answer 14

您可以通过HTML 5数据添加自定义属性 - 属性。例如：消息这对HTML 5有效。请参阅http://ejohn.org/blog/html-5-data-attributes/以获取详细信息。

Answer 15

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

Custom Elements : Defining new elements in HTML

Answer 16

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

Answer 17

这不是任何HTML规范中的选项：）

你可以用<div>元素和类做你想做的事情，问题我不确定你所追求的是什么，但不是，创建自己的标签不是一种选择。

Answer 18

你可以用这个：

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

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

18 个答案: