欢迎来到网页设计：认识 HTML！
你好，未来的网页设计师们！本章是你理解整个互联网架构的起点。如果觉得写代码让人望而生畏，别担心——HTML 是最容易入门的起点。
我们将学习这门基础语言，它为每一个网站提供了“骨架”、结构和内容。一旦掌握了这些基础概念，你就能亲手搭建简单的网页了！
1. 什么是 HTML？网页的基石
HTML 的全称是 Hypertext Markup Language（超文本标记语言）。它是用于创建和构建万维网（World Wide Web）内容的核心语言。
这些词代表什么意思？
- 超文本 (Hypertext)： 指的是包含指向其他文本或资源链接的文本。如果你点击一个词，它带你跳转到了一个新的页面，这就是超文本在起作用！
- 标记 (Markup)： 这是关键点。HTML 使用特殊的代码，称为标签 (tags)，来“标记”或定义内容应如何显示。它告诉网页浏览器（如 Chrome 或 Safari）每一段文字扮演什么角色——是标题、段落，还是链接？
- 语言 (Language)： 浏览器理解并显示内容所遵循的一套规则。
打个比方： 想象一下建房子。HTML 就是蓝图或骨架。它定义了墙壁、门和房间的位置。它不关心墙漆的颜色（那是 CSS 的工作，我们暂时还没学到！），只关注结构本身。
快速总结
HTML 为网页提供了结构和内容。
2. 构建模块：标签、元素和属性
当你编写 HTML 时，会不断用到三个核心概念：标签 (Tags)、元素 (Elements) 和属性 (Attributes)。理解它们的区别至关重要！
标签 (Tags，即标记)
标签是写在尖括号 (< >) 中的指令。标签通常成对出现：一个开始标签和一个结束标签。
开始标签示例： <p>
结束标签示例： </p> （注意那个斜杠 /）
元素 (Elements，即内容主体)
元素由开始标签、内容和结束标签共同组成。它代表了页面上一个完整的结构。
示例： <p>这是一段文字。</p>
上面整行代码就是一个段落元素。
属性 (Attributes，即定制项)
属性为元素提供了额外信息。它们总是放在开始标签内部，通常以名称/值对的形式出现 (name="value")。
记忆小贴士： 属性 (Attribute) 以字母 A 开头，联想“Additional”（附加信息）或“Appearance”（外观修改器）。
示例： 如果你想创建一个链接，标签是 <a>。但链接要去哪里呢？这就需要属性来告知：
<a href="index.html">主页</a>
这里，href 是属性名称，"index.html" 是属性值（即目标路径）。
自闭合标签
有些标签不需要结束标签，因为它们不包裹任何内容，只是在页面中插入某个东西。这些被称为自闭合标签 (self-closing tags) 或空标签 (empty tags)。
示例： <img />（用于图片）和 <br />（用于换行）。
快速复习：术语表
标签： <p>
内容： 你好！
元素： <p>你好！</p>
属性： src="image.jpg"
3. HTML 页面的基本结构
每一个功能完整的 HTML 页面都需要一个必须具备的基本结构。你可以把它看作是浏览器理解该文档所需的绝对最低配置。
结构详解
-
<html> ... </html>：根元素。所有其他内容都必须嵌套在这个标签内。它告诉浏览器：“这是一个 HTML 文档。” -
<head> ... </head>：存放所有非可视化内容的容器。这些信息主要是给浏览器或搜索引擎看的（如关键字、字符编码等）。用户在页面上看不到这些内容。 -
<title> ... </title>：放在<head>内部。这里的文字会显示在浏览器标签页或窗口标题栏上。这对 SEO（搜索引擎优化）非常重要。 -
<body> ... </body>：存放网页所有可见内容的容器。每一个段落、图片、链接和标题，只要是用户能看到的，都必须放在<body>标签内。
刚开始觉得记不住也没关系！每个 HTML 页面都是以同样的方式开始的。
重点总结
<head> 存放的是关于页面的信息（如标题），而 <body> 存放的是呈现给用户的内容。
4. 构建内容的基本标签
这些是你组织页面文本时最常用的标签。
标题 <h1> 到 <h6>
HTML 提供了六级标题来构建文档结构。
<h1> 是最重要的标题（通常每个页面只用一次，作为主标题）。
<h6> 是最不重要的（用于次要小节或标注）。
经验之谈： 使用标题要讲逻辑，就像书的提纲一样。不要仅仅为了让字变大而去使用标题标签。
示例：
<h1>第一章：网页设计基础</h1>
<h3>4.1 结构标签</h3>
段落 <p>
<p> 标签用于定义文本块。浏览器会自动在段落元素上下方添加一小段间距（外边距）。
换行 <br />
<br /> 标签强制进行单行换行，将后面的内容移到新的一行。它是一个自闭合标签。
避免常见错误
学生常喜欢用一连串的 <br /> 标签来模拟段落间距。这是一种糟糕的做法！请务必使用 <p> 来分隔不同的观点，仅在需要强制换行（如诗歌或地址）时才使用 <br />。
5. 信息组织：列表
列表对于清晰地呈现信息至关重要。HTML 提供了两种主要的列表类型。
无序列表 <ul>
无序列表 (Unordered List) 使用项目符号来标记每一项。它非常适合那些顺序不重要的条目（比如购物清单）。
有序列表 <ol>
有序列表 (Ordered List) 使用数字或字母来标记每一项。它非常适合那些顺序很重要的步骤（比如食谱或操作指南）。
列表项 <li>
无论是有序列表还是无序列表，里面的每一项都必须用 <li>（List Item）标签包裹。
有序列表示例：
<ol>
<li>第一步</li>
<li>第二步</li>
</ol>
重点总结
记住：<ul> 或 <ol> 用于创建容器，而 <li> 用于创建容器内具体的每一项。
6. 建立连接：链接与图像
链接和图像使网页变得生动！这些标签非常依赖属性来正确工作。
超链接 (锚点) <a>
<a> 标签，也称为锚点 (Anchor) 标签，用于创建从一个页面跳转到另一个页面的链接。
关键属性：href
href (Hypertext Reference，超文本引用) 属性告诉浏览器链接的目的地。
链接到站内页面的示例：
<a href="about_us.html">关于我们的团队</a>
链接到外部网站的示例：
<a href="https://www.oxfordaqa.com">OxfordAQA 官网</a>
图像 <img />
<img /> 标签用于将图片嵌入网页。这是一个自闭合标签。
关键属性：src 和 alt
-
src(Source，资源)： 此属性指定图像文件的路径（位置）（例如："photos/logo.png"）。 -
alt(Alternate Text，替代文本)： 这是必须填写的。它提供了图像的文字说明。当图片无法加载时，会显示这段文字，或者视障用户的屏幕阅读软件会朗读这段文字。
你知道吗？ 提供优质的 alt 文字对于网页可访问性至关重要，也能帮助搜索引擎理解图片内容。
图像标签示例：
<img src="header_pic.jpg" alt="一名学生在电脑前学习" />
本章总结与寄语
你现在已经掌握了 HTML 结构的基础知识！记住：HTML 为网页提供了骨架（head, body）、内容（标题、段落、列表）和导航（链接）。
请继续练习我们学到的标签和属性——写得越多，你就越会感到得心应手。你正在成为一名熟练网页设计师的道路上稳步前进！