在本教程中，我将向您展示使用自定义标签扩展HTML语言有多么容易。 自定义标记可用于实现各种行为，因此它们是编写更少代码并简化HTML文档的一种非常方便的方法。
什么是自定义HTML标签？
使用HTML时，例如，使用标记显示粗体文本。 如果需要列表，则对每个列表项使用 。 标签由浏览器解释，并与CSS一起确定网页内容的显示方式以及部分内容的行为。
有时，仅使用一个HTML标记不足以满足Web应用程序所需的功能。 通常，这可以通过将多个HTML标记与JavaScript和CSS结合使用来解决，但是这种解决方案并不是那么优雅。
更为优雅的解决方案是使用自定义标签-用<>括起来的标识符，浏览器将其解释为呈现我们预期的功能。 与常规HTML标签一样，我们应该能够在页面中多次使用自定义标签，并且还应该能够具有标签属性和子标签来辅助自定义标签的功能。 所以，让我们看一个例子！
示例1：创建Gravatar自定义HTML标签
让我们创建一个自定义标签，该标签将显示某个电子邮件地址的Gravatar图片。 我们将此标签称为email的属性传递。
您可以随意命名自定义标签，但要注意的一件事是，在此示例中，自定义标签名称以codingdude- 。 最佳做法是为您的自定义标签使用这样的前缀，以避免名称与其他自定义标签冲突。 同样，不使用HTML已经定义的标签名称显然也是一个好主意。
为了实现和测试我们的标记，我们将需要创建一些东西：
- 一个文件夹，用于保存项目文件； 我们将此文件夹称为
gravatar-custom-tag。 -
gravatar-custom-tag文件夹中有一个HTML文件index.html。 该文件将包含HTML代码。 -
gravatar-custom-tag文件夹中的一个JS文件codingdude-gravatar.js。 该文件将包含实现自定义标记JavaScript代码。
让我们编辑index.html文件，并使它的内容如下所示：
This is my Gravatar picture:
如果我们现在在浏览器中加载index.html ，结果将不会令人印象深刻，因为我们尚未为自定义标记实现代码：
需要注意的一件事是浏览器非常宽容，因此您可以在文档中包含未知标签，而浏览器将忽略它们。 要让我们的自定义标签实际显示我的电子邮件中的Gravatar图片，我们首先必须了解Gravatar的工作方式。
Gravatar通过将电子邮件地址转换为用户已选择的PNG图像的URL来工作。 通过计算电子邮件地址的MD5哈希进行转换。 Gravatar图片网址如下所示： https://www.gravatar.com/avatar/EMAIL_MD5_HASH.png : https://www.gravatar.com/avatar/EMAIL_MD5_HASH.png 。 因此，首先我们需要一个函数来根据字符串计算MD5哈希值。 为此，我们将使用一个开源库，将其添加到index.html文件中，如下所示：
This is my Gravatar picture: 现在，让我们继续执行自定义标记。 我们将需要实现首先在文档中标识我们的自定义标签的代码，然后我们需要实现我们的自定义标签的功能。 这些都将放在我们的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 = "![]("+gravatar+")
";
}
}
customTag("codingdude-gravatar",codingdudeGravatar); 查看代码，我们看到函数customTag()通过名称（ tagName参数）查找自定义标签的出现，并执行与该自定义标签关联的功能（通过fn参数）。
某些浏览器（特别是IE document.createElement(tagName)需要document.createElement(tagName)调用来通知浏览器我们将使用名称为tagName的自定义标签，否则该标签可能无法正常工作。
fn参数是实现自定义标记应执行的功能的函数。 在我们的例子中， fn是codingdudeGravatar() 。 此函数将对自定义标签元素的引用作为参数。 如果自定义标签具有名为email的属性，那么它将把该值从我们的开源库传递给md5()函数。 然后将结果用于组成Gravatar图片的URL，该URL通过我们的自定义标签元素内的
脚本的最后一行使用自定义标签的名称及其关联的实现函数调用customTag()函数。 自定义标签功能可用于任何类型的自定义标签。 您只需实现需要的功能即可。
现在，如果在浏览器中加载index.html文件，我们将在电子邮件中看到Gravatar：
示例2：用于绘制饼图的高级自定义HTML标记
在前面的示例中，我们看到了一个非常简单的自定义HTML标签实现。 您可以使用相同的方法来实现所需的任何自定义标签。
让我们看看如何实现更高级的自定义标记，该标记可用于绘制饼图。 让我们创建此定制标记所需的文件：
- 创建一个文件夹并将其命名为
piechart-custom-tag。 这将是我们的项目文件夹。 - 在
piechart-custom-tag文件夹内，创建一个HTML文件并将其命名为index.html。 该文件将包含HTML代码。 - 还要创建一个JavaScript文件
codingdude-piechart.js其中将包含我们自定义标记的实现。
自定义标签经常用作各种功能的包装。 在我们的例子中，我们将使用
因此，请编辑codingdude-piechart.js文件，并从教程中添加以下功能：
-
drawLine() -
drawArc() -
drawPieSlice()
-
Piechart()
现在，让我们编辑文件index.html并放置用于绘制饼图的自定义标签，如下所示：
10
14
2
12
这里的目的是使用width和height属性设置饼图的width和height 。 colors属性设置用于饼图切片的颜色。
如前所述，此自定义标签稍微复杂一点，因为我们要对该自定义标签使用子标签。 我们想在此处使用
编辑文件codingdude-piechart.js ，然后在饼图教程中获取功能之后，放置以下代码：
//here you should add the function from the tutorial
//How to Draw Charts Using JavaScript and HTML5 Canvas
//...
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 PiechartTag(element){
//add the canvas where to draw the piechart
var canvas = document.createElement("canvas");
//get the width and height from the custom tag attributes
canvas.width = element.attributes.width.value;
canvas.height = element.attributes.height.value;
element.appendChild(canvas);
//get the colors for the slices from the custom tag attribute
var colors = element.attributes.colors.value.split(",");
//load the chart data from the sub-tags
var chartData = {};
var chartDataElements = element.querySelectorAll("codingdude-data");
for (var i=0;i customTag()函数与示例1中使用的函数相同。 PiechartTag()函数中包含PiechartTag() 。 此功能照顾以下方面：
- 它创建将在其中绘制图表的
元素，并将其添加到自定义标记中。 画布的宽度和高度来自自定义标签的属性。 - 它查找元素的
colors属性，并将其转换为用于饼图切片的颜色数组。 - 它在传递到饼图的数据结构中一一加载
- 最后，我们使用所需的选项调用
Piechart()构造函数，然后调用draw()函数绘制饼图。
如果加载index.html ，则可以看到自定义标记呈现为饼图，并且应如下所示：
在那里，有一个漂亮的饼图。 更改
CodeCanyon的图表库
该库不仅包含用于饼图的自定义标签，还包含折线图，条形图和其他类型的图表的自定义标签。
最后的想法
在本教程中，我们看到了两个有关如何为两种不同功能创建自定义HTML标签的示例。 使用customTag()函数，您可以轻松开发自己的自定义标签。
如果您喜欢本教程，我们还会提供有关HTML5和相关技术的其他各种教程，因此也请随时将其检出 。
翻译自: https://code.tutsplus.com/tutorials/extending-the-html-by-creating-custom-tags--cms-28622