HTML文本格式化 - 人人都会AI编程

HTML 文本格式化是网页内容呈现的基石，它让文字不仅能够被显示，更能结构清晰、重点突出、富有美感。下面我将为您系统介绍其核心知识、基础代码，并提供实用的项目场景和 AI 指令。

📝 HTML 文本格式化基础

HTML 提供了两种主要方式进行文本格式化：

HTML 格式化标签：用于定义文本的基本结构和语义。例如，表示重要文本（通常显示为粗体），表示强调文本（通常显示为斜体）。

CSS 样式：用于控制文本的视觉外观，如颜色、字体、大小、对齐方式等。这是实现精细排版的主要手段。

核心原则：现代 Web 开发倡导 “结构与样式分离” 。即用 HTML 标签定义内容结构（做什么），用 CSS 控制视觉表现（怎么做）。例如，应优先使用具有语义的 而非纯样式的 来表示重要内容。

🧱 基础代码元素速览

以下是一些最常用的文本格式化标签和 CSS 属性。

| 类别 | 标签/属性 | 说明 | 代码示例 |
| --- | --- | --- | --- |
| 结构标签 | <h1>- <h6> | 定义标题，<h1>级别最高。 | <h1>主标题</h1> |
| |  | 定义段落。 | 这是一个段落。 |
| 样式标签 | 或  | 加粗文本。优先使用有语义的 。 | 这是重要内容。 |
| | 或  | 斜体文本。优先使用有语义的 。 | 这是强调的内容。 |
| |  | 高亮文本。 | 这里是关键点。 |
| | ,  | 上标和下标。 | X2, H2O |
| CSS 属性 | color | 设置文字颜色。 | style="color: red;" |
| | font-family | 设置字体。 | style="font-family: Arial;" |
| | font-size | 设置字号。 | style="font-size: 16px;" |
| | text-align | 设置对齐方式（左/中/右/两端）。 | style="text-align: center;" |
| | line-height | 设置行高，影响阅读舒适度。 | style="line-height: 1.6;" |

🚀 实际项目场景与 AI 实操 Prompt

现在，让我们将这些知识应用到两个常见的场景中。你可以将下面的提示词（Prompt）直接复制给 AI 编程助手（如 Cursor、GPT等），让它帮你生成具体的代码。

场景一：创建一篇技术博客文章页面

博客文章需要清晰的结构、良好的可读性和精美的代码块展示。

AI 实操 Prompt：

请帮我生成一篇技术博客文章页面的完整HTML代码。要求如下：

1.  **页面结构**：使用语义化HTML5标签，如 `<article>`, `<header>`, `<section>`。
2.  **内容与格式化**：
    -   文章包含一个主标题（`<h1>`）和至少两个二级标题（`<h2>`）。
    -   每个章节下至少有2个段落（`<p>`）。
    -   在段落中，使用 `<strong>` 强调关键词，使用 `<em>` 表示强调语气，并使用 `<code>` 标签包裹一个简短的技术术语（如 `const`）。
    -   在文章内嵌入一段代码示例，使用 `<pre>` 和 `<code>` 标签组合，并确保代码的缩进和换行被正确保留。
3.  **样式与可读性**：
    -   使用内嵌 `<style>` 标签添加CSS样式。
    -   设置一个舒适的行高（`line-height`）和字体大小。
    -   为 `<code>` 和 `<pre>` 设置不同的背景色和边框，使其与正文区分开。
    -   确保标题之间有清晰的层次感（通过不同的 `font-size` 或 `margin`）。
4.  **响应式考虑**：使用CSS媒体查询（`@media`），当屏幕宽度小于600px时，适当增大基础字体大小以提升移动端阅读体验。

请提供完整的、可直接运行的HTML代码。

场景二：构建一个产品展示卡片

产品卡片需要在有限空间内清晰、美观地呈现信息，并吸引用户点击。

AI 实操 Prompt：

请生成一个产品展示卡片的HTML和CSS代码。要求如下：

1.  **卡片结构**：使用 `<div>` 作为卡片容器，内部包含产品图片（占位图）、产品名称、简短描述、价格信息和“加入购物车”按钮。
2.  **文本格式化**：
    -   **产品名称**：使用 `<h3>` 标签，并使其字体加粗、醒目。
    -   **价格**：使用 `<span>` 标签包裹，并将价格数字的颜色设置为醒目的主题色（如红色）。
    -   **描述文字**：使用 `<p>` 标签，字体颜色设置为浅灰色（`#666`），并限制显示行数为2行，超出部分用省略号（`...`）表示（使用 `-webkit-line-clamp` 属性）。
3.  **样式与布局**：
    -   为卡片设置固定的宽度、圆角、边框和阴影，使其具有卡片浮起的效果。
    -   使用Flexbox布局优雅地排列卡片内的元素。
    -   为“加入购物车”按钮添加悬停效果（`hover`），例如改变背景色。
4.  **交互功能**：使用内联JavaScript为按钮添加点击事件，点击时弹出提示框，显示“已添加 [产品名称] 到购物车”。

请提供完整的HTML、CSS和JavaScript代码。

💡 最佳实践与进阶技巧

语义化优先：始终优先选择能表达内容含义的标签（如 , , <article>），而不是只关心样式的标签（如 , ）。这有助于搜索引擎优化（SEO）和无障碍访问。

响应式文字：尝试使用相对单位（如 rem, vw）或 clamp()函数来设置字体大小，这能使文字在不同尺寸的设备上都能有良好的显示效果。

保持简洁：避免过度使用多种字体和颜色，保持页面简洁，提升可读性和专业感。