我想学习如何为 html 创建具有特殊属性和行为的自定义标签，如果有人可以提供建议，我将不胜感激。
【问题讨论】：
HTML5Rocks.com 上有一篇关于如何使用自定义元素的有趣且深入的文章：Custom Elements: Defining New Elements in HTML
这里是关于如何做的文章的摘录。
创建元素的常用技术仍然适用于自定义元素。与任何标准元素一样，它们可以在 HTML 中声明或使用 JavaScript 在 DOM 中创建。 实例化自定义标签
声明它们：
<x-foo></x-foo>
在 JS 中创建 DOM：
var xFoo = document.createElement('x-foo');
xFoo.addEventListener('click', function(e) {
alert('Thanks!');
});
使用新运算符：
var xFoo = new XFoo();
document.body.appendChild(xFoo);
【讨论】：
foo-bar 应始终用于自定义标签名称（需要连字符，x- 很常见），data-foo 应始终用于自定义属性（data- 需要）。浏览器可能会也可能不会处理像foo 这样的任意标签。通常它们不会导致错误，但它完全是非标准的，并且在某些情况下可能会导致问题。另请注意，非 HTML5 内容在执行此操作时应使用非严格的文档类型。 JS 可以用来绕过“data-”属性限制，但是比较笨重。
根据您所说的“特殊属性和行为”，您现在可以“创建”自定义 HTML 标记。以下显示在所有浏览器中，甚至适用于各种 JavaScript 方法：
<my-book data-pages="400" data-author="Nietzsche">The Wanderer and His Shadow</my-book>
您需要牢记以下几点：
断字！自定义元素应至少包含一个-，例如my-book 或app-menu 或header-title 等。只是，不要使用data-*，因为它是为数据属性保留的。
所有自定义元素默认显示为inline。不过，您可以使用 CSS 或 JavaScript 更改它。
Internet Explorer 无法识别任何这些元素，除非您首先使用 JavaScript“创建”它们：
document.createElement('my-book');
所以你必须这样做在你可以在你的 CSS、HTML 或 JS 中使用它们。
【讨论】：
您真正需要做的就是为该标签定义 css
示例：
mytag {
font-weight: bold;
}
现在 mytag 是你自己的粗体：
<mytag>This text is in bold</mytag>
【讨论】：
现在有一个新兴的 W3C 标准规范，称为 Web Component Custom Elements，它使开发人员能够创建自己的自定义 HTML 元素并将它们注册到浏览器解析器。 Mozilla 开发了一个名为 X-Tag 的库，它使创建和使用自定义元素的过程变得超级简单，请查看：X-Tags.org
【讨论】：
还有一个版本只支持 Chrome 54 和 Opera。
例子：
class BasicElement extends HTMLElement {
connectedCallback() {
this.textContent = 'Just a basic custom element.';
}
}
customElements.define('basic-element', BasicElement);
你可以了解更多关于这个here
【讨论】：
您可以通过以下步骤创建自定义 html 标签：
第 1 步 - 注册一个新元素。使用 document.registerElement() 创建自定义元素：
var XFoo = document.registerElement('x-foo', {
prototype: Object.create(HTMLElement.prototype)
});
registerElement 中的第二个参数是描述元素原型的可选对象。
第 2 步 - 实例化自定义标签 这样做的几种方法： 声明它们：
<x-foo></x-foo>
在 JS 中创建 DOM：
var xFoo = document.createElement('x-foo');
xFoo.addEventListener('click', function(e) {
alert('Thanks!');
});
使用 new 运算符：
var xFoo = new XFoo();
第 3 步- 将新创建的元素附加到文档中
document.body.appendChild(new XFoo());
完整示例：
var XFooProto = Object.create(HTMLElement.prototype);
// 1. Give x-foo a foo() method.
XFooProto.foo = function() {
alert('foo() called');
};
// 2. Define a property read-only "bar".
Object.defineProperty(XFooProto, "bar", {value: 5});
// 3. Register x-foo's definition.
var XFoo = document.registerElement('x-foo', {prototype: XFooProto});
// 4. Instantiate an x-foo.
var xfoo = document.createElement('x-foo');
// 5. Add it to the page.
document.body.appendChild(xfoo);
【讨论】：