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 元素。建议使用它们来提高网站的可访问性和搜索引擎优化。
