2023 年使用的 10 大 html 元素开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 19

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 19 天，点击查看活动详情 HTML 是一种功能强大的标记语言，可用于为我们的 Web 应用程序提供结构并提供强大的可访问性优势，但前提是使用得当。

在本文中，我们将发现您可能不知道的十大 HTML 元素，但它们可以帮助您创建更易访问且结构合理的 Web 应用程序。

Translate

HTML 中的 translate 属性用于指定元素的内容是否被翻译。此属性是 HTML5 中的新属性。translate 属性是全局属性的一部分，可用于任何 HTML 元素。

句法：

<element translate = "yes|no">

属性值：translate 属性包含下面列出的两个值：

yes：该属性用于指定元素的内容可以被翻译。
no：该属性用于指定元素的内容不能被翻译。

例子：

<!DOCTYPE html>
<html>
    <head>
      <title>translate attribute</title>
        <style>
          </>
        </style>
    </head>
        <body>
          <h2><strong >translate attribute</strong></h2>
          <p translate="no">Don't translate this!</p>
          <p translate="yes">This tag can be translated to any language.</p>
        </body>
</html>

在上面的示例中，我们指定paragraph tag 不应翻译第一个。

Map

该<map>标签用于定义图像映射。图像映射是具有可点击区域的图像。元素
的必需名称属性与usemap 属性相关联，并在图像和地图之间创建关系。该元素包含许多元素，这些元素定义了图像映射中的可点击区域。<map>``<img>'s
<map>``<area>

该<map>标签支持HTML中的全局属性，也支持HTML中的事件属性。

句法：

<map name=""> </map>

例子：

<!DOCTYPE html>
<html>
 <head>
    <title>
        HTML | <map> Tag
    </title>
</head>
  <body>

<h1>The map and area elements</h1>

<p>Click on the sun or on one of the planets to watch it closer:</p>

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

</body>
</html>

Draggable

此 draggable 属性用于指定元素是否可拖动。链接和图像默认是可拖动的。draggable 属性常用于拖放操作。
该draggable属性支持 HTML 中的全局属性。

句法：

    <element draggable = "true|false|auto">

draggable可以有以下值：

true：元素可以被拖动
false：无法拖动元素。
auto：此值表示使用默认浏览器。

例子：

对于这个例子，我们将创建一个可拖动的 div 元素：

步骤 1) 添加 HTML：

    <!-- Draggable DIV -->
     <div id="mydiv">
      <!-- Include a header DIV with the same name as the draggable DIV, followed by "header" -->
       <div id="mydivheader">Click here to move</div>
      <p>Move</p>
      <p>this</p>
      <p>DIV</p>
    </div>

步骤 2) 添加 CSS：

    #mydiv {
      position: absolute;
      z-index: 9;
      background-color: #f1f1f1;
      border: 1px solid #d3d3d3;
      text-align: center;
    }

    #mydivheader {
      padding: 10px;
      cursor: move;
      z-index: 10;
      background-color: #2196F3;
      color: #fff;
    }

唯一重要的风格是position: absolute，其余的由你决定。

步骤 3) 添加 JavaScript：

    // Make the DIV element draggable:
    dragElement(document.getElementById("mydiv"));

    function dragElement(elmnt) {
      var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
      if (document.getElementById(elmnt.id + "header")) {
        // if present, the header is where you move the DIV from:
        document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
      } else {
        // otherwise, move the DIV from anywhere inside the DIV:
        elmnt.onmousedown = dragMouseDown;
      }

      function dragMouseDown(e) {
        e = e || window.event;
        e.preventDefault();
        // get the mouse cursor position at startup:
        pos3 = e.clientX;
        pos4 = e.clientY;
        document.onmouseup = closeDragElement;
        // call a function whenever the cursor moves:
        document.onmousemove = elementDrag;
      }

      function elementDrag(e) {
        e = e || window.event;
        e.preventDefault();
        // calculate the new cursor position:
        pos1 = pos3 - e.clientX;
        pos2 = pos4 - e.clientY;
        pos3 = e.clientX;
        pos4 = e.clientY;
        // set the element's new position:
        elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
        elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
      }

      function closeDragElement() {
        // stop moving when mouse button is released:
        document.onmouseup = null;
        document.onmousemove = null;
      }
    }

整体代码和输出将如下所示：

capture

该capture属性指定（可选）应捕获新文件，以及应使用哪个设备来捕获该accept属性定义的类型的新媒体。capture文件输入类型支持该属性。

值包括user和environment。

该capture属性将一个字符串作为其值，该字符串指定用于捕获图像或视频数据的相机（如果该accept属性指示输入应属于其中一种类型）。

注意：Capture 以前是一个布尔属性，如果存在，则请求使用设备的媒体捕获设备（例如相机或麦克风）而不是请求文件输入。

