如何为html创建自定义标记

我想学习如何为html创建具有特殊属性和行为的自定义标记，如果有人能提供建议，我将不胜感激

根据“特殊属性和行为”的含义，您可以立即“创建”自定义HTML标记。以下内容显示在所有浏览器中，甚至可以与各种JavaScript方法一起使用：

<my-book data-pages="400" data-author="Nietzsche">The Wanderer and His Shadow</my-book>

---

因此，在CSS、HTML或JS中使用它们之前，您必须这样做。

现在有一个新兴的W3C标准规范，名为，它使开发人员能够创建自己的自定义HTML元素，并向浏览器解析器注册它们。Mozilla开发了一个名为X-Tag的库，它使创建和使用自定义元素的过程变得非常简单，请查看：

HTML5Rocks.com上有一篇关于如何使用自定义元素的有趣而深入的文章：

下面是这篇文章中关于如何做的摘录

实例化元素 创建元素的常用技术仍然适用于自定义元素。与任何标准元素一样，它们可以在HTML中声明或使用JavaScript在DOM中创建。 实例化自定义标记

声明它们：

<x-foo></x-foo>

var xFoo = document.createElement('x-foo');
xFoo.addEventListener('click', function(e) {
  alert('Thanks!');
});

var xFoo = new XFoo();
document.body.appendChild(xFoo);

使用新运算符：

<x-foo></x-foo>

var xFoo = document.createElement('x-foo');
xFoo.addEventListener('click', function(e) {
  alert('Thanks!');
});

var xFoo = new XFoo();
document.body.appendChild(xFoo);

---

您真正需要做的就是为该标记定义css

例如：

mytag {
font-weight: bold;
}

现在mytag是您自己的粗体：

<mytag>This text is in bold</mytag>

此文本以粗体显示

您可以通过以下步骤创建自定义html标记：

步骤1-注册新元素。自定义元素是使用document.registerElement（）创建的：

registerElement中的第二个参数是描述元素原型的可选对象

步骤2-实例化自定义标记 有几种方法可以做到这一点： 声明：

<x-foo></x-foo>

使用新的运算符：

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

---

还有一个版本只有Chrome54和Opera支持

例如：

class BasicElement extends HTMLElement {
    connectedCallback() {
        this.textContent = 'Just a basic custom element.';
    }
}
customElements.define('basic-element', BasicElement);

---

你可以了解更多关于这方面的信息

Dunno如果你可以用纯HTML，但也许你可以使用XHTML，XML部分有你自己制作的自定义标记。请发布答案，而不是将答案编辑到你的问题中。重新打开：这不是一个工具/意见问题，这是一个关于语法、标准、，和浏览器支持。我本来打算为禁用js的用户制作一个隐藏的标签，但现在我必须先用JavaScript注册它。我想我必须坚持。@apokaliptis for js disabled problem也许你可以使用普通html来处理不支持js的浏览器。如果能为这个答案提供一些参考，那就太好了。值得注意的是，从标准和浏览器支持的角度来看，这是正确的方法

foo bar

应始终用于自定义标记名称（需要连字符，

x-

是常见的），而

data foo

应始终用于自定义属性（

data-

需要）。浏览器可能会也可能不会很好地处理像

foo

这样的任意标记。一般来说，它们不会导致错误，但这是完全不标准的，在某些情况下可能会导致问题。还请注意，非HTML5内容在执行此操作时应使用非严格的doctype。JS可以用来绕过“数据-”属性限制，但它很笨重。自定义元素的更新规范v1：可重用Web组件我知道这至少适用于Google Chrome 47确保这在Chrome 47中有效，但不建议这样做，因为它只是无效的HTML。Chrome可以处理各种各样的无效代码，虽然它确实可以工作，但你真的不应该过分依赖它，因为它在其他浏览器中的行为可能是完全任意的。它对我不起作用。TypeError:document.registerElement不是一个函数。（在“document.registerElement（）”中，“document.registerElement”未定义）警告：document.registerElement（）已被弃用，取而代之的是customElements.define（）。源码现在它在Safari中也可以使用：很高兴认识mate，谢谢。在firefox上也是如此