Skip to content

[html] 第3天 HTML全局属性(global attribute)有哪些(包含H5)? #7

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

[html] 第3天 HTML全局属性(global attribute)有哪些(包含H5)?

Activity

undefinedYu

undefinedYu commented on Apr 19, 2019

@undefinedYu
Contributor
  • class
  • id
  • data
  • type
  • href
  • style
  • width
  • height
  • targe
  • checked
  • disabled
  • requie
  • ref
  • alt
  • title
  • name
  • mulitp...多选
  • value
  • replaceholder
  • src
yxkhaha

yxkhaha commented on Apr 19, 2019

@yxkhaha
  • id
  • class
  • style
  • title
  • data
qingleizhang123

qingleizhang123 commented on May 5, 2019

@qingleizhang123

全局属性:用于任何HTML5元素的属性

  • accesskey:设置快捷键
  • class:为元素设置类标识
  • contenteditable:指定元素内容是否可编辑
  • contextmenu:自定义鼠标右键弹出上下文菜单内容(仅firefox支持)
  • data-*:为元素增加自定义属性
  • dir:设置元素文本方向(默认ltr;rtl)
  • draggable:设置元素是否可拖拽
  • dropzone:设置元素拖放类型(copy|move|link,H5新属性,主流均不支持)
  • hidden:规定元素仍未或不在相关
  • id:元素id,文档内唯一
  • lang:元素内容的语言
  • spellcheck:是否启动拼写和语法检查
  • style:行内css样式
  • tabindex:设置元素可以获得焦点,通过tab导航
  • title:规定元素有关的额外信息
  • translate:元素和子孙节点内容是否需要本地化(均不支持)
Damon99999

Damon99999 commented on Jun 18, 2019

@Damon99999

id
class
title
style

pma934

pma934 commented on Jun 26, 2019

@pma934

是document.body.proto.__proto__里的内容么?

  • accessKey: (...)
  • assignedSlot: (...)
  • attributeStyleMap: (...)
  • attributes: (...)
  • autocapitalize: (...)
  • baseURI: (...)
  • childElementCount: (...)
  • childNodes: (...)
  • children: (...)
  • classList: (...)
  • className: (...)
  • clientHeight: (...)
  • clientLeft: (...)
  • clientTop: (...)
  • clientWidth: (...)
  • contentEditable: (...)
  • dataset: (...)
  • dir: (...)
  • draggable: (...)
  • firstChild: (...)
  • firstElementChild: (...)
  • hidden: (...)
  • id: (...)
  • innerHTML: (...)
  • innerText: (...)
  • inputMode: (...)
  • isConnected: (...)
  • isContentEditable: (...)
  • lang: (...)
  • lastChild: (...)
  • lastElementChild: (...)
  • localName: (...)
  • namespaceURI: (...)
  • nextElementSibling: (...)
  • nextSibling: (...)
  • nodeName: (...)
  • nodeType: (...)
  • nodeValue: (...)
  • nonce: (...)
  • offsetHeight: (...)
  • offsetLeft: (...)
  • offsetParent: (...)
  • offsetTop: (...)
  • offsetWidth: (...)
  • onabort: (...)
  • onauxclick: (...)
  • onbeforecopy: (...)
  • onbeforecut: (...)
  • onbeforepaste: (...)
  • onblur: (...)
  • oncancel: (...)
  • oncanplay: (...)
  • oncanplaythrough: (...)
  • onchange: (...)
  • onclick: (...)
  • onclose: (...)
  • oncontextmenu: (...)
  • oncopy: (...)
  • oncuechange: (...)
  • oncut: (...)
  • ondblclick: (...)
  • ondrag: (...)
  • ondragend: (...)
  • ondragenter: (...)
  • ondragleave: (...)
  • ondragover: (...)
  • ondragstart: (...)
  • ondrop: (...)
  • ondurationchange: (...)
  • onemptied: (...)
  • onended: (...)
  • onerror: (...)
  • onfocus: (...)
  • onfullscreenchange: (...)
  • onfullscreenerror: (...)
  • ongotpointercapture: (...)
  • oninput: (...)
  • oninvalid: (...)
  • onkeydown: (...)
  • onkeypress: (...)
  • onkeyup: (...)
  • onload: (...)
  • onloadeddata: (...)
  • onloadedmetadata: (...)
  • onloadstart: (...)
  • onlostpointercapture: (...)
  • onmousedown: (...)
  • onmouseenter: (...)
  • onmouseleave: (...)
  • onmousemove: (...)
  • onmouseout: (...)
  • onmouseover: (...)
  • onmouseup: (...)
  • onmousewheel: (...)
  • onpaste: (...)
  • onpause: (...)
  • onplay: (...)
  • onplaying: (...)
  • onpointercancel: (...)
  • onpointerdown: (...)
  • onpointerenter: (...)
  • onpointerleave: (...)
  • onpointermove: (...)
  • onpointerout: (...)
  • onpointerover: (...)
  • onpointerup: (...)
  • onprogress: (...)
  • onratechange: (...)
  • onreset: (...)
  • onresize: (...)
  • onscroll: (...)
  • onsearch: (...)
  • onseeked: (...)
  • onseeking: (...)
  • onselect: (...)
  • onselectionchange: (...)
  • onselectstart: (...)
  • onstalled: (...)
  • onsubmit: (...)
  • onsuspend: (...)
  • ontimeupdate: (...)
  • ontoggle: (...)
  • onvolumechange: (...)
  • onwaiting: (...)
  • onwebkitfullscreenchange: (...)
  • onwebkitfullscreenerror: (...)
  • onwheel: (...)
  • outerHTML: (...)
  • outerText: (...)
  • ownerDocument: (...)
  • parentElement: (...)
  • parentNode: (...)
  • part: (...)
  • prefix: (...)
  • previousElementSibling: (...)
  • previousSibling: (...)
  • scrollHeight: (...)
  • scrollLeft: (...)
  • scrollTop: (...)
  • scrollWidth: (...)
  • shadowRoot: (...)
  • slot: (...)
  • spellcheck: (...)
  • style: (...)
  • tabIndex: (...)
  • tagName: (...)
  • textContent: (...)
  • title: (...)
  • translate: (...)
