<think>我们被要求
创建一个
HTML示例，展示标题分级、段落控制、引用缩进、字体样式、特殊
文本、预格式
文本等
标签。
根据引用[1]中的基础
标签，我们可以
使用h1~h6、p、br、hr等。
引用[2]提到文档结构
使用div，并赋予id或class语义。
引用[3]提醒在pre
标签中不要包含会导致段落断开的
标签，并且最好对
标签进行转义。
我们将
创建一个包含以下元素的示例：
1. 标题：
使用h1到h3（通常h1
用于主标题，h2
用于节标题，h3
用于子节标题）
2. 段落：
使用p
标签
3. 引用缩进：
使用blockquote
标签
4. 字体样式：
使用strong（
强调）、
em（
强调）、u（下划线）、s（删除线）等
5. 特殊
文本：
使用sup（上标）、sub（下标）、code（代码片段）、mark（高亮）等
6. 预格式
文本：
使用pre
标签，并在其中放置一些代码（注意转义）
7. 水平线：
使用hr
8. 换行：在需要的地方
使用br（但注意不要
用于段落间隔，而是
用于同一段落内的换行）
同时，我们也要注意可访问性，如引用[1]中提到的，避免滥用br
标签。
下面是一个示例：
</think>#
HTML文本样式综合示例
下面是一个展示
HTML标题分级、段落控制、引用缩进、字体样式、特殊
文本和预格式
文本的综合示例：
```html
<!DOCTYPE
html>
<
html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
HTML文本格式化综合示例</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, sans-serif;
line-height: 1.6;
max-width: 900px;
margin: 0 auto;
padding: 20px;
background-color: #f8f9fa;
color: #333;
}
header {
text-align: center;
padding: 20px 0;
background: linear-gradient(13
5deg, #6a11cb 0%, #2
57
5fc 100%);
color: white;
border-radius: 10px;
margin-bottom: 30px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
h1 {
font-size: 2.
5r
em;
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}
h2 {
color: #2c3e
50;
border-bottom: 2px solid #3498db;
padding-bottom: 8px;
margin-top: 40px;
}
h3 {
color: #2980b9;
}
section {
background-color: white;
padding: 2
5px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.0
5);
margin-bottom: 2
5px;
}
p {
margin-bottom: 1
5px;
text-align: justify;
}
blockquote {
background-color: #e3f2fd;
border-left:
5px solid #2196f3;
padding: 1
5px 20px;
margin: 20px 0;
border-radius: 0 8px 8px 0;
}
.quote-author {
text-align: right;
font-style: italic;
color: #
555;
font-size: 0.9r
em;
}
pre {
background-color: #2d2d2d;
color: #f8f8f2;
padding: 1
5px;
border-radius:
5px;
overflow-x: auto;
margin: 20px 0;
font-family: 'Consolas', monospace;
tab-size: 4;
}
code {
background-color: #eee;
padding: 2px 6px;
border-radius: 3px;
font-family: 'Courier New', monospace;
}
.highlight {
background-color: #fff3cd;
padding: 3px 6px;
border-radius: 3px;
}
.important {
background-color: #ffebee;
padding: 10px;
border-left: 4px solid #f44336;
border-radius: 0 4px 4px 0;
}
.text-formats {
display: grid;
grid-t
emplate-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1
5px;
margin: 20px 0;
}
.format-card {
background-color: white;
border: 1px solid #ddd;
border-radius: 8px;
padding: 1
5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.0
5);
}
.ch
emical-formula {
font-size: 1.1r
em;
background: #e8f
5e9;
padding: 8px 12px;
border-radius: 4px;
display: inline-block;
margin:
5px 0;
}
footer {
text-align: center;
padding: 20px;
margin-top: 30px;
color: #777;
font-size: 0.9r
em;
border-top: 1px solid #eee;
}
@media (max-width: 600px) {
body {
padding: 10px;
}
h1 {
font-size: 1.8r
em;
}
section {
padding: 1
5px;
}
.text-formats {
grid-t
emplate-columns: 1fr;
}
}
</style>
</head>
<body>
<header>
<h1>
HTML文本格式化综合示例</h1>
<p>探索
HTML文本格式化
标签及其应用</p>
</header>
<main>
<section id="headings">
<h2>一、标题分级系统</h2>
<h1>主标题 (h1) - 页面核心标题</h1>
<p>通常
用于页面主要标题，每个页面建议只
使用一个h1
标签[^1]。</p>
<h2>二级标题 (h2) - 主要内容分区</h2>
<p>
用于将内容划分为主要部分，如本文档中的各个章节。</p>
<h3>三级标题 (h3) - 子分区标题</h3>
<p>
用于进一步细分h2区域的内容。</p>
<h4>四级标题 (h4) - 深入细分</h4>
<p>当内容结构复杂时需要更细分的标题。</p>
<h
5>五级标题 (h
5) - 较少
使用</h
5>
<p>在非常复杂的文档结构中可能
使用。</p>
<h6>六级标题 (h6) - 最少
使用</h6>
<p>极少
使用，通常考虑是否可以用其他
标签替代[^1]。</p>
</section>
<section id="paragraphs">
<h2>二、段落与
文本控制</h2>
<p>这是标准段落
文本。
HTML使用<code><p></code>
标签定义段落，是最基本的
文本容器单元。</p>
<p>这个段落包含<strong>重要内容</strong>（
使用strong
标签），浏览器默认
显示为粗体，但更重要的是它具有语义价值，表示内容的重要性[^1]。</p>
<p>这个段落包含<
em>
强调文本</
em>（
使用em标签），通常
显示为
斜体，表示对内容的语气
强调。</p>
<p>此处有<br>强制换行（
使用br
标签），但应该谨慎
使用，避免
用于创建段落间距[^1]。</p>
<hr>
<div class="important">
<strong>注意：</strong> CSS的margin属性应优先
用于控制段落间距，而不是滥用br
标签。屏幕阅读器可能无法正确处理多个连续的br
标签[^1]。
</div>
</section>
<section id="quotes">
<h2>三、引用与缩进
文本</h2>
<blockquote>
<p>"科学技术是第一生产力。
HTML作为Web技术的基石，为我们构建信息世界提供了基础框架。"</p>
<p class="quote-author">— 现代Web开发理念</p>
</blockquote>
<p>在
HTML中，引用通常
使用<code><blockquote></code>
标签实现，它会对内容进行缩进并添加特殊样式。</p>
<p>内联引用可
使用<code><q></code>
标签: <q>结构化的文档是良好用户体验的基础</q>。</p>
</section>
<section id="text-styles">
<h2>四、
文本样式与特殊格式</h2>
<div class="text-formats">
<div class="format-card">
<h3>加粗
文本</h3>
<p>
使用<strong><strong></strong>
标签表示<strong>语义上的重要性</strong></p>
<p>
使用<b><b></b>
标签仅表示<b>视觉上的加粗</b></p>
</div>
<div class="format-card">
<h3>
斜体文本</h3>
<p><
em><
em>
强调内容</
em>（语义
斜体）</p>
<p><i><i>
用于特殊术语</i>（视觉
斜体）</p>
</div>
<div class="format-card">
<h3>其他
文本格式</h3>
<p><u>下划线
文本</u> (u
标签)</p>
<p><s>删除线
文本</s> (s
标签)</p>
<p><mark>高亮
文本</mark> (mark
标签)</p>
</div>
</div>
<h3>上下标
文本</h3>
<p>数学公式: E = mc<sup>2</sup> (上标
使用sup
标签)</p>
<p>化学方程式: H<sub>2</sub>O (下标
使用sub
标签)</p>
<p class="ch
emical-formula">CO<sub>2</sub> + H<sub>2</sub>O → C<sub>6</sub>H<sub>12</sub>O<sub>6</sub> + O<sub>2</sub></p>
</section>
<section id="preformatted">
<h2>五、预格式
文本与代码</h2>
<p>预格式
文本使用<code><pre></code>
标签，保留所有空格和换行:</p>
<pre>
ASCII 艺术示例：
+-----------------+
|
HTML 文档结构 |
+-----------------+
| <
html> |
| +--------+ |
| | <head> | |
| +--------+ |
| | <body> | |
| +--------+ |
+-----------------+
</pre>
<p>代码块通常
使用<code><pre></code>和<code><code></code>组合：</p>
<pre><code><!DOCTYPE
html>
<
html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>
HTML示例</title>
</head>
<body>
<h1>欢迎来到
HTML世界</h1>
<p>
HTML是构建网页的基础</p>
</body>
</
html></code></pre>
<div class="important">
<strong>注意：</strong> 在pre
标签中应避免
使用可能导致段落断开的
标签（如p、标题等），对于需要
显示的
HTML标签应进行转义（如<code><</code>替代<code><</code>）[^3]。
</div>
</section>
</main>
<footer>
<p>© 2023
HTML文本格式化示例 | 参考资料:
HTML规范文档</p>
<p>[^1]:
HTML基础
标签定义 [^2]: 文档结构语义化 [^3]: 预格式
文本使用规范</p>
</footer>
</body>
</
html>
```
## 示例说明
此
HTML示例展示了多种
文本格式化
标签的应用：
1. **标题分级**：展示了h1到h6六级标题的
使用
2. **段落控制**：
使用p
标签创建段落，br
标签用于强制换行，hr
标签创建水平分隔线
3. **引用缩进**：
使用blockquote
标签创建引用块，q
标签用于内联引用
4. **字体样式**：
- strong
标签表示语义上的重要性
- b
标签仅
用于视觉加粗
-
em标签表示
强调语气
- i
标签用于特殊术语
- u
标签创建下划线
文本
- s
标签创建删除线
文本
- mark
标签高亮
文本
5. **特殊
文本**：
- sup
标签创建上标（如E=mc²）
- sub
标签创建下标（如H₂O）
6. **预格式
文本**：
使用pre
标签保留空格和换行，
显示ASCII艺术和代码块
所有样式都通过CSS进行了美观的设计，确保在各种设备上有良好的
显示效果。特别注意了引用[1]和[3]中提到的最佳实践，如避免滥用br
标签和在pre
标签中处理
HTML符号。
本文介绍了HTML5中`＜em＞`标签的用法，用于创建斜体文本并强调内容。通过示例代码展示了如何使用`＜em＞`标签，并强调了其语义上的重要性，提示应合理使用以符合语义要求。
订阅专栏 解锁全文
扫一扫
1134
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
