前端知识库(lizh)
  • README
  • Bugs
    • 前端调试随笔
    • 浏览器常见问题概览
    • 浏览器兼容问题概览
    • HTML常见问题概览
    • CSS常见问题概览
    • JS常见问题概览
    • 移动端兼容性问题概览
    • 微信小程序开发
    • NodeJs常见问题概览
    • Mac常见问题概览
    • 微信开发遇坑指南
    • Npm包常见问题概览
    • 其他问题汇总
  • Css探索系列
    • CSS基础知识
    • CSS常见问答
    • CSS常见问答02
    • CSS应用示例
    • CSS应用示例02
    • 由Z Index引发的层叠上下文思考
    • 由浮动塌陷引发的块级格式上下文思考
    • CSS探索系列 Flex布局
    • CSS探索系列 Margin
    • CSS探索系列 Auto关键字
    • CSS探索系列 Gradient
    • CSS探索系列 Line Height
    • CSS探索系列 元素居中
    • CSS探索系列 动画
    • 为什么使用PostCSS处理CSS?
    • 重新认识伪类与伪元素
    • 自定义表单伪元素样式
    • 如何理解Css中的Display属性
    • 视口和软键盘对视口的影响
    • 关于Css
  • Frontend
    • 00 关于Web前端
    • 01 前端知识概览
    • 02 常用前端库概览
    • 基础 00 前端常见问题01
    • 基础 01 浏览器缓存
    • 基础 02 浏览器工作原理
    • 基础 03 谈谈前端跨源问题及解决方法
    • 进阶 01 Web性能优化
    • 进阶 02 搜索引擎优化(SEO)
    • 进阶 03 前端模块化编程
    • 进阶 04 规范代码:Linter、Prettier、EditorConfig
    • 进阶 11 前端自动化测试
    • 高级 01 前端安全
    • Vue2.X原理篇
    • Vue3初步了解及迁移指南
    • 重读Vue教程
    • React17.X原理篇
    • 你必须知道的React问题
    • 重读React教程
    • 聊一聊Cookie的一些问题
    • 如何理解HTTP响应的状态码
    • HTTP的历史演变及概述
    • Webpack4.X原理篇
    • Webpack基础入门篇
    • Webpack构建优化篇
    • TypeScript使用指南
    • 代码规范
      • 前端规范
      • HTML
      • CSS
      • JS
  • Html探索系列
    • HTML基础知识
    • HTML基础知识02
    • HTML常见问答
    • HTML经典实践用例
    • HTML元素的宽高及位置详解
    • Video元素的使用和常见问题总结
    • Html探索系列 Meta标签
    • DOCTYPE:文档类型与浏览器模式
    • DHTML(动态网页)简介
    • HTML标签详解
    • HTML布局的几种方式
    • HTML全局属性
    • 关于Html
  • Js探索系列
    • 基础知识
    • 常见问答
    • 应用示例
    • 趣味示例
    • 基础篇 05 AJAX
    • 基础篇 06 Window对象
    • 基础篇 07 Error、JSON、Math、Console对象
    • 基础篇 08 History、URL、Screen、Navigator、Location对象
    • 基础篇 09 文档对象模型(DOM)
    • 基础篇 10 Document对象
    • 基础篇 11 Element对象
    • 基础篇 12 Event对象
    • 基础篇 13 键盘、鼠标、触摸事件
    • 基础篇 15 CSS对象模型(CSSOM)
    • 进阶篇 01 Prototype对象和继承
    • 进阶篇 02 Promise对象
    • 进阶篇 07 迭代器(Iterator)
    • 进阶篇 08 Generator和Async函数
    • 进阶篇 09 JavaScript异步编程
    • Date对象和日期时间字符串格式
    • Canvas基础入门篇
    • Canvas进阶篇
    • SVG基础入门篇
    • 四种判断数据类型方法的优缺点
    • 深入理解JavaScript的浅拷贝和深拷贝
    • 谈谈JavaScript的作用域和上下文
    • 复制内容到剪贴板
    • 关于Javascript
  • NodeJs
    • 关于Node.Js
    • Node.Js:三种调试方法
    • Npm包管理器简介及一些机制
    • NPM:Package.Json详解(中文)
    • NPM:从零开始,开发一个软件包
    • NPM:常用命令
    • Node.Js:Fs(文件系统)
    • Node.Js:Global(全局变量)
    • Node.Js:HTTP
    • Node.Js:Module(模块)
    • Node.Js:Path(路径)
    • Node.Js:Readline(逐行读取)
  • Research
    • 极细边框(1px边框)实现方式
    • 如何监控前端异常?
    • H5页面跳转和刷新
    • Web主题切换和个性化定制方法总结
    • Vue SSR(服务端渲染)的简单实现
    • 基于Create React App打造代码规范化的React+Ts项目
    • H5可视化编辑
    • Web常用功能
    • Javascript加密混淆
    • Vue如何导入TypeScript
    • 移动端PDF预览
    • 纯CSS绘制箭头
    • 网站性能测量和优化方法
  • Tech
    • GOOGLE浏览器的搜索技巧
    • Curl的用法指南
    • Sublime3插件篇
    • Charles安装及使用
    • Nginx基础使用
    • 排序算法(Javascript)
    • 代码整洁之道(摘录笔记)
    • Java的24种设计模式与7大原则
    • 观察者和发布订阅模式
  • Tools
    • Git
      • Git基础教程
      • Git常见问题
    • Gitbook
      • Gitbook入门篇
      • Gitbook插件篇
      • Gitbook进阶篇
