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

[[410668]]

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

1.Download

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

复制

<a href="/images/program.jpg" download>

• 1.

2.ContentEditable

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

复制

<div contenteditable="true">   This text can be edited by the user. </div>

• 1.

• 2.

• 3.

3.Multiple

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

复制

<label for="tech">Choose a technology:</label>  <select name="tech" id="tech" multiple>   <option value="angular">Angular</option>   <option value="react">React</option>   <option value="vue">vue</option> </select>  <!-- or --> <input type="file" multiple>

• 1.

• 2.

• 3.

• 4.

• 5.

• 6.

• 7.

• 8.

• 9.

• 10.

4.Poster

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

复制

<video  poster="/gif/poster.gif">   <source src="trailer.mp4" type="video/mp4"> </video>

• 1.

• 2.

• 3.

5.Hidden

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

复制

<p hidden>You won't see me on the browser, only developers can!</p>

• 1.

6.Accept

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

复制

<form action="/...">   <label for="img">Select image:</label>   <input type="file" id="img" name="img" accept="image/*">   <input type="submit"> </form>  <!-- or -->  <input type="file" accept=".jpg, .png" >

• 1.

• 2.

• 3.

• 4.

• 5.

• 6.

• 7.

• 8.

• 9.

本文转载自微信公众号「前端全栈开发者」，可以通过以下二维码关注。转载本文请联系前端全栈开发者公众号。