HTML

目标

使用正确的 HTML 标签（如段落、标题、列表和图像）设计和构建网页
通过跟踪其 HTML 源代码绘制页面

资源

第 2 章幻灯片
W3schools 上的教程
HTML 标签参考
198.209.19.99/~blu/book_examples/ch02-html-files/all_examples.html
关于 HTML 的简短维基教科书

什么是 HTML？

HTML（超文本标记语言）是定义网页的标准语言，网页作为您 Web 应用程序的界面。HTML 文件是遵循 HTML 语法的纯文本文件。浏览器知道如何获取 HTML 文件并在浏览器窗口中显示由 HTML 文件定义的页面。该文件可以存储在运行浏览器的计算机的本地磁盘上，也可以使用 URL 从 Web 服务器获取。创建 HTML 文件是编码，因为结果源代码会被浏览器（一种虚拟机）执行。

标签定义页面结构

HTML 文件由标记起来的标记组成，如这幅图片所示

文件开头的标签是特殊的，因为它用于指示文件遵循的标准。<!DOCTYPE html> 表示 HTML5 - 最新的 HTML 标准，其中包含一些新功能。您可以将此标签复制粘贴到您创建的每个 HTML 文件中。

大多数标签成对出现 - 一个开始标签和一个结束标签。每对标签为网页定义一个元素，该元素可以是可见的或不可见的。可见元素就像盒子一样。所有盒子都包含一些内容，一些盒子可以包含其他盒子。例如，<html></html></html> 定义了根（最高级别）元素，它应该包含 HTML 文件中的所有其他内容。在“html”元素内，我们有“head”元素和“body”元素，它们由其相应的标签定义。在“head”元素内是“title”元素，在“body”元素内是“paragraph”元素，由

<p></p>

标签对定义。 “title”元素和“paragraph”元素都以文本作为其内容。这种嵌套结构类似于树。实际上，浏览器总是先将 HTML 文件解析为一个 DOM 对象（树形数据结构），然后在屏幕上绘制页面。请注意，

<!-- -->

标签定义注释，用于文档说明，对页面没有影响。右侧的图形描绘了 HTML 文件中嵌套标签定义的树结构。

我们将包含其他元素的元素称为父元素，将包含的元素称为子元素。显然，子元素必须完全包含在其父元素中，这意味着标签必须正确嵌套。例如，以下 HTML 片段对浏览器来说是令人困惑的，因为这两个元素混合在一起了

<em> emphasized and<bold>bold-faced</em></bold>

如果元素可以包含其他元素，我们将这些元素称为块元素。例如，段落 (<p>) 元素和列表 (<ul>) 元素是块元素，它们通常在页面上占据多行。所有其他元素称为内联元素。有些标签是自闭合的，例如 <br/> 定义了一个换行符，这是必需的，因为 HTML 中的所有空格字符都会被浏览器忽略。有些标签允许我们为元素定义额外的属性，例如 <img src="MyPicture.jpg"/> 定义了由“src”属性指定的路径处的图像。每个属性都是一个名值对，值用双引号括起来。从这个例子中可以看出，图像通过使用指向图像的 <img> 标签嵌入到网页中，而实际图像不是 HTML 文件的一部分。这是一个外部组件的示例，它还包括 CSS 和 JavaScript 文件。此类外部组件必须单独下载并合并到网页中。

以下是一个显示各种元素及其在网页上的显示方式的示例。右键点击页面，选择“查看源代码”以查看页面 HTML 源文件的内容。

学习 HTML 的最佳方法是学习示例并根据需要调整它们。我们的目标是能够通过查看 HTML 源文件在脑海中勾勒出页面的图像。换句话说，我们希望了解我们在 HTML 文件中编写的内容与页面上显示的内容之间的关系，以便我们可以想象和创建网页。

基本标签

您可以在 W3C 学校找到 HTML 标签的完整列表。更具体地说，您需要了解如何使用以下标签（单击标签以查看标签的描述和示例用法）。

元标签

在 head 元素中，可以使用多个元标签来提供有关 HTML 文档的信息，如此示例所示。

带有“charset”属性的元标签是必需的。此属性通常设置为“utf-8”，如此示例所示。

HTML5 语义

HTML5 引入了一些语义元素，以帮助搜索引擎或其他程序更好地识别网页的结构。