Konata9

Konata9 commented on Jul 1, 2019

@Konata9

查了 MDN,感觉比 document.body.__proto__ 要少一点

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes

poporeki

poporeki commented on Jul 4, 2019

@poporeki

日常用的也就一些吧,还有好多不建议使用的

  • id
  • class
  • name
  • title
  • data-
  • placeholder
  • width
  • height
  • bgcolor
  • style
  • src
  • href
  • disabled
  • value
censek

censek commented on Sep 26, 2019

@censek

全局属性 可用于任何 HTML 元素

属性 描述
accesskey 设置访问元素的键盘快捷键。
class 规定元素的类名(classname)
contenteditableNew 规定是否可编辑元素的内容。
contextmenuNew 指定一个元素的上下文菜单。当用户右击该元素,出现上下文菜单
data-*New 用于存储页面的自定义数据
dir 设置元素中内容的文本方向。
draggableNew 指定某个元素是否可以拖动
dropzoneNew 指定是否将数据复制,移动,或链接,或删除
hiddenNew hidden 属性规定对元素进行隐藏。
id 规定元素的唯一 id
lang 设置元素中内容的语言代码。
spellcheckNew 检测元素是否拼写错误
style 规定元素的行内样式(inline style)
tabindex 设置元素的 Tab 键控制次序。
title 规定元素的额外信息(可在工具提示中显示)
translateNew 指定是否一个元素的值在页面载入时是否需要翻译
RQSA

RQSA commented on Oct 4, 2019

@RQSA

全局属性:用于任何HTML5元素的属性

  • accesskey:设置快捷键
  • class:为元素设置类标识
  • contenteditable:指定元素内容是否可编辑
  • contextmenu:自定义鼠标右键弹出上下文菜单内容(仅firefox支持)
  • data-*:为元素增加自定义属性
  • dir:设置元素文本方向(默认ltr;rtl)
  • draggable:设置元素是否可拖拽
  • dropzone:设置元素拖放类型(copy|move|link,H5新属性,主流均不支持)
  • hidden:规定元素仍未或不在相关
  • id:元素id,文档内唯一
  • lang:元素内容的语言
  • spellcheck:是否启动拼写和语法检查
  • style:行内css样式
  • tabindex:设置元素可以获得焦点,通过tab导航
  • title:规定元素有关的额外信息
  • translate:元素和子孙节点内容是否需要本地化(均不支持)
0x3c

0x3c commented on Oct 14, 2019

@0x3c
 // HTMLElement 原型上的所有可枚举属性.
