常用 HTML 元素

HTML 提供了丰富的元素来构建网页内容。理解每个元素的语义含义、正确用法和适用场景，是编写高质量 HTML 代码的基础。本章将系统介绍最常用的 HTML 元素。

理解 HTML 元素

元素的本质

HTML 元素不仅仅是渲染成某种样式的标签，更重要的是它承载着语义信息。浏览器、搜索引擎和辅助技术都依赖元素语义来理解和处理网页内容。

选择正确的元素意味着：

可访问性：屏幕阅读器能正确解读内容
SEO 优化：搜索引擎能理解页面结构
代码可维护性：开发者能快速理解代码意图
未来兼容性：新工具和技术能正确处理语义化内容

块级元素与行内元素

HTML 元素根据默认显示方式分为两类：

块级元素（Block-level Elements）：

独占一行，从新行开始
宽度默认填满父容器
可以包含其他块级元素和行内元素
例如：<div>、<p>、<h1>-<h6>、<ul>、<ol>、<table>、<form>

行内元素（Inline Elements）：

不独占一行，与其他行内元素并排
宽度由内容决定
只能包含其他行内元素
例如：<span>、<a>、<strong>、<em>、<img>、<input>

提示

这种分类在 CSS 中变得模糊，因为 display 属性可以改变元素的显示方式。但在 HTML 层面，理解元素的默认行为仍然很重要。

标题元素 h1-h6

HTML 提供六个级别的标题元素，用于构建文档的层次结构。

基本语法

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

标题的语义含义

标题元素不只是让文字变大变粗，它们定义了文档的大纲结构：

<h1> 表示页面最重要的标题，通常是页面主题
<h2> 表示主要章节
<h3> 表示子章节
以此类推，层级越低，内容越具体

搜索引擎使用标题来理解页面内容和结构。屏幕阅读器用户可以通过标题快速导航到感兴趣的部分。

使用规范

1. 每个页面只有一个 <h1>

<!-- 推荐 -->
<h1>文章标题</h1>
<h2>第一章</h2>
<h3>第一节</h3>

<!-- 不推荐：多个 h1 会混淆文档结构 -->
<h1>文章标题</h1>
<h1>第一章</h1>  <!-- 应该用 h2 -->

2. 不要跳过标题级别

<!-- 正确：层级递进 -->
<h1>网站标题</h1>
<h2>产品介绍</h2>
<h3>核心功能</h3>

<!-- 错误：跳级 -->
<h1>网站标题</h1>
<h3>核心功能</h3>  <!-- 缺少 h2 -->

3. 不要为了样式使用标题

<!-- 错误：用标题实现大字体 -->
<h1>欢迎注册</h1>  <!-- 这只是一个表单标题，不应该用 h1 -->

<!-- 正确：使用 CSS 控制样式 -->
<p class="large-text">欢迎注册</p>

标题与文档大纲

浏览器会根据标题自动生成文档大纲，辅助技术用户可以：

查看所有标题列表
按标题级别筛选
快速跳转到特定章节

<article>
    <h1>JavaScript 入门指南</h1>
    
    <section>
        <h2>什么是 JavaScript</h2>
        <p>JavaScript 是一种编程语言...</p>
        
        <section>
            <h3>JavaScript 的历史</h3>
            <p>1995 年由 Brendan Eich 创建...</p>
        </section>
    </section>
    
    <section>
        <h2>基础语法</h2>
        
        <section>
            <h3>变量声明</h3>
            <p>使用 let 和 const...</p>
        </section>
        
        <section>
            <h3>数据类型</h3>
            <p>JavaScript 有七种原始类型...</p>
        </section>
    </section>
</article>

段落和文本结构

段落 p

<p> 元素表示一个段落，是最常用的文本容器：

<p>这是一个段落。段落是文本的基本组织单位，用于将相关内容组织在一起。</p>

<p>这是另一个段落。浏览器会在段落之间自动添加间距。</p>

段落的作用：

组织相关文本内容
提供默认的文本间距
屏幕阅读器可以按段落导航

不要在段落中嵌套块级元素：

<!-- 错误：p 不能包含 div -->
<p>
    这是一段文字
    <div>这是块级元素</div>