例子：

当设置为文件输入类型时，带有麦克风和摄像头的操作系统将显示一个用户界面，允许选择现有文件或创建新文件：

    <p>
      <label for="soundFile">What does your voice sound like?:</label>
      <input type="file" id="soundFile" capture="user" accept="audio/*">
      </p>
      <p>
      <label for="videoFile">Upload a video:</label>
      <input type="file" id="videoFile" capture="environment" accept="video/*">
      </p>
      <p>
      <label for="imageFile">Upload a photo of yourself:</label>
      <input type="file" id="imageFile" capture="user" accept="image/*">
      </p>

整体代码和输出将如下所示：

拼写检查

HTML 中的拼写检查功能用于检测文本字段中的语法或拼写错误。
可以使用拼写检查属性将拼写检查功能应用于 HTML 表单。spellcheck 属性是一个枚举属性，它定义是否检查 HTML 元素是否有错误。它可以与inputHTMLtextarea中的字段一起使用。

它可能具有以下值：

true: 这表示如果可能的话，应该检查元素的拼写错误；
false: 表示不应检查元素的拼写错误。

未设置该属性时，取默认值，一般由元素类型和浏览器定义。该值也可以从祖先元素继承，这意味着仅当其最近的祖先的拼写检查状态为时，才会检查元素内容是否存在拼写错误true。

句法：

html 中输入字段中拼写检查属性的语法：

    <input type="text" spellcheck="value">

在 html 的文本区域字段中进行拼写检查的语法：

    <textarea type="text" spellcheck="value"></textarea>

在上面的语法中，分配给拼写检查的值将定义是否在元素上启用拼写检查。

在 HTML 表单中启用拼写检查

要在 HTML 表单中启用拼写检查，拼写检查属性设置为true.
下面是一个启用了拼写检查的示例 HTML 程序：

    <!DOCTYPE html>
    <html>
       <body>
            <h3>Example of Enabling SpellCheck</h3>
           <form>
                <p>
                    <input type="text" spellcheck="true">
                </p>

                <p>
                    <textarea spellcheck="true"></textarea>
                </p>
                <button type="reset">Reset</button>
            </form>    
        </body>
    </html>

输出：

请注意，当我们输入inputandtextarea box时，它正在检查拼写，因此将“loleem ippssun”和“dulor cit amet”标记为拼写错误。

在 HTML 表单中禁用拼写检查

要在 HTML 表单中禁用拼写检查，将拼写检查属性设置为false.
下面是禁用拼写检查的示例 HTML 程序：

    <!DOCTYPE html>
    <html>
       <body>
            <h3>Example of Disabling SpellCheck</h3>
           <form>
                <p>
                    <input type="text" spellcheck="false">
                </p>

                <p>
                    <textarea spellcheck="false"></textarea>
                </p>
                <button type="reset">Reset</button>
            </form>    
        </body>
    </html>

输出：

请注意，当我们输入inputandtextarea box时，它没有检查拼写，因此忽略了拼写错误的“loleem ippssun”和“dulor cit amet”。

accept

accept 属性指定服务器接受的文件类型（可以通过文件上传提交）。

此属性指定服务器接受的文件类型。此属性只能与元素一起使用。此属性不用于验证工具，因为文件上传应在服务器上进行验证。

句法：

    <input accept = "file_extension">

属性值：

