欢迎来到网站创作：构建网页！

你好，IGCSE ICT 的学习者们！
本章将带你从单纯的软件使用者转变为网页创作者。理解如何使用 HTML（超文本标记语言）和 CSS（层叠样式表）来构建网页，是应对 Paper 3 考试的一项必备技能。
如果刚开始接触代码觉得有些头大，别担心。我们将把网页创建的过程拆解为简单、易学的层级！

核心目标： 自信地使用 HTML 标签来构建内容，并应用 CSS 进行格式化排版，确保网页风格统一且符合目标受众的需求。

第一层：网页结构的基础 (21.1)

把网页想象成建造房子。你需要分别为结构、室内设计和智能家居功能制定不同的计划。网站也遵循同样的原则，使用 三个开发层级 来实现各部分功能的解耦。

网页开发的三大层级

理解为什么要将这些功能分开很重要：这样可以使网站更易于管理、编辑，并保持风格的一致性。

1. 内容层 (HTML)

目的： 用于输入实际内容并构建网页的 结构（骨架）。
控制内容： 文本、图像、链接、表格、列表和标题。
类比：这好比课本本身——最原始的信息和章节。

2. 表示层 (CSS)

目的： 用于在网页中展示和 格式化 各个元素。
控制内容： 颜色、字体、尺寸、边框、间距和布局。
类比：这好比平面设计——课本页面的配色、字体选择和排版布局。

3. 行为层 (脚本语言)

目的： 使用脚本语言（如 JavaScript）来控制网页内的元素。
控制内容： 交互功能、动画效果、输入表单验证。
注意：你只需要了解这一层的作用，无需编写代码。

快速复习：三大层级

1. HTML = 结构（它是什么？）
2. CSS = 外观（它看起来怎样？）
3. 脚本 = 动作（它能做什么？）


第二层：使用 HTML 创建网页内容 (21.2)

HTML 定义了网页的基本结构，主要分为两个部分：头部（Head）和主体（Body）。

网页的 `` 部分

头部包含有关页面本身的信息（元数据/Metadata），这些信息通常在浏览器的主要窗口中是 不可见 的。

  • 页面标题 (Page Title)： 这是必不可少的。它定义了出现在浏览器标签页或窗口框架上的标题。
  • 链接外部样式表： 这告诉 HTML 页面去哪里寻找对应的 CSS 文件以应用格式。此处我们需要使用 相对路径。
  • 元标签 (Metatags)： 这些标签为浏览器和搜索引擎提供了关键信息。主要的元标签包括：
    • charset： 定义字符编码（通常为 UTF-8）。
    • description & keywords： 帮助搜索引擎了解页面内容。
    • author： 说明页面的创建者。
    • viewport： 告诉浏览器如何根据不同设备（如手机和平板）缩放页面。
  • 默认目标窗口： 设置超链接打开的默认位置（例如，在同一窗口中打开）。

网页的 `` 部分

这是所有可见内容所在的地方！

文本和结构标签

HTML 提供了预定义的文本标签，用于定义文本的重要性和结构：

  • 标题： `h1`, `h2`, `h3`（H1 最重要，H3 重要性递减）。
  • 段落： `p`。
  • 列表： `li`（列表项）。可以是 有序列表（数字编号）或 无序列表（项目符号）。
  • `
    ` 标签： 一个非常常用的 容器 或分隔标签，用于将元素分组，以便一次性对整个组应用样式或类。
使用图像、声音和视频

插入多媒体对象能让页面更生动，但必须使用正确的属性：

  • 图像： 必须设置正确的尺寸和长宽比。始终使用 替代文本 (alt text)。
    你知道吗？替代文本对于无障碍访问（帮助视障用户的屏幕阅读器）和搜索引擎优化 (SEO) 至关重要。
  • 视频和音频片段： 你需要指定是否显示 控件（播放、暂停、音量），或者媒体是否应该 自动播放。你可能还需要调整尺寸。
用于结构和数据的表格

