HTML5 教程第3节：HTML 文本内容与排版

第3节：HTML 文本内容与排版

✅ 学习目标

• 掌握 HTML 中常见文本结构标签（标题、段落、列表、引用、代码等）的使用方法。
• 理解语义化标签的意义，提升页面可访问性与 SEO 优化。
• 能够合理组织网页中的文本内容，构建清晰的文档结构。

---

一、标题标签

~

作用：

用于定义网页中的标题层级，

是最高级标题，

是最低级。

使用规范：

• 每个页面应只有一个

  ，代表主标题；

• 合理使用

  到

  构建子标题结构；

• 不要跳级使用标题，保持结构清晰。

示例：

<h1>欢迎学习 HTMLh1>
<h2>课程介绍h2>
<h3>HTML 基础知识h3>

---

二、段落标签

作用：

表示一段文字内容，是网页中最基本的文字块元素。

注意事项：

• 是块级元素，默认前后有空白行；

• 浏览器会自动处理段落之间的间距；
• 不要在

  标签中嵌套块级元素（如

  ）。

示例：

<p>这是第一段内容。p>
<p>这是第二段内容。p>

---

三、列表标签

HTML 提供三种主要的列表类型：

1. 无序列表

+

• 用于没有顺序要求的条目列表（通常用圆点标记）

示例：

<ul>
  <li>苹果li>
  <li>香蕉li>
  <li>橘子li>
ul>

2. 有序列表

+

• 用于有顺序关系的条目列表（默认数字编号）

示例：

<ol>
  <li>第一步li>
  <li>第二步li>
  <li>第三步li>
ol>

3. 定义列表

+

+

• 用于术语解释或键值对展示

示例：

<dl>
  <dt>HTMLdt>
  <dd>超文本标记语言dd>
  <dt>CSSdt>
  <dd>层叠样式表dd>
dl>

---

四、引用标签

1. 块级引用

• 用于大段引文，通常会缩进显示

示例：

<blockquote>
  “不要等待机会，而要创造机会。”——培根
blockquote>

2. 行内引用

• 用于短句引用，浏览器会自动添加引号

示例：

<p>正如古人所说：<q>学而不思则罔q>p>

---

五、代码相关标签

1. —— 内联代码片段

• 用于展示程序代码中的关键字或变量名

示例：

<p>在 JavaScript 中，使用 <code>console.log()code> 打印日志。p>

2.

 —— 预格式化文本

• 保留空格、换行和缩进，适合展示代码块

示例：

<pre>
function sayHello() {
  console.log("Hello World");
}
pre>

3. 和 —— 输出与输入模拟

• ：表示计算机输出的内容
• ：表示用户键盘输入的内容

示例：

<p>系统提示：<samp>文件已保存成功samp>p>
<p>请按下 <kbd>Ctrl + Skbd> 保存当前进度。p>

---

六、换行与水平线

1. 换行


• 强制换行，常用于诗歌、地址等需要精确控制换行的地方

示例：

<p>北京<br>上海<br>广州p>

2. 水平线

---

• 插入一条水平分隔线，常用于区分不同章节或模块

示例：

<h2>第一章h2>
<p>这是第一章的内容。p>
<hr>
<h2>第二章h2>
<p>这是第二章的内容。p>

---

总结练习建议

✅ 练习任务：

1. 创建一个 HTML 页面，包含以下内容：
   • 主标题

     和副标题

   • 至少两个段落

   • 一个无序列表（如兴趣爱好）
   • 一个有序列表（如操作步骤）
   • 一个定义列表（如词汇解释）
   • 一个块级引用（如名人名言）
   • 一个行内引用（如古诗词）
   • 使用 展示代码片段，使用

      展示完整代码块

   • 使用
控制换行，使用

     ---

     分隔章节

✅ 延伸思考：

• 如何通过 HTML 结构提升网页的可访问性和 SEO？
• 为什么推荐使用语义化的标签（如

  而不是直接加粗+换行）？

---

七、本节实战工作高级进阶：

以下是针对本节中涉及的 HTML 标签（如

~

、

、

、
、

等）在 Vue（Element UI） 和 React（Ant Design） 框架中的实际应用与组件封装讲解。我们将结合语义化和可复用性，讲解如何将这些基础标签封装为更高级的组件。

