Python Space

Appearance

HTML ​

HTML 是网页结构的基础。你在浏览器里看到的标题、段落、图片、链接、表格、输入框、按钮，本质上都离不开 HTML。

很多零基础同学一开始会把 HTML 看成“会显示页面的代码”，这个理解不算错，但还不够准确。更准确一点说：

  • HTML 负责告诉浏览器“页面里有什么”
  • CSS 负责告诉浏览器“这些内容长什么样”
  • JavaScript 负责告诉浏览器“页面如何响应用户操作”

所以学 HTML 的重点，不是背很多标签，而是建立对“页面结构”的理解。

本节目标 ​

  • 理解 HTML 的作用
  • 理解一个完整 HTML 页面的基本结构
  • 学会使用标题、段落、链接、图片、列表、表格、表单等常见标签
  • 理解块级元素和行内元素
  • 学会写一个基础网页
  • 为后面的 CSS、JavaScript、Django 模板和爬虫页面解析打基础

什么是 HTML ​

HTML 的全称是 HyperText Markup Language，中文通常叫“超文本标记语言”。

这里有两个关键词：

1. 标记 ​

它不是像 Python 那样主要靠语句和算法来完成逻辑，而是靠“标签”来标记页面内容的含义。

例如：

  • 这一段是标题
  • 这一段是正文
  • 这是一个链接
  • 这是一张图片

2. 超文本 ​

所谓超文本，可以简单理解成：不只是普通文字，还可以包含链接、图片、音频、视频等丰富内容。

HTML 到底在浏览器里做了什么 ​

当你打开一个网页时，浏览器会读取 HTML 文档，然后根据标签把页面结构搭起来。

例如：

html
<h1>欢迎学习 HTML</h1>
<p>这是第一段内容。</p>

浏览器看到它时，会理解成：

  • 这里有一个一级标题
  • 下面有一个段落

所以 HTML 的本质不是“画页面”，而是“描述页面结构”。

一个最简单的 HTML 页面 ​

先看完整示例：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的第一个网页</title>
</head>
<body>
  <h1>欢迎学习 HTML</h1>
  <p>这是我的第一个网页页面。</p>
</body>
</html>

如果你把这段内容保存为 index.html，然后用浏览器打开，你会看到：

  • 页面标题栏显示“我的第一个网页”
  • 页面正文里有一个大标题
  • 下面有一段普通文字

这就是一个完整 HTML 页面的雏形。

逐行理解页面结构 ​

<!DOCTYPE html> ​

html
<!DOCTYPE html>

这一行的作用是告诉浏览器：这是一个 HTML5 页面。

你可以把它理解成“声明页面类型”。现代网页通常都写这一行。

<html> ​

html
<html lang="zh-CN">

这是整个 HTML 文档的根标签，页面中的其他内容都放在它里面。

lang="zh-CN" 表示页面主要语言是中文，这对搜索引擎、浏览器和辅助工具都有帮助。

html
<head>
  <meta charset="UTF-8">
  <title>我的第一个网页</title>
</head>

head 里的内容一般不是直接显示在页面正文里的，而是页面的配置信息，例如：

  • 编码方式
  • 页面标题
  • 引入 CSS 文件
  • 引入 JavaScript 文件

<meta charset="UTF-8"> ​

这一行很重要，它指定页面使用 UTF-8 编码。

如果你页面里要显示中文，通常都应该写它，否则可能出现乱码。

<title> ​

html
<title>我的第一个网页</title>

它控制的是浏览器标签页上显示的标题，而不是页面正文里的标题。

<body> ​

html
<body>
  ...
</body>

body 里放的才是用户真正能在页面中看到的内容。

所以你平时写的大多数标签，最终都会放在 body 里。

HTML 标签的基本写法 ​

HTML 的基础结构一般是：

html
<标签名>内容</标签名>

例如：

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

这里：

  • <p> 是开始标签
  • </p> 是结束标签
  • 中间是内容

