全局属性
auttofocus
autofocus 属性规定当页面加载时,元素应该自动获得焦点。
<input name="q" autofocus />
class
一个以空格分隔的元素的类型列表,用于规定元素的类型。
contenteditable
规定元素是够可以被用户编辑。
<blockquote contenteditable="true">
<p>Edit this content to add your own quote</p>
</blockquote>
<cite contenteditable="true">-- Write your own name here</cite>
属性:
- true
- false
- plaintext-only 表示元素的原始文本是可编辑的,但是富文本格式会被禁用。
可以使用caret-color 属性设置用于绘制文本插入caret的颜色。
data-*
被称为自定义数据属性的属性。它赋予我们在所有HTML元素上嵌入自定义数据属性的能力。并可以通过脚本在html和dom之际爱你进行专有数据的交换。
<ul>
<li data-id="10784">Jason Walters, 003: Found dead in "A View to a Kill".</li>
<li data-id="97865">Alex Trevelyan, 006: Agent turned terrorist leader; James' nemesis in "Goldeneye".</li>
<li data-id="45732">James Bond, 007: The main man; shaken but not stirred.</li>
</ul>
h1 {
margin: 0;
}
ul {
margin: 10px 0 0;
}
li {
position: relative;
width: 200px;
padding-bottom: 10px;
}
li:after {
content: 'Data ID: ' attr(data-id);
position: absolute;
top: -22px;
left: 10px;
background: black;
color: white;
padding: 2px;
border: 1px solid #eee;
opacity: 0;
transition: 0.5s opacity;
}
li:hover:after {
opacity: 1;
}
dir
规定元素中内容的文本方向。
- ltr:从左到右。
- rtl:从右到左。
- auto:由用户代理决定方向。
draggable
标识元素是否允许拖拽
id
全局属性定义了一个全文档唯一的标识符(ID)
popover
指定一个元素为弹出框元素。
详情参阅 Popover API
<button popovertarget="my-popover">打开弹出框</button>
<div popover id="my-popover">各位好!</div>
style
规定元素的行内样式。
tabindex
tabindex 全局属性 指示其元素是否可以聚焦,以及它是否/在何处参与顺序键盘导航(通常使用Tab键,因此得名)。
p {
font-style: italic;
font-weight: bold;
}
div,
label {
display: block;
letter-spacing: 0.5px;
margin-bottom: 1rem;
}
div:focus {
font-weight: bold;
}
<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>
title
title 属性提供了一种将额外信息与元素的属性关联的方法。额外的信息可以是关于元素的简短描述、访问元素的键盘快捷键、元素的格式或结构等。