属性

属性分类

HTML 中每个元素都可以设置属性，有些属性所有元素都能使用，这类属性被称作 全局属性。HTML 的属性不能满足所有开发需求，HTML 也支持自定义一些属性，它们被称作 自定义属性。

全局属性

全局属性非常多，每个属性都在负责各自的领域，下面简单介绍几个目前会用到的属性：

属性	描述
`id`	声明元素在文档中的唯一标识
`title`	鼠标移动到元素上时的提示内容
`tabindex`	设置元素可以获取焦点
`lang`	设置内容的语言

其余全局属性可以点击这里查看。

id

id 属性用来给元素做唯一的标记，id 属性的使用十分广泛，在 HTML 中常被配合锚点使用，在 CSS 与 JavaScript 中也经常用到，甚至一些后端开发者也会用到该属性。它本身没有给元素提供任何功能，只是给元素提供了唯一个标识。

title

title 为元素提供提示，当用户鼠标移动到该元素上时，会弹出一个提示信息。使用得较多的是超链接提示，图片提示，省略提示等等。

比如：

<a href="https://xxwwp.gitee.io/jnet-basic/" title="jnet 课程讲义">jnet basic</a>
<span title="title 为元素提供提示，当用户鼠标移动到该元素上时，会弹出一个提示信息。">title</span>

tabindex

tabindex 属性可以让一个普通的元素获取焦点。

<p>
  <button>先点我，再摁【tab】键</button>
</p>
<p>
  <span tabindex="0">这里可以获取焦点</span>， <span>这里获取不到焦点</span>， <a href="#">超链接也可以获得焦点</a>，
  <button>按钮也可以获得</button>。
</p>

tabindex 的值是数字，不同的值意义不同：

值	描述
`-1`	使用【tab】键切换不到，只能主动点击，才能获取焦点
`0`	可以通过【tab】键切换到
正值	可以通过【tab】键切换到，按照值的顺序切换

下列代码中，选点击 one 文本让其获取焦点，使用【tab】键进行焦点导航时，会按照 tabindex 值的顺序切换焦点。

<p>
  <span tabindex="3">three</span>
  <span tabindex="2">tow</span>
  <span tabindex="1">one</span>
</p>

lang

lang 属性用于设置页面或者元素内容部分的语言，当设置 html 元素的 lang 属性时，它会作用于整个网页，用于设置页面中内容的语言。也可以个单独的一行文本设置语言属性，比如：

<p lang="en">English</p>

自定义属性

元素的属性并没有限制，可以为元素设置任意名称的属性：

<p abc efg="123">text</p>

上面就给 p 元素设置了属性 abc 与 efg，这并不会影响 HTML 的渲染，但是这样的属性名没有规则，如果多人开发，其他程序员不一定能第一时间知道它们是自定义属性，比如：

<p links="text" next="content">文本</p>

上面两个属性 links 或者 next 都不是 HTML 内置的属性，但是它们都是完整的英文单词，会混淆其他开发者。所以在 HTML 中，自定义属性有一个共同的约定，使用 data- 开头，比如：

<p data-links="text" data-next="content">文本</p>

后期维护时，面对成千上万行代码，这种约定写法极大提升了代码可读性。

属性