共计 1679 个字符，预计需要花费 5 分钟才能阅读完成。
HTML 和 HTML5 都能够自定义标签。在浏览一些网站的源代码后，你会发现一些网页中存在你不意识的标签和元素，然而这些元素却能被浏览器执行。这就是自定义元素。
自在定义标签而不用应用预约义好的语义标签之后，更能语义化咱们的内容。
在 HTML5 之前，文档的结尾都是这样标记的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">而 HTML5 中文档的标记是这样的。
<!DOCTYPE>
<html>这就会导致一些新增的 h5 元素 header、footer，测试过发现 IE 不能解析 h5 新增的元素。然而咱们给这些元素增加一些款式，却能被浏览器解析。
组件是 Web 开发的方向，当初的热点是 JavaScript 组件，然而 HTML 组件将来可能更有心愿。
浏览器解决
咱们个别都应用规范的 HTML 元素。
面代码中，<p> 就是规范的 HTML 元素。
如果应用非标准的自定义元素，会有什么后果？
<greeting>Hello World</greeting>下面代码中，<greeting> 就是非规范元素，浏览器不意识它。这段代码的运行后果是，浏览器照常显示 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 代码。
<share-buttons>
<social-button type="weibo">
<a href="..."> 微博 </a>
</social-button>
<social-button type="weixin">
<a href="..."> 微信 </a>
</social-button>
</share-buttons>下面的代码，一眼就能看出语义。
如果将 <share-buttons> 元素的款式与脚本，封装在一个 HTML 文件 share-buttons.html 之中，这个元素就能够复用了。
应用的时候，先引入 share-buttons.html。
<link rel="import" href="share-buttons.html">而后，就能够在网页中应用 <share-buttons> 了。
<article>
<h1>Title</h1>
<share-buttons/>
... ...
</article>
