属性

HTML 概述中对属性进行了简要的讨论:现在我们来深入探究一下。

属性让 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。布尔值属性包括 autofocusinertcheckeddisabled requiredreversedallowfullscreendefault, loopautoplaycontrolsmutedreadonlymultiple,selected。 如果存在这些属性中的一个(或多个),则该元素会被停用、必需、只读等。如果不存在,则表示元素不存在。

布尔值可以省略、设置为空字符串或属性的名称;但值不必 设为字符串 true。所有值(包括 truefalse😀)虽然无效,但都将解析为 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>&amp;</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> 起始标记和结束标记之间,则 forid 属性 非必需:这称为“隐式”标签。标签可让所有用户了解每个表单控件的用途。

<label>
  Send me a reminder
<input type="number" name="min"> before the workshop resumes
</label>.

通过 forid 之间的关联,辅助技术用户可以获取相关信息。此外, 点击标签的任意位置可将焦点移至关联的元素,从而扩展控件的点击区域。这不仅有用 针对精细动作失能的用户降低鼠标的准确度;它还可以帮助每一位手指宽度大于无线装置的移动设备用户 按钮。

在此代码示例中,假测验的第五个假问题是单选题。每个表单控件都有一个明确的 标签,每个标签都有一个唯一的 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-labelledbyaria-describedbyaria-detailsaria-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>

buttonrole 会告知屏幕阅读器用户此元素的行为应与按钮类似。JavaScript 用于确保 按钮功能承诺得到遵守;包括处理 clickkeydown 事件以及处理 Enter 键和空格键的按键操作。

表单控件、链接、按钮和 content 可修改元素能够获得焦点;当键盘用户按下 Tab 键时, 焦点会移至下一个可聚焦元素,就像已设置 tabindex="0" 一样。默认情况下,其他元素不可聚焦。添加 tabindex 属性,它们就可以在原本无法获得焦点的情况下获得焦点。

如果文档包含 tabindex 不小于 1 的元素,这些元素将包含在单独的制表符序列中。正如您在 Codepen 中所看到的, 制表符会按一个单独的序列开始(从最低值到最高值),然后再按源顺序按常规顺序浏览这些标签。

改变 Tab 键顺序会带来非常糟糕的用户体验。它让难以依赖辅助技术(键盘和屏幕阅读器等)进行导航 您的内容。对开发者来说,管理和维护也很困难。专注很重要;还有整个单元讨论焦点和焦点顺序。

role

role 属性ARIA 规范的一部分, 而不是 WHATWG HMTL 规范role 属性 用于为内容提供语义含义,使屏幕阅读器能够将某个对象的预期用户互动告知网站用户。

有一些常见的界面微件,例如组合框菜单栏标签页列表treegrid,在没有原生 HTML 等效项。 例如,在创建标签页式设计模式时,tabtablist 和 可以使用 tabpanel 角色。亲眼看到 界面已经通过经验掌握了如何浏览该 widget,以及如何通过点击关联的标签显示不同的面板。 当使用一组按钮显示不同的面板时,将 tab 角色添加到 <button role="tab"> 中,以便让屏幕阅读器用户知道 当前具有焦点的 <button> 可以将相关面板切换为视图,而不是实现典型的按钮类功能。

role 属性不会更改浏览器行为,也不会改变键盘或指针设备的交互 - 会向 <span> 添加 role="button" 不会将其转换为 <button>。正因如此,我们才建议您将语义 HTML 元素用于其预期用途。但是,使用 当非语义元素被改进时,role 属性可让屏幕阅读器用户知道 转换为语义元素的作用。

contenteditable

contenteditable 属性设置为 true 的元素可修改、可聚焦,并且添加到 Tab 键顺序中,就像 已设置tabindex="0"Contenteditable 是枚举属性,支持 truefalse 值,默认值为 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 设置为 truefalseinherit 来指定此属性。

全局属性可以应用于所有元素,甚至包括 <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>

请尝试将 stylecolor 更改为 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 元素(尽管它们不全都对 这些元素)。接下来,我们来看一下简介图片中之前未涉及的两个属性:targethref, 一些其他元素特有的属性。

检查您的理解情况

测试您对属性知识的掌握情况。

id 在文档中应该是唯一的。

正确
错误

选择格式正确的自定义属性。

birthday
data-birthday
data:birthday