你可能不知道的幾個經常使用的 HTML 屬性

這是我參與更文挑戰的第 9 天，活動詳情查看：更文挑戰

contenteditable

contenteditable 表示元素內容是否可被用戶編輯。它能夠有如下值：

• true 或者空字符串，表示元素是可被編輯的；
• false 表示元素不可被編輯。
• inherit 表示元素繼承其父元素的可編輯狀態

<div contenteditable="true">
  <h1>元素可編輯</h1>
</div>
<div contenteditable="">
  <h1>元素可編輯</h1>
</div>
<div contenteditable="false">
  <h1>元素不可編輯</h1>
</div>
<div contenteditable="inherit">
  <h1>元素繼承其父元素的可編輯狀態</h1>
</div>
複製代碼

dir

dir 屬性規定元素內容的文本方向。它的取值以下：

• ltr —— 默認。從左向右的文本方向。經常使用於那種從左向右書寫的語言（好比英語）；
• rtl —— 從右向左的文本方向。經常使用於那種從右向左書寫的語言（好比阿拉伯語）；
• auto —— 讓瀏覽器根據內容來判斷文本方向。它在解析元素中字符時會運用一個基本算法，直到發現一個具備強方向性的字符，而後將這一方向應用於整個元素。僅在文本方向未知時推薦使用。

<p dir="rtl">This paragraph is in English but incorrectly goes right to left.</p>
<p dir="ltr">This paragraph is in English and correctly goes left to right.</p>
<p>هذه الفقرة باللغة العربية ولكن بشكل خاطئ من اليسار إلى اليمين.</p>
<p dir="auto">هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.</p>
複製代碼

hidden

hidden 布爾屬性表示該元素還沒有或再也不相關。

<div hidden>lorem</div>
<div hidden="true">lorem</div>
<div hidden="false">lorem</div>
複製代碼

你能夠配合 JS 來改變其值爲 true 或 false，使瀏覽器是否須要渲染此類元素。例如，它可用於隱藏在登陸過程完成以前沒法使用的頁面元素。

title

HTML title 包含表示與其所屬元素相關的建議信息的文本。也就是指定元素的提示文本。

<p title="愛在這">愛在這</p>
複製代碼

當鼠標移動到帶有 title 屬性的元素上時，提示文本將做爲工具提示（tooltip）顯示出來。能夠說，title 是對該元素的描述和進一步的說明。

可查看 HTML title 屬性 關於使用上須要注意的地方。

accesskey

accessKey 屬性規定激活（使元素得到焦點）當前元素的快捷鍵。

<input accesskey="b" />
<a href="https://www.baidu.com/" accesskey="c">百度一下，你就知道</a>
複製代碼

注意：不一樣瀏覽器使用的快捷鍵方法不一樣：

• IE，Chrome，Safari，Opera 15+：[ALT] + accesskey
• Opera prior version 15：[SHIFT] [ESC] + accesskey
• Firefox：[ALT] [SHIFT] + accesskey

tabindex

• tabindex 屬性規定當使用鍵盤上的 tab 鍵進行導航時元素的順序。
• 在 HTML4.01 中，tabindex 屬性可用於：<a>，<area>，<button>，<input>，<object>，<select> 和 <textarea>。
• 在 HTML5 中，tabindex 屬性可用於任何的 HTML 元素（它會驗證任何 HTML 元素。但不必定是有用）

<ul>
  <li tabindex="2">HTML</li>
  <li tabindex="1">CSS</li>
  <li tabindex="3">JAVASCRIPT</li>
</ul>
複製代碼

Download

在錨定上使用時，Download 屬性表示瀏覽器應下載錨定指向的資源，而不是導航到該資源。

<a href="/logo.png" download></a>
<!-- 下載的文件名爲 'logo' -->
<a href="/logo.png" download="logo">home</a>
複製代碼

詳細可查看 使用 HTML5 download 屬性建立可下載的連接

autocomplete

HTML autocomplete 屬性爲 <input> 字段提供了各類各樣的選項。其做用是向瀏覽器指示值是否應在適當時自動填充。

<input autocomplete="on|off" />
複製代碼

new-password —— 當要求用戶建立新密碼（例如，註冊或重置密碼輸入框）時，可使用該值。此值可確保瀏覽器不會意外填寫現有密碼，同時還容許瀏覽器建議一個安全密碼：

<form action="signup" method="post">
  <input type="text" autocomplete="username" />
  <input type="password" autocomplete="new-password" />
  <input type="submit" value="註冊" />
  <button type="reset">重置</button>
</form>
複製代碼

詳細可查看 HTML autocomplete 屬性

loading

咱們常常須要對網站中的圖像進行優化，其中一些技術即是懶加載，一般是延遲加載初始視口外的圖像，直到咱們滾動頁面，達到圖像與底部視口的交匯處纔開始加載圖像。

一般狀況下，咱們都是使用 JS 編寫該方法。而 HTML 標準中已經存在 loading 屬性，能夠精確的感知這種行爲。

咱們只須要在想到延遲加載的圖像上添加 loading="lazy" 屬性便可：

<img src="/img/logo.png" alt="website logo" loading="lazy" />
複製代碼

如下是 Can I Use 給出其的兼容狀況：

注意：大多數現代瀏覽器都支持 loading 屬性，但 Safari 和 IE 11 則不支持該屬性。

reversed 和 start

HTML reversed 屬性能夠幫助咱們建立一個降序的編號列表。此布爾屬性特定於 <ol> 元素，並指定列表元素的順序相反（即從高到低編號）。

對列表順序進行降序：

<ol reversed>
  <li>item 3</li>
  <li>item 2</li>
  <li>item 1</li>
</ol>
<!-- 3. item 3 2. item 2 1. item 1 -->
複製代碼

start 屬性和 reversed 同樣，都用於有序列表 <ol> 元素，它的值爲一個整數，用於指定列表計數器的初始值。二者結合能夠指定任意的以哪一個倒序數字開始。

例如，若是您想在一個反向的3項列表中顯示數字 101 到 99，只需添加 start="101"。

<ol reversed start="101">
  <li>item 101</li>
  <li>item 100</li>
  <li>item 99</li>
</ol>
複製代碼

data-* 和 dataset

data-* 自定義數據屬性，它賦予咱們在全部 HTML 元素上嵌入自定義數據屬性的能力。

<div class="avatar" data-user="IU" data-avatar-type="circle" data-animateSpeed>
  <img src="avatar.png" alt="avatar" />
</div>
複製代碼

而後，你能夠經過 JS 與 HTML 之間進行專有數據的交互。經過 elem.dataset 能夠方便的獲取或設置 data-* 自定義數據屬性集。

const avatar = document.querySelector('.avatar')

console.log(avatar.dataset.user === 'IU') // true
console.log(avatar.dataset.avatarType === 'circle') // true
avatar.dataset.animateSpeed = 4000
    
// 添加不存在的屬性
avatar.dataset.id = 'user'
console.log(avatar.dataset)
複製代碼