HTML 简介

从本质上讲,HTML 是一种由 elements 组成的语言,它可以应用于文本片段,以赋予它们在文档中不同的含义(是段落吗?它是项目符号列表吗?它是表格的一部分吗?),将文档结构化为逻辑部分(它有标题吗?三栏内容?导航菜单?),并将图片和视频等内容嵌入到页面中。本模块将介绍其中的前两个,并介绍理解 HTML 所需了解的基本概念和语法。

¥At its heart, HTML is a language made up of elements, which can be applied to pieces of text to give them different meaning in a document (Is it a paragraph? Is it a bulleted list? Is it part of a table?), structure a document into logical sections (Does it have a header? Three columns of content? A navigation menu?), and embed content such as images and videos into a page. This module will introduce the first two of these and introduce fundamental concepts and syntax you need to know to understand HTML.

先决条件

¥Prerequisites

在开始本模块之前,你不需要任何先前的 HTML 知识,但你应该至少对使用计算机和被动使用网络(即,仅查看它并使用内容)有基本的熟悉。你应该已经建立了基本的工作环境(如 安装基本软件 中详述),并了解如何创建和管理文件(如 处理文件 中详述)。两者都是我们 开始使用网络 完整初学者模块的一部分。

¥Before starting this module, you don't need any previous HTML knowledge, but you should have at least basic familiarity with using computers and using the web passively (i.e., just looking at it and consuming content). You should have a basic work environment set up (as detailed in Installing basic software), and understand how to create and manage files (as detailed in Dealing with files). Both are parts of our Getting started with the web complete beginner's module.

注意:如果你正在使用无法创建自己的文件的计算机/平板电脑/其他设备,你可以尝试在线编码程序(例如 JSBinGlitch)中的(大部分)代码示例。

¥Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Glitch.

指南

¥Guides

本模块包含以下文章,这些文章将带你了解 HTML 的所有基本理论,并为你提供充足的机会来测试一些技能。

¥This module contains the following articles, which will take you through all the basic theory of HTML and provide ample opportunity for you to test out some skills.

HTML 入门

涵盖 HTML 的绝对基础知识,帮助你入门 — 我们定义元素、属性和其他重要术语,并展示它们在该语言中的适用位置。我们还展示了典型的 HTML 页面的结构以及 HTML 元素的结构,并解释了其他重要的基本语言功能。在此过程中,我们将使用一些 HTML 来激发你的兴趣!

脑子里有什么?HTML 中的元数据

HTML 文档的 head 是加载页面时不会在 Web 浏览器中显示的部分。它包含诸如页面 <title>、指向 CSS 的链接(如果你想使用 CSS 设置 HTML 内容的样式)、指向自定义图标的链接和元数据(有关 HTML 的数据,例如谁编写的,以及描述该内容的重要关键字)等信息。 文档)。

HTML 文本基础知识

HTML 的主要工作之一是赋予文本含义(也称为 semantics),以便浏览器知道如何正确显示它。本文着眼于如何使用 HTML 将文本块分解为标题和段落的结构、添加单词的强调/重要性、创建列表等。

创建超链接

超链接非常重要 - 它们使网络成为网络。本文展示了创建链接所需的语法并讨论了链接的最佳实践。

高级文本格式设置

HTML 中还有许多其他用于格式化文本的元素,我们在 HTML 文本基础知识 文章中没有涉及到。这里的元素不太为人所知,但了解仍然有用。在本文中,你将了解如何标记引文、描述列表、计算机代码和其他相关文本、下标和上标、联系信息等。

文档和网站结构

除了定义页面的各个部分(例如 "一个段落" 或 "一个图片")之外,HTML 还用于定义网站的区域(例如 "标题"、"导航菜单" 或 "主要内容栏")。本文探讨如何规划基本的网站结构以及如何编写 HTML 来表示该结构。

调试 HTML

编写 HTML 没问题,但是如果出了问题,并且你无法找出代码中的错误位置怎么办?本文将向你介绍一些可以提供帮助的工具。

评估

¥Assessments

以下评估将测试你对上述指南中涵盖的 HTML 基础知识的理解。

¥The following assessments will test your understanding of the HTML basics covered in the guides above.

标记一个字母

我们迟早都会学会写信;它也是测试文本格式化技能的有用示例。在此评估中,你将收到一封需要标记的信。

构建内容页面

此评估测试你使用 HTML 构建简单内容页面(包含页眉、页脚、导航菜单、主要内容和侧边栏)的能力。