HTML 快速入门指南

🚀 第一部分：HTML 到底是什么？

最终代码效果图

HTML (HyperText Markup Language) 翻译过来是"超文本标记语言"。

它不是编程语言：你不会用 HTML 来"计算"或"执行"复杂的逻辑。
它是标记语言：你使用它来"标记"内容，告诉浏览器（比如 Chrome 或 Firefox）："嗨，这是一段文字"、"这是一个标题"、"这是一张图片"。

核心比喻：

如果一个网页是一个房子：

HTML 就是房子的骨架和结构（哪里是墙，哪里是门，哪里是窗户）。
CSS (稍后会讲) 是房子的装修和样式（墙是什么颜色，家具怎么摆放）。
JavaScript (稍后会讲) 是房子的功能电器（点击开关灯会亮，按门铃会响）。

🛠️ 第二部分：HTML 核心语法（必须掌握）

HTML 的语法由两个核心概念组成：标签 (Tag) 和 属性 (Attribute)。

1. 标签 (Tags)

标签是 HTML 的基本单位，用尖括号 < > 括起来。它们通常成对出现：

一个开始标签 (Opening Tag)，如：<p>
一个结束标签 (Closing Tag)，如：</p> (注意多了一个 /)

"标签对" 包裹着**"内容"**，三者合在一起称为一个 元素 (Element)。

示例：

html 复制代码

<p>这是一段文字。</p>

<p> 是段落 (Paragraph) 标签。
</p> 是它的结束标签。
这是一段文字。 是内容。
整个 <p>这是一段文字。</p> 就是一个"段落元素"。

特例：自闭合标签 (Self-Closing Tags)

有些标签不需要包裹内容，它们自身就代表一个事物，所以不需要结束标签。它们会在末尾加一个 / (在现代 HTML5 中，这个 / 甚至可以省略，但加上更规范)。

示例：

<img>：用于显示图片 (Image)。
<br>：用于换行 (Break)。
<hr>：用于显示一条水平线 (Horizontal Rule)。

html 复制代码

<p>看，这是一张图片：<img src="logo.png"></p>
<p>第一行<br>第二行</p>

2. 属性 (Attributes)

如果说"标签"定义了"这是什么"（比如 <img> 是图片），那么"属性"就定义了"它是什么样的"。

属性写在开始标签里。
属性总是以 名称="值" 的键值对形式出现 (值要用引号括起来)。

最关键的示例：

示例 1：链接 `<a>` 标签

<a> (Anchor) 标签用于创建超链接。它自己没用，必须给它一个 href (Hypertext Reference) 属性来指定链接地址。

html 复制代码

<a>点击我</a>

<a href="https://www.google.com">点击这里去谷歌</a>

示例 2：图片 `<img>` 标签

<img> 标签必须有 src (Source) 属性来告诉浏览器图片在哪里。同时，alt (Alternative) 属性（替代文本）也非常重要，它用于：

当图片加载失败时，显示这段文字。
帮助屏幕阅读器（视障人士使用）理解图片内容。

html 复制代码

<img src="images/my-cat.jpg" alt="一只可爱的橘猫在睡觉">

📄 第三部分：一个完整的 HTML 文档结构

你不能只写一个 <p> 标签就完事了。一个完整的 HTML 文件有固定的"模板"结构，你需要始终遵守它。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网页</title>
</head>
<body>

    <h1>这是一个一级标题</h1>
    <p>这是一段文字，介绍我的网站。</p>
    
</body>
</html>

逐行解释：

<!DOCTYPE html>: 文档类型声明。这是在告诉浏览器："接下来你要读的是最新版的 HTML5！"（这是一个必须的、固定的开头）。
<html>...</html>: 根元素 。所有的代码都必须被包裹在它里面。
- lang="zh-CN" 是一个属性，告诉浏览器这个页面是中文（中国大陆）的，有助于SEO和翻译。
<head>...</head>: 头部元素 。这里放的是"元数据"（meta-data），即描述网页本身的信息，它们不会显示在网页上 。
- <meta charset="UTF-8">: 必须设置！ 声明字符编码为 UTF-8，防止中文显示为乱码。
- <meta name="viewport" ...>: 必须设置！ 这是为了让网页在手机上正常显示（移动端适配）。
- <title>...</title>: 网页的标题。它会显示在浏览器的标签页上。
<body>...</body>: 主体元素 。这是最关键的！网页上所有你看得见的内容 （文字、图片、链接、按钮等）都必须写在 <body> 标签里面。

📌 第四部分：最常用的 HTML 标签（入门必备）

你不需要记住所有标签，先掌握下面这些，你就能构建出 90% 的静态页面了。

1. 文本标签 (Text)

<h1> 到 <h6>：标题 (Headings) 。<h1> 是最高级、最重要的标题（一个页面通常只用一个），<h6> 是最低级的。
<p>：段落 (Paragraph)。用于包裹一段文字。
<strong>：重要 (Strong) 。显示为加粗，语义上强调重要性。
<em>：强调 (Emphasis) 。显示为斜体，语义上表示强调。
<span>：内联容器 (Span)。它本身没有任何样式，但常用于给一小段文字单独设置样式（比如把一句话中的某个词标红）。

2. 列表标签 (Lists)

