超文本标记语言 (HTML) 是用于描述 Web 上显示的文档结构的标准标记语言。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 轻松完成高度、宽度、裁剪和过滤,但其他操作不多。另一方面,使用基于类似于 HTML 的 XML 的标记语言的可缩放矢量图形可完全缩放(除非它们包含光栅图片)。还可以设置各种样式。请注意,能否通过链接到嵌入 SVG 的 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 元素不能包含文本内容或嵌套元素。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 中用作属性选择器的一部分时,则区分大小写。
为了使标记更易于阅读,我们建议您(但并非必须)在标记的所有元素名称和属性名称中使用小写字母标记 HTML,并引用所有属性值。如果您听说过“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 元素用于样式设置。
选择已被替换的元素。
<img>
<p>
<ul>
<input>
请选择所有真实的说法。