表格是展示数据的核心工具，在早期的网页制作中也常被用于控制页面的整体布局结构。

  • 表格使用 `` 作为整体容器，`` 表示 表格行，`
    ` 表示 表头单元格，`` 表示 表格数据单元格。
  • 单元格合并： 你必须掌握如何合并单元格，使其跨越多行 (rowspan) 或多列 (colspan)。
  • 尺寸设定： 可以使用 像素 (px) 设置固定尺寸，或使用 百分比 (%) 设置响应式尺寸。
  • 样式可以直接应用于表格或单元格。

    • 导航：超链接与书签

    超链接是让互联网成为“网”的连接点。

    创建超链接：

    超链接可以由文本或图片创建。它们可以链接到：

    1. 同一页面内的书签： 这需要链接到由 id 属性 定义的 锚点（例如：<h3 id="top">）。
    2. 其他本地存储的网页： 必须使用 相对路径（例如：<a href="about.htm">）。
    3. 使用 URL 的网站： 使用完整的网页地址（例如：<a href="http://www.example.com">）。
    4. 发送邮件： 使用 mailto: 属性打开用户的默认邮件客户端。
    在指定位置打开 (目标属性)

    可以使用 target 属性来控制链接页面的打开方式：

    • 同一窗口 (`_self`)： 这是默认设置。
    • 新窗口 (`_blank`)： 在新标签页或窗口中打开链接。
    • 指定名称的窗口： 用于更复杂的基于框架的布局（虽然现在不太常用）。
    相对路径 vs. 绝对路径 (核心概念)

    这是学生最容易犯错的地方。

    绝对路径： 从服务器根目录开始的完整、固定地址（例如：C:/Documents/website/image.jpg）。
    相对路径： *相对于* 当前页面的路径（例如：images/logo.png）。

    为什么本地文件要使用相对路径： 如果你在链接本地文件（图片、CSS、其他 HTML 页面）时使用了绝对路径，当你将整个网站文件夹上传到在线服务器时，这些链接就会 失效。相对路径能确保无论文件夹被移动到哪里，链接结构始终完整。

    HTML 学习重点：
    使用合适的标签（h1, p, table）组织内容。使用元标签定义页面信息。链接本地文件和图片时，请务必使用 相对路径。

    第三层：使用 CSS 样式化网页 (21.3)

    CSS（层叠样式表）管理 表示层。它最大的好处是确保整个网站的 一致性。如果你修改了一个 CSS 文件中的样式，所有链接到该文件的页面都会自动更新。

    样式类型与层叠

    样式表之所以被称为“层叠”，是因为多个样式可以同时作用于一个元素，而系统通过一套层级规则来决定哪个规则生效：

    • 外部样式表： 一个独立的 .css 文件，链接到 HTML 中。这能确保样式在 *所有* 链接页面中保持一致。（一致性优先级最高）。
    • 行内样式属性： 直接写在 HTML 标签内的样式（例如：<p style="color: blue;">）。这会覆盖该特定元素的外部样式。

    优先级原则： 行内样式通常会覆盖外部样式。

    样式、类与元素

    我们需要方法来定位 HTML 结构的特定部分以应用格式。

    • 元素/标签样式 (通用样式)： 直接应用于 HTML 标签的样式（例如：设置 *所有* `h1` 标签为蓝色）。
    • 类 (Classes)： 以点号开头命名的自定义样式（例如：.special_text）。你可以将一个类应用于 多个元素，无论它们的标签类型是什么（H1, P, DIV 等）。类提供了设计上的灵活性。
    • 样式 vs. 类： 样式 通常指应用于标准元素（如 `p` 或 `h2`）的格式，而 类 是你定义的、可重复使用的自定义样式组（例如定义一种可重复使用的边框样式）。

    你需要掌握的关键 CSS 属性

    你必须能够创建、修改并应用样式和类来控制以下属性，以确保页面外观的统一性：

    1. 字体属性
    • 字体系列 (Font Family)： 选择字体类型（如 Arial, Times New Roman）。分为衬线体 (Serif) 和无衬线体 (Sans-serif)。
    • 尺寸： 以像素 (px) 或点 (pt) 为单位。
    • 颜色： 设置文本颜色。
    • 文本增强： 包括 粗体、斜体 和 对齐方式（左对齐、右对齐、居中、两端对齐）。
    2. 间距与布局属性
    • 段落间距： 设置段落 之前和之后 的间距。
    • 行间距： 文本行之间的距离。
    • 缩进： 设置段落或项目符号列表的缩进。
    • 背景属性： 设置背景颜色或插入背景图像。
    3. 表格专用属性

    这些样式会影响 table, tr（行）, th（表头）, 和 td（数据）元素的外观：

    • 尺寸： 设置表格/单元格的宽度和高度。
    • 对齐方式： 单元格内容的水平对齐（左、右、中）和垂直对齐（顶、中、底）。
    • 内边距 (Padding)： 单元格 *内部* 内容与边框之间的空间。
    • 边框： 控制边框的 颜色、粗细，以及边框是 可见/不可见 还是 折叠 (collapsed)（合并为简单的单线边框）。
    4. 附加与保存 CSS

    外部样式表必须保存为 层叠样式表格式 (.css)。你还可以在样式表中 添加注释（使用 /* 此处是注释 */）来解释代码，这对于后续维护非常有帮助。

    企业统一风格 (Corporate House Style, 14.2)

    请记住，你所做的所有样式决定（字体、颜色、布局）都应该遵循 企业统一风格。这是一套由公司制定的规则，确保其所有文档和数字内容（包括网站）在外观和感觉上保持一致。

    目的： 在所有媒体中维护专业的形象并强化公司的品牌识别度。

    快速复习：CSS 检查清单

    1. CSS 处理的是外观（看起来如何）。
    2. 外部样式表能确保整个网站的 一致性。
    3. 掌握如何控制 字体、背景、表格边框及内边距。
    4. 将 CSS 文件链接到 HTML 页面时，请务必使用 相对路径。

    * thinka提供的内容由AI生成，可能并非总是准确或最新。请将其用作辅助资源，并与官方材料进行核实。

    立即实践所学

    不要只看笔记——用无限AI题库练习，即时获得批改反馈。加入超过100,000名正在提升成绩的学生。

    立即开始练习查看定价