</p>

<!-- 浏览器会将其解析为 -->
<p>这是一段文字</p>
<div>这是块级元素</div>
<p></p>

换行 br

<br> 元素在文本中创建换行：

<p>
    地址：<br>
    北京市朝阳区<br>
    建国路 88 号
</p>

<p>
    床前明月光，<br>
    疑是地上霜。<br>
    举头望明月，<br>
    低头思故乡。
</p>

使用原则：

用于需要保留换行的内容（地址、诗歌、歌词）
不要用于增加间距（使用 CSS margin）
不要连续使用多个 <br>（使用段落或 CSS）

<!-- 错误：用 br 创建间距 -->
<p>第一段内容</p>
<br><br><br>
<p>第二段内容</p>

<!-- 正确：用 CSS 控制间距 -->
<p>第一段内容</p>
<p class="spaced">第二段内容</p>

水平线 hr

<hr> 元素表示段落级别的主题分隔：

<section>
    <h2>第一章</h2>
    <p>章节内容...</p>
</section>

<hr>

<section>
    <h2>第二章</h2>
    <p>另一个主题的内容...</p>
</section>

<hr> 的语义是"主题转换"，不是"画一条线"。如果只是为了装饰，应该使用 CSS 边框。

预格式化文本 pre

<pre> 元素保留文本中的空白和换行：

<pre>
function hello() {
    console.log("Hello, World!");
}

// 代码缩进会被保留
if (true) {
    return "yes";
}
</pre>

常用于展示：

代码片段
ASCII 艺术
需要特定格式的文本（如表格数据）

<pre> 内的文本默认使用等宽字体，通常与 <code> 配合使用展示代码。

文本语义元素

文本语义元素用于标记文字的含义和重要性，是语义化 HTML 的重要组成部分。

强调元素

strong - 重要内容

<strong> 表示内容具有强烈的重要性、严重性或紧迫性：

<p><strong>警告：</strong>请勿在易燃环境使用本产品。</p>

<p>密码必须<strong>至少 8 位</strong>，且包含大小写字母。</p>

<p>在提交前，请<strong>仔细检查</strong>所有信息。</p>

浏览器默认将 <strong> 渲染为粗体，但语义比样式更重要：

屏幕阅读器会用更强的语调朗读
搜索引擎可能给予更高权重

em - 语气强调

<em> 表示语气上的强调，会改变句子的意思：

<!-- 强调"谁"做的 -->
<p><em>我</em>喜欢编程。</p>

<!-- 强调"什么" -->
<p>我喜欢<em>编程</em>。</p>

<!-- 强调"程度" -->
<p>我<em>非常</em>喜欢编程。</p>

<em> 可以嵌套，每层嵌套表示更强的强调：

<p>我已经<em><em>非常</em>努力</em>了。</p>

strong 与 em 的区别

这两个元素常被混淆，关键区别在于语义：

<strong>：内容本身很重要（警告、关键信息）
<em>：通过语气强调某个词（改变句子含义）

<!-- strong：整句话都很重要 -->
<p><strong>系统将在 5 分钟后重启。</strong></p>

<!-- em：强调某个特定词 -->
<p>系统将在<em>5 分钟</em>后重启。</p>

文本标记元素

b - 吸引注意

<b> 元素用于吸引读者注意，不表示重要性：

<p>产品特点：<b>轻量</b>、<b>快速</b>、<b>安全</b></p>

<p>本文摘要：这是一篇关于<b>人工智能</b>的文章...</p>

<p>搜索结果中高亮关键词：这是关于<b>HTML</b>的教程</p>

<b> 与 <strong> 都显示为粗体，但语义不同：

<strong>：内容重要，需特别关注
<b>：只是视觉上突出，无特殊重要性

mark - 高亮标记

<mark> 表示因与上下文相关而被高亮的内容：

<!-- 搜索结果高亮 -->
<p>搜索"HTML"的结果：本教程介绍<mark>HTML</mark>基础知识...</p>

<!-- 引用中的重点 -->
<blockquote>
    学习编程最重要的是<mark>实践</mark>，光看书是学不会的。
</blockquote>

