第一章：HTML — 搭建页面骨架

1.1 认识 HTML

HTML（HyperText Markup Language，超文本标记语言）就是用来告诉浏览器”页面上有什么内容、它们分别是什么”的语言。

打个比方：盖一栋房子，HTML 是骨架（墙壁、门窗的位置），CSS 是装修（颜色、字体、布局），JavaScript 是电器和开关（点击按钮弹窗、提交表单这些交互行为）。三者各司其职，缺一不可。

现在我们不管装修和电器，先把骨架搭起来。

动手：创建你的第一个网页

在电脑上新建一个文件，命名为 hello.html（注意后缀是 .html，不是 .txt）。
用任意文本编辑器（VS Code、记事本都行）打开它，输入以下内容：

<h1>Hello World!</h1>
<p>这是我的第一个网页，好激动！</p>

保存，然后双击这个文件，浏览器会自动打开它——你会看到一个大标题和一行文字。

恭喜，你已经写出了人生中第一个网页。就是这么简单。

小结：HTML 就是用”标签”来描述页面内容的语言。写 HTML 就像在填一份结构化的文档。

1.2 HTML 基本结构

刚才我们只写了两行就能跑，但那并不规范。一个完整的 HTML 文件长这样：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>这是我的第一个网页。</p>
</body>
</html>

逐行来看：

代码	作用
`<!DOCTYPE html>`	告诉浏览器”这是一份 HTML5 文档”，固定写法，不用背，复制就行
`<html lang="zh-CN">`	整个页面的根标签，`lang="zh-CN"` 表示页面语言是简体中文
`<head>`	页面的”幕后信息区”，用户看不到，但浏览器需要（比如编码、标题、引入的样式等）
`<meta charset="UTF-8">`	声明字符编码为 UTF-8，防止中文显示乱码
`<title>`	浏览器标签页上显示的标题
`<body>`	页面的”舞台”——用户能看到的所有内容都写在这里

什么是标签？

HTML 的核心概念就是标签（Tag）。标签分三种形式：

<!-- 1. 成对标签：有开始、有结束 -->
<p>这是一个段落</p>

<!-- 2. 自闭合标签：不需要结束标签 -->
<img src="photo.jpg">
<br>
<hr>
<input type="text">

<!-- 3. 嵌套：标签里可以套标签，就像套娃 -->
<div>
    <h1>标题</h1>
    <p>段落文字</p>
</div>

嵌套规则：先开的后关，后开的先关——就像穿衣服，先穿的衬衫后脱，后穿的外套先脱。

<!-- ✅ 正确 -->
<div><p>文字</p></div>

<!-- ❌ 错误：交叉嵌套 -->
<div><p>文字</div></p>

小结：记住 HTML 文件的基本骨架——DOCTYPE → html → head + body。以后每次新建文件，先把这个结构搭出来。

1.3 核心标签

下面按类别过一遍最常用的标签。不用死记，用的时候查就行，用多了自然就记住了。

文本类

标题标签 <h1> ~ <h6>：从大到小共 6 级标题。

<h1>一级标题（最大）</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题（最小）</h6>

一般 <h1> 全页只用一次（相当于文章大标题），<h2> ~ <h4> 用得最多。

段落标签 <p>：每个 <p> 就是一个段落，段落之间会自动空行。

<p>第一段：今天天气真好。</p>
<p>第二段：适合写代码。</p>

链接与图片

超链接 <a>：点击后跳转到另一个页面。

<a href="https://www.baidu.com">点我去百度</a>
<a href="https://github.com" target="_blank">在新标签页打开 GitHub</a>

href：要跳转的地址
target="_blank"：在新标签页中打开（不加则在当前页跳转）

图片 <img>：在页面上显示一张图片。

<img src="https://via.placeholder.com/300x200" alt="占位图片示例">

src：图片地址（可以是网络链接，也可以是本地路径如 ./images/photo.jpg）
alt：图片加载失败时显示的替代文字，也帮助搜索引擎理解图片内容

列表

无序列表（前面是小圆点）：

