很多時候對有前端工程師來講,頁面效果直接會轉嫁個CSS或JS,對HTML得一些屬性了解得并不充分,接下來介紹一些有意思得HTML屬性。
1)Multiple
顧名思義就是在一個輸入標簽或選擇標簽中可以輸入多個值
<input type="file" multiple>
2)Accept
在<input>包含接受屬性,允許用戶傷上傳指定得文件類型。我們在設置得過程中,需要設置指定得文件格式。并用逗號分開即可。傳遞文件類型包含支持、音頻、視頻、文檔,等自定義文件類型。
<input type="file" accept=".png, .jpg">
3)Contenteditable
這個屬性比較有意思,允許用戶在前端HTML頁面進行對文本得感謝,只對DOM得可見部分進行感謝。
<div contenteditable="true">我可以隨意感謝!</div>
4)Spellcheck
進行拼寫檢查得可感謝段落:
<p contenteditable="true" spellcheck="true">這是一個段落。</p>
5) Translate
Translate告訴瀏覽器是否應該翻譯內容。例如,您可以使用它來防止Google Translate自動嘗試翻譯您得公司或品牌名稱。
<footer><p translate="no">Mark</p></footer>
6) Poster
帶有預覽圖(海報支持)得視頻播放器:
注釋:Internet Explorer 8 以及更早得版本不支持 <video> 標簽。
<video controls poster="/images/mark.gif"> <source src=http://www.iuu7.com/skin/m04blueskin/image/nopic.gif type="video/mp4"> <source src=http://www.iuu7.com/skin/m04blueskin/image/nopic.gif type="video/ogg"> Your browser does not support the video tag.</video>
7) Download
download 屬性規定被下載得超鏈接目標。
在 <a> 標簽中必須設置 href 屬性。
該屬性也可以設置一個值來規定下載文件得名稱。所允許得值沒有限制,瀏覽器將自動檢測正確得文件擴展名并添加到文件 (.img, .pdf, .txt, .html, 等等)。