HTML 概述

超文本标记语言 (HTML) 是用于描述网络上所显示文档的结构的标准标记语言。HTML 由一系列元素和属性组成,用于标记文档的所有组成部分,从而以有意义的方式组织文档的结构。

HTML 文档基本上是一树节点,包括 HTML 元素和文本节点。HTML 元素提供了文档的语义和格式设置,包括创建段落、列表和表格,以及嵌入图片和表单控件。每个元素可以指定多个属性。许多元素可以包含内容,包括其他元素和文本。其他元素均为空,其中标记和属性定义了其功能。

元素分为多个类别,包括元数据、分节、文本、内嵌语义、表单、交互、媒体、组件和脚本。我们将在本系列中介绍其中的大部分功能。首先,什么是元素?

HTML 由一系列元素组成,您可以使用这些元素封装或封装内容的不同部分,以使其以特定方式显示或执行操作。HTML 元素由标记分隔,标记以尖括号(<>)编写。

网页标题是一级标题,我们使用 <h1> 标记。实际标题“机器学习研讨会”是我们元素的内容。内容位于开始标记和结束标记之间。整个元素(开始标记、结束标记,以及内容)都是元素。

构成 HTML 元素的标记和内容。

结束标记与开始标记相同,前一个斜杠。

元素和标记并不完全相同,尽管许多人会互换使用这两个术语。标记名称是括号中的内容。该标签包含括号。在此示例中为 <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> 等等。

大多数被替换的元素都是空元素,但并非全部。videopictureobjectiframe 元素已被替换,但不是无效元素。它们都可以包含其他元素或文本,因此都具有结束标记。

大部分空白元素都会被替换;但并非全部,就像我们在 baselinkparammeta 中看到的那样。为什么会有空元素,其中没有任何内容,并且不会替换,从而不会在屏幕上渲染任何内容?提供内容相关信息!这些信息由元素的属性。

属性

您可能已经注意到了<img><input>例如,起始标记中不仅包含元素类型,这些以空格分隔的名称/值对的额外位(尽管有时加入值是可选的)称为属性。属性让 HTML 变得如此强大。我们将在本系列中介绍数百个属性和属性值,但在这里我们仅讨论它们的一般含义和添加方式。

属性提供有关元素的信息。与起始标记的其余部分一样,该属性不会出现在内容中,但它们确实有助于定义内容对视力正常和非视力正常的用户(辅助技术和搜索引擎)用户的显示方式。

属性仅出现在起始标记中。起始标记始终以元素类型开头。类型后面可以跟零个或多个属性,属性之间用一个或多个空格分隔。大多数属性名称都后跟一个等号(等同于属性值),并用左引号和右引号括起来。

包含属性的起始标记。

在此示例中,我们有一个具有两个属性的锚链接。这两个属性已转换内容“Registration”内部锚链接中,当用户通过键盘或其他设备点击、点按或激活该链接时,该链接会滚动到当前浏览器标签页中的 id="register" 属性。

属性定义了元素的行为、关联和功能。我们将在本系列的属性部分介绍更多属性。目前只需要注意,有些属性是全局属性,这意味着它们可以出现在任何元素的起始标记中。有些只适用于多个元素(而非全部),还有一些特定于元素,只与单个元素相关。

大多数属性都是名称/值对。布尔值属性(其值为 true、false 或与属性名称相同)可仅作为属性添加:该值不是必需的。

<img src="switch.svg" alt="light switch" ismap />

此图片有三个属性:srcaltismapsrc 属性用于提供 SVG 图片资源的位置。alt 属性提供描述图片内容的替代文本。ismap 属性是布尔值,不需要设置值。我们只是为了解释什么是属性。我们将在图片部分更详细地介绍这些属性。

虽然引用属性并非总是必需,但有时确实是必需的。如果值中包含空格或特殊字符,则需要使用引号。因此,建议始终使用引号。如果属性值是用引号括起来的,则属性之间必须出现一个或多个空格,但这实际上并不是必需的;但为了安全起见,并且为了方便易读,建议使用引号和空格,这也是一种优势。

HTML 不区分大小写,但某些属性值会区分大小写。规范中定义的值不区分大小写。未被定义为关键字的字符串通常区分大小写,包括 idclass 值。

请注意,如果某个属性值在 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 属性,您可以访问每个全局属性以及 inputpointertransitionanimation 事件。您可以通过单个元素的子类型(例如 HTMLAnchorElementHTMLImageElement)访问特定于元素的属性值和方法。

检查您的理解情况

测试您对 HTML 知识的掌握情况

HTML 元素用于设置样式。

错误
正确

选择被替换的元素。

<ul>
<input>
<p>
<img>

请选择所有真实的陈述。

属性用于描述 HTML 元素的样式。
属性会添加到元素的起始标记中。
包含空格或特殊字符的属性值必须包含在引号内。
HTML 区分大小写。