HTML 基础

HTML（HyperText Markup Language，超文本标记语言）是浏览器能够渲染页面的基础语言。所有网页的内核都是 HTML。本文覆盖 HTML5 的核心语法、常用标签、表单和特殊字符，适合快速建立知识框架。

HTML 文档结构

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>页面标题</title>
  </head>
  <body>
    <!-- 页面内容 -->
  </body>
</html>

标签/属性	说明
`<!DOCTYPE html>`	声明文档类型为 HTML5，无需指定版本号
`<html lang="zh-CN">`	根元素，`lang` 属性告知浏览器/屏幕阅读器页面语言
`<head>`	元数据区，内容不在页面显示（标题、字符集、引入资源等）
`<body>`	用户可见的页面内容

注释

<!-- 单行注释 -->

<!--
  多行注释
  可跨越多行
-->

注释常用于划分代码区域：

<!-- 导航条开始 -->
<nav>...</nav>
<!-- 导航条结束 -->

HTTP 请求方法

HTML 表单通过两种方式提交数据：

GET：数据附加在 URL 后（?key=value），适合查询，不含敏感信息
POST：数据放在请求体中，适合登录、上传等涉及敏感或大量数据的场景

head 内常用标签

<title>页面标题</title>
<meta charset="utf-8">
<meta name="description" content="页面描述，用于 SEO">
<meta name="keywords" content="关键词1,关键词2">
<meta http-equiv="refresh" content="60">  <!-- 每 60 秒刷新 -->

<!-- 引入 CSS -->
<link rel="stylesheet" href="style.css">

<!-- 内联 CSS -->
<style>
  h1 { color: steelblue; }
</style>

<!-- 引入 JS（建议放 body 末尾） -->
<script src="app.js"></script>

标签基础概念

标签：被尖括号包裹的关键字，分双标签（<p>…</p>）和单标签（<br>）。
元素：标签加上其内容整体构成元素。
属性：写在开始标签内，name="value" 形式，常见属性：
- id：同一页面内唯一，用于 JS 选择或锚点
- class：可重复，用于 CSS 选择器

块级 vs 行内

类型	特点	代表标签
块级（block）	独占一行，可设宽高，可嵌套块级和行内	`div`、`p`、`h1~h6`、`ul`、`table`
行内（inline）	不独占行，宽高由内容决定，只能嵌套行内	`span`、`a`、`strong`、`em`、`img`

<p> 虽是块级标签，但只能嵌套行内标签，不能嵌套其他块级标签。

常用 body 标签

<!-- 标题 h1~h6 -->
<h1>一级标题</h1>

<!-- 段落 -->
<p>这是一段文字。</p>

<!-- 文本格式化 -->
<strong>加粗</strong>  <b>加粗（无语义）</b>
<em>斜体</em>          <i>斜体（无语义）</i>
<u>下划线</u>          <s>删除线</s>

<!-- 换行 / 水平线 -->
<br>
<hr>

<!-- 通用容器 -->
<div>块级容器</div>
<span>行内容器</span>

多媒体元素

图片

<img src="photo.jpg"
     alt="图片描述（无法加载时显示）"
     title="鼠标悬浮提示"
     width="800"
     height="600">

只修改 width 或 height 其中一个时，另一个会等比例缩放；同时修改两者可能使图片失真。

链接

<a href="https://example.com" target="_blank">在新标签页打开</a>
<a href="#section-id">页内跳转</a>

target="_self（默认）在当前页跳转；_blank 新标签页打开。

视频 / 音频

<!-- 视频 -->
<video src="movie.mp4" controls width="640" height="360"
       preload="auto" poster="cover.jpg">
  您的浏览器不支持 video 标签。
</video>

<!-- 音频 -->
<audio src="music.mp3" controls preload="auto"></audio>

常用属性：controls（显示控件）、autoplay（自动播放）、loop（循环）、muted（静音）。

列表

<!-- 无序列表 -->
<ul>
  <li>苹果</li>
  <li>香蕉</li>
</ul>

<!-- 有序列表（type 可为 1/A/a/I/i，start 指定起始数字） -->
<ol type="1" start="1">
  <li>第一步</li>
  <li>第二步</li>
</ol>

<!-- 描述列表 -->
<dl>
  <dt>术语</dt>
    <dd>解释</dd>
</dl>

表格

<table border="1">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

常用属性：colspan（跨列合并）、rowspan（跨行合并）、cellpadding（单元格内边距）。

表单

<form action="/submit" method="post" enctype="multipart/form-data">

  <!-- 文本框 -->
  <label for="name">姓名：</label>
  <input type="text" id="name" name="username" placeholder="请输入">

  <!-- 密码框 -->
  <input type="password" name="pwd">

  <!-- 单选 -->
  <input type="radio" name="gender" value="male" checked> 男
  <input type="radio" name="gender" value="female"> 女

  <!-- 复选 -->
  <input type="checkbox" name="hobby" value="reading"> 阅读
  <input type="checkbox" name="hobby" value="coding"> 编程

  <!-- 下拉选择 -->
  <select name="city">
    <option value="bj" selected>北京</option>
    <option value="sh">上海</option>
  </select>

  <!-- 多行文本 -->
  <textarea name="intro" rows="5" cols="40"></textarea>

  <!-- 文件上传（需 enctype="multipart/form-data"） -->
  <input type="file" name="avatar">

  <!-- 隐藏字段 -->
  <input type="hidden" name="csrf_token" value="abc123">

  <!-- 提交 / 重置 -->
  <input type="submit" value="提交">
  <input type="reset" value="重置">
  <button type="submit">提交</button>

</form>

所有需要提交的 input 都要有 name 属性，它是服务端接收数据的键。
上传文件必须同时设置 method="post" 和 enctype="multipart/form-data"。
能触发表单提交的按钮：<input type="submit"> 和 <button>（在 form 内时）。

特殊字符

字符	实体
空格	` `
`>`	`>`
`<`	`<`
`&`	`&`
`¥`	`¥`
`©`	`©`
`®`	`®`

HTTP 状态码速查

范围	含义	常见代码
1xx	继续处理	100 Continue
2xx	成功	200 OK、201 Created
3xx	重定向	301 永久跳转、302 临时跳转
4xx	客户端错误	400 Bad Request、401 未授权、403 禁止、404 Not Found
5xx	服务端错误	500 Internal Server Error、502 Bad Gateway

最后更新于 2026-06-05

CSS 基础