你可能不知道的強(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" >
最近文章
2021年加速App開發(fā)的8個(gè)最佳跨平臺(tái)框架 提高 VS Code 編輯器性能的 5 個(gè)技巧 使用React 360創(chuàng)建虛擬現(xiàn)實(shí)(VR)體驗(yàn) 自由職業(yè)者開發(fā)定價(jià)指南,自由職業(yè)者應(yīng)按小時(shí)計(jì)費(fèi)嗎? Prisma:適用于Node.js和TypeScript的完整ORM Flutter還是React Native?誰(shuí)是2021年構(gòu)建移動(dòng)應(yīng)用程序的最佳選擇? CSS的:placeholder-shown偽類有什么用? 你應(yīng)該經(jīng)常使用的7種Vue模式 編程日歷小程序,對(duì)小程序云開發(fā)和生成海報(bào)的實(shí)踐 一個(gè)付費(fèi) chrome 插件的一生
評(píng)論
圖片
表情