console.log(Object.keys(HTMLElement.prototype));
zlqGitHub

zlqGitHub commented on Dec 22, 2019

@zlqGitHub

经常使用到的就是:title、style、class、id

vinceok

vinceok commented on Jan 15, 2020

@vinceok
  1. id:元素的id,文档内唯一
  2. class:元素的类标识
  3. style:元素的行内样式
  4. title:元素的额外信息
  5. tabindex:元素的 Tab 键控制次序
  6. data-*:元素的自定义属性
  7. lang:元素内容的语言
susanforme

susanforme commented on Feb 2, 2020

@susanforme
class id  style 

6 remaining items

mono2048

mono2048 commented on May 19, 2021

@mono2048

全局属性:用于任何HTML5元素的属性

accesskey:设置快捷键
class:为元素设置类标识
contenteditable:指定元素内容是否可编辑
contextmenu:自定义鼠标右键弹出上下文菜单内容(仅firefox支持)
data-*:为元素增加自定义属性
dir:设置元素文本方向(默认ltr;rtl)
draggable:设置元素是否可拖拽
dropzone:设置元素拖放类型(copy|move|link,H5新属性,主流均不支持)
hidden:规定元素仍未或不在相关
id:元素id,文档内唯一
lang:元素内容的语言
spellcheck:是否启动拼写和语法检查
style:行内css样式
tabindex:设置元素可以获得焦点,通过tab导航
title:规定元素有关的额外信息
translate:元素和子孙节点内容是否需要本地化(均不支持)
dengyunsheng250

dengyunsheng250 commented on Aug 21, 2021

@dengyunsheng250
id
name
class
lang
accesskey
data
hidden
amikly

amikly commented on Oct 21, 2021

@amikly

全局属性列表

属性名 作用
accesskey 提供了为当前元素生成键盘快捷键的提示
autocapitalize 控制用户的文本输入是否和如何自动大写
class 一个以空格分隔的元素的类名(classes )列表
contenteditable 一个枚举属性(enumerated attribute),表示元素是否可被用户编辑
contextmenu 的id ,作为该元素的上下文菜单(已经不被支持,将从所有浏览器中删除)
data-* 一类自定义数据属性,它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力
dir 一个指示元素中文本方向的枚举属性
draggable 一种枚举属性,指示是否可以 使用 Drag and Drop API (en-US) 拖动元素
dropzone 枚举属性,指示可以使用 Drag and Drop API 在元素上删除哪些类型的内容
exportparts Used to transitively export shadow parts from a nested shadow tree into a containing light tree
hidden 布尔属性表示该元素尚未或不再相关,不得使用此属性隐藏可合法显示的内容
id 定义唯一标识符(ID),该标识符在整个文档中必须是唯一的
inputmode 向浏览器提供有关在编辑此元素或其内容时要使用的虚拟键盘配置类型的提示
is 允许您指定标准HTML元素应该像已注册的自定义内置元素一样
itemid 项的唯一全局标识符
itemprop 用于向项添加属性
itemref 只有不是具有itemscope属性的元素的后代,它的属性才可以与使用itemref项目相关联
itemscope itemscope(通常)与itemtype一起使用,以指定包含在关于特定项目代码块中的HTML
itemtype 指定将用于在数据结构中定义itemprops(项属性)的词汇表的URL
lang 帮助定义元素的语言:不可编辑元素所在的语言,或者应该由用户编写的可编辑元素的语言
part 元素的部件名称的空格分隔列表
slot 将shadow DOM阴影关联树中的一个沟槽分配给一个元素
spellcheck 枚举属性定义是否可以检查元素是否存在拼写错误
style 含要应用于元素的CSS样式声明
tabindex 整数属性,指示元素是否可以获取输入焦点(可聚焦),是否应该参与顺序键盘导航,如果是,则表示哪个位置
title 包含表示与其所属元素相关信息的文本
translate 枚举属性,用于指定在页面本地化时是否转换元素的属性值及其Text 节点子节点的值,或者是否保持它们不变
tk12138

tk12138 commented on Nov 4, 2021

@tk12138

① accesskey:规定激活元素的快捷键
② class:规定元素的一个或多个类名
③ contenteditable:规定元素内容是否可编辑
④ contentmenu:规定元素的上下文菜单。上下文菜单在用户点击时显示
⑤ dir:规定元素中内容的文本方向
⑥ draggable:规定元素是否可拖动
⑦ id:规定元素唯一的id
⑧ style:规定元素的行内CSS样式
title:规定元素的额外信息

