HTML

这一课你将能做到

1. 写出合法的 HTML 文档结构（doctype、head、body）
2. 使用语义化标签组织页面内容
3. 理解 HTML 与 CSS、JavaScript 的分工

为什么要学

HTML 是网页的骨架。你访问的每个网站，背后都是 HTML 在描述「这里有一个标题」「这里有一个按钮」。初学者常以为 HTML 就是「写网页」，其实它只负责结构，样式靠 CSS，交互靠 JavaScript。

人话：HTML 是「搭积木的说明书」，告诉浏览器每个部分是什么。

先建立图像

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个页面</title>
</head>
<body>
    <h1>这是标题</h1>
    <p>这是段落。</p>
</body>
</html>

浏览器解析后：

<html> 根元素
  └── <head> 元信息（不显示）
  │     └── <title> 页签标题
  └── <body> 可见内容
        ├── <h1> 大标题
        └── <p> 段落文字

跟着做

步骤 1：创建第一个 HTML 文件

新建文件 index.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>
    <header>
        <h1>CodeRoadMap</h1>
        <nav>
            <a href="/courses">课程</a>
            <a href="/practice">刷题</a>
        </nav>
    </header>
    <main>
        <article>
            <h2>Java 语言基础</h2>
            <p>入门精讲：语法、OOP、集合与异常。</p>
            <ul>
                <li>数组</li>
                <li>集合</li>
                <li>异常</li>
            </ul>
        </article>
    </main>
</body>
</html>

双击用浏览器打开，看到标题和列表。

步骤 2：理解核心标签

标签	作用	示例
<h1> ~ <h6>	标题，从大到小	<h1>主标题</h1>
<p>	段落	<p>正文</p>
<a>	链接	<a href="https://...">点我</a>
<ul> + <li>	无序列表	见上
<ol> + <li>	有序列表	<ol><li>第一项</li></ol>
<img>	图片	<img src="logo.png" alt="Logo">
<div>