以下几个属性是所有 HTML 元素通用的/共有的,可以在所有 HTML 元素(甚至是那些没有在本规范中定义的那些元素)上指定。
- accesskey
- class
- contenteditable
- dir
- hidden
- id
- lang
- spellcheck
- style
- tabindex
- title
- translate
这些属性只能由本规范定义为 HTML 元素的属性(These attributes are only defined by this specification as attributes for HTML elements.)。本规范指的是/适用于拥有这些属性的元素,没有被定义为拥有这些属性的元素一定不能被认为是拥有这些属性的。
代码示例:
例如,在下面的 XML 片段中,“bogus”元素不具有本规范中定义的 dir 属性,尽管它有一个名为“dir”的属性。因此,最里面的 span 元素的方向性是“rtl”,直接从 div 元素继承。
<div xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
<bogus xmlns="http://example.net/ns" dir="ltr">
<span xmlns="http://www.w3.org/1999/xhtml">
</span>
</bogus>
</div>
class 属性
每一个 HTML 元素都可以指定一个 class 属性。
如果指定了该属性,则其值必须为以空格分隔的该元素所属各类名称的集合。
指定给HTML元素的类,由 将该元素class属性的值按照空格分割所得的所有的类 组成(忽略重复值)。
注:为一个元素分配类,会影响 CSS 选择器的匹配、DOM 中的 getElementsByClassName() 方法以及其他特性。
对于编码人员使用的用于class属性的值的名称没有额外的限制,但是我们鼓励开发者使用“能够描述内容性质(describe the nature of the content)”的名称,而不是使用“描述内容的预期表现(describe the desired presentation of the content)”的名称。
注:DOM 规范定义的 className 和 classList IDL 属性反映元素的 class 内容属性。
id 属性
id 属性指定了其元素的唯一标识符(ID)。
id 值在元素的跟子树的(home subtree)所有 ID 中必须是唯一的,并且必须包含至少一个字符。id 值绝对不能包含任何的空格。
注:对于一个 ID 可以采取什么样的形式没有其他限制;特别地,ID 可以是纯数字、数字开头、下划线开头、纯标点符号,等等。
注:元素的唯一标识符可以用于各种各样的目的,使用片段标识符来连接到文档的某些部分,在脚本中定位一个元素,根据 CSS 来样式化一个指定的元素。
标识符是不透明的字符串(Identifiers are opaque strings)。尤其是元素的含义不应该来自id属性的值(Particular meanings should not be derived from the value of the id attribute)。
title 属性
title 属性描述了(represent)元素(提供咨询的)信息,例如它很适用于提示信息(tooltip)。在一个链接上,这可能是目标资源的标题或描述;在图片上,它可能是图片来源(credit)或描述;在段落中,它可能是一条脚注或文本的注释;在引文中,它可能是关于来源的详细信息;在交互式内容中,它可能是关于元素的用途/用法/功能的一个标签或操作指南;等等。title 属性的值是文本。
警告:目前不鼓励依赖 title 属性,因为许多用户代理(user agent)并没有像本规范要求的那样以易于使用的方式来暴露这个属性(例如,需要一个用于点击的设备,如鼠标,来引导一个提示信息显示出来,这排除了只使用键盘和只使用触摸的的用户,例如使用手机或平板的那些人)。
如果这个属性被一个元素省略掉,则意味着与此元素最接近的设置了 title 属性的祖先元素的 title 属性是与此元素有关联的。设置 title 属性来覆盖这一点,则可显示地声明任何祖先元素的咨询信息与此元素无关。把 title 属性设置为空字符串(the empty string)则表示这个元素没有咨询信息。
如果title 属性的值包含“LF”(U+000A)字符,那么值的内容会被分成几行。每一个“LF”(U+000A)字符代表一次换行。
代码示例
在 title 属性中使用新行(newlines)需谨慎。
例如,下面的片段(snippet)实际上定义了一个包含换行符的缩写的展开形式:
<p>My logs show that there was some interest in <abbr title="Hypertext
Transport Protocol">HTTP</abbr> today.</p>
部分元素,例如 link、abbr 和 input,除了上面描述的语义之外,还为 title 属性定义了额外的语义。
一个元素的咨询信息是以下程序返回的值,一旦返回了一个值,
当程序返回空字符串,就没有资讯信息(advisory information)。
- 如果元素是 link、style、dfn 或 abbr,那么:如果该元素设置了 title 属性,则返回此属性的值,否则,返回空字符串。
- 否则,如果元素设置了 title 属性,则返回它的值。
- 否则,如果元素有父元素,则返回父元素的资讯信息。
- 否则,返回空字符串。
当元素有资讯信息的时候,用户代理(user agent)应该通知用户,否则信息不会被发现。
title IDL 属性必须反映 title 内容属性(The title IDL attribute must reflect the title content attribute.)。
style 属性
所有的 HTML 属性都可以设置 style 内容属性。这是一个由 CSS 样式属性语法规范定义的 CSS 样式属性。
对于支持 CSS 的用户代理(user agent),当属性被添加或者属性值发生改变时,此属性的值必须根据 CSS 样式属性给出的规则来解析。
对于在其任意元素上使用了 style 属性的文档,如果这些属性被移除,那么该文档必须仍然能够被理解和可用。
注:特别地,使用 style 属性来隐藏和显示内容、或传递文档不包含的意图(to convey meaning that is otherwise not included in the document),是不规范的。(想隐藏和显示内容,请使用 hidden 属性。)
element . style
返回元素的样式属性的 CSSStyleDeclaration 对象。
hidden 属性
所有 HTML 属性都可以设置 hidden 属性。hidden 属性是一个布尔(boolean)属性。当 hidden 属性被指定到一个元素上,这意味着该元素尚未或不再(is not yet, or is no longer)与页面的当前状态(the page's current state)直接相关,又或者意味着与被用户直接访问相反,该元素被用来声明 用于页面其他部分重复使用的内容。
用户代理(user agent)不应该渲染(render)指定了 hidden 属性的元素。这个要求可能不直接通过样式层来实现。例如,一个 HTML+CSS 用户代理(user agent)可能使用渲染章节(the Rendering section)中建议的规则来实现这些要求。
注:因为这个属性通常是使用 CSS 来实现的,所以也可能用 CSS 来覆盖它。比如,把“display: block”应用到所有元素上,这将会取消抵消 hidden 属性的效果。因此,当书写样式表的时候,开发者不得不留意确保属性仍然像预期中的那样样式化(is still styled as expected)。
代码示例:
在下面基本例子中,这个属性被用来隐藏网页游戏的主屏直到用户登录:
<h1>The Example Game</h1>
<section id="login">
<h2>Login</h2>
<form>
...
<!-- calls login() once the user's credentials have been checked -->
</form>
<script>
function login() {
// switch screens
document.getElementById('login').hidden = true;
document.getElementById('game').hidden = false;
}
</script>
</section>
<section id="game" hidden>
...
</section>
hidden 属性不能用来隐藏 可能在演示(presentation)中合理显示的内容。
例如,① 用 hidden 来隐藏一个标签面板(panels in a tabbed dialog)是不正确的,因为标签界面(the tabbed interface)纯粹是一种溢出的演示--人们同样可以在一个带有滚动条的大页面中显示所有表单控件(form control)。
② 用这个属性 只从一个演示(presentation)中隐藏内容 也是不正确的--如果某个元素被标记了 hidden,它会从所有演示(presentation)中隐藏起来,包括打印机等。
未指定 hidden 属性的元素不能超链接到(hyperlink to)指定了 hidden 属性的元素。未指定 hidden 属性的label 标签的 for 属性 和 output 属性 同样不能指向 指定了 hidden 属性的元素。因为在这两种情形中,如此的指向会引起人们的困惑(such references would cause user confusion)。
然而,元素和脚本可能指向在其他上下文中(in other contexts)被隐藏的元素。
代码示例:
比如,用 href 属性连接到(link to)一个用 hidden 属性标记了的分节(section)是错误的。如果内容不是适当的或相关的,那么就没有理由去连接。
但是,用 ARIA aria-describedby 属性指向被隐藏的描述是可以的。隐藏这些描述意味着 仅仅有这些描述本身 是没有用的,它们可以被写成这阿姨那个一种形式:在指定的 被它们所描述的图片所引用 的情景中,这些描述是有用的(While hiding the descriptions implies that they are not useful alone, they could be written in such a way that they are useful in the specific context of being referenced from the images that they describe.)。
类似地,一个带有 hidden 属性的 canvas 元素可以被一个脚本图形引擎用作一个离屏缓冲器(an off-screen buffer),一个表单控件(form control)可以用它的 form 属性来指向一个隐藏的表单元素。
一个分节中通过 hidden 属性隐藏起来的元素仍然是活跃的,例如,这样一个分节中的脚本仍然可以执行,表单控件仍然可以提交。只有它们对用户的演示改变了(Only their presentation to the user changes)。
hidden IDL 属性必须反映拥有同样名称的内容舒心。
contenteditable 属性
contenteditable 属性是一个枚举属性,这种枚举属性的关键字(keyword)是空字符串,true 和 false。空字符串和 true 两个关键字映射到 true 状态。false 关键字映射到 false 状态。另外,还有第三种状态,即 inherit 状态,这种状态是缺失值时的默认值(或者值无效时的默认值)。
true 状态表明元素是可编辑的。inherit 状态表明如果它的父元素是可编辑的那么该元素本身也是可编辑的,false 状态表明元素是不可编辑的。
element . contenteditable [ = value ]
根据 contenteditable 属性的状态,返回“true”、“false”或“inherit”。
网友评论