Python Space

Appearance

HTML ​

HTML 是网页结构的基础。
你打开一个网页看到的标题、段落、链接、图片、表格、输入框，本质上都来自 HTML。

HTML 是什么 ​

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>

页面结构怎么理解 ​

<!DOCTYPE html> ​

告诉浏览器：这是一个 HTML5 页面。

<html> ​

整个 HTML 文档的根节点。

放页面的“配置类信息”，例如：

  • 编码
  • 标题
  • 引入 CSS

<body> ​

真正显示给用户看的内容基本都在这里。

标题和段落 ​

html
<h1>一级标题</h1>
<h2>二级标题</h2>
<p>这是一个段落。</p>

h1 到 h6 表示不同层级的标题。
p 表示段落。

粗体、斜体和超链接 ​

html
<strong>重点内容</strong>
<em>强调内容</em>
<a href="https://example.com">点击访问</a>

图片标签 ​

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

这里：

  • src 是图片地址
  • alt 是图片加载失败时的替代说明

列表 ​

无序列表：

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

有序列表：

html
<ol>
  <li>第一步</li>
  <li>第二步</li>
</ol>

表格 ​

html
<table border="1">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>18</td>
  </tr>
</table>

表单标签 ​

表单是后面 Django、登录、注册、搜索这些功能的基础。

html
<form>
  <input type="text" placeholder="请输入用户名">
  <input type="password" placeholder="请输入密码">
  <button type="submit">提交</button>
</form>

div 和 span ​

  • div 更适合做块级结构容器
  • span 更适合包一小段行内内容

新手最容易犯的错 ​

  • 标签没闭合
  • 层级嵌套混乱
  • 把结构和样式混在一起

学 HTML 时最重要的目标 ​

  • 能看懂常见页面结构
  • 能自己写出标题、段落、列表、表单
  • 明白 HTML 负责的是“结构”

Built with VitePress.

Copyright © 2026