你可能不知道的 7 个有用的 HTML 属性

HTML 是 Web 开发的基石。然而，许多有抱负的程序员仅仅浮光掠影，就转向了 CSS、JS 等，错失了它的全部潜力。

这是许多初学者不知道但可能有帮助的 HTML 属性列表。

如果您想在列表中添加任何其他属性，请在评论中告诉我，我会检查一下；）

1）多重

 
属性multiple允许用户在 上输入多个值<input>。它是一个布尔属性，适用于文件或电子邮件输入类型以及<select>元素。

对于电子邮件输入，当且仅当指定了 multiple 属性时，值才可以是逗号分隔的电子邮件地址列表。列表中的每个地址中的任何空格都会被删除。

对于文件输入，用户可以像平常一样选择多个文件（按住 Shift 或 Crtl）。

<input type="file" multiple>

2）接受

 
该<input>元素具有accept允许您指定用户可以上传的文件类型的属性。

您需要向其传递一个包含以逗号分隔的唯一文件类型说明符列表的字符串。

您还可以使用它来仅指定音频、图像或视频格式。

<input type="file" accept=".png, .jpg">

3）内容可编辑

 
contenteditable是一个全局属性（所有 HTML 元素都通用），用于控制 HTML 内容是否可由用户编辑。不过，请谨慎处理仅对可见内容进行的更改，而非对 DOM 内容的更改。

<div contenteditable="true">I'm a cool editable div ;)</div>

4）拼写检查

 
这spellcheck是另一个全局属性，可用于检查 HTML 元素（例如输入字段和其他可编辑元素）的拼写和语法。

注意：通常不会检查不可编辑元素的拼写错误，即使 spellcheck 属性设置为 true 并且浏览器支持拼写检查。

<p contenteditable="true" spellcheck="true">
Thanks furr checkinng my speling :)</p>

5）翻译

 
translate告诉浏览器是否应该翻译内容。

例如，您可以使用它来阻止 Google 翻译自动尝试翻译您公司或品牌的名称。

<footer><p translate="no">LearnPine</p></footer>

6）海报

 
使用该poster属性指定在视频下载时或直到用户点击播放按钮时显示的图像。

如果未指定图像，则在第一帧可用之前不会显示任何内容，然后第一帧将显示为海报帧。

<video controls 
src="https://bit.ly/3nWh78w"
poster="posterImage.png">
</video>

7）下载

 
使用download与<a>元素结合的属性来指示浏览器下载 URL 而不是导航到该 URL，这样用户就会被提示将其保存为本地文件。

您还可以指定文件名。

<a href="index.html" download="fileName">Download me :)</a>

关于我，让我们联系吧！👋👩‍💻

 
我是一个充满热情的学习者，喜欢分享我所学的知识。我在这里 免费直播编程👉，并且在我的 Twitter 账号上分享编程技巧。如果你想了解更多技巧，可以关注我😁