你可能不知道的强大 HTML 属性

有很多事情我们可以简单地通过使用HTML属性来完成。本文介绍了这些强大的属性。

1.Download

download 属性指定了当用户单击超链接时将下载目标(在 href 属性中指定的文件)。

<ahref="/images/program.jpg"download>

2.ContentEditable

在HTML中，任何元素都可以编辑。使用一些JavaScript事件处理程序，你可以把你的网页转换成一个完整而快速的富文本编辑器。当一个HTML元素的 contenteditable 设置为 true 时，document.execCommand() 方法就可用了。这让你可以运行命令来操作可编辑区域的内容。

<divcontenteditable="true">
Thistextcanbeeditedbytheuser.
</div>

3.Multiple

multiple 属性是一个布尔属性。当存在时，它指定用户可以一次选择多个选项。

<labelfor="tech">Chooseatechnology:</label>

<selectname="tech"id="tech"multiple>
<optionvalue="angular">Angular</option>
<optionvalue="react">React</option>
<optionvalue="vue">vue</option>
</select>

<!--or-->
<inputtype="file"multiple>

4.Poster

poster 属性指定了在视频下载时或用户点击播放按钮前显示的图像。如果不包括这个，将使用视频的第一帧来代替。

<videoposter="/gif/poster.gif">
<sourcesrc="trailer.mp4"type="video/mp4">
</video>

5.Hidden

hidden 属性是一个布尔属性。如果存在，浏览器将不会显示指定了 hidden 属性的元素。

<phidden>Youwon'tseemeonthebrowser,onlydeveloperscan!</p>

6.Accept

accept 属性指定用户可以从文件输入对话框中选择的文件类型的过滤器。accept 属性只能与 一起使用。

<formaction="/...">
<labelfor="img">Selectimage:</label>
<inputtype="file"id="img"name="img"accept="image/*">
<inputtype="submit">
</form>

<!--or-->

<inputtype="file"accept=".jpg,.png">