你可能不知道的強大 HTML 屬性

有很多事情我們可以簡單地通過使用HTML屬性來完成。本文介紹了這些強大的屬性。

1.Download

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

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

2.ContentEditable

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

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

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>

4.Poster

poster 屬性指定了在視頻下載時或用戶點擊播放按鈕前顯示的圖像。如果不包括這個，將使用視頻的第一幀來代替。

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

5.Hidden

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

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

6.Accept

accept 屬性指定用戶可以從文件輸入對話框中選擇的文件類型的過濾器。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" >