有些标签还有属性，例如：

html
<a href="https://example.com">点击访问</a>

这里的 href 就是属性，用来指定链接地址。

标题标签 ​

HTML 提供了从 h1 到 h6 六级标题。

html
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

浏览器默认会把 h1 显示得最大，h6 最小。

标题的意义 ​

标题不只是“字变大”，更重要的是表示内容层级。

例如一篇文章里：

  • h1 通常是整页主标题
  • h2 可以是主要章节
  • h3 可以是章节下的小节

这不仅对阅读体验有帮助，对搜索引擎和文档结构也很重要。

段落标签 ​

最常见的正文标签就是 p。

html
<p>这是第一段内容。</p>
<p>这是第二段内容。</p>

浏览器会把每个 p 标签当成一个独立段落来显示。

换行与分割线 ​

换行 <br> ​

html
<p>第一行<br>第二行</p>

显示结果会像：

text
第一行
第二行

分割线 <hr> ​

html
<hr>

浏览器通常会显示一条水平分割线，用来分隔内容区域。

文本强调标签 ​

加粗 ​

html
<strong>重点内容</strong>

斜体强调 ​

html
<em>强调内容</em>

普通加粗样式 ​

html
<b>加粗文字</b>

普通斜体样式 ​

html
<i>斜体文字</i>

从语义角度看，strong 和 em 通常比 b 和 i 更推荐，因为它们不仅改变样式，还表达“重要”和“强调”的含义。

链接标签 ​

网页最大的特点之一，就是可以从一个页面跳到另一个页面，这就需要链接。

html
<a href="https://www.python.org">访问 Python 官网</a>

这里：

  • a 表示链接
  • href 表示链接地址

在新标签页打开 ​

html
<a href="https://www.python.org" target="_blank">新窗口打开官网</a>

target="_blank" 表示在新标签页中打开链接。

图片标签 ​

html
<img src="cat.jpg" alt="一只猫">

这里：

  • src 表示图片路径
  • alt 表示图片无法加载时的替代说明

为什么 alt 很重要 ​

因为：

  • 图片加载失败时会显示说明
  • 屏幕阅读器会读它
  • 搜索引擎也会参考它

所以不要省略。

列表 ​

HTML 里常见的列表有两种：

无序列表 ul ​

html
<ul>
  <li>Python</li>
  <li>Linux</li>
  <li>MySQL</li>
</ul>

显示效果通常是项目符号列表。

有序列表 ol ​

html
<ol>
  <li>打开编辑器</li>
  <li>编写 HTML</li>
  <li>用浏览器打开</li>
</ol>

显示效果通常是带序号的列表。

列表项 li ​

无论是有序还是无序列表，里面的每一项都要写在 li 里。

表格 ​

表格适合展示结构化数据。

html
<table border="1">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>方向</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>18</td>
    <td>Python</td>
  </tr>
  <tr>
    <td>小红</td>
    <td>19</td>
    <td>前端</td>
  </tr>
</table>

这里：

  • table 表示整个表格
  • tr 表示一行
  • th 表示表头单元格
  • td 表示普通单元格

浏览器里你会看到一个最基础的二维表格。

表单 ​

表单是网页交互里非常重要的一部分。登录、注册、搜索、留言，几乎都离不开表单。

最简单的表单示例 ​

html
<form>
  <label>用户名：</label>
  <input type="text" placeholder="请输入用户名">
  <br><br>

  <label>密码：</label>
  <input type="password" placeholder="请输入密码">
  <br><br>

  <button type="submit">提交</button>
</form>

这里涉及的标签有：

  • form：表单容器
  • label：输入项说明文字
  • input：输入框
  • button：按钮

常见 input 类型 ​

html
<input type="text">
<input type="password">
<input type="email">
<input type="number">
<input type="checkbox">
<input type="radio">

它们分别对应：

  • 文本输入
  • 密码输入
  • 邮箱输入
  • 数字输入
  • 复选框
  • 单选框

