三水

Appearance

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>