在本教程中,我将向您展示使用自定义标签扩展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 = "
";
}
}
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
其中将包含我们自定义标记的实现。
自定义标签经常用作各种功能的包装。 在我们的例子中,我们将使用
标记作为绘制饼图的包装。 如果您错过了有关如何使用JavaScript和HTML5 Canvas绘制图表的教程,则可能需要快速浏览一下。 我们将使用该教程中的代码,并将其功能包装在我们的自定义标记中。
因此,请编辑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标签库的开发。

该库不仅包含用于饼图的自定义标签,还包含折线图,条形图和其他类型的图表的自定义标签。
最后的想法
在本教程中,我们看到了两个有关如何为两种不同功能创建自定义HTML标签的示例。 使用customTag()
函数,您可以轻松开发自己的自定义标签。
如果您喜欢本教程,我们还会提供有关HTML5和相关技术的其他各种教程,因此也请随时将其检出 。
翻译自: https://code.tutsplus.com/tutorials/extending-the-html-by-creating-custom-tags--cms-28622