<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橘子</li>
</ul>

有序列表（前面是数字）：

<ol>
    <li>起床</li>
    <li>刷牙</li>
    <li>吃早饭</li>
</ol>

ul = unordered list，ol = ordered list，li = list item。记住缩写就容易理解了。

容器

<div>（块级容器）：它本身没有任何视觉效果，就是一个”盒子”，用来把一组内容包起来，方便后续用 CSS 统一控制样式和布局。

<div>
    <h2>新闻标题</h2>
    <p>新闻内容...</p>
</div>

<div>
    <h2>另一条新闻</h2>
    <p>另一条新闻内容...</p>
</div>

为什么 <div> 是最常用的标签？因为实际开发中，我们需要大量的”盒子”来组织页面布局。你可以把 <div> 想象成快递纸箱——内容不同，但都需要箱子来分类打包。

<span>（行内容器）：和 <div> 类似，但它不会换行，适合在一行文字中框住一小部分，单独设置样式。

<p>今天的温度是 <span style="color: red;">38°C</span>，注意防暑！</p>

表单元素

表单是用户和网页交互的桥梁——登录、注册、搜索、提交反馈，全靠它。

输入框 <input>：

<input type="text" placeholder="请输入用户名">
<input type="password" placeholder="请输入密码">
<input type="email" placeholder="请输入邮箱">

type 决定了输入框的行为，placeholder 是输入前的灰色提示文字。

按钮 <button>：

<button>提交</button>
<button>取消</button>

多行输入框 <textarea>：

<textarea placeholder="请输入你的自我介绍..." rows="4" cols="40"></textarea>

综合小示例

把上面学的标签组合在一起，做一个简单的页面：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>标签综合示例</title>
</head>
<body>
    <h1>我的学习笔记</h1>
    <p>欢迎来到我的笔记页面，这里记录了我的前端学习历程。</p>

    <h2>学习资源</h2>
    <ul>
        <li><a href="https://developer.mozilla.org/zh-CN/" target="_blank">MDN 文档</a></li>
        <li><a href="https://www.bilibili.com" target="_blank">B 站教程</a></li>
    </ul>

    <h2>今日计划</h2>
    <ol>
        <li>学习 HTML 基本标签</li>
        <li>完成个人简介页面</li>
        <li>预习 CSS 基础</li>
    </ol>

    <h2>一张图片</h2>
    <img src="https://via.placeholder.com/400x200" alt="示例图片">

    <h2>留言板</h2>
    <div>
        <input type="text" placeholder="你的名字">
        <br><br>
        <textarea placeholder="写下你的留言..." rows="3" cols="40"></textarea>
        <br><br>
        <button>提交留言</button>
    </div>
</body>
</html>

把这段代码保存成 .html 文件，浏览器打开看看效果吧！

小结：h1~h6、p、a、img、ul/ol/li、div、span、input、button、textarea —— 掌握这十来个标签，你就能搭出大部分页面的骨架了。

1.4 标签的属性

你已经见过 href、src、placeholder 这些写在标签里的东西了——它们就是属性（Attribute）。

打个比方：标签是名词（一个人），属性是形容词（高矮胖瘦）。<img> 说”这里有张图”，src="xxx" 说”图片地址是 xxx”。

属性的基本写法：

<标签名 属性名="属性值">内容</标签名>

下面介绍几个最重要的属性。

`id`：唯一标识

给标签取一个独一无二的名字，整个页面里不能重复。后续 CSS 和 JS 会通过 id 精确找到这个元素。

<h1 id="main-title">网站标题</h1>
<p id="intro">这是介绍段落。</p>

`class`：分类标识

给标签分组打标签，同一个 class 可以用在多个元素上。这是 CSS 中使用最频繁的选择方式。

<div class="card">
    <h3>卡片 1</h3>
    <p>内容...</p>
</div>
<div class="card">
    <h3>卡片 2</h3>
    <p>内容...</p>
</div>

id 像身份证号（唯一），class 像”大学生”这个身份标签（很多人都是）。

常见属性速查

