通过创建自定义标签来扩展HTML

最新推荐文章于 2024-06-12 22:18:50 发布

cunjie3951

最新推荐文章于 2024-06-12 22:18:50 发布

阅读量1.2k

点赞数 3

文章标签： python js javascript java html ViewUI

在本教程中，我将向您展示使用自定义标签扩展HTML语言有多么容易。自定义标记可用于实现各种行为，因此它们是编写更少代码并简化HTML文档的一种非常方便的方法。

什么是自定义HTML标签？

使用HTML时，例如，使用<b>标记显示粗体文本。如果需要列表，则对每个列表项使用<ul>标记及其子标记<li> 。标签由浏览器解释，并与CSS一起确定网页内容的显示方式以及部分内容的行为。

有时，仅使用一个HTML标记不足以满足Web应用程序所需的功能。通常，这可以通过将多个HTML标记与JavaScript和CSS结合使用来解决，但是这种解决方案并不是那么优雅。

更为优雅的解决方案是使用自定义标签-用<>括起来的标识符，浏览器将其解释为呈现我们预期的功能。与常规HTML标签一样，我们应该能够在页面中多次使用自定义标签，并且还应该能够具有标签属性和子标签来辅助自定义标签的功能。所以，让我们看一个例子！

示例1：创建Gravatar自定义HTML标签

让我们创建一个自定义标签，该标签将显示某个电子邮件地址的Gravatar图片。我们将此标签称为<codingdude-gravatar> ，然后将电子邮件地址作为名为email的属性传递。

您可以随意命名自定义标签，但要注意的一件事是，在此示例中，自定义标签名称以codingdude- 。最佳做法是为您的自定义标签使用这样的前缀，以避免名称与其他自定义标签冲突。同样，不使用HTML已经定义的标签名称显然也是一个好主意。

为了实现和测试我们的标记，我们将需要创建一些东西：

一个文件夹，用于保存项目文件；我们将此文件夹称为gravatar-custom-tag 。
gravatar-custom-tag文件夹中有一个HTML文件index.html 。该文件将包含HTML代码。
gravatar-custom-tag文件夹中的一个JS文件codingdude-gravatar.js 。该文件将包含实现自定义标记JavaScript代码。

让我们编辑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 ，结果将不会令人印象深刻，因为我们尚未为自定义标记实现代码：

自定义标签的示例

需要注意的一件事是浏览器非常宽容，因此您可以在文档中包含未知标签，而浏览器将忽略它们。要让我们的自定义标签实际显示我的电子邮件中的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文件中，如下所示：

<html>
    <head>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.7.0/js/md5.min.js"></script>
        <script type="text/javascript" src="codingdude-gravatar.js"></script>
    </head>
<body>
    This is my Gravatar picture: <codingdude-gravatar email="admin@coding-dude.com" />
</body>
</html>

现在，让我们继续执行自定义标记。我们将需要实现首先在文档中标识我们的自定义标签的代码，然后我们需要实现我们的自定义标签的功能。这些都将放在我们的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()通过名称（ tagName参数）查找自定义标签的出现，并执行与该自定义标签关联的功能（通过fn参数）。

某些浏览器（特别是IE document.createElement(tagName)需要document.createElement(tagName)调用来通知浏览器我们将使用名称为tagName的自定义标签，否则该标签可能无法正常工作。

fn参数是实现自定义标记应执行的功能的函数。在我们的例子中， fn是codingdudeGravatar() 。此函数将对自定义标签元素的引用作为参数。如果自定义标签具有名为email的属性，那么它将把该值从我们的开源库传递给md5()函数。然后将结果用于组成Gravatar图片的URL，该URL通过我们的自定义标签元素内的<img>元素添加。

脚本的最后一行使用自定义标签的名称及其关联的实现函数调用customTag()函数。自定义标签功能可用于任何类型的自定义标签。您只需实现需要的功能即可。

现在，如果在浏览器中加载index.html文件，我们将在电子邮件中看到Gravatar：

示例2：用于绘制饼图的高级自定义HTML标记

在前面的示例中，我们看到了一个非常简单的自定义HTML标签实现。您可以使用相同的方法来实现所需的任何自定义标签。

让我们看看如何实现更高级的自定义标记，该标记可用于绘制饼图。让我们创建此定制标记所需的文件：

