秋雨
首页
  • HTML
  • CSS
  • JavaScript
设计模式
webpack
  • 前端常识
  • ES
  • React
  • Redux
  • ReactRouter
  • 事件循环
  • 浏览器渲染流程
  • Vue项目性能优化
  • Vue
  • App
Github
首页
  • HTML
  • CSS
  • JavaScript
设计模式
webpack
  • 前端常识
  • ES
  • React
  • Redux
  • ReactRouter
  • 事件循环
  • 浏览器渲染流程
  • Vue项目性能优化
  • Vue
  • App
Github
  • HTML
  • 多媒体嵌入
  • HTML元素
  • 全局属性
  • 属性
  • viewport meta 标记

全局属性

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 属性提供了一种将额外信息与元素的属性关联的方法。额外的信息可以是关于元素的简短描述、访问元素的键盘快捷键、元素的格式或结构等。

最后更新:
贡献者: qiuyulc
Prev
HTML元素
Next
属性