HTML 概述中对属性进行了简要的讨论:现在我们来深入探究一下。
属性让 HTML 如此强大。属性是出现在起始标记中的以空格分隔的名称和名称/值对, 用于提供该元素的相关信息和功能。
属性定义了元素的行为、关联和功能。有些属性是全局属性,这意味着它们可以 放在任意元素的起始标记中。其他属性适用于多个(而非全部)元素,而其他属性则是特定于元素的 只与单个元素相关。在 HTML 中,除布尔值以外的所有属性(在某种程度上,枚举的属性)都需要有值。
如果属性值包含空格或特殊字符,则必须用引号将该值引起来。因此 为了提高易读性 始终建议使用引号。
HTML 不区分大小写,但某些属性值是区分大小写的。HTML 规范中的值不区分大小写。 已定义的字符串值(例如类名称和 ID 名称)区分大小写。如果某个属性值在 HTML 中区分大小写, 在 CSS 和 JavaScript 中用作属性选择器的一部分时,区分大小写;否则不是。
<!-- the type attribute is case insensitive: these are equivalent -->
<input type="text">
<input type="TeXt">
<!-- the id attribute is case sensitive: they are not equivalent -->
<div id="myId">
<div id="MyID">
布尔值属性
如果存在布尔值属性,则该属性始终为 true。布尔值属性包括 autofocus
、inert
、checked
、disabled
required
、reversed
、allowfullscreen
、default,
loop
、autoplay
、controls
、muted
、readonly
、multiple,
和 selected
。
如果存在这些属性中的一个(或多个),则该元素会被停用、必需、只读等。如果不存在,则表示元素不存在。
布尔值可以省略、设置为空字符串或属性的名称;但值不必
设为字符串 true
。所有值(包括 true
、false
和 😀
)虽然无效,但都将解析为 true。
以下三个标记是等效的:
<input required>
<input required="">
<input required="required">
如果属性值为 false,则省略该属性。如果该属性为 true,请包含该属性,但不提供值。
例如,required="required"
不是 HTML 中的有效值;但由于 required
是布尔值,因此无效值会解析为 true。
但是,由于无效的枚举属性不一定解析为与缺失值相同的值,因此更容易进入
习惯于省略值,而不是记住哪些属性是布尔值,哪些是枚举属性,并且可能会提供无效值。
在 true 和 false 之间切换时,请使用 JavaScript 完全添加和移除属性,而不是切换值。
const myMedia = document.getElementById("mediaFile");
myMedia.removeAttribute("muted");
myMedia.setAttribute("muted");
请注意,在 XML 语言(如 SVG)中,所有属性(包括布尔值属性)都需要包含一个值。
枚举属性
枚举属性有时会与布尔值属性混淆。它们是 HTML 属性,具有一组有限的预定义有效值。
与布尔值属性一样,如果属性存在但缺少值,则这些属性具有默认值。例如,如果您添加 <style contenteditable>
,
默认为 <style contenteditable="true">
。
但与布尔值属性不同的是,忽略属性并不意味着其结果为 false,当前属性缺少值
不一定是正确的;和无效值的默认值不一定与 null 字符串相同。继续前面的示例,
如果缺失或无效,contenteditable
默认为 inherit
,您可以明确设置为 false
。
默认值取决于 属性。与布尔值不同,属性不会自动设为“true”(如果存在)。如果您
包含 <style contenteditable="false">
,则该元素不可修改。如果值无效(例如 <style contenteditable="😀">
),
或出乎意料的是 <style contenteditable="contenteditable">
,则该值无效,默认为 inherit
。
在大多数情况下,对于枚举属性,缺失值和无效值是相同的。例如,如果 <input>
上的 type
属性
缺失、存在但不带值或包含无效值,则默认为 text
。虽然这种情况很常见,但并不是一种规则。
因此,务必要了解哪些属性是布尔值,哪些是枚举属性;请尽可能省略值,以免弄错;并根据需要查找值。
全局属性
全局属性是可在任何 HTML 元素(包括 <head>
中的元素)上设置的属性。包含超过
30 个全局属性。虽然从理论上讲,这些属性都可以添加到任何 HTML 元素中,但有些全局属性没有作用
对某些元素进行设置时例如,将 <meta>
上的 hidden
设置为不显示元内容。
id
全局属性 id
用于定义元素的唯一标识符。它有多种用途,包括:
- 链接的片段标识符的目标。
- 标识用于编写脚本的元素。
- 将表单元素与其标签相关联。
- 为辅助技术提供标签或说明。
- 在 CSS 中使用(特异性高或作为属性选择器)定位样式。
id
值是一个不含空格的字符串。如果包含空格,则文档不会中断,但您必须定位
将 id
替换为 HTML、CSS 和 JS 中的转义字符。所有其他字符均有效。id
值可以是 😀
或 .class
,
但这并不是一个好主意为了简化现有和未来的编程工作,请将 id
的第一个字符设为字母。
并且只能使用 ASCII 字母、数字、_
和 -
。最好想出一个 id
命名惯例,然后遵循该惯例。
因为 id
值区分大小写。
id
对于文档应该是唯一的。如果多次使用 id
,页面布局可能不会中断,
但您的 JavaScript、链接和元素互动可能无法按预期发挥作用。
链接片段标识符
导航栏包含四个链接。我们稍后将介绍 link 元素,但现在请注意,链接不受限 基于 HTTP 的网址它们可以是当前文档(或其他文档中)页面部分的片段标识符。
在机器学习研讨会网站上,页面标题中的导航栏包含四个链接:
href 属性提供超链接,激活链接会将用户定向到该超链接。当网址包含井号 (#
) 时
后跟一串字符,该字符串即为片段标识符。如果该字符串与 id
则 fragment 是指向该元素的锚标记(或书签)。浏览器将滚动到定义锚点的位置。
这四个链接指向我们网页的四个部分(通过其 id
属性标识)。当用户点击
导航栏中的四个链接、通过片段标识符链接到的元素、包含匹配 ID 的元素
减去 #
,即可滚动到视图。
机器学习研讨会的“<main>
”内容包含四个部分(ID)。当网站访问者点击某个搜索结果
<nav>
链接时,具有该片段标识符的部分将滚动到视图中。该标记类似于以下内容:
<section id="reg">
<h2>Machine Learning Workshop Tickets</h2>
</section>
<section id="about">
<h2>What you'll learn</h2>
</section>
<section id="teachers">
<h2>Your Instructors</h2>
<h3>Hal 9000 <span>&</span> EVE</h3>
</section>
<section id="feedback">
<h2>What it's like to learn good and do other stuff good too</h2>
</section>
比较 <nav>
链接中的 fragment 标识符,您会注意到,每个 fragment 标识符都与 <main>
中 <section>
的 id
匹配。
浏览器为我们提供了免费的“页首”链接。设置 href="#top"
(不区分大小写或直接设为 href="#"
)将滚动
用户会展示在页面顶部
href
中的哈希标记分隔符不是片段标识符的一部分。片段标识符始终是最后一个
部分的网址,不会发送到服务器。
CSS 选择器
在 CSS 中,您可以使用 ID 选择器(例如 #feedback
)来定位每个部分,或者使用区分大小写的
属性选择器,[id="feedback"]
。
设计脚本
在 MLW.com 上,只有老鼠才能访问复活节彩蛋。点击灯开关即可打开和关闭页面。
灯光开关图片的标记是:
html
<img src="svg/switch2.svg" id="switch"
alt="light switch" class="light" />
id
属性可用作 getElementById()
方法的参数,也可用作 #
前缀
参数(针对 querySelector()
和 querySelectorAll()
方法)。
const switchViaID = document.getElementById("switch");
const switchViaSelector = document.querySelector("#switch");
我们的一个 JavaScript 函数就利用了这种按 id
属性定位元素的功能:
<script>
/* switch is a reserved word in js, so we us onoff instead */
const onoff = document.getElementById('switch');
onoff.addEventListener('click', function(){
document.body.classList.toggle('black');
});
</script>
<label>
HTML <label>
元素有一个 for
属性,该属性的值是与其相关联的表单控件的 id
。
通过在每个表单控件上添加 id
并将每个控件与标签的 for
属性配对来创建显式标签,可确保
每个表单控件都有一个关联的标签。
虽然每个标签只能与一个表单控件相关联,但一个表单控件可以有多个相关联的标签。
如果表单控件嵌套在 <label>
起始标记和结束标记之间,则 for
和 id
属性
非必需:这称为“隐式”标签。标签可让所有用户了解每个表单控件的用途。
<label>
Send me a reminder <input type="number" name="min"> before the workshop resumes
</label>.
通过 for
和 id
之间的关联,辅助技术用户可以获取相关信息。此外,
点击标签的任意位置可将焦点移至关联的元素,从而扩展控件的点击区域。这不仅有用
针对精细动作失能的用户降低鼠标的准确度;它还可以帮助每一位手指宽度大于无线装置的移动设备用户
按钮。
在此代码示例中,假测验的第五个假问题是单选题。每个表单控件都有一个明确的
标签,每个标签都有一个唯一的 id
。为确保不会意外重复 ID,ID 值应由问题编号和值组合而成。
添加单选按钮时,由于标签用于描述单选按钮的值,因此我们将所有名称相同的按钮包含在 <fieldset>
中
其中 <legend>
是整个集合的标签或问题。
其他无障碍功能使用情形
在无障碍功能和易用性中使用 id
不限于标签。在文本简介中,<section>
通过引用 <h2>
的 id
作为 <section>
的 aria-labelledby
的值来转换为区域地标,
无障碍名称:
<section id="about" aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>
有超过 50 种 aria-*
状态和属性可用于确保可访问性。aria-labelledby
、aria-describedby
、
aria-details
和 aria-owns
将以空格分隔的 id
引用列表作为其值。aria-activedescendant
,
用于标识当前聚焦的后代元素,将单个 id
引用作为其值:单个元素的引用
具有焦点(一次只能对一个元素聚焦)。
class
class
属性提供另一种使用 CSS(和 JavaScript)定位元素的方法,但没有其他用途
(尽管框架和组件库可能会使用它们)。类属性使用一个以空格分隔的列表作为其值
元素区分大小写。
通过构建声音语义结构,可以根据元素的位置和功能对其进行定位。声音结构 支持使用后代元素选择器、关系选择器和属性选择器。在了解属性时 以及如何为具有相同属性或属性值的元素设置样式。不是你本人所为 不应使用类属性,只不过大多数开发者没有意识到他们通常不需要使用该类。
到目前为止,MLW 尚未使用任何类别。网站能否在没有类名称的情况下启动?我们等着瞧。
style
通过 style
属性,可应用内嵌样式,即应用于设置了该属性的单个元素的样式。
style
属性采用其 CSS 属性值对,该值的语法与
CSS 样式块:属性后跟一个冒号(和在 CSS 中一样),分号结束每个声明,紧跟在值后面。
样式仅应用于设置了该属性的元素,其后代会继承继承的属性值(如果未设置该属性)
会被嵌套元素上或者 <style>
块或样式表中的其他样式声明覆盖。由于该值包含
一个样式块仅应用于该元素,不能用于生成的内容、制作关键帧动画,也不能应用任何
其他 @ 规则。
虽然 style
确实是一个全局属性,但不建议使用它。相反,应在单独的一个或多个文件中定义样式。
尽管如此,在开发过程中,style
属性还是能够派上用场以实现快速样式设置(例如用于测试目的)的。然后,
“解决方案”样式,并将其粘贴在链接的 CSS 文件中。
tabindex
您可以将 tabindex
属性添加到任何元素中,使其能够获得焦点。tabindex
值用于定义
会添加到 Tab 键顺序中,并视需要添加到非默认 Tab 键顺序中。
tabindex
属性的值是一个整数。负值(惯例是使用 -1
)使元素能够
接收焦点(例如通过 JavaScript),但不会将元素添加到 Tab 键序列中。如果 tabindex
的值为 0
,
元素可通过 Tab 键获得焦点和访问,按源代码顺序添加到网页的默认 Tab 键顺序中。值为 1
或 more 用于将元素置于优先对焦序列中,不推荐使用。
本页提供了一项共享功能,该功能使用充当 <button>
的 <share-action>
自定义元素。tabindex
为零
,以便将自定义元素添加到键盘的默认 Tab 键顺序中:
<share-action authors="@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, twitter" role="button" tabindex="0">
<svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
<use href="#shareIcon" />
</svg>
<span>Share</span>
</share-action>
button
的 role
会告知屏幕阅读器用户此元素的行为应与按钮类似。JavaScript 用于确保
按钮功能承诺得到遵守;包括处理 click 和 keydown 事件以及处理 Enter 键和空格键的按键操作。
表单控件、链接、按钮和 content 可修改元素能够获得焦点;当键盘用户按下 Tab 键时,
焦点会移至下一个可聚焦元素,就像已设置 tabindex="0"
一样。默认情况下,其他元素不可聚焦。添加 tabindex
属性,它们就可以在原本无法获得焦点的情况下获得焦点。
如果文档包含 tabindex
不小于 1
的元素,这些元素将包含在单独的制表符序列中。正如您在 Codepen 中所看到的,
制表符会按一个单独的序列开始(从最低值到最高值),然后再按源顺序按常规顺序浏览这些标签。
改变 Tab 键顺序会带来非常糟糕的用户体验。它让难以依赖辅助技术(键盘和屏幕阅读器等)进行导航 您的内容。对开发者来说,管理和维护也很困难。专注很重要;还有整个单元讨论焦点和焦点顺序。
role
role
属性是 ARIA 规范的一部分,
而不是 WHATWG HMTL 规范。role
属性
用于为内容提供语义含义,使屏幕阅读器能够将某个对象的预期用户互动告知网站用户。
有一些常见的界面微件,例如组合框,
菜单栏、标签页列表
和treegrid,在没有原生 HTML 等效项。
例如,在创建标签页式设计模式时,tab
、tablist
和
可以使用 tabpanel
角色。亲眼看到
界面已经通过经验掌握了如何浏览该 widget,以及如何通过点击关联的标签显示不同的面板。
当使用一组按钮显示不同的面板时,将 tab
角色添加到 <button role="tab">
中,以便让屏幕阅读器用户知道
当前具有焦点的 <button>
可以将相关面板切换为视图,而不是实现典型的按钮类功能。
role
属性不会更改浏览器行为,也不会改变键盘或指针设备的交互 - 会向 <span>
添加 role="button"
不会将其转换为 <button>
。正因如此,我们才建议您将语义 HTML 元素用于其预期用途。但是,使用
当非语义元素被改进时,role
属性可让屏幕阅读器用户知道
转换为语义元素的作用。
contenteditable
contenteditable
属性设置为 true
的元素可修改、可聚焦,并且添加到 Tab 键顺序中,就像
已设置tabindex="0"
。Contenteditable
是枚举属性,支持 true
和 false
值,默认值为 inherit
如果该属性不存在或具有无效值,则会发生此错误。
以下三个起始标记是等效的:
<style contenteditable>
<style contenteditable="">
<style contenteditable="true">
如果您添加了 <style contenteditable="false">
,则该元素不可修改(除非其默认是可修改的,例如 <textarea>
)。
如果值无效(如 <style contenteditable="😀">
或 <style contenteditable="contenteditable">
),则值默认为 inherit
。
如需在状态之间切换,请查询 HTMLElement.isContentEditable 只读属性的值。
const editor = document.getElementById("myElement");
if(editor.contentEditable) {
editor.setAttribute("contenteditable", "false");
} else {
editor.setAttribute("contenteditable", "");
}
或者,您也可以通过将 editor.contentEditable
设置为 true
、false
或 inherit
来指定此属性。
全局属性可以应用于所有元素,甚至包括 <style>
元素。您可以使用属性和一些 CSS 来构建实时 CSS 编辑器。
<style contenteditable>
style {
color: inherit;
display:block;
border: 1px solid;
font: inherit;
font-family: monospace;
padding:1em;
border-radius: 1em;
white-space: pre;
}
</style>
请尝试将 style
的 color
更改为 inherit
以外的其他值。然后,尝试将 style
更改为 p
选择器。
请勿移除 display 属性,否则样式块将会消失。
自定义属性
我们只涉及到了 HTML 全局属性的浅层。还有一些仅适用于一个或多个元素的属性。 即使有数百个定义的属性,您也可能需要某个规范中未包含的属性。HTML 可以满足您的需求。
您可以通过添加 data-
前缀来创建任何所需的自定义属性。您可以为属性指定任何以 data-
开头的名称
后跟不以 xml
开头且不包含冒号 (:
) 的任意小写字符序列。
虽然 HTML 是宽容的,但如果您创建了不以 data
开头的不受支持属性,或即便您创建了不受支持的属性,
使用 xml
自定义自定义属性或添加 :
,可提高创建以 data-
开头的有效自定义属性的好处。
有了自定义数据属性,您就知道不会意外使用现有的属性名称。自定义数据属性可满足未来需求。
虽然浏览器不会为任何带 data-
前缀的特定属性实现默认行为,但有一个内置的数据集 API
遍历您的自定义属性。自定义属性是传达应用特定信息的绝佳方式
。以 data-name
的形式向元素添加自定义属性,并使用 dataset[name]
通过 DOM 访问这些属性
相关元素上。
<blockquote data-machine-learning="workshop"
data-first-name="Blendan" data-last-name="Smooth"
data-formerly="Margarita Maker" data-aspiring="Load Balancer"
data-year-graduated="2022">
HAL and EVE could teach a fan to blow hot air.
</blockquote>
您可以使用完整属性名称使用 getAttribute()
,也可以利用更简单的 dataset
属性。
el.dataset["machineLearning"]; // workshop
e.dataset.machineLearning; // workshop
dataset
属性会返回每个元素的 data-
属性的 DOMStringMap
对象。有多个自定义属性
(在<blockquote>
上)。数据集属性意味着,您无需知道这些自定义属性是什么即可访问其
名称和值:
for (let key in el.dataset) {
customObject[key] = el.dataset[key];
}
本文中的属性是全局属性,这意味着它们可以应用到任何 HTML 元素(尽管它们不全都对
这些元素)。接下来,我们来看一下简介图片中之前未涉及的两个属性:target
和 href
,
一些其他元素特有的属性。
检查您的理解情况
测试您对属性知识的掌握情况。
id
在文档中应该是唯一的。
选择格式正确的自定义属性。
birthday
data-birthday
data:birthday