你可能不知道的強(qiáng)大 HTML 屬性

有很多事情我們可以簡(jiǎn)單地通過(guò)使用HTML屬性來(lái)完成。本文介紹了這些強(qiáng)大的屬性。

1.Download

download 屬性指定了當(dāng)用戶單擊超鏈接時(shí)將下載目標(biāo)(在 href 屬性中指定的文件)。

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

2.ContentEditable

在HTML中，任何元素都可以編輯。使用一些JavaScript事件處理程序，你可以把你的網(wǎng)頁(yè)轉(zhuǎn)換成一個(gè)完整而快速的富文本編輯器。當(dāng)一個(gè)HTML元素的 contenteditable 設(shè)置為 true 時(shí)，document.execCommand() 方法就可用了。這讓你可以運(yùn)行命令來(lái)操作可編輯區(qū)域的內(nèi)容。

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

3.Multiple

multiple 屬性是一個(gè)布爾屬性。當(dāng)存在時(shí)，它指定用戶可以一次選擇多個(gè)選項(xiàng)。

<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>

4.Poster

poster 屬性指定了在視頻下載時(shí)或用戶點(diǎn)擊播放按鈕前顯示的圖像。如果不包括這個(gè)，將使用視頻的第一幀來(lái)代替。

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

5.Hidden

hidden 屬性是一個(gè)布爾屬性。如果存在，瀏覽器將不會(huì)顯示指定了 hidden 屬性的元素。

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

6.Accept

accept 屬性指定用戶可以從文件輸入對(duì)話框中選擇的文件類型的過(guò)濾器。accept 屬性只能與 <input type="file"> 一起使用。

<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" >