<!-- 文档中需要注意的部分 -->
<p>请在<mark>三天内</mark>完成注册。</p>

<mark> 与搜索结果配合使用最为常见，但也可用于在引用中标记原文未强调的内容。

s - 不再准确

<s> 表示内容不再准确或不再相关：

<p>原价：<s>¥999</s>，限时优惠价：¥599</p>

<p><s>服务器维护时间：每周日凌晨 2 点</s>（已调整为周三）</p>

<s> 与 <del> 的区别：

<s>：内容已过时但仍保留
<del>：表示文档的删除修订

u - 非文本注解

<u> 表示非文本注解，如拼写错误标记：

<p>这个单词<u>拼错</u>了。</p>

<p>作文中的<u>语法错误</u>需要改正。</p>

注意

避免使用 <u> 做下划线装饰，它容易与链接混淆。装饰性下划线应使用 CSS。

术语和引用元素

cite - 作品标题

<cite> 用于标记创作作品的标题：

<p>我最喜欢的书是<cite>《百年孤独》</cite>。</p>

<p>根据<cite>ECMAScript 规范</cite>，let 是块级作用域...</p>

<p>在电影<cite>《肖申克的救赎》</cite>中...</p>

创作作品包括：书籍、论文、文章、歌曲、电影、电视节目、游戏、绘画、雕塑、法律案件、网站等。

常见错误：用 <cite> 标记作者名字

<!-- 错误：cite 不用于作者名 -->
<p>— <cite>鲁迅</cite></p>

<!-- 正确：cite 用于作品标题 -->
<p>— 鲁迅《<cite>狂人日记</cite>》</p>

q - 行内引用

<q> 用于短引用（不需要换行的引用）：

<p>孔子曰：<q>学而时习之，不亦说乎</q>。</p>

<p>他常说：<q>代码如诗</q>，以此勉励团队。</p>

浏览器会自动为 <q> 添加引号。使用 cite 属性可以标明来源：

<p>
    <q cite="https://example.com/quote">知识就是力量</q>
</p>

blockquote - 块引用

<blockquote> 用于长引用（需要独立成段）：

<blockquote cite="https://example.com/article">
    <p>这是引用的第一段内容。长引用通常需要独立成段显示。</p>
    <p>这是引用的第二段内容。可以包含多个段落。</p>
    <footer>— <cite>作者名</cite></footer>
</blockquote>

cite 属性指定来源 URL，<cite> 元素显示来源名称。

缩写和定义元素

abbr - 缩写词

<abbr> 标记缩写词或首字母缩略词：

<p><abbr title="HyperText Markup Language">HTML</abbr>是网页的基础。</p>

<p><abbr title="世界卫生组织">WHO</abbr>发布了新指南。</p>

<p>请在<abbr title="下午">PM</abbr>3 点前提交。</p>

鼠标悬停时会显示 title 属性的完整含义。屏幕阅读器可以朗读完整内容。

dfn - 定义术语

<dfn> 标记正在被定义的术语：

<p><dfn>变量</dfn>是存储数据值的容器。</p>

<dl>
    <dt><dfn>算法</dfn></dt>
    <dd>解决问题的一系列明确步骤。</dd>
</dl>

<dfn> 最近的祖先元素（段落、定义列表或章节）被视为该术语的定义。

代码和技术元素

code - 代码片段

<code> 标记计算机代码片段：

<p>使用 <code>console.log()</code> 输出调试信息。</p>

<p>变量名 <code>userName</code> 采用驼峰命名法。</p>

<p>命令：<code>git commit -m "message"</code></p>

通常与 <pre> 配合展示代码块：

<pre><code>function greet(name) {
    return `Hello, ${name}!`;
}</code></pre>

kbd - 键盘输入

<kbd> 标记键盘按键或用户输入：

<p>按 <kbd>Ctrl</kbd> + <kbd>C</kbd> 复制。</p>

<p>按 <kbd>Enter</kbd> 提交表单。</p>

<p>输入 <kbd>y</kbd> 确认，输入 <kbd>n</kbd> 取消。</p>

samp - 程序输出

<samp> 标记程序的示例输出：

