[[410668]]

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

1.Download

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

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

2.ContentEditable

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

<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 屬性只能與 一起使用。

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

本文轉載自微信公眾號「前端全棧開發者」，可以通過以下二維碼關注。轉載本文請聯系前端全棧開發者公眾號。