由 GitBook 提供支持
在本页
  • 基本全局属性
  • 其他全局属性
  • 参考资料

这有帮助吗?

  1. Html探索系列

HTML全局属性

全局属性是所有 HTML 元素共有的属性,即它们可以用于所有元素,即使属性可能对某些元素不起作用。

可以在所有的 HTML 元素上指定全局属性,甚至是在标准里没有指定的元素。这意味着任何非标准元素仍必须能够应用这些属性,即使使用这些元素意味着文档不再是 html5 兼容的。

例如,foo 不是一个有效的 HTML 元素,但是兼容 html5 的浏览器隐藏了有 hidden 属性的 foo 元素( <foo hidden>...<foo> )的内容。

基本全局属性

lang

帮助定义元素的语言:不可编辑元素所在的语言,或者应该由用户编写的可编辑元素的语言。该属性包含一个“语言标记”(由用连字符分隔的“语言子标记”组成)。

title

表示与其所属元素相关信息的文本。 这些信息通常可以作为提示呈现给用户,但不是必须的。

id

定义唯一标识符(ID),该标识符在整个文档中必须是唯一的。 其目的是在链接(使用片段标识符)、脚本、样式时标识元素。

class

一个以空格分隔的元素的类名列表。

style

设置要应用于元素的 CSS 样式声明。

tabindex

整数属性,指示元素是否可以获取输入焦点(可聚焦),是否应该参与顺序键盘导航,如果是,则表示哪个位置。

可取值如下:

  • 负值:表示该元素应该是可聚焦的,但不应通过顺序键盘导航到达;

  • 0:表示元素应通过顺序键盘导航可聚焦和可到达,但其相对顺序由平台约定定义;

  • 正值:意味着元素可以通过顺序键盘导航进行聚焦和访问;元素聚焦的顺序是 tabindex 的增加值。如果多个元素共享相同的 tabindex,则它们的相对顺序遵循它们在文档中的相对位置。

accesskey

提供了为当前元素生成键盘快捷键的提示。这个属性由空格分隔的字符列表组成。浏览器应该使用在计算机键盘布局上存在的第一个。

autocapitalize

控制用户的文本输入是否和如何自动大写,它可以有以下的值:

  • off 或 none:没有应用自动大写(所有字母都默认为小写字母)。

  • on 或 sentences:每个句子的第一个字母默认为大写字母;所有其他字母都默认为小写字母。

  • words:每个单词的第一个字母默认为大写字母;所有其他字母都默认为小写字母。

  • characters:所有的字母都应该默认为大写。

contenteditable

一个枚举属性,表示元素是否可被用户编辑。 如果可以,浏览器会调整元素的部件以允许编辑。

  • true 或者空字符串:表明元素是可被编辑的;

  • false:表明元素不能被编辑。

data-*

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

所有这些自定义数据属性都可以通过所属元素的 HTMLElement.dataset 属性访问它们。

dir

