前端自定义html组件,关于前端:自定义html标签XML

HTML和HTML5都能够自定义标签。在浏览一些网站的源代码后，你会发现一些网页中存在你不意识的标签和元素，然而这些元素却能被浏览器执行。这就是自定义元素。

自在定义标签而不用应用预约义好的语义标签之后，更能语义化咱们的内容。

在HTML5之前，文档的结尾都是这样标记的。

html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

而HTML5中文档的标记是这样的。

这就会导致一些新增的h5元素header、footer，测试过发现IE不能解析h5新增的元素。然而咱们给这些元素增加一些款式，却能被浏览器解析。

组件是 Web 开发的方向，当初的热点是 JavaScript 组件，然而 HTML 组件将来可能更有心愿。

浏览器解决

咱们个别都应用规范的 HTML 元素。

面代码中，

就是规范的 HTML 元素。

如果应用非标准的自定义元素，会有什么后果？

Hello World

下面代码中，就是非规范元素，浏览器不意识它。这段代码的运行后果是，浏览器照常显示Hello World，这阐明浏览器并没有过滤这个元素。

当初，为自定义元素加上款式。

greeting {

display: block;

font-size: 36px;

color: red;

}

运行后果如下

图片

接着，应用脚本操作这个元素。

function customTag(tagName, fn){

Array

.from(document.getElementsByTagName(tagName))

.forEach(fn);

}

function greetingHandler(element) {

element.innerHTML = '你好，世界';

}`

customTag('greeting', greetingHandler);

后果如下

图片

这阐明，浏览器看待自定义元素，就像看待规范元素一样，只是没有默认的款式和行为。这种解决形式是写入HTML5 规范的

由下面的测试后果能够得悉，自定义标签能够失常显示，能够应用css款式，能够由JavaScript脚本管制

事实上，浏览器提供了一个HTMLUnknownElement对象，所有自定义元素都是该对象的实例。

ar tabs = document.createElement('tabs');

tabs instanceof HTMLUnknownElement // true

tabs instanceof HTMLElement // true

下面代码中，tabs是一个自定义元素，同时继承了HTMLUnknownElement和HTMLElement接口。

import HTML

有了自定义元素，就能够写出语义性十分好的 HTML 代码。

微博

微信

下面的代码，一眼就能看出语义。

如果将元素的款式与脚本，封装在一个 HTML 文件share-buttons.html之中，这个元素就能够复用了。

应用的时候，先引入share-buttons.html。

而后，就能够在网页中应用了。

Title

... ...