【技术专题】HTML5 网页技术 - HTML5 文本与排版标签

大家好，我是Java1234_小锋老师，最近更新《一天学会 HTML5 视频教程(无废话版) 》专辑，感谢大家支持。

本课程主要介绍和讲解 HTML5简介，文档结构，文本与排版标签，链接与图片，列表标签，表格标签，表单基础以及增强，容器与页面结构基础，语义化标签，音频与视频，Canvas 基础以及动画入门，SVG 基础，Web Storage 本地存储，文件 API，拖放 API，地理定位 API，Web Workers 入门。

视频教程+课件+源码打包下载：

链接：https://pan.baidu.com/s/1o-zRfndo1HHrS_uFroOiCw?pwd=1234

提取码：1234

HTML5（在第二阶段目录里）

HTML5 文本与排版标签

HTML5 的文本与排版标签重点在于语义：告诉浏览器和搜索引擎、屏幕阅读器"这段内容是什么"，而不只是控制外观。样式通常交给 CSS。

1. 标题：`<h1>` ~ `<h6>`

表示六级标题，<h1> 级别最高，<h6> 最低。

html 复制代码

<h1>网页主标题</h1>
<h2>章节标题</h2>
<h3>小节标题</h3>

注意：

用来构建文档大纲，不要为了"字大"而用标题。
不要跳级，例如从 <h1> 直接到 <h3>。
一个页面通常只有一个 <h1>，但 HTML5 中并非强制。

2. 段落：`<p>`

表示一个段落，是块级元素。

html 复制代码

<p>这是一个段落。HTML 会自动在段落前后添加间距。</p>
<p>这是另一个段落。</p>

3. 换行：`<br>`

强制换行，是空元素，不需要闭合标签。

html 复制代码

<p>
  第一行<br>
  第二行
</p>

适合地址、诗歌、短行文本。

不要用 <br> 来制造段落间距，段落间距应该用 <p> 或 CSS。

4. 水平线：`<hr>`

HTML5 中 <hr> 表示主题转换或内容分隔，不只是"一条线"。它也是空元素。

html 复制代码

<p>上一节内容。</p>
<hr>
<p>下一节内容。</p>

注意：

不要为了装饰而滥用 <hr>。
颜色、宽度、边距等应使用 CSS 控制，不要用旧属性如 color、width。

5. 强调：`<strong>` 和 `<em>`

`<strong>`：表示重要性、严重性、警告

浏览器通常显示为粗体，但语义是"重要"。

html 复制代码

<p><strong>警告：</strong>操作不可撤销。</p>

`<em>`：表示强调、重音

浏览器通常显示为斜体，但语义是"强调"。

html 复制代码

<p>我<em>真的</em>很想去。</p>

可以嵌套：

html 复制代码

<p><strong>注意：<em>必须</em>先保存文件。</strong></p>

如果只是想加粗或斜体，没有语义，可以用 CSS；HTML 中也有 <b>、<i>，但语义不同。

6. 引用：`<blockquote>`

表示一段独立的块级引用，通常来自其他来源。

html 复制代码

<blockquote cite="https://example.com/source">
  <p>这是一个引用段落。</p>
</blockquote>

注意：

cite 属性放的是来源 URL，不是来源名称。
引用内容最好放在 <p> 等块级元素中。
短的行内引用用 <q>：

html 复制代码

<p>他说：<q>坚持就是胜利。</q></p>

7. 代码：`<code>` 和预格式：`<pre>`

`<code>`：行内代码片段

html 复制代码

<p>使用 <code>console.log()</code> 输出内容。</p>

`<pre>`：预格式文本

保留空格、换行和缩进，通常用等宽字体显示。

html 复制代码

<pre>
第一行
    第二行有缩进
第三行
</pre>

常见组合是 <pre><code>：

html 复制代码

<pre><code>&lt;h1&gt;标题&lt;/h1&gt;
&lt;p&gt;段落&lt;/p&gt;</code></pre>

注意：

复制代码

 会保留源码中的换行和空格，所以标签位置会影响显示。

在 <pre> 中展示 HTML 标签时，必须把 <、> 写成实体字符。

8. 实体字符

HTML 中有些字符有特殊含义，例如 < 会被当作标签开始。要显示它们，需要使用实体字符。

格式：

html 复制代码

&实体名;
&#十进制数字;
&#x十六进制数字;

常见实体：

字符	命名实体	数字实体
`<`	`<`	`<` 或 `<`
`>`	`>`	`>` 或 `>`
`&`	`&`	`&` 或 `&`
`"`	`"`	`"` 或 `"`
`'`	`'`	`'` 或 `'`
空格	` `	` ` 或 ` `
`©`	`©`	`©`
`®`	`®`	`®`
`™`	`™`	`™`
`---`	`—`	`—`
`...`	`...`	`…`

示例：

html 复制代码

<p>HTML 中，&lt;div&gt; 表示一个 div 标签。</p>
<p>版权 &copy; 2026 &nbsp; 价格 &lt; 100 &amp; 库存 &gt; 0</p>

  是不换行空格，不要用它来做段落缩进，缩进应该用 CSS 的 text-indent。

综合示例

html 复制代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>页面标题</title>
  </head>
  <body>
  <h1>HTML5 文本排版</h1>
  <h1>网页主标题</h1>
  <h2>章节标题</h2>
  <h3>小节标题</h3>
  <p>这是一段普通文字，其中有 <strong>重要内容</strong> 和 <em>强调内容</em>。</p>

  <hr>

  <h2>代码示例</h2>
  <pre><code>&lt;h1&gt;标题&lt;/h1&gt;
&lt;p&gt;段落&lt;/p&gt;</code></pre>

  <blockquote cite="https://example.com">
    <p>这是一段引用文字。</p>
  </blockquote>

  <p>特殊字符：&lt; &gt; &amp; &quot; &copy;</p>
  </body>
</html>

总结：h1-h6 管结构，p 管段落，br 管换行，hr 管主题分隔，strong/em 管语义强调，blockquote 管块引用，code/pre 管代码与预格式，实体字符用于显示 HTML 中的特殊符号。

【技术专题】HTML5 网页技术 - HTML5 文本与排版标签

视频教程+课件+源码 打包下载 ：

HTML5 文本与排版标签

1. 标题：<h1> ~ <h6>

2. 段落：<p>

3. 换行：<br>

4. 水平线：<hr>

5. 强调：<strong> 和 <em>

<strong>：表示重要性、严重性、警告

<em>：表示强调、重音

6. 引用：<blockquote>

7. 代码：<code> 和预格式：<pre>

<code>：行内代码片段

<pre>：预格式文本

8. 实体字符

综合示例

视频教程+课件+源码打包下载：

1. 标题：`<h1>` ~ `<h6>`

2. 段落：`<p>`

3. 换行：`<br>`

4. 水平线：`<hr>`

5. 强调：`<strong>` 和 `<em>`

`<strong>`：表示重要性、严重性、警告

`<em>`：表示强调、重音

6. 引用：`<blockquote>`

7. 代码：`<code>` 和预格式：`<pre>`

`<code>`：行内代码片段

`<pre>`：预格式文本