fe-interview
fe-interview copied to clipboard
[html] 第3天 HTML全局属性(global attribute)有哪些(包含H5)?
[html] 第3天 HTML全局属性(global attribute)有哪些(包含H5)?
- class
- id
- data
- type
- href
- style
- width
- height
- targe
- checked
- disabled
- requie
- ref
- alt
- title
- name
- mulitp...多选
- value
- replaceholder
- src
- id
- class
- style
- title
- data
全局属性:用于任何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:元素和子孙节点内容是否需要本地化(均不支持)
id class title style
是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: (...)
查了 MDN,感觉比 document.body.__proto__
要少一点
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes
日常用的也就一些吧,还有好多不建议使用的
- id
- class
- name
- title
- data-
- placeholder
- width
- height
- bgcolor
- style
- src
- href
- disabled
- value
全局属性 可用于任何 HTML 元素。
属性 | 描述 |
---|---|
accesskey | 设置访问元素的键盘快捷键。 |
class | 规定元素的类名(classname) |
contenteditableNew | 规定是否可编辑元素的内容。 |
contextmenuNew | 指定一个元素的上下文菜单。当用户右击该元素,出现上下文菜单 |
data-*New | 用于存储页面的自定义数据 |
dir | 设置元素中内容的文本方向。 |
draggableNew | 指定某个元素是否可以拖动 |
dropzoneNew | 指定是否将数据复制,移动,或链接,或删除 |
hiddenNew | hidden 属性规定对元素进行隐藏。 |
id | 规定元素的唯一 id |
lang | 设置元素中内容的语言代码。 |
spellcheckNew | 检测元素是否拼写错误 |
style | 规定元素的行内样式(inline style) |
tabindex | 设置元素的 Tab 键控制次序。 |
title | 规定元素的额外信息(可在工具提示中显示) |
translateNew | 指定是否一个元素的值在页面载入时是否需要翻译 |
全局属性:用于任何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:元素和子孙节点内容是否需要本地化(均不支持)
// HTMLElement 原型上的所有可枚举属性.
console.log(Object.keys(HTMLElement.prototype));
经常使用到的就是:title、style、class、id
- id:元素的id,文档内唯一
- class:元素的类标识
- style:元素的行内样式
- title:元素的额外信息
- tabindex:元素的 Tab 键控制次序
- data-*:元素的自定义属性
- lang:元素内容的语言
class id style
width、height不是全局属性。
class、id、title、tableindex、data-*、lang、hidden、contenteditable、dir
属性 | 描述 |
---|---|
accesskey | 设置访问元素的键盘快捷键。 |
class | 规定元素的类名(classname) |
contenteditable(h5) | 规定是否可编辑元素的内容。 |
contextmenu(h5) | 指定一个元素的上下文菜单。当用户右击该元素,出现上下文菜单 |
data-*(h5) | 用于存储页面的自定义数据 |
dir | 设置元素中内容的文本方向。 |
draggable(h5) | 指定某个元素是否可以拖动 |
dropzone(h5) | 指定是否将数据复制,移动,或链接,或删除 |
hidden(h5) | hidden 属性规定对元素进行隐藏。 |
id | 规定元素的唯一 id |
lang | 设置元素中内容的语言代码。 |
spellcheck(h5) | 检测元素是否拼写错误 |
style | 规定元素的行内样式(inline style) |
tabindex | 设置元素的 Tab 键控制次序。 |
title | 规定元素的额外信息(可在工具提示中显示) |
translate(h5) | 指定是否一个元素的值在页面载入时是否需要翻译 |
accesskey 规定激活元素的快捷键 class contenteditable 规定元素是否可编辑 data-* dir 规定元素的文本方向 draggable 规定元素是否可拖拽 hidden 规定元素隐藏 id lang 规定元素内容的语言 spellcheck 对元素拼写检查 style 内联样式 tabindex 规定元素的tab键序 title 规定元素的额外信息
全局属性是所有HTML元素共有的属性,它们可以用于所有元素。下面写几个常见的HTML元素通用属性,如果要查看完整的列表,MDN 全局属性列表 上面有。
常用HTML元素共有属性
- id,
- class
- title
- style
- data-*(h5)
id class href data style accesskey contenteditable dir draggable hidden lang title
全局属性:用于任何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:元素和子孙节点内容是否需要本地化(均不支持)
id
name
class
lang
accesskey
data
hidden
全局属性列表
属性名 | 作用 |
---|---|
accesskey | 提供了为当前元素生成键盘快捷键的提示 |
autocapitalize | 控制用户的文本输入是否和如何自动大写 |
class | 一个以空格分隔的元素的类名(classes )列表 |
contenteditable | 一个枚举属性(enumerated attribute),表示元素是否可被用户编辑 |
contextmenu | |
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 节点子节点的值,或者是否保持它们不变 |
① accesskey:规定激活元素的快捷键 ② class:规定元素的一个或多个类名 ③ contenteditable:规定元素内容是否可编辑 ④ contentmenu:规定元素的上下文菜单。上下文菜单在用户点击时显示 ⑤ dir:规定元素中内容的文本方向 ⑥ draggable:规定元素是否可拖动 ⑦ id:规定元素唯一的id ⑧ style:规定元素的行内CSS样式 title:规定元素的额外信息
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:元素和子孙节点内容是否需要本地化(均不支持)
属性 | 描述 |
---|---|
accesskey | 规定激活元素的快捷键 |
class | 规定元素的一个或者多个类名 |
contenteditable |规定元素是否可编辑 | |
contextmenu | 规定元素的上下文菜单。上下文菜单在用户点击元素时显示 | |
data-* | 用于储存页面或者应用的私有定制数据 | |
dir | 指定元素中内容的文本方向 |
draggable | 制定元素是否可拖动 |
dragzone | 规定在拖动被拖动数据时是都进行复制、移动或链接 |
hidden | 规定元素仍未或者不再相关 |
id | 规定元素的唯一id| |
lang | 规定元素内容的语言 |
spellcheck | 规定是否对元素进行拼写和语法检查 |
style | 规定元素的行内css样式 |
tabindex | 规定元素的tab键次序 |
titile | 规定有关元素的额外信息 |
translate | 规定是否应该翻译元素内容 |
-
accesskey 设置访问元素的键盘快捷键。
-
class 规定元素的类名(classname)
-
contenteditableNew 规定是否可编辑元素的内容。
-
contextmenuNew 指定一个元素的上下文菜单。当用户右击该元素,出现上下文菜单
-
data-*New 用于存储页面的自定义数据
-
dir 设置元素中内容的文本方向。
-
draggableNew 指定某个元素是否可以拖动
-
dropzoneNew 指定是否将数据复制,移动,或链接,或删除
-
hiddenNew hidden 属性规定对元素进行隐藏。
-
id 规定元素的唯一 id
-
lang 设置元素中内容的语言代码。
-
spellcheckNew 检测元素是否拼写错误
-
style 规定元素的行内样式(inline style)
-
tabindex 设置元素的 Tab 键控制次序。
-
title 规定元素的额外信息(可在工具提示中显示)
-
translateNew 指定是否一个元素的值在页面载入时是否需要翻译
全局属性是所有标签都有的属性:
-
style设置样式
-
class 可以通过类选择器
-
dir设置文本的方向
-
hidden设置隐藏 5.title 标题
-
data-*属性选择器
-
draggable
-
lang
id,class,type,data,href,label,for,src,width,height,target
accesskey 设置访问元素的键盘快捷键。 class 规定元素的类名(classname) contenteditableNew 规定是否可编辑元素的内容。 contextmenuNew 指定一个元素的上下文菜单。当用户右击该元素,出现上下文菜单 data-*New 用于存储页面的自定义数据 dir 设置元素中内容的文本方向。 draggableNew 指定某个元素是否可以拖动 dropzoneNew 指定是否将数据复制,移动,或链接,或删除 hiddenNew hidden 属性规定对元素进行隐藏。 id 规定元素的唯一 id lang 设置元素中内容的语言代码。 spellcheckNew 检测元素是否拼写错误 style 规定元素的行内样式(inline style) tabindex 设置元素的 Tab 键控制次序。 title 规定元素的额外信息(可在工具提示中显示) translateNew 指定是否一个元素的值在页面载入时是否需要翻译
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节点子节点的值,或者是否保持它们不变