baiye0

baiye0 commented on Dec 30, 2021

@baiye0

accesskey:设置快捷键
class:为元素设置类标识
contenteditable:指定元素内容是否可编辑
contextmenu:自定义鼠标右键弹出上下文菜单内容(仅firefox支持)
data-*:为元素增加自定义属性
dir:设置元素文本方向(默认ltr;rtl)
draggable:设置元素是否可拖拽
dropzone:设置元素拖放类型(copy|move|link,H5新属性,主流均不支持)
hidden:规定元素仍未或不在相关
id:元素id,文档内唯一
lang:元素内容的语言
spellcheck:是否启动拼写和语法检查
style:行内css样式
tabindex:设置元素可以获得焦点,通过tab导航
title:规定元素有关的额外信息
translate:元素和子孙节点内容是否需要本地化(均不支持)

syfine

syfine commented on Apr 11, 2022

@syfine
属性 描述
accesskey 规定激活元素的快捷键
class 规定元素的一个或者多个类名
contenteditable |规定元素是否可编辑
contextmenu | 规定元素的上下文菜单。上下文菜单在用户点击元素时显示
data-* | 用于储存页面或者应用的私有定制数据
dir 指定元素中内容的文本方向
draggable 制定元素是否可拖动
dragzone 规定在拖动被拖动数据时是都进行复制、移动或链接
hidden 规定元素仍未或者不再相关
id 规定元素的唯一id|
lang 规定元素内容的语言
spellcheck 规定是否对元素进行拼写和语法检查
style 规定元素的行内css样式
tabindex 规定元素的tab键次序
titile 规定有关元素的额外信息
translate 规定是否应该翻译元素内容
z-m-c

z-m-c commented on Apr 20, 2022

@z-m-c
  1. accesskey 设置访问元素的键盘快捷键。

  2. class 规定元素的类名(classname)

  3. contenteditableNew 规定是否可编辑元素的内容。

  4. contextmenuNew 指定一个元素的上下文菜单。当用户右击该元素,出现上下文菜单

  5. data-*New 用于存储页面的自定义数据

  6. dir 设置元素中内容的文本方向。

  7. draggableNew 指定某个元素是否可以拖动

  8. dropzoneNew 指定是否将数据复制,移动,或链接,或删除

  9. hiddenNew hidden 属性规定对元素进行隐藏。

  10. id 规定元素的唯一 id

  11. lang 设置元素中内容的语言代码。

  12. spellcheckNew 检测元素是否拼写错误

  13. style 规定元素的行内样式(inline style)

  14. tabindex 设置元素的 Tab 键控制次序。

  15. title 规定元素的额外信息(可在工具提示中显示)

  16. translateNew 指定是否一个元素的值在页面载入时是否需要翻译

xiaoxiaozhiya

xiaoxiaozhiya commented on Jun 9, 2022

@xiaoxiaozhiya

全局属性是所有标签都有的属性:

  1. style设置样式

  2. class 可以通过类选择器

  3. dir设置文本的方向

  4. hidden设置隐藏
    5.title 标题

  5. data-*属性选择器

  6. draggable

  7. lang

WangXi01

WangXi01 commented on Jul 12, 2022

@WangXi01

id,class,type,data,href,label,for,src,width,height,target

wl2282589971

wl2282589971 commented on Oct 2, 2022

@wl2282589971

accesskey 设置访问元素的键盘快捷键。
class 规定元素的类名(classname)
contenteditableNew 规定是否可编辑元素的内容。
contextmenuNew 指定一个元素的上下文菜单。当用户右击该元素,出现上下文菜单
data-*New 用于存储页面的自定义数据
dir 设置元素中内容的文本方向。
draggableNew 指定某个元素是否可以拖动
dropzoneNew 指定是否将数据复制,移动,或链接,或删除
hiddenNew hidden 属性规定对元素进行隐藏。
id 规定元素的唯一 id
lang 设置元素中内容的语言代码。
spellcheckNew 检测元素是否拼写错误
style 规定元素的行内样式(inline style)
tabindex 设置元素的 Tab 键控制次序。
title 规定元素的额外信息(可在工具提示中显示)
translateNew 指定是否一个元素的值在页面载入时是否需要翻译

