HTML 常用标签速查表

把 HTML 最常用的标签和属性整理成速查表,写网页时对照查。

Web 服务·共 52 条命令·最后更新 2026-07-19
返回 Web 服务

文档结构 Document Structure 8

<!DOCTYPE html>
HTML5 文档声明
<html lang="zh-CN">
根元素,指定语言
<head>...</head>
文档头部(元数据)
<meta charset="UTF-8">
字符编码
<title>页面标题</title>
页面标题(显示在浏览器标签)
<link rel="stylesheet" href="style.css">
引入外部样式表
<script src="script.js"></script>
引入外部脚本
<body>...</body>
文档主体(可见内容)

文本格式化 Text Formatting 9

<h1>~<h6>
标题(h1 最大,h6 最小)
<p>段落</p>
段落
<strong>粗体</strong>
重要文本(语义化粗体)
<em>斜体</em>
强调文本(语义化斜体)
<br>
换行(自闭合)
<hr>
水平分隔线(自闭合)
<blockquote>引用</blockquote>
块引用
<code>行内代码</code>
行内代码
<pre>预格式化文本</pre>
保留空格和换行

列表 Lists 3

<ul><li>无序列表项</li></ul>
无序列表
<ol><li>有序列表项</li></ol>
有序列表
<dl><dt>术语</dt><dd>描述</dd></dl>
定义列表

表格 Tables 7

<table>...</table>
表格容器
<thead><tr><th>表头</th></tr></thead>
表头
<tbody><tr><td>数据</td></tr></tbody>
表体
<tr>行</tr>
表格行
<th>表头单元格</th>
表头单元格(加粗居中)
<td>数据单元格</td>
数据单元格
colspan="2" / rowspan="2"
跨列/跨行

表单 Forms 10

<form action="/submit" method="POST">
表单容器
<input type="text" name="username">
文本输入框
<input type="password" name="pwd">
密码输入框
<input type="email" name="email">
邮箱输入框(自动校验)
<input type="checkbox" name="agree">
复选框
<input type="radio" name="gender">
单选框
<textarea name="message"></textarea>
多行文本框
<select><option>选项</option></select>
下拉选择
<button type="submit">提交</button>
提交按钮
<label for="id">标签</label>
表单标签(关联输入框)

语义化标签 Semantic Tags 9

<header>页头</header>
页面或区块头部
<nav>导航</nav>
导航链接区域
<main>主内容</main>
页面主内容(唯一)
<article>文章</article>
独立的内容块(如博客文章)
<section>章节</section>
内容分区
<aside>侧边栏</aside>
辅助内容
<footer>页脚</footer>
页面或区块底部
<div>通用块级容器</div>
块级元素(无语义)
<span>通用行内容器</span>
行内元素(无语义)

💡 提示

  • img 标签必须加 alt 属性,提升可访问性和 SEO。
  • 表单输入框建议加 label 关联,提升可访问性。
  • 优先使用语义化标签(header/nav/main 等),而不是全部用 div。