file_extension ：它指定用户可以选择的文件扩展名，如 .gif、.jpg、.png、.doc）。
audio/* : 用户可以选择所有的声音文件。
video/* : 用户可以选择所有的视频文件。
image/* ：有效的媒体类型，没有参数。查看 IANA Media Types以获得完整的标准媒体类型列表
media_type ：没有参数的有效媒体类型。

例子：

在这个例子中，我们将指定服务器只接受文件上传中的图像文件：

    <!DOCTYPE html>
    <html>
        <head>
            <title>accept attribute</title>
        </head>
        <body>
            <h2>Accept attribute</h2>
            <form action=" ">
            <label for="img">Select image:</label>
            <input type="file" name="img" accept="image/*">
            <input type="submit">
            </form>
        </body>
    </html>

输出：

注意：该accept属性只能与一起使用<input type="file">。

下载

该download属性指定href当用户单击超链接时将下载目标（属性中指定的文件）。

该download属性的可选值将是文件下载后的新名称。它用于<a>和<area>元素。

允许的值没有限制，浏览器会自动检测正确的文件扩展名并将其添加到文件中（.img、.pdf、.txt、.html 等）。
如果省略该值，则使用原始文件名。

句法：

    <element download="filename">

属性值：

它包含可选的单个值“文件名”。它指定下载文件的新文件名。

download您可能会看到如下所示的属性实现示例：

    <a href="document.pdf" download>Download PDF</a>

如果没有download上面的属性，那么浏览器将导航到该document.pdf位置并在浏览器中打开文件。

当您指定download属性时，计算机将：

将文件保存在浏览器设置中定义的默认下载位置
或者下载前问你把文件保存在哪里

该download属性还接受一个值，您可以将其指定为文件名别名：

    <a href="document.pdf" download="HTML5_download.pdf">Download PDF</a>

注意：当您下载document.pdf文件时，浏览器会自动将文件重命名为download属性值。

项目范围

HTMLitemscope属性item types用于确保包含在块中的 HTML 是关于特定项目的。为任何元素定义itemscope属性都会创建一个新项，这会产生许多与该元素关联的名称-值对。

相关属性itemtype用于指定描述项目及其属性上下文的词汇表（例如投资组合站点）的有效 URL。

句法：

    <element itemscope></element>

当您itemscope为元素指定属性时，将创建一个新项。该项目由一组名称-值对组成。对于具有itemscope属性和itemtype属性的元素，您还可以指定id属性。您可以使用该id属性为新项目设置全局标识符。全局标识符允许该项目与 Web 页面上的其他项目相关联。

例子：

表示投资组合的结构化数据：

以下示例指定了itemtype并指定了四个相关itemprop属性。

	物品种类	文件夹
	道具	（道具名称）	（道具价值）
	道具	开发商	约翰保罗埃兹
项目范围	道具	堆	前端开发
	道具	名称	头像
	道具	文件夹	访问投资组合

HTML

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>HTML itemscope Attribute</title>
    </head>
    <body>
        <div itemscope itemtype="https://johnpauleze.netlify.app">
            <h1 itemprop="name">Avatar</h1>
            <span>Developer: <span itemprop="developer">Johnpaul Eze</span> (born june 26th)</span>
            <span itemprop="stack">Frontend dev</span>
            <a href="https://johnpauleze.netlify.app" itemprop="Portfolio">Visit Portfolio</a>
          </div>

    </body>
    </html>

输出：

在此处查找有关itemprop属性的更多信息。

itemtype

itemtype 属性指定 URL，但 URL 不与任何资源相关联，而是被浏览器用作标识符。itemtype 属性只能在那些包含 itemscope 属性的元素上指定，否则它将无法正确执行。itemtype URL 中使用的项目类型必须是 schema.org 提供的规范中定义的那些类型。一些引用 schema.org 上的微数据的浏览器会在网页上查找特定资源，并且这些 itemtype 和 itemscope 属性最常被使用。itemtype 属性的值应包含一组无序的唯一标记，这些标记区分大小写，指定每个标记都包含绝对且有效的 URL。属性的值应至少包含 1 个标记。

句法：

    <div itemscope itemtype="URL">
        <span itemprop="item1">item name</span>
        <span itemprop="item2">item name</span>
    </div>

注意：itemtype必须是 URL，或者您也可以使用我们在以下示例中使用的 URN（统一资源名称）。

属性值：该属性必须包含一个有效的 URL，该 URL 不包含前导和尾随空格。

支持的标签：
<div>和<span>标签。

例子：

此示例描述了itemtypeHTML 中属性的实现。

HTML

    <!DOCTYPE html>
    <html>
    <head>
        <title>HTML itemtype attribute</title>
    </head>
    <body>
        <h1>FreeCodeCamp</h1>
        <h4>Tutorials and Courses</h4>
        <div itemscope itemtype=
            "https://www.freecodecamp.org/">
            <span itemprop="description">
                FreeCodeCamp is a portal for developers.
                It has tutorials on various topics.
            </span>
            <br>
            Course: <span itemprop="course">JavaScript</span>
            <br>
            Tutorial: <span itemprop="tutorial">React</span>
            <br>
        </div>
    </body>
    </html>

输出：

在此处查找有关itemprop属性的更多信息。

itemtype

HTML 中的 dropzone 属性用于指定拖动的数据在放置在任何元素上时是否被复制、移动或链接。此属性是 HTML5 中的新属性。

句法：

     <element dropzone = "copy | move | link">

属性值：

复制：拖放数据将导致拖动数据的副本。
移动：放下数据将导致拖动的数据移动到新位置。
链接：删除数据将导致指向原始数据的链接

例子：

    <!DOCTYPE html>
    <html>
    <head>
        <title>dropzone</title>
    </head>
    <body draggable="true">
        <h2> dropzone attribute</h2>
        <div dropzone="copy">DIV</div>
        <div dropzone="move">DIV1</div>
        <div dropzone="copy">DIV2</div>
    </body>
    </html>

注意：流行的浏览器不支持 dropzone 属性。

结论：

在本文中，我们重点介绍了可能对软件开发初学者有用的前 10 个 HTML 元素。建议使用它们来提高网站的可访问性和搜索引擎优化。