7个你可能不知道但有用的HTML属性
英文 | https://javascript.plainenglish.io/7-useful-html-attributes-that-you-probably-dont-know-661784fe21e
翻译 | web前端开发
HTML是每个Web开发人员都必须具备的技能。如果你不了解这种标记语言，你就不能称自己为Web开发人员。
你在网络上看到的每个网站都是使用HTML构建的，因为它具有许多有用而强大的功能，作为开发人员，你可以从中受益以创建网页。话虽如此，HTML还具有可以附加到元素或标签的属性，以便向HTML元素添加某些交互功能。
在本文中，我们将为你提供一些你可能尚未听说过的有用的HTML属性的列表。因此，让我们开始吧。
1、accept
如你所知，HTML允许你创建输入，你可以在其中上传文件。除此之外，HTML属性accept还用于上传输入，以指定文件类型或用户可以上传到服务器的唯一格式。
例如，我们可以接受仅上传jpg并上传png到我们的服务器。
示例如下：
<input type =“file” accept =“.jpg，.png” >你可以在Codepen中查看它的线上效果：https://codepen.io/MehdiAoussiad/pen/jOrZVeo
2、multiple
multiple 属性可以附加到标记<input>和<select>中。它允许用户输入多个值。
例如，我们还可以允许用户上载多个文件。
示例如下：
<input type =“ file” multiple />3、contenteditable
该属性contenteditable用于使HTML内容在网页上可编辑。基本上，它允许用户编辑具有contenteditable属性的页面元素。
示例如下：
<div><h1> Employees: </h1><ul contenteditable="true"><li> 1. John </li><li> 2. Mehdi </li><li> 3. James </li></ul></div>
上面的示例使我们可以编辑网页上的列表。
你可以在Codepen中查看它的线上效果：
https://codepen.io/MehdiAoussiad/pen/VwKzmKL
4、Download
download属性在HTML中指定当用户单击链接时将下载链接。此属性允许用户从你的网站下载文件。
示例如下：
<div><a href="index.html" download="fileName">下载此文件</a></ div>
但你只需要在属性上指定文件名，指定download文件的href路径。
你可以在Codepen中查看示例效果：
https://codepen.io/MehdiAoussiad/pen/eYBWopo
5、translate
translate属性用于告诉内容是否应该翻译。可以将其附加到所有HTML标记，因为它是全局属性。
例如，每当将页面翻译成另一种语言时，就可以在文本徽标上使用此属性，以保持相同的品牌名称。
这是代码示例：
<p translation =“ no” > Mehdi </ p>6、poster
Poster属性用于在HTML视频下载时或用户单击播放按钮之前显示图像。
代码示例如下：
<video poster="picture.jpeg" controls><source src="file.mp4" type="file/mp4"><source src="file.ogg" type="file/ogg"></video>
在你单击播放按钮之前，图像将显示为视频的缩略图。
7、pattern
通过使用pattern属性，你可以轻松地将正则表达式添加到表单内的输入元素。
我们还可以将另一个title属性与pattern属性一起使用，以帮助用户在输入上编写正确形式的文本。
代码示例如下：
<form ><label for="input">Country Code:</label><input type="text" id="input" pattern="[A-Za-z]{3}" title="Three letters country code."><input type="submit"></form>
你可以在Codepen中查看线上效果：
https://codepen.io/MehdiAoussiad/pen/xxRaPZW
结论
这些HTML属性非常有用并且非常重要。它们可以使你向HTML元素添加额外的有用功能。这就是为什么我鼓励你从其他资源中了解更多属性的原因。
感谢您阅读本文，希望对你有用。
本文完〜
学习更多技能
请点击下方web前端开发