创建一个文件夹并将其命名为piechart-custom-tag 。这将是我们的项目文件夹。
在piechart-custom-tag文件夹内，创建一个HTML文件并将其命名为index.html 。该文件将包含HTML代码。
还要创建一个JavaScript文件codingdude-piechart.js其中将包含我们自定义标记的实现。

自定义标签经常用作各种功能的包装。在我们的例子中，我们将使用<codingdude-piechart>标记作为绘制饼图的包装。如果您错过了有关如何使用JavaScript和HTML5 Canvas绘制图表的教程，则可能需要快速浏览一下。我们将使用该教程中的代码，并将其功能包装在我们的自定义标记中。

因此，请编辑codingdude-piechart.js文件，并从教程中添加以下功能：

drawLine()
drawArc()
drawPieSlice()
Piechart()

现在，让我们编辑文件index.html并放置用于绘制饼图的自定义标签，如下所示：

<html>
    <head>
        <script type="text/javascript" src="codingdude-piechart.js"></script>
    </head>
<body>
    <codingdude-piechart width="200" height="200" colors="#fde23e,#f16e23, #57d9ff,#937e88">
      <codingdude-data category="Classical music">10</codingdude-data>
      <codingdude-data category="Alternative rock">14</codingdude-data>
      <codingdude-data category="Pop">2</codingdude-data>
      <codingdude-data category="Jazz">12</codingdude-data>
    </codingdude-piechart>
</body>
</html>

这里的目的是使用width和height属性设置饼图的width和height 。 colors属性设置用于饼图切片的颜色。

如前所述，此自定义标签稍微复杂一点，因为我们要对该自定义标签使用子标签。我们想在此处使用<codingdude-data>子标签来设置图表数据。现在让我们看一下如何实现此自定义标签的代码。

编辑文件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 <codingdude-data> sub-tags
    var chartData = {};
    var chartDataElements = element.querySelectorAll("codingdude-data");
    for (var i=0;i<chartDataElements.length;i++){
        chartData[chartDataElements[i].attributes.category.value] = parseFloat(chartDataElements[i].textContent);
        //remove the data sub-tags
        chartDataElements[i].parentNode.removeChild(chartDataElements[i]);
    }
  
    //call the draw() function
    new Piechart(
        {
        canvas:canvas,
        data:chartData,
        colors:colors
        }
    ).draw();
}

customTag("codingdude-piechart",PiechartTag);

customTag()函数与示例1中使用的函数相同。 PiechartTag()函数中包含<codingdude-piechart>定制标记的PiechartTag() 。此功能照顾以下方面：

它创建将在其中绘制图表的<canvas>元素，并将其添加到自定义标记中。画布的宽度和高度来自自定义标签的属性。
它查找元素的colors属性，并将其转换为用于饼图切片的颜色数组。
它在传递到饼图的数据结构中一一加载<codingdude-data>元素。由于元素具有文本内容，因此浏览器将渲染它们并显示文本内容。由于我们不希望这样做，因此我们可以在获取数据后删除元素。
最后，我们使用所需的选项调用Piechart()构造函数，然后调用draw()函数绘制饼图。

如果加载index.html ，则可以看到自定义标记呈现为饼图，并且应如下所示：

在那里，有一个漂亮的饼图。更改<codingdude-data>属性将相应地更改饼图。相同的自定义标签技术被用于CodeCanyon的信息图表和图形HTML标签库的开发。

该库不仅包含用于饼图的自定义标签，还包含折线图，条形图和其他类型的图表的自定义标签。

最后的想法

在本教程中，我们看到了两个有关如何为两种不同功能创建自定义HTML标签的示例。使用customTag()函数，您可以轻松开发自己的自定义标签。

如果您喜欢本教程，我们还会提供有关HTML5和相关技术的其他各种教程，因此也请随时将其检出。

翻译自: https://code.tutsplus.com/tutorials/extending-the-html-by-creating-custom-tags--cms-28622

cunjie3951

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
通过创建自定义标签来扩展HTML

在本教程中，我将向您展示使用自定义标签扩展HTML语言有多么容易。自定义标记可用于实现各种行为，因此它们是编写更少代码并简化HTML文档的一种非常方便的方法。什么是自定义HTML标签？使用HTML时，例如，使用<b>标记显示粗体文本。如果需要列表，则对每个列表项使用<ul>标记及其子标记<li> 。标签由浏览器解释，并与CSS一起确定网页内容的...
复制链接

扫一扫