你可能不知道的几个经常使用的 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)
复制代码