html不常用的标签有哪些

1. 前言

HTML是网页制作的基础，标签是HTML的基本单位。虽然HTML标签很多，但在实际应用中，我们通常只使用其中的一部分。本文将介绍一些不常用的HTML标签，对于初学者或想要进一步深入了解HTML的人来说，这些标签可能会有所帮助。

2. 标签介绍

2.1 <canvas>

<canvas> 标签是HTML5新增的标签，可以用于绘制图形、制作动画等。其使用非常灵活，可以使用JavaScript动态创建图形，也可以使用CSS进行样式控制。

下面是一个简单的例子，绘制一个红色矩形：

<canvas id="myCanvas" width="200" height="100"></canvas>

<script>
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>

运行结果：

2.2 <details>

<details> 标签可以隐藏一些内容，并提供一个可点击的标题。内容默认是展开的，用户点击标题后可以收起内容。这个标签在展示一些较长的内容或者带有折叠、可供展开的内容时比较实用，使用它可以减少页面的混乱和空间的浪费。

下面是一个例子：

<details>

  <summary>点击这里展开/收起</summary>
  <p>内容部分</p>
</details>

运行结果：

2.3 <map>

<map> 标签可以用来定义一个图像映射，用于将一个图像分成多个可点击区域，每个区域可以分配不同的链接。

下面是一个例子，将一个图像分成三个可点击区域，并分别链接到不同的页面：

<img src="example.png" usemap="#example">

<map name="example">
  <area shape="rect" coords="0,0,50,50" href="page1.html">
  <area shape="rect" coords="50,0,100,50" href="page2.html">
  <area shape="rect" coords="100,0,150,50" href="page3.html">
</map>

注释：

coords 属性指定了可点击区域的坐标，根据不同形状的区域可以分别设置不同的坐标。

href 属性指定了当用户点击可点击区域时要跳转到的页面。

运行结果：

2.4 <mark>

<mark> 标签可用于标记关键字或突出显示某些文本。

下面是一个例子：

<p>这里的一段文本中，<mark>重要的关键字</mark>用<mark>标记出来了。</p>

运行结果：

这里的一段文本中，重要的关键字用标记出来了。

2.5 <meter>

<meter> 标签用于表示测量值或分数值的量表。

下面是一个例子：

<p>CPU使用率：<meter value="0.6">60%</meter></p>

运行结果：

CPU使用率：60%

2.6 <progress>

<progress> 标签用于显示操作进度或任务的完成度。通常用于表示长时间运行的操作，如文件上传或下载、软件安装的进度条等。

下面是一个例子：

<p>文件上传进度：<progress value="60" max="100"></progress></p>

运行结果：

文件上传进度：

2.7 <time>

<time> 标签用于表示日期和时间。

下面是一个例子，表示当前时间：

<p>现在的时间是：<time>2021-01-01 12:00:00</time></p>

运行结果：

现在的时间是：2021-01-01 12:00:00

3. 总结

本文介绍了一些不常用的HTML标签，每个标签都有其独特的应用场景。虽然这些标签不是在我们日常的开发中经常使用，但当需要实现一些特定功能的时候，了解这些标签也是很有必要的。