<p>程序输出：<samp>Hello, World!</samp></p>

<p>错误信息：<samp>Connection refused</samp></p>

<p>终端提示：<samp>user@localhost:~$</samp></p>

var - 变量

<var> 标记数学表达式或编程中的变量：

<p>圆的面积公式：A = π<var>r</var><sup>2</sup></p>

<p>对于任意变量 <var>x</var>，<var>x</var> + 1 总是大于 <var>x</var>。</p>

<p>函数接受参数 <var>name</var> 和 <var>age</var>。</p>

上标和下标

sup - 上标

<p>水的化学式：H<sub>2</sub>O</p>
<p>氧气分子：O<sub>2</sub></p>
<p>二氧化碳：CO<sub>2</sub></p>

sub - 下标

<p>E = mc<sup>2</sup></p>
<p>x<sup>2</sup> + y<sup>2</sup> = r<sup>2</sup></p>
<p>第 4<sup>th</sup> 代产品</p>

小字和旁注

small - 旁注

<small> 表示旁注、小字体印刷：

<p>现价 ¥99 <small>（原价 ¥199）</small></p>

<footer>
    <p><small>&copy; 2024 公司名称. 保留所有权利.</small></p>
</footer>

<p><small>免责声明：投资有风险，入市需谨慎。</small></p>

其他文本元素

time - 日期时间

<time> 语义化标记日期和时间：

<p>会议时间：<time datetime="2024-03-15T14:30">3月15日下午2:30</time></p>

<p>发布于 <time datetime="2024-01-20">2024年1月20日</time></p>

<p>活动持续 <time datetime="PT3H">3小时</time></p>

datetime 属性提供机器可读格式，便于搜索引擎解析和日历应用使用。

address - 联系信息

<address> 标记联系信息：

<address>
    联系作者：<a href="mailto:[email protected]">张三</a><br>
    地址：北京市朝阳区xxx路xxx号<br>
    电话：010-12345678
</address>

<address> 通常用于文章作者或网站所有者的联系信息。

列表元素

列表是组织信息的常用方式，HTML 提供三种列表类型。

无序列表 ul

用于顺序不重要的项目列表：

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

无序列表的项目符号可通过 CSS 的 list-style-type 修改：

ul {
    list-style-type: disc;      /* 实心圆点（默认） */
    list-style-type: circle;    /* 空心圆 */
    list-style-type: square;    /* 实心方块 */
    list-style-type: none;      /* 无符号 */
}

适用场景：

导航菜单
功能列表
购物清单
特点展示

有序列表 ol

用于顺序重要的项目列表：

<ol>
    <li>打开电脑</li>
    <li>启动开发工具</li>
    <li>编写代码</li>
    <li>运行测试</li>
</ol>

<ol> 的属性：

属性	说明	示例
`type`	编号类型	`1`、`a`、`A`、`i`、`I`
`start`	起始编号	`start="3"`
`reversed`	逆序编号	`reversed`

<!-- 从第 3 步开始 -->
<ol start="3">
    <li>第三步</li>
    <li>第四步</li>
</ol>

<!-- 使用字母编号 -->
<ol type="a">
    <li>选项 A</li>
    <li>选项 B</li>
</ol>

<!-- 逆序编号 -->
<ol reversed>
    <li>第一名</li>
    <li>第二名</li>
</ol>

适用场景：

步骤说明
排名列表
时间线

定义列表 dl

用于术语-定义对的列表：

<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言，用于创建网页结构。</dd>
    
    <dt>CSS</dt>
    <dd>层叠样式表，用于描述网页的外观。</dd>
    
    <dt>JavaScript</dt>
    <dd>脚本语言，为网页添加交互功能。</dd>
</dl>

一个 <dt> 可以有多个 <dd>：

<dl>
    <dt>前端开发</dt>
    <dd>创建用户界面</dd>
    <dd>实现交互逻辑</dd>
    <dd>优化用户体验</dd>
</dl>

适用场景：

词汇表
键值对信息
元数据展示
FAQ 列表

列表嵌套

列表可以嵌套，创建多级结构：

