accesskey
描述
为当前元素生成快捷键
示例
HTML
<p>
If you need to relax, press the <strong><u>S</u></strong
>tress reliever!
</p>
<button accesskey="s">Stress reliever</button>
autocapitalize
描述
控制用户输入/编辑文本输入时文本输入是否自动大写
值
off
/none
没有应用自动大写on
/sentences
每个句子的第一个字母默认为大写字母words
每个单词的第一个字母默认为大写字母characters
所有的字母都默认为大写
autofocus
描述
元素被聚焦
值
示例
HTML
<input name="q" autofocus />
class
描述
全局属性 class 的值是一个以空格分隔的元素的类名(classes)列表,它允许 CSS 和 Javascript 通过类选择器 (class selectors) 或 DOM 方法 ( document.getElementsByClassName) 来选择和访问特定的元素。
值
- 类名列表
示例
HTML
<p>Narrator: This is the beginning of the play.</p>
<p class="note editorial">Above point sounds a bit obvious. Remove/rewrite?</p>
<p>Narrator: I must warn you now folks that this beginning is very exciting.</p>
<p class="note">[Lights go up and wind blows; Caspian enters stage right]</p>
CSS
.note {
font-style: italic;
font-weight: bold;
}
.editorial {
background: rgb(255, 0, 0, 0.25);
padding: 10px;
}
.editorial:before {
content: 'Editor: ';
}
contenteditable
描述
元素是否可被用户编辑
值
true
|空字符串
元素可被编辑false
不可编辑plaintext-only
原始文本可被编辑,富文本格式会被禁用
示例
HTML
<label contenteditable>Example Label</label>
data-*
描述
自定义数据
值
示例
HTML
<img class="spaceship cruiserX3" src="shipX3.png"
data-ship-id="324" data-weapons="laserI laserII" data-shields="72%"
data-x="414354" data-y="85160" data-z="31940"
onclick="spaceships[this.dataset.shipId].blasted()">
</img>
dir
描述
指示元素中文本方向
值
ltr
左到右rtl
右到左auto
用户代理决定
draggable
描述
用于标识元素是否允许使用浏览器原生行为或 HTML 拖放操作 API 拖动
值
true
元素可被拖动false
元素不可被拖动
enterkeyhint
描述
虚拟键盘上的回车键呈现什么操作标签(或图标)
值
enter
插入新行done
关闭虚拟键盘go
next
下一个输入previous
上一个输入search
搜索send
示例
HTML
<input enterkeyhint="go" />
<p contenteditable enterkeyhint="go">https://example.org</p>
hidden
描述
表示一个元素尚未或者不再相关
id
描述
全文档唯一的标识符
示例
HTML
<p id="exciting">The most exciting paragraph on the page. One of a kind!</p>
inert
描述
忽略该元素
inputmode
描述
提供了用户在编辑元素或其内容时可能输入的数据类型的提示
值
none
无虚拟键盘text
使用用户本地区域设置的标准文本输入键盘decimal
小数键盘numeric
数字输入键盘tel
电话输入键盘search
为搜索输入优化的虚拟键盘email
为邮件地址输入优化的虚拟键盘url
为网址输入优化的虚拟键盘
is
描述
指定标准 HTML 元素像定义的内置元素一样工作
值
示例
HTML
<p is="word-count"></p>
js
// Create a class for the element
class WordCount extends HTMLParagraphElement {
constructor() {
// Always call super first in constructor
super();
// Constructor contents ommitted for brevity
...
}
}
// Define the new element
customElements.define('word-count', WordCount, { extends: 'p' });
itemid
描述
全局唯一标识符,itemid 只能为拥有 itemscope 的元素指定
itemprop
描述
向一个物体中添加属性
itemref
描述
示例
HTML
<div itemscope id="amanda" itemref="a b"></div>
<p id="a">Name: <span itemprop="name">Amanda</span></p>
<div id="b" itemprop="band" itemscope itemref="c"></div>
<div id="c">
<p>Band: <span itemprop="name">Jazz Band</span></p>
<p>Size: <span itemprop="size">12</span> players</p>
</div>
itemscope
描述
它定义了一个与元数据关联的数据项
值
示例
HTML
<div itemscope itemtype="http://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<span
>Director: <span itemprop="director">James Cameron</span> (born August 16,
1954)</span
>
<span itemprop="genre">Science fiction</span>
<a href="https://youtu.be/0AY1XIkX7bY" itemprop="trailer">Trailer</a>
</div>
itemtype
描述
指定了词汇的URL,用于定义数据结构中的itemprop
值
示例
HTML
<div itemscope itemtype="http://schema.org/Product">
<span itemprop="brand">ACME</span>
<span itemprop="name">Executive Anvil</span>
</div>
lang
描述
设置元素的语言
值
示例
HTML
<p>This paragraph is English, but the language is not specifically defined.</p>
<p lang="en-GB">This paragraph is defined as British English.</p>
<p lang="fr">Ce paragraphe est défini en français.</p>
CSS
p::before {
padding-right: 5px;
}
[lang='en-GB']::before {
content: '(In British English) ';
}
[lang='fr']::before {
content: '(In French) ';
}
nonce
描述
nonce 属性可用于允许对特定资源的获取,如内联脚本或样式元素
part
描述
part 全局属性 包含一个以元素中 part 属性名称组成的列表,该列表以空格分隔
popover
描述
用来指定一个元素为弹出框元素
示例
HTML
<button popovertarget="my-popover">打开弹出框</button>
<div popover id="my-popover">各位好!</div>
slot
描述
slot 全局属性 将一个 shadow DOM shadow 树中的槽分配给一个元素
spellcheck
描述
spellcheck 是一个枚举属性,定义是否可以检查元素的拼写错误。此属性仅仅是浏览器的一个提示:浏览器并不会强制去检查拼写错误
值
示例
HTML
<textarea spellcheck="true">This exampull will be checkd fur spellung when you try to edit it.</textarea>
style
描述
应用到元素的 CSS 样式声明
tabindex
描述
tabindex 指示其元素是否可以聚焦,以及它是否/在何处参与顺序键盘导航
值
示例
HTML
<p>Click anywhere in this pane, then try tabbing through the elements.</p>
<label>First in tab order:<input type="text" /></label>
<div tabindex="0">Tabbable due to tabindex.</div>
<div>Not tabbable: no tabindex.</div>
<label>Third in tab order:<input type="text" /></label>
CSS
p {
font-style: italic;
font-weight: bold;
}
div,
label {
display: block;
letter-spacing: 0.5px;
margin-bottom: 1rem;
}
div:focus {
font-weight: bold;
}
title
描述
提示信息
示例
HTML
<p title="CoolTip">鼠标在这里停留会显示“CoolTip”。</p>
</div>
tanslate
描述
定义元素是否可翻译,主要用于自动翻译
值
yes
|空字符串
no
示例
HTML
<footer>
<small>© 2020 <span translate="no">BrandName</span></small>
</footer>