一个指示元素中文本方向的枚举属性。

可取值如下:

  • ltr:指从左到右,用于那种从左向右书写的语言(比如英语);

  • rtl:指从右到左,用于那种从右向左书写的语言(比如阿拉伯语);

  • auto:指由用户代理决定方向。它在解析元素中字符时会运用一个基本算法,直到发现一个具有强方向性的字符,然后将这一方向应用于整个元素。

draggable

一种枚举属性,指示是否可以使用 Drag and Drop API 拖动元素。

可取值如下:

  • true:表明元素可能被拖动;

  • false:表明元素可能不会被拖动。

hidden

布尔属性表示该元素尚未或不再相关。例如,它可用于隐藏在登录过程完成之前无法使用的页面元素。浏览器不会呈现此类元素。不得使用此属性隐藏可合法显示的内容。

inputmode

向浏览器提供有关在编辑此元素或其内容时要使用的虚拟键盘配置类型的提示。主要用于 input 元素,但在 contenteditable 模式下可用于任何元素。

is

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

slot

将 shadow DOM 阴影关联树中的一个沟槽分配给一个元素:具有 slot 属性的元素被分配给由 slot 元素创建的沟槽,其 name 属性的值与 slot 属性的值匹配。

itemid

item 的唯一全局标识符。

itemprop

用于向 item 添加属性。 每个 HTML 元素都可以指定一个 itemprop 属性,其中一个 itemprop 由一个名称和值对组成。

itemref

只有不是具有 itemscope 属性的元素的后代,它的属性才可以与使用 itemref 项目相关联。它提供了元素 ID 列表(itemids)以及文档中其他位置的其他属性。

itemscope

itemscope 通常与 itemtype 一起使用,以指定包含在关于特定项目代码块中的 HTML。 itemscope 创建 Item 并定义与之关联的 itemtype 的范围。

itemtype

指定将用于在数据结构中定义 itemprops(项属性)的词汇表的 URL。

part(实验性)

元素的部件名称的空格分隔列表。Part 名称允许 CSS 通过::part() 伪元素选择和设置阴影关联树中的特定元素。

dropzone(实验性)

枚举属性,指示可以使用 Drag and Drop API 在元素上删除哪些类型的内容。

可取值如下:

  • copy:表示 drop 将创建被拖动元素的副本

  • move:表示拖动的元素将移动到此新位置。

  • link:将创建一个指向拖动数据的链接。

spellcheck(实验性)

定义是否可以检查元素是否存在拼写错误。

可取值如下:

  • true:表示如果可能,应检查元素是否存在拼写错误;

  • false:表示不应检查元素的拼写错误。

translate(实验性)

用于指定在页面本地化时是否转换元素的属性值及其 Text 节点子节点的值,或者是否保持它们不变。

可取值如下:

  • 空字符串和"yes":表示元素将被翻译。

  • "no":表示该元素不会被翻译。

其他全局属性

除了基本的 HTML 全局属性之外,还存在以下全局属性:

  • xml:lang、xml:base: 两者都是从 XHTML 规范继承,但为了兼容性而被保留的。

  • 多重 aria-* 属性:用于改善无障碍。

  • 事件处理程序属性:

    onclick、onchange、ondbclick、
    oninput、onblur、onfocus、onselect、onsubmit、onreset、
    oncanplay、oncanplaythrough、onloadeddata、onloadedmetadata、onpause、onplay、onplaying、onprogress、onratechange、onseeking、onvolumechange、ondurationchange、onended、onseeked、
    ondrag、ondragend、ondragenter、ondragexit、ondragleave、ondragover、ondragstart、ondrop、
    onkeydown、onkeypress、onkeyup、
    onmousedown、onmouseenter、onmouseleave、onmousemove、onmouseout、onmouseover、onmouseup、onmousewheel、
    onerror、onscroll、onresize、onload、onloadstart、
    onabort、onautocomplete、onautocompleteerror、oncancel、onclose、oncontextmenu、oncuechange、onemptied、oninvalid、onshow、onsort、onstalled、onsuspend、ontimeupdate、ontoggle、onwaiting

参考资料

上一页HTML布局的几种方式下一页关于Html

最后更新于1年前

这有帮助吗?

MDN - 全局属性
MDN - HTML 属性参考