HTML 常用标签速查表
把 HTML 最常用的标签和属性整理成速查表,写网页时对照查。
返回 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>定义列表
链接与图片 Links & Images 6
<a href="url">链接文本</a>超链接
<a href="url" target="_blank">新窗口打开
<a href="#id">页内锚点</a>跳转到页内元素
<img src="image.jpg" alt="描述">图片(必须加 alt)
<img src="..." width="300" height="200">指定尺寸
<figure><img><figcaption>说明</figcaption></figure>图片+说明
表格 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。