欢迎来到 HTML 的世界！
欢迎来到单元 2！在本章中，我们将探索 HTML（超文本标记语言）。如果说网站是一栋建筑，那么 HTML 就是砖块和木架。它为你在线上看到的一切提供了结构与意义。如果一开始看到满屏的程序代码感到眼花缭乱也不用担心——只要掌握了其中的规律，它就像学习一门非常简单的新语言一样！
7.1 文件结构
在开始添加图片和文字之前，我们需要了解 HTML 文件是如何构建的。可以把它想象成网页的「骨架」。
基本组成单元
HTML 中的一切都是由元素 (elements)、标签 (tags) 和属性 (attributes) 组成的。
• 标签 (Tags)： 这是被尖括号包围的标记，例如 <p>。大多数标签都是成对出现的：一个开始标签 <p> 和一个结束标签 </p>。
• 元素 (Elements)： 这是一个完整的组合——包含开始标签、内部的内容，以及结束标签。
• 属性 (Attributes)： 它们为元素提供额外信息。属性总是放在开始标签内，例如：<p lang="en">。
“Head”与“Body”的区别
一个 HTML 文件主要分为两个部分：
1. 页首 (<head>)： 这是页面的“大脑”。它包含元数据 (metadata)（关于页面的信息）、文件标题（你在浏览器分页标签上看到的文字），以及链接到外部文件（如 CSS 样式表或 JavaScript 脚本）。用户在实际页面上看不到这些内容。
2. 页身 (<body>)： 这是所有可见内容（文字、图片和视频）存放的地方。
编写规范的程序代码（语法规则）
为了确保浏览器能完美读懂你的程序代码，请遵循以下“黄金法则”：
• 元素名称和属性务必使用小写字母。
• 缩进 (Indent) 你的程序代码。如果一个元素位于另一个元素“之内”，请将其向右缩进几个空格。这会让程序代码变得非常易读！
• 属性值请使用双引号（例如 class="header"）。
• 在现代 HTML5 中，建议删除自闭合标签末尾的斜线（使用 <br> 而非 <br />）。
全局属性 (Global Attributes)
有些属性几乎可以用在任何 HTML 元素上，这些被称为全局属性：
• id： 为特定元素定义的唯一名称。
• class： 用于将多个元素归为同一类的名称。
• style： 用于直接添加简单的 CSS 规则。
• hidden： 告诉浏览器暂时不要显示该元素。
重点总结： 结构就是一切！组织良好的文件会使用 head 存放信息，body 存放内容，并遵循严格的小写语法规则。
7.2 结构化标记
现在我们有了骨架，让我们看看可以添加哪些不同类型的内容。
块级元素 (Block-level) 与行内元素 (Inline)
这是一个常见的混淆点，但记住以下简单的方法即可：
• 块级元素： 它们比较“霸道”。它们总是从新的一行开始，并占用所有可用的宽度（如段落 <p> 或标题 <h1>）。
• 行内元素： 它们比较“合群”。它们只占用所需的空间，并与其他元素并排显示（如粗体文字或 span）。
组织文字
我们使用特定的标签告诉浏览器这些文字是什么：
• 标题： <h1> 最重要，<h6> 次之。
• 段落： <p> 用于文字段落。
• 强调与重要性： 使用 <em> 来进行强调（斜体），使用 <strong> 来表示重要性（粗体）。
列表
制作列表的三种主要方式：
1. 无序列表 (<ul>)： 使用项目符号。
2. 有序列表 (<ol>)： 使用数字排序。你可以使用 start 属性来指定从哪个数字开始！
3. 描述列表 (<dl>)： 用于术语及其定义。
超链接 (World Wide Web 的“Web”所在)
链接是使用 <a> 标签配合 href 属性来建立的。
• 内部链接： 连接到你网站内的其他页面。
• 外部链接： 连接到其他网站。
• 指定位置： 你可以链接到页面上的特定 id（例如 href="#contact"），直接跳转到该处！
重点总结： 使用 block 元素建立结构，使用 inline 元素处理细节。用 <ol> 制作步骤说明，用 <ul> 列出随机项目。
7.3 页面组件
让我们通过图片、表格和表单，让页面变得更生动、更具交互性。
添加图片
图片使用 <img> 标签。它没有结束标签！
• alt 属性： 这非常重要！如果图片无法加载，或者视障同学使用屏幕阅读器时，它能提供文字说明。
• 比例： 尽量保持原始比例，以免图片看起来“被压扁”了。
表格
表格是用来处理数据的，不是用来排版的！
• <tr> 建立表格行 (Table Row)。
• <td> 建立标准资料单元格 (Table Data)。
• <th> 建立标题单元格（通常为粗体并居中）。
• 你可以使用 colspan（横跨列）或 rowspan（纵跨行）来合并单元格。
表单：收集信息
表单允许用户与网站进行交互。
• 输入类型： 你可以使用 type="text"、type="password" 或 type="checkbox" 等。
• 下拉式菜单： 使用 <select> 和 <option> 标签建立。
• 验证： 在表单发送到服务器之前，HTML 可以检查用户是否输入了正确的电子邮箱地址，或是否漏填了“必填”字段。
音频与视频
告别需要额外插件的年代！
• 使用 <audio> 和 <video> 标签。
• 使用 controls 属性，让用户可以点击播放/暂停。
• 在标签内使用 <source> 元素提供多种文件格式。这能确保如果浏览器不支持某种格式（如 .ogg），它还可以尝试另一种（如 .mp4）。
内嵌框架 (iframes)
iframe 就像页面上的一个“窗口”，用来显示另一个网站的内容。在博客中嵌入 Google 地图或 YouTube 视频时，经常会看到它。
记忆小撇步： 对于表格，记住 TR 代表“Table Row”，TD 代表“Table Data”。先建立行，再将资料放进去！重点总结： 表单和媒体等组件让网站“活”了起来。务必使用 alt 属性标记图片，并使用 controls 控制媒体，以确保你的网站具备良好的无障碍性和易用性。
别忘了！
如果你忘记了某个标签的名称，不必担心——即便是专业开发人员有时也会查阅资料！最重要的是理解它们如何协同工作。继续练习缩进和小写语法，你很快就会成为 HTML 高手！