Custom HTML tags (XML)

Time:2021-4-21

Both HTML and HTML5 can customize tags. After browsing the source code of some websites, you will find that there are tags and elements in some webpages that you don’t know, but these elements can be executed by the browser. This is the custom element.

After defining tags freely without using pre-defined semantic tags, our content can be more semantic.

Before HTML5, the beginning of a document was marked like this.

<!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">

The markup of documents in HTML5 is like this.

<!DOCTYPE>

<html>

This will lead to some new H5 elements such as header and footer. After testing, it is found that IE cannot parse the new H5 elements. But we add some styles to these elements, which can be parsed by the browser.

Component is the direction of web development, JavaScript component is the hot spot now, but HTML component may be more promising in the future.

Browser processing


We generally use standard HTML elements.
In face code, < p > is the standard HTML element.

What happens if you use non-standard custom elements?

<greeting>Hello World</greeting>

In the above code, < greeting > is a non-standard element, which is not recognized by the browser. The result of this code is that the browser still displays Hello world, which indicates that the browser has not filtered this element.

Now, style the custom elements.

greeting {

 display: block;

 font-size: 36px;

 color: red;

}

The results are as follows

picture

Next, use the script to manipulate the element.

function customTag(tagName, fn){

 Array

 .from(document.getElementsByTagName(tagName))

 .forEach(fn);

}

function greetingHandler(element) {

 element . innerHTML  = ' Hello, world ';

}`

customTag('greeting', greetingHandler);

give the result as follows

picture

This shows that the browser treats custom elements just like standard elements, but there is no default style and behavior. This kind of processing is writeHTML5 standardOf

From the above test results, we can see that custom tags can be displayed normally, CSS style can be used, and can be controlled by JavaScript script

In fact, the browser provides an htmlunkonelement object, and all custom elements are instances of the object.

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

tabs instanceof HTMLUnknownElement // true

tabs instanceof HTMLElement // true

In the above code, tabs is a custom element, inheriting both htmlunkonelement and HtmlElement interface.

import HTML

With custom elements, you can write very semantic HTML code.

<share-buttons>

 <social-button type="weibo">

 < a {... "> microblog</a>

 </social-button>

 <social-button type="weixin">

 < a > wechat</a>

 </social-button>

</share-buttons>

The semantics of the above code can be seen at a glance.

If the styles and scripts of < share buttons > elements are encapsulated in an HTML file share- buttons.html This element can be reused.

When using, first introduce share- buttons.html .

<link rel="import" href="share-buttons.html">

Then, you can use < share buttons > in the web page.

<article>

 <h1>Title</h1>

 <share-buttons/>

 ... ...

</article>