div 和 span ​

这两个标签本身没有太强的语义，但在页面布局里非常常用。

div ​

div 一般用来包住一个块级区域。

html
<div>
  <h2>课程介绍</h2>
  <p>这里是课程说明内容。</p>
</div>

span ​

span 一般用来包住一小段行内内容。

html
<p>这是 <span>重点词</span> 的示例。</p>

后面你写 CSS 时，会经常用它们配合样式控制页面结构。

块级元素和行内元素 ​

这是 HTML 初学阶段必须知道的概念。

块级元素 ​

块级元素通常会单独占一行。

常见例子：

  • div
  • p
  • h1 到 h6
  • ul
  • table
  • form

行内元素 ​

行内元素通常不会单独换行，而是和周围文字在同一行中。

常见例子：

  • span
  • a
  • strong
  • em

理解这个区别，对你后面学 CSS 布局会很有帮助。

一个完整小页面示例 ​

下面写一个稍微完整一点的页面，把前面学过的标签串起来。

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Python 学习空间</title>
</head>
<body>
  <h1>欢迎来到 Python 学习空间</h1>

  <p>这里整理了适合零基础学习者的 Python 学习资料。</p>

  <h2>你可以学习这些内容</h2>
  <ul>
    <li>Python 基础语法</li>
    <li>Linux 与数据库</li>
    <li>Django 网站开发</li>
    <li>爬虫实战</li>
  </ul>

  <h2>学习路线</h2>
  <ol>
    <li>先学基础语法</li>
    <li>再学文件和函数</li>
    <li>然后学数据库与前端</li>
    <li>最后进入 Django 和爬虫</li>
  </ol>

  <h2>加入交流</h2>
  <p>
    如果你想继续学习，可以
    <a href="https://example.com">点击这里查看更多内容</a>
  </p>

  <h2>信息登记</h2>
  <form>
    <label>你的名字：</label>
    <input type="text" placeholder="请输入名字">
    <br><br>

    <label>你的学习方向：</label>
    <input type="text" placeholder="例如 Python / 前端 / Django">
    <br><br>

    <button type="submit">提交</button>
  </form>
  </body>
</html>

这个页面虽然还没有样式，但结构已经比较完整了。

常见错误 ​

1. 标签没有正确闭合 ​

错误示例：

html
<p>这是一段文字

正确写法：

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

2. 标签嵌套混乱 ​

错误示例：

html
<p><strong>重点内容</p></strong>

正确写法：

html
<p><strong>重点内容</strong></p>

3. 忘记写编码 ​

如果页面里有中文，但没写：

html
<meta charset="UTF-8">

有时会出现乱码。

4. 把结构和样式混为一谈 ​

HTML 的职责是结构，不是样式。不要一开始就想着“这个标题要红色、20px、居中”，那是 CSS 阶段要做的事。

练习题 ​

练习 1 ​

写一个个人介绍页面，包含：

  • 标题
  • 一段自我介绍
  • 一张图片
  • 一个学习方向列表

练习 2 ​

写一个课程目录页面，使用有序列表展示学习顺序。

练习 3 ​

写一个学生信息表格，包含：

  • 姓名
  • 年龄
  • 学习方向

练习 4 ​

写一个最简单的登录表单，包含：

  • 用户名输入框
  • 密码输入框
  • 提交按钮

练习 5 ​

写一个“Python 学习站首页”的 HTML 骨架，不加 CSS，只写结构。

本节小结 ​

这一节最重要的，不是记住所有标签，而是建立一个清晰认知：

  • HTML 负责结构
  • 页面由标签组成
  • 不同标签有不同含义
  • 标题、段落、列表、表格、表单是最常见的基础构件

只要你把这一套结构意识建立起来，后面学 CSS、JavaScript、Django 模板、爬虫解析页面时，都会顺畅很多。

Built with VitePress.

Copyright © 2026