一、HTML 基础标签回顾

标签	类型	描述
~	标题	层级标题，用于结构化页面内容
	文本块	段落
,	列表	无序列表
,	列表	有序列表
, ,	列表	定义列表
	引用	块级引用
	引用	行内引用
	换行	手动换行
	分隔线	水平线分隔内容

---

二、Vue 中 Element UI 的封装实践（以 el-card + 自定义组件为例）

✅ 场景描述：

我们希望封装一个通用的内容卡片组件，展示标题、段落、列表、引用等内容。

文件结构：

components/
│
└── BaseContentCard.vue

示例代码：

<template>
  <el-card class="content-card">
    <template #header>
      <h2 v-if="title" class="card-title">{{ title }}h2>
    template>

    
    <div class="card-body">
      <slot name="default">slot>
    div>
  el-card>
template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    }
  }
}
script>

<style scoped>
.content-card {
  margin: 1rem;
}
.card-title {
  font-size: 1.5rem;
  color: #333;
}
style>

使用示例：

<template>
  <base-content-card title="我的介绍">
    <p>这是一段自我介绍。p>
    <ul>
      <li>喜欢编程li>
      <li>热爱前端li>
    ul>
    <blockquote>“学而不思则罔。”blockquote>
  base-content-card>
template>

<script>
import BaseContentCard from '@/components/BaseContentCard.vue'

export default {
  components: { BaseContentCard }
}
script>

---

三、React 中 Ant Design 的封装实践（以 Card + 自定义组件为例）

✅ 场景描述：

封装一个通用的 TextContentCard 组件，支持标题、段落、列表、引用等结构。

文件结构：

components/
│
└── TextContentCard.jsx

示例代码：

// TextContentCard.jsx
import React from 'react'
import { Card } from 'antd'

const TextContentCard = ({ title, children }) => {
  return (
    <Card title={title} style={{ margin: '1rem' }}>
      <div className="text-content">{children}</div>
    </Card>
  )
}

export default TextContentCard

使用示例：

// ExamplePage.jsx
import React from 'react'
import TextContentCard from '../components/TextContentCard'

const ExamplePage = () => {
  return (
    <TextContentCard title="我的技能">
      <p>我掌握以下技术：</p>
      <ul>
        <li>HTML/CSS</li>
        <li>JavaScript</li>
        <li>React/Vue</li>
      </ul>
      <blockquote cite="https://example.com">“代码即艺术。”</blockquote>
    </TextContentCard>
  )
}

export default ExamplePage

---

四、HTML 标签在框架组件中的作用分析

HTML 标签	Vue (Element UI)	React (Ant Design)	说明
~	通常作为组件标题或使用 h 元素包裹	在 Card.title 或自定义标题中使用	构建页面结构层级
	用于段落内容	同上	显示正文内容
,	列表展示	同上	无序信息展示
,	有顺序的步骤展示	同上	如安装指南、操作流程
, ,	可封装为术语解释组件	同上	适合词典类、参数说明
	用于引述他人观点	同上	常见于引用名言或外部内容
	少用，可用 替代	同上	内联引用，自动加引号
	控制换行	同上	特殊场景下手动换行
	用 CSS border 替代或保留	同上	分隔不同区块内容

---

五、组件封装建议

封装目标	推荐方式
标题模块	抽象为 TitleComponent，支持层级设置
段落模块	抽象为 ParagraphComponent，支持样式控制
列表模块	封装为 ListContainer，支持类型切换（ul/ol/dl）
引用模块	封装为 QuoteBlock，支持 blockquote/q
分割线模块	封装为 DividerLine，替代
内容卡片	封装为 CardContent，集成标题+内容区域

---

六、总结练习建议

✅ 实践任务：

1. 在 Vue 中基于 Element UI 创建一个 BaseListCard 组件，支持传入列表类型（ul/ol/dl）。
2. 在 React 中基于 Ant Design 创建一个 QuoteCard 组件，支持 blockquote 和 q 两种引用方式。
3. 使用上述组件重构之前的 HTML 页面，实现组件化管理。

✅ 延伸思考：

• 如何让组件支持响应式设计？
• 如何通过 slot / children 实现高度可定制的内容渲染？