英文 | 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 type="file/mp4"> <source 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前端开发

web前端开发

一个专业而懂你的前端学习平台，分享你需要的编程开发与职场技能知识，我们坚持，每天学习一点点，每天进步一点点，人生进步一大步！关注我们，与我们一起学习进步，通过学习遇见更好的自己。

115篇原创内容

Official Account