HTML和HTML5都可以自定義標(biāo)簽。在瀏覽一些網(wǎng)站的源代碼后，你會(huì)發(fā)現(xiàn)一些網(wǎng)頁中存在你不認(rèn)識(shí)的標(biāo)簽和元素，但是這些元素卻能被瀏覽器執(zhí)行。這就是自定義元素。

自由定義標(biāo)簽而不必使用預(yù)定義好的語義標(biāo)簽之后，更能語義化我們的內(nèi)容。

在HTML5之前，文檔的開頭都是這樣標(biāo)記的。

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

而HTML5中文檔的標(biāo)記是這樣的。

這就會(huì)導(dǎo)致一些新增的h5元素header、footer，測(cè)試過發(fā)現(xiàn)IE不能解析h5新增的元素。但是我們給這些元素添加一些樣式，卻能被瀏覽器解析。

組件是 Web 開發(fā)的方向，現(xiàn)在的熱點(diǎn)是 JavaScript 組件，但是 HTML 組件未來可能更有希望。

瀏覽器處理

我們一般都使用標(biāo)準(zhǔn)的 HTML 元素。

面代碼中，

就是標(biāo)準(zhǔn)的 HTML 元素。

如果使用非標(biāo)準(zhǔn)的自定義元素，會(huì)有什么結(jié)果？

Hello?World

上面代碼中，就是非標(biāo)準(zhǔn)元素，瀏覽器不認(rèn)識(shí)它。這段代碼的運(yùn)行結(jié)果是，瀏覽器照常顯示Hello World，這說明瀏覽器并沒有過濾這個(gè)元素。

現(xiàn)在，為自定義元素加上樣式。

greeting?{

display: block;

font-size: 36px;

color: red;

}

運(yùn)行結(jié)果如下

接著，使用腳本操作這個(gè)元素。

function?customTag(tagName,?fn){

Array

.from(document.getElementsByTagName(tagName))

.forEach(fn);

}

function?greetingHandler(element)?{

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

}`

customTag('greeting',?greetingHandler);

結(jié)果如下

這說明，瀏覽器對(duì)待自定義元素，就像對(duì)待標(biāo)準(zhǔn)元素一樣，只是沒有默認(rèn)的樣式和行為。這種處理方式是寫入

HTML5 標(biāo)準(zhǔn)的

由上面的測(cè)試結(jié)果可以得知，自定義標(biāo)簽可以正常顯示，可以使用css樣式，可以由JavaScript腳本控制

事實(shí)上，瀏覽器提供了一個(gè)HTMLUnknownElement對(duì)象，所有自定義元素都是該對(duì)象的實(shí)例。

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

tabs instanceof?HTMLUnknownElement //?true

tabs instanceof?HTMLElement //?true

上面代碼中，tabs是一個(gè)自定義元素，同時(shí)繼承了HTMLUnknownElement和HTMLElement接口。

import HTML

有了自定義元素，就可以寫出語義性非常好的 HTML 代碼。

上面的代碼，一眼就能看出語義。

如果將元素的樣式與腳本，封裝在一個(gè) HTML 文件share-buttons.html之中，這個(gè)元素就可以復(fù)用了。

使用的時(shí)候，先引入share-buttons.html。

然后，就可以在網(wǎng)頁中使用了。

Title

...?...

總結(jié)

以上是生活随笔為你收集整理的xml可以html标签吗,自定义html标签(XML)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。