超文本标记语言 (HTML) 是用于描述网络上所显示文档的结构的标准标记语言。HTML 由一系列元素和属性组成,用于标记文档的所有组成部分,从而以有意义的方式组织文档的结构。
HTML 文档基本上是一树节点,包括 HTML 元素和文本节点。HTML 元素提供了文档的语义和格式设置,包括创建段落、列表和表格,以及嵌入图片和表单控件。每个元素可以指定多个属性。许多元素可以包含内容,包括其他元素和文本。其他元素均为空,其中标记和属性定义了其功能。
元素分为多个类别,包括元数据、分节、文本、内嵌语义、表单、交互、媒体、组件和脚本。我们将在本系列中介绍其中的大部分功能。首先,什么是元素?
元素
HTML 由一系列元素组成,您可以使用这些元素封装或封装内容的不同部分,以使其以特定方式显示或执行操作。HTML 元素由标记分隔,标记以尖括号(<
和 >
)编写。
网页标题是一级标题,我们使用 <h1>
标记。实际标题“机器学习研讨会”是我们元素的内容。内容位于开始标记和结束标记之间。整个元素(开始标记、结束标记,以及内容)都是元素。
结束标记与开始标记相同,前一个斜杠。
元素和标记并不完全相同,尽管许多人会互换使用这两个术语。标记名称是括号中的内容。该标签包含括号。在此示例中为 <h1>
。一个“元素”是开始和结束标记,以及这些标记之间的所有内容,包括嵌套元素。
<p>This paragraph has some
<strong><em>strongly emphasized</em></strong>
content</p>
此段落元素中嵌套了其他元素。嵌套元素时,正确嵌套非常重要。HTML 标记的关闭顺序应与其打开顺序相反。在上面的示例中,请注意 <em>
在起始和结束标记 <strong>
中的打开和结束状态,以及 <strong>
在 <p>
标记中的打开和结束状态。
浏览器不会显示这些代码。这些代码用于解读网页内容。
HTML 的包容性非常强。例如,如果我们省略结束标记 </li>
,则系统会隐含结束标记。
<ul>
<li>Blendan Smooth
<li>Hoover Sukhdeep
<li>Toasty McToastface
</ul>
虽然不关闭 <li>
是有效的,但并非好的做法。必须提供结束 </ul>
。如果省略了无序列表的结束标记,浏览器将尝试确定您的列表和列表项的结尾,但您可能会不认可我们的决定。
每个元素的规范列出了结束标记是否必需。“两个标签都不能省略”表示需要同时添加起始标记和结束标记。该规范提供了所有必需的结束标记。
如果之前示例中的 <em>
或 <strong>
尚未关闭,浏览器不一定会为您关闭该元素。不关闭 <em>
会导致内容的呈现方式可能与您的预期不同。如果省略了 </ul>
,而下一个标记是列表父级容器的结束标记,那么您很幸运。另一方面,如果是起始 <h1>
标记,浏览器将假定标头是列表的一部分,包括继承样式。一些省略的结束标记会导致更大的问题:不关闭某些标记(例如 <script>
、<style>
、<template>
、<textarea>
和 <title>
)会破坏后续内容,如以下示例所示。
有些内容会无意中设为斜体或将标题缩进,不会破坏您的商家。在 200x300 的文本区域中,您的大部分内容看起来像没有样式,因为您忘记添加 </textarea>
,或者因为忘记关闭 </style>
而根本不显示,会导致网站无法使用。
在某些情况下,即使标记中不包含这些标记,浏览器也会包含相应元素。由于元素可以是隐式的,因此即使标记不存在,元素也可能存在。浏览器会在您的内容周围添加 <body></body>
,并在表格行周围添加 <tbody></tbody>
(即使您不执行此操作)。尽管如此,尽管省略标记是有效的,但切勿这样做。此外,如前所述,请确保它们正确嵌套。您未来是一名标记维护者,以及您代码库的其他人,都将不胜感激。
元素分为两类:已替换和未替换。
非替换元素
前面部分中标记的段落、标题和列表都不会进行替换。非替换元素周围有起始标记和结束标记(有时是可选的),这些标记可以包括文本和其他标记作为子元素。这些包含标记可以将短语或图片转换为超链接、将句子转换为标题、强调字词等等。
已替换元素和作废元素
被替换的元素会被替换为对象,无论是图形界面 (UI) 微件(对于大多数表单控件),还是光栅或可缩放图片文件(对于大多数图片)都是如此。每个对象都有默认外观,每个对象都会替换为对象。适用的样式会受到限制,具体取决于对象类型和浏览器。例如,大多数浏览器都会启用对界面 widget 和相关伪元素的有限样式。对于光栅图像,可通过 CSS 轻松完成高度、宽度、裁剪和过滤,但其他功能则不多。另一方面,使用基于 XML 的标记语言(类似于 HTML)的可缩放矢量图形是完全可缩放的(除非包含光栅图像)。它们的样式也完全可定制。请注意,能否通过链接到嵌入的 HTML 文件的 CSS 为嵌入的 SVG 设置样式取决于 SVG 的设置方式。
在此示例中,<img>
和 <input>
这两个被替换的元素被分别替换为非文本内容:图片和图形界面对象。
<input type="range">
<img src="switch.svg" alt="light switch">
上述 HTML 的输出:
被替换元素和 void 元素经常被混淆。无效元素均为自闭合元素,由一个标记表示。这意味着,不存在 void 元素的结束标记。(可选)您可以在代码末尾添加一个斜杠,这样许多人都认为这会使标记更易于阅读。继续讨论此示例,我们使用正斜线自行结束标记:
<input type="range"/>
<img src="switch.svg" alt="light switch"/>
末尾的斜杠是老式的:表示相应元素是自闭合的,且不存在匹配的结束或结束标记。
Void 元素不能包含文本内容或嵌套元素。无效元素包括 <br>
、<col>
、<embed>
、<hr>
、<img>
、<input>
、<link>
、<meta>
、<source>
、<track>
和 <wbr>
等等。
大多数被替换的元素都是空元素,但并非全部。video
、picture
、object
和 iframe
元素已被替换,但不是无效元素。它们都可以包含其他元素或文本,因此都具有结束标记。
大部分空白元素都会被替换;但并非全部,就像我们在 base
、link
、param
和 meta
中看到的那样。为什么会有空元素,其中没有任何内容,并且不会替换,从而不会在屏幕上渲染任何内容?提供内容相关信息!这些信息由元素的属性。
属性
您可能已经注意到了<img>
和<input
>例如,起始标记中不仅包含元素类型,这些以空格分隔的名称/值对的额外位(尽管有时加入值是可选的)称为属性。属性让 HTML 变得如此强大。我们将在本系列中介绍数百个属性和属性值,但在这里我们仅讨论它们的一般含义和添加方式。
属性提供有关元素的信息。与起始标记的其余部分一样,该属性不会出现在内容中,但它们确实有助于定义内容对视力正常和非视力正常的用户(辅助技术和搜索引擎)用户的显示方式。
属性仅出现在起始标记中。起始标记始终以元素类型开头。类型后面可以跟零个或多个属性,属性之间用一个或多个空格分隔。大多数属性名称都后跟一个等号(等同于属性值),并用左引号和右引号括起来。
在此示例中,我们有一个具有两个属性的锚链接。这两个属性已转换内容“Registration”内部锚链接中,当用户通过键盘或其他设备点击、点按或激活该链接时,该链接会滚动到当前浏览器标签页中的 id="register"
属性。
属性定义了元素的行为、关联和功能。我们将在本系列的属性部分介绍更多属性。目前只需要注意,有些属性是全局属性,这意味着它们可以出现在任何元素的起始标记中。有些只适用于多个元素(而非全部),还有一些特定于元素,只与单个元素相关。
大多数属性都是名称/值对。布尔值属性(其值为 true、false 或与属性名称相同)可仅作为属性添加:该值不是必需的。
<img src="switch.svg" alt="light switch" ismap />
此图片有三个属性:src
、alt
和 ismap
。src
属性用于提供 SVG 图片资源的位置。alt
属性提供描述图片内容的替代文本。ismap
属性是布尔值,不需要设置值。我们只是为了解释什么是属性。我们将在图片部分更详细地介绍这些属性。
虽然引用属性并非总是必需,但有时确实是必需的。如果值中包含空格或特殊字符,则需要使用引号。因此,建议始终使用引号。如果属性值是用引号括起来的,则属性之间必须出现一个或多个空格,但这实际上并不是必需的;但为了安全起见,并且为了方便易读,建议使用引号和空格,这也是一种优势。
HTML 不区分大小写,但某些属性值会区分大小写。规范中定义的值不区分大小写。未被定义为关键字的字符串通常区分大小写,包括 id
和 class
值。
请注意,如果某个属性值在 HTML 中区分大小写,那么在 CSS 和 JavaScript 中用作属性选择器的一部分时,该值区分大小写。
为使标记更易于阅读,建议(但并非必须)使用小写字母标记标记中的所有元素名称和属性名称,并引用所有属性值。如果您听说过“XHTML 样式的标记”一词,就表示这个词,也就是在末尾带有斜杠的自动封闭空元素。
元素外观
语义元素的默认外观由用户代理样式表设置。为此,大多数浏览器会使用实际的样式表,但也有一些浏览器会在代码中模拟这些样式表。最终的结果是一样的。尽管用户代理样式表有一些限制是由 HTML 规范设定的,但浏览器拥有宽松的宽容度,也就是说,不同浏览器之间存在一些差异。
由于标签具有语义含义,因此您选择的元素及使用的标签应适合您要显示的内容。元素的语义 (role
) 对辅助技术而言非常重要,在某些情况下,对搜索引擎也非常重要。HTML 应该用于构建内容,而不是定义内容的外观。外观是 CSS 的范畴。虽然许多用于改变内容外观的元素(例如 <h1>
、<strong>
和 <em>
)具有语义含义,但外观可以并且通常会随着作者的风格而改变。
<h1>This header has both <strong>strong</strong> and <em>emphasized</em> content</h1>
元素、属性和 JavaScript
文档对象模型 (DOM) 是 HTML 文档的结构和内容的数据表示形式。浏览器在解析 HTML 时,会为遇到的每个元素和文本部分创建一个 JavaScript 对象。这些对象称为节点,分别是元素节点和文本节点。
我们提供了一个接口来定义每个 HTML 元素的功能。HTML DOM API 提供了通过 DOM 访问和控制每个 HTML 元素的功能,并为 HTML 元素以及从该元素继承的所有 HTML 类提供接口。HTMLElement 接口表示 HTML 元素及其所有后代节点。每个其他元素都通过从它继承的接口实现它。每个继承接口都有一个构造函数、方法和属性。通过继承的 HTMLElement 属性,您可以访问每个全局属性以及 input
、pointer
、transition
和 animation
事件。您可以通过单个元素的子类型(例如 HTMLAnchorElement 和 HTMLImageElement)访问特定于元素的属性值和方法。
检查您的理解情况
测试您对 HTML 知识的掌握情况
HTML 元素用于设置样式。
选择被替换的元素。
<ul>
<input>
<p>
<img>
请选择所有真实的陈述。