有没有办法在 HTML5中创建自己的 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>

但是它的可读性差得多:

112612 次浏览
小开

这在任何 HTML 规范中都不是一个选项:)

您可以使用 <div>元素和类做您想做的事情，从这个问题我不确定您到底想要什么，但是不，创建您自己的标记不是一个选项。

小开

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

但是，如果在 HTML 中使用这样的标记，则不会出现任何错误。

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

如果这不是你想达到的目标，请具体说明你想要什么。到时候我们再想办法。

小开

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

或者用 <ul/>和 <li/>代替 <div/>和 <span/>。

为了使它的外观和功能正确，只需要连接一些 CSS 和 Javascript。

小开

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

我在上一份工作中为一些项目这样做过，一些实用的建议:

  1. 当您说您想要“将这些内容添加到 HTML 5中”时，我假设您真正的意思是您希望页面能够在现代浏览器中正确显示，而不需要在服务器端做大量工作。这可以通过在 xml 文件的顶部插入“样式表处理指令”来实现，如 < ？Xml-stylesheet type = “ text/xsl”href = “ menu.xsl”? > .将“ menu.XSL”替换为 XSL 样式表的路径，创建 XSL 样式表是为了将自定义标记转换为 HTML。

  2. 警告: 您的文件必须是格式良好的 XML 文档，包含 XML 头 < XML version = “1.0”> 。对于不匹配的标签之类的事情，XML 比 HTML 更挑剔。而且，与 HTML 不同，标记是区分大小写的。您还必须确保 Web 服务器正在发送具有适当的 mime 类型“ application/xml”的文件。通常情况下，如果文件扩展名为”，Web 服务器将被配置为自动执行此操作。但检查。

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

小开

对于嵌入元数据，您可以尝试使用 HTML 微数据，但是它甚至比使用类名更加冗长。

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

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

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

小开

HTML 的要点在于，包含在语言中的标签有一个公认的含义，世界上的每个人都可以使用和基于这个含义做出决定——比如默认样式，或者使链接可点击，或者当你点击 <input type="submit">时提交表单。

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

小开

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

Http://www.crockford.com/html/

这里的要点是，HTML 是基于 SGML 的。与带有文档类型和模式的 XML 不同，如果浏览器不知道一两个标记，HTML 不会变得无效。想想 < marquee > 。这不是官方标准。因此，虽然使用它使您的 HTML 页面“正式未经批准”，它也没有破坏该页面。

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

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

小开

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

绿色{ color: green }

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

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

小开
最佳答案

您可以在浏览器中使用自定义标记，尽管它们不是 HTML5(参见 自定义元素是否有效 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>
小开

聚合物 或 X 标签允许您构建自己的 html 标记，它基于本地浏览器的“ Shadow DOM”。

小开

我找到了这篇关于创建自定义 HTML 标记和实例化它们的文章。它简化了过程，并将其分解成任何人都可以立即理解和使用的术语——但是我不完全确定它包含的代码样本在所有浏览器中都是有效的，因此请注意购买和彻底测试。不管怎样，这是一个很好的入门课程。

自定义元素: 在 HTML 中定义新元素

小开

你可以做一些自定义的 css 样式，这将创建一个标签，将背景颜色变成红色:

redback {background-color:red;}



<redback>This is red</redback>

小开

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

例如，您希望使用标记 <icon>，因为您不喜欢 <img>，也不喜欢 <i>..。

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

在这个时候，浏览器可能会实现这个标签的原生样式，你的网站的设计可能会中断。

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

事实上，标签 <menu>是定义良好的，即不是这样使用的，而是定义的。它应该包含 <menuitem>，其行为类似于 <li>。

小开 

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

小开

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

看这个例子。
第一行包含两个组成的元素，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等，期望他们的行为像跨度，你现在有麻烦了！

小开

你可以用这个:

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

提交答案