如何为html创build自定义标签
我想了解如何为html创build自定义标签，如果有人能给我链接或build议，我将是最感激的。
如果你能把我redirect到“傻瓜”教程会更好。
HTML5Rocks.com提供了一篇有趣的深度文章，介绍如何使用自定义元素： 自定义元素：在HTML中定义新元素
以下是关于如何做的文章摘录。
实例化元素
创build元素的常用技巧仍然适用于自定义元素。 与任何标准元素一样，它们可以使用JavaScript在HTML中声明或在DOM中创build。 实例化自定义标签
声明他们：
<x-foo></x-foo> 在JS中创buildDOM：
var xFoo = document.createElement('x-foo'); xFoo.addEventListener('click', function(e) { alert('Thanks!'); });
使用新的操作符：
var xFoo = new XFoo(); document.body.appendChild(xFoo);
根据“特殊属性和行为”的含义，您可以立即“创build”自定义HTML标记。 以下内容显示在所有浏览器中，甚至可以使用各种JavaScript方法：
<my-book data-pages="400" data-author="Nietzsche">The Wanderer and His Shadow</my-book>
有几件事你必须牢记：
-
连字 ！ 自定义元素应该至less包含一个
-像my-book或app-menu或header-title等。只是，不要使用data-*因为它是为数据属性保留的。 -
所有的自定义元素默认都有
inline的显示。 不过，你可以用CSS或者JavaScript来改变它。 -
除非您先使用JavaScript“创build”它们，否则Internet Explorer无法识别这些元素：
document.createElement('my-book');
所以你必须这样做才能在CSS，HTML或JS中使用它们。
你真的必须做的是定义该标签的CSS
例：
mytag { font-weight: bold; }
现在这个mytag是你自己的大胆：
<mytag>This text is in bold</mytag>
现在有一个新兴的W3标准规范，称为Web组件自定义元素 ，使开发人员能够创build自己的自定义HTML元素并将其注册到浏览器分析器。 Mozilla开发了一个名为X-Tag的库，它使得创build和使用自定义元素的过程变得非常简单，请查看： X-Tags.org
您可以使用以下步骤创build自定义的html标签：
步骤1-注册一个新元素。 自定义元素是使用document.registerElement（）创build的：
var XFoo = document.registerElement('x-foo', { prototype: Object.create(HTMLElement.prototype) });
registerElement中的第二个参数是描述元素原型的可选对象。
步骤2 – 实例化自定义标签有几种方法：声明它们：
<x-foo></x-foo>
在JS中创buildDOM：
var xFoo = document.createElement('x-foo'); xFoo.addEventListener('click', function(e) { alert('Thanks!'); });
使用新的操作符：
var xFoo = new XFoo();
步骤3-将新创build的元素附加到文档
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);
还有一个版本，只在Chrome 54和Opera支持。
例：
class BasicElement extends HTMLElement { connectedCallback() { this.textContent = 'Just a basic custom element.'; } } customElements.define('basic-element', BasicElement);
你可以在这里了解更多
你可以使用javascript： document.createElement('element')
