通过创建自定义标签扩展HTML
通过自定义标签来扩展 HTML，有很多好处。在本文中我将告诉你自定义标签扩展HTML语言是多么的容易。自定义标签可以用来实现各种行为，他们可以让我们写更少的代码，让我们的HTML文档更简单更方便阅读。
HTML 自定义标签
什么是自定义的HTML标签
在HTML中，显示粗体文本，我们使用 <b> 标签。显示一个列表，我们需要用到 <ul> 标签和它的子标签 <li> 列表项。
标签是由浏览器，结合CSS，确定一个网页的内容显示，以及部分的内容表现。
有时候，仅仅使用一个HTML标签是不够展现在Web应用程序所需的功能。这通常是通过使用多个HTML标签和JavaScript和CSS解决，但这种解决方案不是很优雅。
一个更优雅的解决方案是使用自定义标签。标识符封闭 < > 的内容由浏览器解释显示我们预期的功能。与常规的HTML标签相比，我们应该能够在一个页面中使用自定义标签多次，我们也应该能够有标记自定义元素的属性和子标签帮助的自定义标签达到预期的功能。下面，我们来看一些例子！
创建一个自定义的<codingdude-gravatar>标签
下面我们创建一个自定义标签<codingdude-gravatar>，它将显示为一个特定的电子邮件地址的头像图片。
自定义标签可以起一个区别于标准标签的名字。一般的我们可以带一个前缀。例如本例中的自定义标签带有codingdude—前缀。以避免与其他自定义标签名称冲突。
首先我们在自定义标签前需要做一下步骤：
- 创建项目文件，自定义标签目录gravatar-custom-tag
- 创建一个index.html，用来测试自定义标签
- 创建codingdude-gravatar.js，为自定义标签添加事件函数
index.html文件的内容如下：
<html>
<head>
<script type=”text/javascript” src=”codingdude-gravatar.js”></script>
</head>
<body>
This is my Gravatar picture:
<codingdude-gravatar email=”admin@coding-dude.com”></codingdude-gravatar>
</body>
</html>
现在我们在浏览器中打开index.html文件。自定义标签会渲染出以下内容：
This is my Gravatar picture:
注意：有些浏览器会忽略他们有未知的标签，我们最好采用谷歌浏览器来进行测试。
为了让email地址显示用户图片，我们还需要引入一个md5.min.js库。
<script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.7.0/js/md5.min.js”></script>
codingdude-gravatar.js文件中的代码如下：
function customTag(tagName,fn){
document.createElement(tagName);
//find all the tags occurrences (instances) in the document
var tagInstances = document.getElementsByTagName(tagName);
//for each occurrence run the associated function
for ( var i = 0; i < tagInstances.length; i++) {
fn(tagInstances[i]);
}
}
function codingdudeGravatar(element){
//code for rendering the element goes here
if (element.attributes.email){
//get the email address from the element’s email attribute
var email = element.attributes.email.value;
var gravatar = “http://www.gravatar.com/avatar/”+md5(email)+”.png”;
element.innerHTML = “<img src='”+gravatar+”‘>”;
}
}
customTag(“codingdude-gravatar”,codingdudeGravatar);
关键函数是customtag()，执行上面的代码浏览器会自行的创建元素。像执行document.createElement(tagName)一样的创建自定义标签。
到这里一个完整的自定义标签已经完成了，你可以看到它非常的简单。我们还可以为自定义标签指定属性，添加CSS样式。自己快去试试吧！
参考资料：
扫描下方二维码，关注业余草微信公众号，回复“FFmpeg”关键词，获取 FFmpeg 视频教程！