<ul>
    <li>前端技术
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript
                <ul>
                    <li>ES6+</li>
                    <li>TypeScript</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>后端技术
        <ul>
            <li>Node.js</li>
            <li>Python</li>
        </ul>
    </li>
</ul>

嵌套列表的层级通常通过缩进和不同的项目符号样式来区分。

链接元素 a

<a> 元素（anchor，锚点）创建超链接，是 Web 的核心元素。

基本语法

<a href="https://example.com">访问示例网站</a>

href 属性指定链接目标，可以是：

绝对 URL
相对 URL
锚点（页面内跳转）
协议特定链接（mailto:、tel:）

链接类型

外部链接

<a href="https://www.google.com">Google</a>

<!-- 新标签页打开 -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
    在新窗口打开
</a>

安全提示

使用 target="_blank" 时，应添加 rel="noopener noreferrer"：

noopener：防止新页面通过 window.opener 访问原页面
noreferrer：不发送 Referer 头，保护隐私

内部链接

<!-- 相对路径 -->
<a href="/about.html">关于我们</a>
<a href="./contact.html">联系我们</a>
<a href="../index.html">返回首页</a>

锚点链接

<!-- 页面内跳转 -->
<a href="#section2">跳转到第二部分</a>

<h2 id="section2">第二部分</h2>

<!-- 跳转到其他页面的锚点 -->
<a href="article.html#comments">查看评论</a>

下载链接

<!-- 下载文件 -->
<a href="/files/document.pdf" download>下载 PDF</a>

<!-- 指定下载文件名 -->
<a href="/files/report.pdf" download="年度报告.pdf">下载报告</a>

邮件链接

<a href="mailto:[email protected]">发送邮件</a>

<!-- 带主题和内容 -->
<a href="mailto:[email protected]?subject=咨询&body=你好">联系我们</a>

电话链接

<a href="tel:+8613800138000">拨打电话</a>
<a href="tel:10086">联系客服</a>

target 属性

值	说明
`_self`	当前窗口（默认）
`_blank`	新窗口/标签页
`_parent`	父级框架
`_top`	顶层框架

链接最佳实践

1. 使用有意义的链接文本

<!-- 差：无意义的链接文本 -->
<p>更多信息请<a href="#">点击这里</a>。</p>
<p><a href="#">详情</a></p>

<!-- 好：描述性的链接文本 -->
<p>请阅读<a href="/docs">完整文档</a>了解更多。</p>
<p><a href="/product/features">查看产品功能详情</a></p>

2. 区分内部和外部链接

<!-- 外部链接添加图标 -->
<a href="https://example.com" target="_blank" rel="noopener">
    外部网站 <span aria-hidden="true">↗</span>
    <span class="visually-hidden">（在新窗口打开）</span>
</a>

3. 图片链接

<a href="https://example.com">
    <img src="logo.png" alt="公司官网">
</a>

图片元素 img

<img> 元素在页面中嵌入图片，是最常用的媒体元素。

基本语法

<img src="image.jpg" alt="图片描述">

src 和 alt 是两个最重要的属性：

src：图片路径（必需）
alt：替代文本（强烈推荐）

alt 属性的重要性

alt 属性在以下情况下显示：

图片加载失败
用户使用屏幕阅读器
图片被搜索引擎索引

<!-- 信息性图片：完整描述 -->
<img src="chart.png" alt="2024年销售增长30%的柱状图">

<!-- 功能性图片：描述功能 -->
<a href="/"><img src="logo.png" alt="返回首页"></a>

<!-- 装饰性图片：留空 -->
<img src="decoration.svg" alt="">

alt 文本编写原则：

描述图片传达的信息，而非外观
简洁明了，通常不超过 125 字符
不要以"图片："开头

图片尺寸

<!-- 设置宽高防止布局抖动 -->
<img src="photo.jpg" alt="照片" width="800" height="600">

<!-- CSS 实现响应式 -->
<style>
img {
    max-width: 100%;
    height: auto;
}
</style>

设置 width 和 height 属性可以让浏览器在图片加载前预留空间，避免页面布局抖动。

图片加载

<!-- 立即加载（默认） -->
<img src="hero.jpg" alt="首页大图" loading="eager">