Iambecauseyouare

Iambecauseyouare commented on Feb 10, 2023

@Iambecauseyouare

accesskey:生成键盘快捷键
autocapitalize:控制用户的文本输入是否和如何自动大写
class:元素的类名
contenteditable:表示元素是否可被用户编辑
data-*自定义数据类型
dir:指示元素中文本方向
draggable:指示是否可以使用drag and drop api拖动元素
dropzone:指示可以使用drag and drop api在元素上删除哪些类类型的内容
hidden:布尔属性表示该元素尚未或不再相关
id:定义唯一标识符
inputmode:向浏览器提供有关在编辑此元素或其内容时要使用的虚拟键盘配置类型的提示
is:运输您指定标准HTML元素应该像已注册的自定义内置元素一样
itemid:项的唯一全局标识符
itemprop:用于向项添加属性
itemscope:通常与itemtype一起使用,以指定包含在关于特定项目代码块中的HTML
itemtype:指定将用于在数据结构中定义itemprop(项属性)的词汇表的URL
lang:帮助定义元素的语言
part:元素的部件名称的空格分隔列表
::part():伪元素选择和设置阴影关联树中的特定元素
slot:将shadow DOM阴影关联树中的一个沟槽分配给一个元素
spellcheck:枚举属性定义是否可以检测元素是否存在拼写错误
style:含要应用与元素的CSS样式声明
tabindex:整数属性,指示元素是否可以获取输入焦点(可聚焦),是否应该参与顺序键盘导航,如果是,则表示哪个位置
title:包含表示与其所属元素相关信息的文本
translate:枚举属性,用于指定在页面本地化时是否转换元素的属性值及其text节点子节点的值,或者是否保持它们不变

keenesun

keenesun commented on Oct 24, 2023

@keenesun
  1. 事件,例:onclick
  2. class/id
  3. draggable
  4. dir
  5. accesskey
  6. autofocus
  7. slot
  8. contenteditable
  9. data-*
    10 title
lili-0923

lili-0923 commented on Feb 1, 2024

@lili-0923

accesskey 设置访问元素的键盘快捷键。
class 规定元素的类名(classname)
contenteditableNew 规定是否可编辑元素的内容。
contextmenuNew 指定一个元素的上下文菜单。当用户右击该元素,出现上下文菜单
data-*New 用于存储页面的自定义数据
dir 设置元素中内容的文本方向。
draggableNew 指定某个元素是否可以拖动
dropzoneNew 指定是否将数据复制,移动,或链接,或删除
hiddenNew hidden 属性规定对元素进行隐藏。
id 规定元素的唯一 id
lang 设置元素中内容的语言代码。
spellcheckNew 检测元素是否拼写错误
style 规定元素的行内样式(inline style)
tabindex 设置元素的 Tab 键控制次序。
title 规定元素的额外信息(可在工具提示中显示)
translateNew 指定是否一个元素的值在页面载入时是否需要翻译

pengsir120

pengsir120 commented on Sep 3, 2024

@pengsir120
  • id
  • class
  • style
  • autofocus
  • data-*
  • lang
  • title
xiaotangaichihuluobo

xiaotangaichihuluobo commented on Sep 19, 2024

@xiaotangaichihuluobo

全局属性:用于任何HTML5元素的属性

class:
指定元素的一个或多个类名。
id:
为元素指定唯一的标识符。
style:
用于直接在元素上定义内联 CSS 样式。
title:
提供额外信息,鼠标悬停时显示的提示文本。
lang:
指定元素内容的语言。
tabindex:
控制元素的键盘导航顺序。
data- 属性*:
自定义属性,用于存储额外的数据。
hidden:
指示元素是否应被隐藏。
contenteditable:
指示元素的内容是否可编辑。
dir:
指定文本的方向(ltr 或 rtl)。
draggable:
指示元素是否可拖动。
spellcheck:
指示是否对元素的内容进行拼写检查。
accesskey:
为元素指定一个快捷键。
autocapitalize:

控制输入内容的自动大写方式。
itemid、itemprop、itemref:
与微格式(Microdata)相关,用于定义结构化数据。
translate:
指示元素的内容是否应被翻译,值为 yes 或 no。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@Konata9@kaifeiji@buuug7@vinceok

        Issue actions

          [html] 第3天 HTML全局属性(global attribute)有哪些(包含H5)? · Issue #7 · haizlin/fe-interview