文本格式化

HTML 教程 · 第 4 章 · 9 次浏览

HTML 提供了一组文本格式化标签，用来强调、标注、修饰文字。选择哪个标签不只是看显示效果，更要看语义：浏览器默认样式只是表象，语义才是搜索引擎和辅助工具理解内容的方式。

常用文本标签速查

标签	显示效果	语义与用法
strong	加粗	重要内容，强调程度最强
b	加粗	单纯加粗，无语义（如关键词）
em	斜体	语气强调，重读的地方
i	斜体	无语义斜体（如专业术语、外语）
u	下划线	文字下划线（慎用，易误认为链接）
del	删除线	已删除或不再有效的内容
ins	下划线	新插入的内容
mark	高亮背景	标记、突出显示
small	小号字	注释、版权、免责声明等附属信息
sub / sup	下标 / 上标	化学式、数学公式、脚注
code	等宽字体	行内代码片段
kbd	键盘样式	键盘按键，如 Ctrl+C
abbr	带虚线下划线	缩写词，配合 title 显示全称

引用类标签

引用别人的话或作品，用引用标签：

<blockquote>：块级引用，独占一段，浏览器默认缩进；
<q>：行内短引用，浏览器自动加引号；
<cite>：作品名（书名、文章名），默认斜体。

选择标签的准则

优先选语义明确的标签：要强调重要性用 strong 而不是 b，要表达语气用 em 而不是 i。如果只是想要视觉效果（颜色、字号），用 CSS 而不是文本标签。这样内容在搜索引擎、屏幕阅读器、不同设备里都能被正确理解。

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文本格式化示例</title>
</head>
<body>
    <p>这是<strong>重要内容</strong>，这是<b>加粗关键词</b>，这是<em>强调语气</em>。</p>
    <p>化学式：H<sub>2</sub>O，数学：x<sup>2</sup>，键盘：<kbd>Ctrl</kbd> + <kbd>C</kbd>。</p>
    <p><mark>高亮标记</mark>用于突出显示，<small>这是版权小字</small>，<del>已删除内容</del>。</p>
    <blockquote>这是一段引用文字，浏览器会缩进显示。</blockquote>
    <p>他说：<q>保持学习</q>，出自<cite>编程学习网</cite>。</p>
</body>
</html>

📚 HTML 标签速查

常用条目速查，完整版见对应教程章节。可复制代码到在线运行中测试。

写法 / 语法	作用
`<h1>-<h6>`	标题，h1 最高，每页只用一个 h1
`<p>`	段落，自动加前后间距
`<a href="">`	链接，href 是目标地址
`<img src="" alt="">`	图片，src 地址，alt 替代文字
`<ul> / <li>`	无序列表
`<ol> / <li>`	有序列表，数字编号
`<dl> / <dt> / <dd>`	自定义列表：术语 + 说明
`<table> / <tr> / <td> / <th>`	表格：行 / 单元格 / 表头
`<form action="" method="">`	表单，action 提交地址，method 提交方式
`<input type="">`	输入控件，type 有 text/password/email/number 等
`<textarea>`	多行文本输入
`<select> / <option>`	下拉框及选项
`<button type="submit">`	按钮，submit 提交表单
`<strong> / <em>`	加粗（重要）/ 斜体（强调）
`<div> / <span>`	区块容器 / 行内容器
`<header> <nav> <main>`	语义化：页眉 / 导航 / 主体
`<section> <article> <aside>`	语义化：分节 / 独立内容 / 侧栏
`<footer>`	页脚：版权、备案
`<video> / <audio>`	HTML5 视频 / 音频，加 controls 显示控制条
`<iframe src="">`	嵌入其他网页
`<!-- 注释 -->`	HTML 注释，不显示在页面
`<br> / <hr>`	换行 / 水平分割线
`<pre>`	保留空格和换行，原样显示
`<blockquote> / <q>`	块级引用 / 行内引用
`<figure> / <figcaption>`	图文组合及说明