<!-- 延迟加载 -->
<img src="photo.jpg" alt="照片" loading="lazy">

loading="lazy" 延迟加载视口外的图片，提升页面性能。

图片格式选择

格式	特点	适用场景
JPEG	有损压缩，体积小	照片、复杂图像
PNG	无损压缩，支持透明	图标、截图、需要透明
WebP	高压缩率，现代格式	现代浏览器的通用选择
AVIF	最高压缩率	现代浏览器，替代 WebP
SVG	矢量图，无限缩放	图标、logo、图表
GIF	支持动画	简单动画（优先用 WebP）

figure 和 figcaption

<figure> 用于组合图片和标题：

<figure>
    <img src="photo.jpg" alt="日落风景">
    <figcaption>2024年春节日落，摄于三亚</figcaption>
</figure>

<figure> 可以包含任何自包含内容，不只是图片，也可以是代码、表格等。

容器元素

div - 块级容器

<div> 是通用的块级容器，没有语义含义：

<div class="card">
    <h3>卡片标题</h3>
    <p>卡片内容...</p>
</div>

<div class="grid">
    <div class="item">项目 1</div>
    <div class="item">项目 2</div>
</div>

使用场景：

纯样式目的的分组
布局容器
JavaScript 操作的目标

span - 行内容器

<span> 是通用的行内容器，没有语义含义：

<p>价格：<span class="price">¥99</span></p>

<p>状态：<span class="badge active">进行中</span></p>

<p>这篇文章由 <span class="author">张三</span> 编写</p>

使用场景：

为部分文字添加样式
标记特定内容供 JavaScript 操作

div 与 span 的区别

<!-- div：块级，独占一行 -->
<div class="card">
    <p>内容</p>
</div>

<!-- span：行内，不换行 -->
<p>价格：<span class="highlight">¥99</span> 起</p>

何时使用无语义元素

优先使用语义元素，只在以下情况使用 div 和 span：

没有合适的语义元素
纯粹为了样式分组
需要 JavaScript 操作的容器

<!-- 不推荐：滥用 div -->
<div class="header">网站头部</div>
<div class="nav">导航</div>
<div class="main">主内容</div>

<!-- 推荐：使用语义元素 -->
<header>网站头部</header>
<nav>导航</nav>
<main>主内容</main>

删除和插入内容

del - 删除内容

<del> 表示已从文档中删除的内容：

<p>原价：<del>¥299</del>，现价：¥199</p>

<p><del datetime="2024-01-15">旧内容已删除</del></p>

datetime 属性记录删除时间。

ins - 插入内容

<ins> 表示已添加到文档的内容：

<p>新价格：<del>¥299</del><ins>¥199</ins></p>

<p><ins datetime="2024-01-15">新增内容</ins></p>

组合使用

<h2>修订历史</h2>
<p>本协议已于 <time datetime="2024-01-15">2024年1月15日</time> 更新：</p>
<ul>
    <li>
        <del>旧条款内容</del>
        <ins>新条款内容</ins>
    </li>
    <li>
        <ins>新增条款</ins>
    </li>
</ul>

元素使用原则

语义优先

选择元素时，优先考虑语义而非样式：

<!-- 好：语义正确 -->
<strong>重要提示</strong>
<em>强调内容</em>

<!-- 差：只为样式 -->
<b style="color: red;">重要提示</b>
<i style="font-style: italic;">强调内容</i>

可访问性

确保所有用户都能理解内容：

<!-- 图片有 alt -->
<img src="photo.jpg" alt="描述">

<!-- 链接有意义 -->
<a href="/about">关于我们</a>

<!-- 表单有 label -->
<label for="email">邮箱</label>
<input type="email" id="email">

渐进增强

确保基本内容可访问，再添加增强：

<!-- 基本功能 -->
<video src="video.mp4" controls>
    <a href="video.mp4">下载视频</a>
</video>

<!-- 增强功能 -->
<video src="video.mp4" controls poster="cover.jpg">
    <track kind="subtitles" src="subtitles.vtt" srclang="zh" label="中文">
    <a href="video.mp4">下载视频</a>
</video>

小结

本章学习了 HTML 常用元素：

文档结构：

