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

最新推荐文章于 2025-07-16 15:55:56 发布

原创最新推荐文章于 2025-07-16 15:55:56 发布 · 1k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#html #html5 #前端 #H5 #web

HTML5教程专栏收录该内容

23 篇文章

订阅专栏

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

✅ 学习目标

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

🧩 一、标题标签 `<h1>` ~ `<h6>`

🔹 作用：

用于定义网页中的标题层级，<h1> 是最高级标题，<h6> 是最低级。

🔹 使用规范：

每个页面应只有一个 <h1>，代表主标题；
合理使用 <h2> 到 <h6> 构建子标题结构；
不要跳级使用标题，保持结构清晰。

🔹 示例：

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

🧩 二、段落标签 `<p>`

🔹 作用：

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

🔹 注意事项：

<p> 是块级元素，默认前后有空白行；
浏览器会自动处理段落之间的间距；
不要在 <p> 标签中嵌套块级元素（如 <div>）。

🔹 示例：

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

🧩 三、列表标签

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

1. 无序列表 `<ul>` + `<li>`

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

示例：

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

2. 有序列表 `<ol>` + `<li>`

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

示例：

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

3. 定义列表 `<dl>` + `<dt>` + `<dd>`

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

示例：

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言</dd>
  <dt>CSS</dt>
  <dd>层叠样式表</dd>
</dl>

🧩 四、引用标签

1. 块级引用 `<blockquote>`

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

示例：

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

2. 行内引用 `<q>`

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

示例：

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

🧩 五、代码相关标签

1. `<code>` —— 内联代码片段

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

示例：

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

2. `<pre>` —— 预格式化文本

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

示例：

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

3. `<samp>` 和 `<kbd>` —— 输出与输入模拟

<samp>：表示计算机输出的内容
<kbd>：表示用户键盘输入的内容

示例：

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

🧩 六、换行与水平线

1. 换行 `<br>`

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

示例：

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

2. 水平线 `<hr>`

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

示例：

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

📝 总结练习建议

✅ 练习任务：

创建一个 HTML 页面，包含以下内容：
- 主标题 <h1> 和副标题 <h2>
- 至少两个段落 <p>
- 一个无序列表（如兴趣爱好）
- 一个有序列表（如操作步骤）
- 一个定义列表（如词汇解释）
- 一个块级引用（如名人名言）
- 一个行内引用（如古诗词）
- 使用 <code> 展示代码片段，使用 <pre> 展示完整代码块
- 使用 <br> 控制换行，使用 <hr> 分隔章节

✅ 延伸思考：

如何通过 HTML 结构提升网页的可访问性和 SEO？
为什么推荐使用语义化的标签（如 <blockquote> 而不是直接加粗+换行）？

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

以下是针对本节中涉及的 HTML 标签（如 <h1>~<h6>、<p>、<ul>、<ol>、<dl> 等）在 Vue（Element UI） 和 React（Ant Design） 框架中的实际应用与组件封装讲解。我们将结合语义化和可复用性，讲解如何将这些基础标签封装为更高级的组件。

🧱 一、HTML 基础标签回顾

标签	类型	描述
`<h1>` ~ `<h6>`	标题	层级标题，用于结构化页面内容
`<p>`	文本块	段落
`<ul>`, `<li>`	列表	无序列表
`<ol>`, `<li>`	列表	有序列表
`<dl>`, `<dt>`, `<dd>`	列表	定义列表
`<blockquote>`	引用	块级引用
`<q>`	引用	行内引用
`<br>`	换行	手动换行
`<hr>`	分隔线	水平线分隔内容

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

✅ 场景描述：

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

📁 文件结构：

components/
│
└── BaseContentCard.vue

💡 示例代码：

<!-- 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)	说明
`<h1>`~`<h6>`	通常作为组件标题或使用 `h` 元素包裹	在 `Card.title` 或自定义标题中使用	构建页面结构层级
`<p>`	用于段落内容	同上	显示正文内容
`<ul>`, `<li>`	列表展示	同上	无序信息展示
`<ol>`, `<li>`	有顺序的步骤展示	同上	如安装指南、操作流程
`<dl>`, `<dt>`, `<dd>`	可封装为术语解释组件	同上	适合词典类、参数说明
`<blockquote>`	用于引述他人观点	同上	常见于引用名言或外部内容
`<q>`	少用，可用 `<span>` 替代	同上	内联引用，自动加引号
`<br>`	控制换行	同上	特殊场景下手动换行
`<hr>`	用 CSS border 替代或保留	同上	分隔不同区块内容

📦 五、组件封装建议

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