属性	用在哪	作用	示例
`href`	`<a>`	链接地址	`<a href="https://example.com">`
`src`	`<img>`	图片地址	`<img src="photo.jpg">`
`alt`	`<img>`	图片替代文字	`<img alt="头像">`
`target`	`<a>`	打开方式	`<a target="_blank">`
`type`	`<input>`	输入类型	`<input type="password">`
`placeholder`	`<input>`、`<textarea>`	占位提示文字	`<input placeholder="请输入">`
`id`	所有标签	唯一标识	`<div id="header">`
`class`	所有标签	分类标识	`<div class="card">`

`style`：行内样式

可以直接在标签上写 CSS 样式，快速看到效果：

<p style="color: blue; font-size: 20px;">这行字是蓝色的，字号 20px。</p>
<div style="background-color: #f0f0f0; padding: 16px;">
    <p>这个盒子有灰色背景和内边距。</p>
</div>

style 属性适合临时调试，正式开发中我们会把样式统一写到 CSS 文件里（下一章会讲）。

小结：属性就是标签的”配置项”。id 和 class 是最核心的两个属性，几乎每天都会用到。

1.5 实战练习：个人简介页面

学了这么多，是时候来一个完整的实战了。下面是一个个人简介页面的完整代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>个人简介 - 张三</title>
</head>
<body>
    <!-- 头部：名字和照片 -->
    <div id="header" style="text-align: center; padding: 20px;">
        <img src="https://via.placeholder.com/150" alt="我的头像"
             style="border-radius: 50%;">
        <h1>张三</h1>
        <p style="color: gray;">AI 应用开发方向 | 大三在读</p>
    </div>

    <hr>

    <!-- 自我介绍 -->
    <div id="about" style="max-width: 600px; margin: 0 auto; padding: 0 16px;">
        <h2>关于我</h2>
        <p>
            大家好！我是张三，目前在学习 AI 应用开发。
            我对前端开发和人工智能都很感兴趣，希望能做出有意思的 AI 产品。
            平时喜欢打篮球、看科幻电影，偶尔也写写技术博客。
        </p>

        <!-- 技能列表 -->
        <h2>我的技能</h2>
        <ul>
            <li>HTML / CSS / JavaScript 基础</li>
            <li>Python 编程</li>
            <li>AI 大模型应用开发（学习中）</li>
            <li>Git 版本管理</li>
        </ul>

        <!-- 学习目标 -->
        <h2>本学期目标</h2>
        <ol>
            <li>掌握前端三件套（HTML + CSS + JS）</li>
            <li>学会使用 React 框架</li>
            <li>完成一个 AI 聊天应用项目</li>
        </ol>

        <!-- 联系方式 -->
        <h2>联系我</h2>
        <p>
            邮箱：<a href="mailto:zhangsan@example.com">zhangsan@example.com</a>
        </p>
        <p>
            GitHub：<a href="https://github.com" target="_blank">github.com/zhangsan</a>
        </p>

        <!-- 留言区 -->
        <h2>给我留言</h2>
        <div>
            <input type="text" placeholder="你的名字" style="padding: 8px; width: 200px;">
            <br><br>
            <textarea placeholder="写点什么吧..." rows="4" cols="50"
                      style="padding: 8px;"></textarea>
            <br><br>
            <button style="padding: 8px 24px; cursor: pointer;">发送</button>
        </div>
    </div>

    <hr>

    <p style="text-align: center; color: gray; font-size: 14px;">
        © 2026 张三的个人主页
    </p>
</body>
</html>

动手试试

把上面的代码复制到一个新的 .html 文件里
用浏览器打开，看看效果
把”张三”改成你自己的名字，把内容换成你的真实信息
试着加点新东西：比如多加几个技能、放上你真实的 GitHub 链接
如果图片显示的是灰色占位图，可以换成你自己的照片路径

这一章你学到了：HTML 的文件结构、十几个核心标签、标签属性的用法，并且亲手搭出了一个完整的个人简介页面。下一章我们会学 CSS，给这个页面”装修”一下，让它变得好看起来。