标题 h1-h6：建立文档层次结构
段落 p：组织文本内容
换行 br、分隔线 hr、预格式化 pre

文本语义：

强调 strong、em：重要性强调和语气强调
标记 b、mark、s、u：视觉突出和状态标记
引用 cite、q、blockquote：作品标题和引用内容
代码 code、kbd、samp、var：技术内容标记
其他 abbr、dfn、time、address：专业术语

列表：

无序列表 ul：顺序不重要
有序列表 ol：顺序重要
定义列表 dl：术语定义

链接与媒体：

链接 a：导航和跳转
图片 img：嵌入图像

容器：

div：块级容器
span：行内容器

修订：

del：删除内容
ins：插入内容

练习

创建一个包含正确标题层级的文章页面
使用适当的文本语义元素标记一段技术文章
创建一个嵌套列表展示知识结构
为图片添加有意义的 alt 文本
使用 dl 创建一个词汇表页面
区分使用 strong、em、b 的场景

理解 HTML 元素​

元素的本质​

块级元素与行内元素​

标题元素 h1-h6​

基本语法​

标题的语义含义​

使用规范​

标题与文档大纲​

段落和文本结构​

段落 p​

换行 br​

水平线 hr​

预格式化文本 pre​

文本语义元素​

强调元素​

strong - 重要内容​

em - 语气强调​

strong 与 em 的区别​

文本标记元素​

b - 吸引注意​

mark - 高亮标记​

s - 不再准确​

u - 非文本注解​

术语和引用元素​

cite - 作品标题​

q - 行内引用​

blockquote - 块引用​

缩写和定义元素​

abbr - 缩写词​

dfn - 定义术语​

代码和技术元素​

code - 代码片段​

kbd - 键盘输入​

samp - 程序输出​

var - 变量​

上标和下标​

sup - 上标​

sub - 下标​

小字和旁注​

small - 旁注​

其他文本元素​

time - 日期时间​

address - 联系信息​

列表元素​

无序列表 ul​

有序列表 ol​

定义列表 dl​

列表嵌套​

链接元素 a​

基本语法​

链接类型​

外部链接​

内部链接​

锚点链接​

下载链接​

邮件链接​

电话链接​

target 属性​

链接最佳实践​

图片元素 img​

基本语法​

alt 属性的重要性​

图片尺寸​

图片加载​

图片格式选择​

figure 和 figcaption​

容器元素​

div - 块级容器​

span - 行内容器​

div 与 span 的区别​

何时使用无语义元素​

删除和插入内容​

del - 删除内容​

ins - 插入内容​

组合使用​

元素使用原则​

语义优先​

可访问性​

渐进增强​

小结​

理解 HTML 元素

元素的本质

块级元素与行内元素

标题元素 h1-h6

基本语法

标题的语义含义

使用规范

标题与文档大纲

段落和文本结构

段落 p

换行 br

水平线 hr

预格式化文本 pre

文本语义元素

强调元素

strong - 重要内容

em - 语气强调

strong 与 em 的区别

文本标记元素

b - 吸引注意

mark - 高亮标记

s - 不再准确

u - 非文本注解

术语和引用元素

cite - 作品标题

q - 行内引用

blockquote - 块引用

缩写和定义元素

abbr - 缩写词

dfn - 定义术语

代码和技术元素

code - 代码片段

kbd - 键盘输入

samp - 程序输出

var - 变量

上标和下标

sup - 上标

sub - 下标

小字和旁注

small - 旁注

其他文本元素

time - 日期时间

address - 联系信息

列表元素

无序列表 ul

有序列表 ol

定义列表 dl

列表嵌套

链接元素 a

基本语法

链接类型

外部链接

内部链接

锚点链接

下载链接

邮件链接

电话链接

target 属性

链接最佳实践

图片元素 img

基本语法

alt 属性的重要性

图片尺寸

图片加载

图片格式选择

figure 和 figcaption

容器元素

div - 块级容器

span - 行内容器

div 与 span 的区别

何时使用无语义元素

删除和插入内容

del - 删除内容

ins - 插入内容

组合使用

元素使用原则

语义优先

可访问性

渐进增强

小结