使用 HTML 构建内容结构

HTML 是定义任何网站内容和结构的技术。如果编写得当,它还应以机器可读的方式定义内容的语义(含义),这对于可访问性、搜索引擎优化以及充分利用浏览器为内容提供的内置功能至关重要。本模块涵盖了语言的基础知识,然后探讨了文档结构、链接、列表、图像、表单等关键领域。

预备知识

在开始本模块之前,您不需要任何 HTML 基础知识,但您应该至少对使用计算机和被动地使用网络(即,只是查看和消费内容)有基本的了解。您应该设置好一个基本的工作环境(如安装基本软件中所述),并了解如何创建和管理文件(如处理文件中所述)。这两部分都是我们面向完全初学者的开始使用 Web模块的一部分。

注意:如果你正在使用的电脑、平板电脑或其他设备无法创建文件,你可以尝试在在线编辑器中运行代码,例如CodePenJSFiddle

教程与挑战

HTML 基本语法

涵盖了 HTML 的绝对基础知识,帮助您入门 — 我们定义了元素、属性和其他重要术语,并展示了它们在语言中的位置。我们还展示了典型的 HTML 页面是如何构建的,以及 HTML 元素是如何构建的,并解释了其他重要的基本语言特性。在此过程中,我们将通过一些 HTML 实践来激发您的兴趣!

网页元数据(head 部分有什么?)

HTML 文档的 head 是页面加载时显示在网络浏览器中的部分。它包含元数据信息,例如页面 <title>、指向 CSS 的链接(如果您想使用 CSS 样式化您的 HTML 内容)、指向自定义网站图标的链接以及元数据(关于 HTML 的数据,例如作者是谁,以及描述文档的重要关键词)。

标题和段落

HTML 的主要工作之一是为文本提供结构,以便浏览器能够按照开发人员的意图显示 HTML 文档。本文解释了如何使用 HTML 通过定义标题和段落来提供基本的页面结构。

强调和重要性

上一篇文章探讨了语义在 HTML 中的重要性,并重点介绍了标题和段落。本文继续探讨语义主题,研究了将强调和重要性应用于文本的 HTML 元素(类似于印刷媒体中的斜体和粗体文本)。

列表

生活中到处都是列表——从您的购物清单到您每天下意识地遵循的回家路线列表,再到您在这些教程中遵循的指令列表!您可能不会感到惊讶,HTML 拥有一组方便的元素,允许我们定义不同类型的列表。在 Web 上,我们有三种类型的列表:无序列表、有序列表和描述列表。本课程向您展示如何使用不同类型。

高级文本功能

HTML 中还有许多其他用于定义文本语义的元素,我们没有在强调和重要性一文中提及。本文描述的元素鲜为人知,但仍然值得了解(这绝不是一个完整的列表)。在这里您将学习如何标记引用、计算机代码和其他相关文本、下标和上标、联系信息等等。

标记一封信 挑战

我们迟早都会学会写信;它也是一个有用的例子,可以测试我们的文本格式化技能。在这个挑战中,您将有一封信要标记,作为对您的 HTML 文本格式化技能以及超链接和 HTML <head> 元素正确使用的测试。

构建文档结构

除了定义页面的各个部分(例如“一个段落”或“一张图片”)之外,HTML 还拥有许多块级元素,用于定义您网站的区域(例如“页眉”、“导航菜单”、“主内容列”)。本文探讨了如何规划一个基本的网站结构,并编写 HTML 来表示这个结构。

链接(也称为超链接)非常重要——它们是使 Web 成为 Web 的原因。本文展示了创建链接所需的语法,并讨论了链接的最佳实践。

构建内容页面 挑战

构建准备好使用 CSS 进行布局的内容页面是一项非常重要的技能,因此在这个挑战中,您将测试您思考页面最终外观的能力,并选择适当的结构语义来构建布局。

HTML 图像

最初,网络只是文本,而且非常枯燥。幸运的是,很快就添加了在网页中嵌入图像(以及其他更有趣的内容类型)的功能。在本文中,我们将深入研究如何使用 <img> 元素,包括其基础知识,使用 <figure> 添加标题进行注释,并详细说明它与 CSS 背景图像的关系。

HTML 视频和音频

现在我们已经习惯了向网页添加简单的图像,下一步是开始向您的 HTML 文档添加视频和音频播放器!在本文中,我们将探讨如何使用 <video><audio> 元素来完成此操作;然后我们将通过了解如何为您的视频添加字幕/副标题来结束。

令人毛骨悚然的启动页面 挑战

在这个挑战中,我们将测试您对前几课中讨论的一些技术的知识,让您向一个关于虫子和其他令人毛骨悚然的爬行动物的启动页面添加一些图像和视频。

HTML 表格基础

本文将带您开始学习 HTML 表格,涵盖了行、单元格、标题、使单元格跨多列和多行以及如何将一列中的所有单元格分组以进行样式设置等非常基础的知识。

HTML 表格可访问性

在本文中,我们将探讨更多 HTML 表格可访问性功能,例如标题/摘要,将您的行分组到表头、表体和表脚部分,以及作用域列和行。

构建行星数据表 挑战

在这个挑战中,我们为您提供了一些关于太阳系行星的数据。您的任务是将其构建成一个可访问的 HTML 表格。

HTML 中的表单和按钮

HTML 表单和按钮是与用户交互的强大工具——最常见的是用于从用户收集数据或允许他们控制用户界面。在本文中,我们将介绍表单和按钮的基础知识。

调试 HTML

编写 HTML 很好,但如果出现问题,您找不到代码中的错误怎么办?本文将向您介绍一些可以帮助您查找和修复 HTML 错误的工具。

检验你的技能

您会在教程文章之间找到“测试您的技能”文章,以检查您是否在继续之前记住了最重要的信息。如果您想一起探索所有这些文章,可以在测试您的技能:HTML中找到它们。

附加教程

这些教程不属于学习路径,但它们仍然很有趣——您应该将这些视为进阶目标,在完成主要的“核心”文章后可选择学习。

在 HTML 中包含矢量图形

矢量图形在许多情况下都非常有用——它们文件大小小,可伸缩性强,因此在放大或放大到大尺寸时不会像素化。在本文中,我们将向您展示如何在网页中包含一个矢量图形。

从 object 到 iframe — 通用嵌入技术

开发者通常会想到在网页中嵌入图像、视频和音频等媒体。在本文中,我们采取了一种稍微不同的方法,研究了一些允许您在网页中嵌入各种内容类型的元素:<iframe><embed><object> 元素。<iframe> 用于嵌入其他网页,另外两个允许您嵌入外部资源,例如 PDF 文件。

另见

学习 HTML 和 CSS, Scrimba MDN 学习合作伙伴

Scrimba 的 学习 HTML 和 CSS 课程通过构建和部署五个出色的项目,以及由知识渊博的老师讲授的有趣互动课程和挑战,教你 HTML 和 CSS。

学习 HTML,Codecademy

另一个学习 HTML 基础知识的有用资源。

语义化 HTML 基础,Scrimba MDN 学习合作伙伴

这个交互式课程提供了对 HTML 的有用描述,特别强调了其语义方面的重要性。