如何为html创建自定义标签

Question

我想学习如何为html创建自定义标签,具有特殊属性和行为,如果有人可以给出建议我会非常感激.

Answer 1

HTML5Rocks.com上有一篇关于如何使用自定义元素的有趣且深入的文章:自定义元素:在HTML中定义新元素

以下是有关如何执行此操作的文章的摘录.

实例化元素

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

声明他们:

<x-foo></x-foo>

在JS中创建DOM:

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

使用new运算符:

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

Answer 2

根据"特殊属性和行为"的含义,您可以立即"创建"自定义HTML标记.以下显示在所有浏览器中,甚至可以使用各种JavaScript方法:

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

你必须记住几件事:

1. 连字!自定义元素应包括至少一个-像my-book或app-menu或header-title等只是,不要使用data-*,因为它保留数据-属性.

2. inline默认情况下,所有自定义元素都显示.但是,您可以使用CSS或JavaScript更改它.

3. 除非您首先使用JavaScript"创建"它们,否则Internet Explorer无法识别任何这些元素:

   document.createElement('my-book');
   

因此,您必须先执行此操作,然后才能在CSS,HTML或JS中使用它们.

Answer 3

你真正需要做的就是为那个标签定义css

例:

mytag {
font-weight: bold;
}

现在mytag是你自己的大胆:

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

Answer 4

现在有一个新兴的W3C标准规范,称为Web组件自定义元素,它使开发人员能够创建自己的自定义HTML元素并使用浏览器解析器注册它们.Mozilla开发了一个名为X-Tag的库,它使创建和使用自定义元素的过程非常简单,请查看:X-Tags.org