HTML 速查表
最后更新
文档结构
每个 HTML 页面都从这个骨架开始。
| 元素 | 作用 |
|---|---|
<!DOCTYPE html> | 声明文档为 HTML5（写在第一行） |
<html lang="en"> | 根元素；lang 设置页面语言 |
<head> | 元数据：标题、链接、脚本，不会显示在页面上 |
<meta charset="UTF-8"> | 字符编码（一定要写） |
<meta name="viewport" content="width=device-width, initial-scale=1"> | 在手机上按屏幕自适应缩放 |
<title> | 显示在浏览器标签页和搜索结果中的页面标题 |
<body> | 页面上所有可见的内容都放在这里 |
文本与标题
| 元素 | 作用 |
|---|---|
<h1> … <h6> | 标题，<h1> 最重要（每页一个） |
<p> | 文本段落 |
<br> | 换行（没有结束标签） |
<hr> | 主题分隔 / 水平线 |
<strong> | 重要文本（粗体） |
<em> | 强调文本（斜体） |
<span> | 行内容器，用于给一小段文本设置样式 |
<code> | 行内代码 |
<pre> | 预格式化文本（保留空白） |
<blockquote> | 引用的文本块 |
链接与图片
| 元素 | 语法 |
|---|---|
| 链接 | <a href="https://coddy.tech">Coddy</a> |
| 在新标签页中打开 | <a href="..." target="_blank" rel="noopener"> |
| 锚点（跳转到某个 id） | <a href="#section">Jump</a> |
| 图片 | <img src="cat.png" alt="A cat" width="200"> |
| 响应式图片 | <img src="..." srcset="..." sizes="..."> |
| 带说明文字的插图 | <figure><img ...><figcaption>…</figcaption></figure> |
列表
| 元素 | 作用 |
|---|---|
<ul> | 无序列表（项目符号） |
<ol> | 有序列表（编号） |
<li> | 列表项（放在 <ul> 或 <ol> 内） |
<dl> | 描述列表 |
<dt> / <dd> | 描述术语 / 描述内容 |
表格
| 元素 | 作用 |
|---|---|
<table> | 表格容器 |
<thead> / <tbody> / <tfoot> | 表头、表体和表尾分组 |
<tr> | 表格行 |
<th> | 表头单元格（粗体、居中） |
<td> | 数据单元格 |
colspan / rowspan | 跨列 / 跨行合并单元格 |
表单与输入框
所有收集输入的表单都由这些部件组成。
| 元素 | 语法 / 用途 |
|---|---|
| 表单 | <form action="/submit" method="post"> |
| 文本输入框 | <input type="text" name="q" placeholder="Search"> |
| 邮箱 / 密码 | <input type="email">, <input type="password"> |
| 复选框 / 单选按钮 | <input type="checkbox">, <input type="radio"> |
| 数字 / 日期 | <input type="number">, <input type="date"> |
| 标签 | <label for="q">Search</label> |
| 多行文本 | <textarea rows="4"></textarea> |
| 下拉菜单 | <select><option>One</option></select> |
| 按钮 | <button type="submit">Send</button> |
| 必填字段 | <input required> |
语义化与布局标签
用这些标签代替通用的 <div>，浏览器、屏幕阅读器和搜索引擎才能读懂你的页面。
| 元素 | 标记的内容 |
|---|---|
<header> | 页面或区块的顶部（logo、导航） |
<nav> | 导航链接 |
<main> | 页面的主要内容（每页一个） |
<section> | 按主题划分的一组内容 |
<article> | 独立完整的内容（文章、卡片） |
<aside> | 侧边栏 / 附属内容 |
<footer> | 页面或区块的底部 |
<div> | 通用块级容器（没有语义） |
常用全局属性
| 属性 | 作用 |
|---|---|
id | 元素的唯一标识 |
class | 一个或多个类名（供 CSS / JS 使用） |
style | 行内 CSS（尽量少用） |
title | 鼠标悬停时显示的提示文字 |
data-* | 自定义数据属性，例如 data-id="42" |
hidden | 隐藏元素 |
你会用到的每个 HTML 标签和属性，都按用途分好了类。这份 HTML 速查表涵盖页面骨架、文本和链接、图片和媒体、列表、表格、表单，以及让标记更有意义的语义化标签。
这里全部是标准 HTML5，在所有现代浏览器中都能使用。复制一个标签，或者打开 HTML 在线编辑器边改边实时预览，无需任何配置。正在做你的第一个网页？Coddy 的免费交互式 HTML 课程从基础讲起。
HTML 速查表常见问题
这份 HTML 速查表免费吗？
免费，而且无需注册。把它加入书签，需要查标签或属性时随时回来看。
<section> 和 <div> 有什么区别？
<section> 是语义化标签，它告诉浏览器和屏幕阅读器，里面的内容是一组有意义、按主题划分的内容，通常还带有标题。<div> 没有任何语义，只是用于设置样式或编写脚本的通用容器。有合适的语义化标签（<section>、<article>、<nav>）就用它，都不合适时再退回到 <div>。所有 HTML 标签都需要结束标签吗？
大多数需要（
<p>...</p>），但少数“空元素”不需要，因为它们不能包含任何内容：<img>、<br>、<hr>、<input>、<meta> 和 <link>。在 HTML5 中，写不写末尾的斜杠都可以。可以在线练习 HTML 吗？
可以。打开 HTML 在线编辑器，就能在浏览器中编写 HTML 并实时预览，无需安装。想系统地学，Coddy 免费的交互式 HTML 课程会一步步教你标签、表单和布局。
这份速查表适合初学者吗？
适合。它从页面骨架和最先会用到的日常标签讲起，再到表单和语义化标记，第一天就能用上前面的部分。
相关资源
更多速查表
