OneYoung

Appearance

本章梳理一些常用的 HTML 标签上可设置的属性。

暂不包含部分废弃或者没有利用价值的属性。

这里的全局属性指的是所有 HTML 标签都可以添加的属性。

即使属性可能对某些标签不起作用。

id ​

元素的唯一标识符。该标识符在整个文档中必须是唯一的。

TIP

这里的唯一指的是最优解。

你当然可以给许多元素设置相同的 id 值，浏览器并不会报错。

但当你想要利用 document.getElementById() 方法来获取某一个目标元素时，可能并不会得到你想要的结果。

class ​

元素的 class 名。

style ​

设置元素的行内样式。

title ​

设置元素的提示信息。

这些提示信息，通常会在鼠标处于元素上才会展示。

譬如:

html
<p title="Hello world">将鼠标置于该文本之上，会展示"Hello world"的提示信息。</p>

将鼠标置于该文本之上，会展示"Hello world"的提示信息。

contenteditable ​

表示元素是否可被用户编辑。 如果可以，浏览器会调整元素的部件（widget）以允许编辑。

譬如一个可编辑的 div:

html
<div contenteditable style="width: 300px;height: 20px;border: 1px solid #ccc;">可编辑的div</div>
可编辑的div

TIP

有一说，contenteditable 是一个枚举属性，而非布尔属性。

必须显式的设置其值为 true、false 或空字符串中的一个。而不能简写为 <div contenteditable>value</div>。

但笔者在上例中，发现 chrome 会自动将 contenteditable 修改为 contenteditable="true"。

data-* ​

元素的自定义数据属性。

它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力，并可以通过脚本 (一般指 JavaScript) 与 HTML 之间进行专有数据的交换。

draggable ​

元素是否可以被拖动。

譬如一个可以被拖动的 div:

html
<div draggable style="width: 300px;height: 30px;border: 1px solid #000;">可以被拖动</div>
可以被拖动

TIP

img 等部分元素本身就可以被拖动。

部分不可拖动元素添加上该属性之后，才会变成可拖动。

hidden ​

隐藏元素。相当于 display: none;

譬如一个被隐藏的 div:

html
<div hidden style="width: 300px;height: 30px;border: 1px solid #000;">元素已隐藏</div>

inputmode ​

键盘的输入模式。

常用于 input 元素。但当其他不可编辑元素，设置了 contenteditable 时，也可以利用该属性。

它默认值是 text，表明使用本地的标准文本输入键盘。

它具有以下可以设定的值：

  1. none: 无虚拟键盘。在应用程序或者站点需要实现自己的键盘输入控件时很有用。
  2. text: 使用用户本地区域设置的标准文本输入键盘。
  3. decimal: 小数输入键盘，包含数字和分隔符（通常是 . 或者 ,），设备可能也可能不显示减号键。
  4. numeric: 数字输入键盘，所需要的就是 0 到 9 的数字，设备可能也可能不显示减号键。
  5. tel: 电话输入键盘，包含 0 到 9 的数字、星号（*）和井号（#）键。
  6. search: 为搜索输入优化的虚拟键盘，比如，返回键可能被重新标记为搜索，也可能还有其他的优化。
  7. email: 为邮件地址输入优化的虚拟键盘，通常包含 @ 符号和其他优化。
  8. url: 为网址输入优化的虚拟键盘，比如，/ 键会更加明显、历史记录访问等。

譬如一个支持小数输入键盘的 input 框：

html
<input inputmode="decimal" />

又或者是一个支持电话输入键盘的可编辑 div:

html
<div inputmode="tel" contenteditable style="width: 300px;height: 20px;border: 1px solid #ccc;">可编辑的div</div>
可编辑的div

TIP

推荐在移动端测试上述键盘效果。

spellcheck ​

是否检测元素存在拼写错误。

有拼写错误的情况下，chrome 会在文字下方出现红色虚线。

它通常用于 input 元素或者带有 contenteditable 的不可编辑元素。

譬如一个可编辑的 div:

html
<div spellcheck contenteditable style="width: 300px;height: 20px;border: 1px solid #ccc;">helloo world</div>
helloo world

is ​

允许指定标准 HTML 元素应该像已注册的自定义内置元素一样。

MDN链接

HTML5微数据相关属性 ​

HTML5 微数据规范是一种标记内容以描述特定类型的信息，每种信息都有描述特定类型的项。

我们常用的 HTML 标签（如 p、h1、header、footer 等），在某种程度上都是为了方便机器的识别，方便搜索引擎的 SEO 优化。

而 HTML5 微数据规范是为了允许开发者在网页元素中嵌入自定义属性，以便更加精细的优化那些已经在 DOM 中的数据的语义性。

HTML5 微数据涉及到的属性有：

  1. itemscope
  2. itemtype
  3. itemprop
  4. itemref
  5. itemid

该系列属性是WHATWG HTML Microdata feature的规范。

另外关于该系列属性的介绍，推荐该文章。

笔者暂时不作过多妄谈。