自定义html标签(XML)

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

自由定义标签而不必使用预定义好的语义标签之后,更能语义化我们的内容。

在HTML5之前,文档的开头都是这样标记的。



而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

... ...

你可能感兴趣的:(html5htmlxml前端)