你可能不知道的幾個(gè)常用的 HTML 屬性

contenteditable

contenteditable 表示元素內(nèi)容是否可被用戶編輯梁肿。它可以有以下值：

true 或者空字符串惦费，表示元素是可被編輯的；
false 表示元素不可被編輯。
inherit 表示元素繼承其父元素的可編輯狀態(tài)

<div contenteditable="true">
  <h1>元素可編輯</h1>
</div>
<div contenteditable="">
  <h1>元素可編輯</h1>
</div>
<div contenteditable="false">
  <h1>元素不可編輯</h1>
</div>
<div contenteditable="inherit">
  <h1>元素繼承其父元素的可編輯狀態(tài)</h1>
</div>

dir

dir 屬性規(guī)定元素內(nèi)容的文本方向佃乘。它的取值如下：

ltr —— 默認(rèn)。從左向右的文本方向驹尼。常用于那種從左向右書寫的語言（比如英語）趣避；
rtl —— 從右向左的文本方向。常用于那種從右向左書寫的語言（比如阿拉伯語）新翎；
auto —— 讓瀏覽器根據(jù)內(nèi)容來判斷文本方向程帕。它在解析元素中字符時(shí)會運(yùn)用一個(gè)基本算法，直到發(fā)現(xiàn)一個(gè)具有強(qiáng)方向性的字符地啰，然后將這一方向應(yīng)用于整個(gè)元素愁拭。僅在文本方向未知時(shí)推薦使用。

<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 布爾屬性表示該元素尚未或不再相關(guān)亏吝。

<div hidden>lorem</div>
<div hidden="true">lorem</div>
<div hidden="false">lorem</div>

你可以配合 JS 來改變其值為 true 或 false岭埠，使瀏覽器是否需要渲染此類元素。例如蔚鸥，它可用于隱藏在登錄過程完成之前無法使用的頁面元素惜论。

title

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

<p title="愛在這">愛在這</p>

當(dāng)鼠標(biāo)移動到帶有 title 屬性的元素上時(shí)馆类，提示文本將作為工具提示（tooltip）顯示出來〉可以說乾巧，title 是對該元素的描述和進(jìn)一步的說明。

可查看 HTML title 屬性關(guān)于使用上需要注意的地方预愤。

accesskey

accessKey 屬性規(guī)定激活（使元素獲得焦點(diǎn)）當(dāng)前元素的快捷鍵沟于。

<input accesskey="b" />
<a  accesskey="c">百度一下，你就知道</a>

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

IE鳖粟，Chrome社裆，Safari，Opera 15+：[ALT] + accesskey

Opera prior version 15：[SHIFT] [ESC] + accesskey

Firefox：[ALT] [SHIFT] + accesskey

tabindex

tabindex 屬性規(guī)定當(dāng)使用鍵盤上的 tab 鍵進(jìn)行導(dǎo)航時(shí)元素的順序向图。
在 HTML4.01 中泳秀，tabindex 屬性可用于：<a>标沪，<area>，<button>嗜傅，<input>金句，<object>，<select> 和 <textarea>吕嘀。
在 HTML5 中违寞，tabindex 屬性可用于任何的 HTML 元素（它會驗(yàn)證任何 HTML 元素。但不一定是有用）

<ul>
  <li tabindex="2">HTML</li>
  <li tabindex="1">CSS</li>
  <li tabindex="3">JAVASCRIPT</li>
</ul>

Download

在錨定上使用時(shí)偶房，Download 屬性表示瀏覽器應(yīng)下載錨定指向的資源趁曼，而不是導(dǎo)航到該資源。

<a href="/logo.png" download></a>
<!-- 下載的文件名為 'logo' -->
<a href="/logo.png" download="logo">home</a>

詳細(xì)可查看使用 HTML5 download 屬性創(chuàng)建可下載的鏈接

autocomplete

HTML autocomplete 屬性為 <input> 字段提供了各種各樣的選項(xiàng)棕洋。其作用是向?yàn)g覽器指示值是否應(yīng)在適當(dāng)時(shí)自動填充挡闰。

<input autocomplete="on|off" />

new-password —— 當(dāng)要求用戶創(chuàng)建新密碼（例如，注冊或重置密碼輸入框）時(shí)掰盘，可以使用該值摄悯。此值可確保瀏覽器不會意外填寫現(xiàn)有密碼，同時(shí)還允許瀏覽器建議一個(gè)安全密碼：

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

詳細(xì)可查看 HTML autocomplete 屬性

loading

我們經(jīng)常需要對網(wǎng)站中的圖像進(jìn)行優(yōu)化愧捕，其中一些技術(shù)便是懶加載奢驯，通常是延遲加載初始視口外的圖像，直到我們滾動頁面次绘，達(dá)到圖像與底部視口的交匯處才開始加載圖像瘪阁。

通常情況下，我們都是使用 JS 編寫該方法断盛。而 HTML 標(biāo)準(zhǔn)中已經(jīng)存在 loading 屬性罗洗，可以精確的感知這種行為。

我們只需要在想到延遲加載的圖像上添加 loading="lazy" 屬性即可：

<img src="/img/logo.png" alt="website logo" loading="lazy" />

以下是 Can I Use 給出其的兼容情況：

loading 支持情況

注意：大多數(shù)現(xiàn)代瀏覽器都支持 loading 屬性钢猛，但 Safari 和 IE 11 則不支持該屬性。

reversed 和 start

HTML reversed 屬性可以幫助我們創(chuàng)建一個(gè)降序的編號列表轩缤。此布爾屬性特定于 <ol> 元素命迈，并指定列表元素的順序相反（即從高到低編號）。

對列表順序進(jìn)行降序：

<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> 元素壶愤，它的值為一個(gè)整數(shù)，用于指定列表計(jì)數(shù)器的初始值馏鹤。兩者結(jié)合可以指定任意的以哪個(gè)倒序數(shù)字開始征椒。

例如，如果您想在一個(gè)反向的3項(xiàng)列表中顯示數(shù)字 101 到 99湃累，只需添加 start="101"勃救。

<ol reversed start="101">
  <li>item 101</li>
  <li>item 100</li>
  <li>item 99</li>
</ol>

data-* 和 dataset

data-* 自定義數(shù)據(jù)屬性碍讨，它賦予我們在所有 HTML 元素上嵌入自定義數(shù)據(jù)屬性的能力。

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

然后蒙秒，你可以通過 JS 與 HTML 之間進(jìn)行專有數(shù)據(jù)的交互勃黍。通過 elem.dataset 可以方便的獲取或設(shè)置 data-* 自定義數(shù)據(jù)屬性集。

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)