<ul>：无序列表 (Unordered List)。用于显示项目符号（小黑点）列表。
<ol>：有序列表 (Ordered List)。用于显示数字（1, 2, 3...）列表。
<li>：列表项 (List Item) 。无论是 <ul> 还是 <ol>，里面的每一项都必须用 <li> 包裹。

示例：

html 复制代码

<h3>购物清单</h3>
<ul>
    <li>苹果</li>
    <li>牛奶</li>
    <li>面包</li>
</ul>

<h3>操作步骤</h3>
<ol>
    <li>打开电脑</li>
    <li>写代码</li>
    <li>保存文件</li>
</ol>

3. 容器标签 (Containers)

这是 HTML 中最重要的标签之一，用于布局和组织内容。

<div>：块级容器 (Division) 。它是一个"盒子"，你可以把一组相关的元素（比如一个标题和几段文字）放进一个 <div> 里，方便统一管理和设置样式。它会独占一行。
<span>：内联容器 (Inline) 。上面提过，它也是一个"盒子"，但它不会独占一行，只包裹它内部的内容。

示例：

html 复制代码

<div>这是一个 div。</div>
<div>这是第二个 div。</div>

<span>这是一个 span。</span>
<span>这是第二个 span。</span>

4. 语义化标签 (Semantic Tags)

在 HTML5 中，不推荐你所有布局都用 <div>。为了让代码更易读、更利于 SEO（搜索引擎优化）和无障碍访问，我们推荐使用有"意义"的标签来布局。

<header>：用于页面的头部区域（如 Logo、导航栏）。
<nav>：用于导航链接 (Navigation)。
<main>：用于页面的主要核心内容。
<article>：用于一篇独立的文章或帖子。
<section>：用于一个章节或区块。
<footer>：用于页面的页脚区域（如版权信息、联系方式）。

把它们看作是 "有名字的 <div>" 就行了。

📈 第五部分：你的快速入门路径

现在你已经知道了理论，该如何实践？

步骤 1：准备工具

代码编辑器 ：不要用记事本。下载一个专业的、免费的编辑器，比如 VS Code (Visual Studio Code)，它会给你提供语法高亮和代码提示。
浏览器 ：使用现代浏览器，比如 Chrome 或 Firefox。

步骤 2：创建你的第一个文件

在你的电脑上创建一个新文件夹，比如 My-Website。
打开 VS Code。
在 My-Website 文件夹中，创建一个新文件，必须命名为 index.html。（index.html 是网站首页的默认文件名）。

步骤 3：编写代码

把下面这个"完整示例"复制粘贴到你的 index.html 文件中。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的个人主页</title>
</head>
<body>

    <header>
        <h1>欢迎来到我的主页</h1>
    </header>

    <main>
        <section>
            <h2>关于我</h2>
            <p>我是一名正在学习 HTML 的新手！<strong>我对此非常感兴趣。</strong></p>
        </section>

        <section>
            <h2>我的爱好</h2>
            <ul>
                <li>编码</li>
                <li>阅读</li>
                <li>看电影</li>
            </ul>
        </section>

        <section>
            <h2>友情链接</h2>
            <p>这是一个非常有用的学习网站：</p>
            <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML" target="_blank">MDN HTML 文档</a>
        </section>
    </main>

    <footer>
        <p>版权所有 © 2025</p>
    </footer>

</body>
</html>

步骤 4：运行！

保存你的 index.html 文件。
直接双击这个文件，它就会自动在你的默认浏览器中打开。
恭喜！你已经创建并运行了你的第一个网页！

💡 第六部分：相关知识（HTML 的朋友们）

最后，你需要知道 HTML 只是开始，它总是和另外两个技术一起工作：

CSS (Cascading Style Sheets)
- 作用：美化。负责页面的样式、布局、颜色、字体和动画。
- 如何工作 ：你在 HTML 之外创建 .css 文件，然后在 HTML 的 <head> 中使用 <link> 标签引入它。
JavaScript (JS)
- 作用：交互。负责页面的动态行为，比如：点击按钮弹出窗口、验证表单、轮播图、从服务器获取数据。
- 如何工作 ：你在 HTML 之外创建 .js 文件，然后在 HTML 的 <body> 底部使用 <script> 标签引入它。

总结：HTML 负责"有什么"，CSS 负责"长什么样"，JavaScript 负责"做什么"。

HTML 快速入门指南

🚀 第一部分：HTML 到底是什么？

最终代码效果图

🛠️ 第二部分：HTML 核心语法（必须掌握）

1. 标签 (Tags)

2. 属性 (Attributes)

示例 1：链接 <a> 标签

示例 2：图片 <img> 标签

📄 第三部分：一个完整的 HTML 文档结构

📌 第四部分：最常用的 HTML 标签（入门必备）

1. 文本标签 (Text)

2. 列表标签 (Lists)

3. 容器标签 (Containers)

4. 语义化标签 (Semantic Tags)

📈 第五部分：你的快速入门路径

步骤 1：准备工具

步骤 2：创建你的第一个文件

步骤 3：编写代码

步骤 4：运行！

💡 第六部分：相关知识（HTML 的朋友们）

示例 1：链接 `<a>` 标签

示例 2：图片 `<img>` 标签