CODE大全
版权声明:本文为博主原创文章,未经博主允许不得转载。

HTML\HTML5 自定义标签(元素)教程

发布时间:『 2017-06-24 07:24』  博客类别:WEB前端  阅读(2996) 评论(0)

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 组件的基础知识:自定义元素(custom elements)。

自定义元素(custom elements)

自定义元素(custom elements)

浏览器处理

我们一般都使用标准的 HTML 元素。

<p>Hello World</p>

上面代码中,<p>就是标准的 HTML 元素。

如果使用非标准的自定义元素,会有什么结果?

<greeting>Hello World</greeting>

上面代码中,<greeting>就是非标准元素,浏览器不认识它。这段代码的运行结果是,浏览器照常显示Hello World,这说明浏览器并没有过滤这个元素。

现在,为自定义元素加上样式。

greeting {
  display: block;
  font-size: 36px;
  color: red;
}

运行结果如下。

bg2017062203.png

接着,使用脚本操作这个元素。

function customTag(tagName, fn){
  Array
    .from(document.getElementsByTagName(tagName))
    .forEach(fn);
}

function greetingHandler(element) {
  element.innerHTML = '你好,世界';
}   

customTag('greeting', greetingHandler);

运行结果如下。

bg2017062204.png

这说明,浏览器对待自定义元素,就像对待标准元素一样,只是没有默认的样式和行为。这种处理方式是写入 HTML5 标准的。

"User agents must treat elements and attributes that they do not understand as semantically neutral; leaving them in the DOM (for DOM processors), and styling them according to CSS (for CSS processors), but not inferring any meaning from them."

上面这段话的意思是,浏览器必须将自定义元素保留在 DOM 之中,但不会任何语义。除此之外,自定义元素与标准元素都一致。

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

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

tabs instanceof HTMLUnknownElement // true
tabs instanceof HTMLElement // true

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

HTML import

有了自定义元素,就可以写出语义性非常好的 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>

HTML imports 的更多用法可以参考上面的教程。目前只有 Chrome 浏览器支持这个语法。

Custom Elements 标准

HTML5 标准规定了自定义元素是合法的。然后,W3C 就为自定义元素制定了一个单独的 Custom Elements 标准

它与其他三个标准放在一起---- HTML Imports,HTML Template、Shadow DOM----统称为 Web Components 规范。目前,这个规范只有 Chrome 浏览器支持

bg2017062205.jpg

Custom Elements 标准对自定义元素的名字做了限制

"自定义元素的名字必须包含一个破折号(-)所以<x-tags>、<my-element>和<my-awesome-app>都是正确的名字,而<tabs>和<foo_bar>是不正确的。这样的限制使得 HTML 解析器可以分辨那些是标准元素,哪些是自定义元素。"

注意,一旦名字之中使用了破折号,自定义元素就不是HTMLUnknownElement的实例了。

var xTabs = document.createElement('x-tabs');

xTabs instanceof HTMLUnknownElement // false
xTabs instanceof HTMLElement // true

Custom Elements 标准规定了,自定义元素的定义可以使用 ES6 的class语法。

// 定义一个 <my-element></my-element>
class MyElement extends HTMLElement {...}
window.customElements.define('my-element', MyElement);

上面代码中,原生的window.customElements对象的define方法用来定义 Custom Element。该方法接受两个参数,第一个参数是自定义元素的名字,第二个参数是一个 ES6 的class。

这个class使用get和set方法定义 Custom Element 的某个属性。

class MyElement extends HTMLElement {
  get content() {
    return this.getAttribute('content');
  }

  set content(val) {
    this.setAttribute('content', val);
  }
}

有了这个定义,网页之中就可以插入<my-element>了。

<my-element content="Custom Element">
  Hello
</my-element>

处理脚本如下。

function customTag(tagName, fn){
  Array
    .from(document.getElementsByTagName(tagName))
    .forEach(fn);
}

function myElementHandler(element) {
  element.textConent = element.content;
}

customTag('my-element', myElementHandler);

运行结果如下。

bg2017062207.png

ES6 Class 的一个好处是,可以很容易地写出继承类。

class MyNewElement extends MyElement {
  // ...
}

customElements.define('my-new-element', MyNewElement);

今天的教程就到这里,更多用法请参考谷歌的官方教程

参考链接


——— 全文完 ———
如有版权问题,请联系532009913@qq.com。
关键字:   HTML5     自定义元素     自定义标签     JavaScript     css  
评论信息
暂无评论
发表评论
验证码: 
Powered by CODE大全 | 鄂ICP备14009759号-2 | 网站留言 Copyright © 2014-2016 CODE大全 版权所有