3.5 特殊字符实体：解决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: "Helvetica Neue", Arial, sans-serif;
line-height: 1.6;
max-width: 900px;
margin: 0 auto;
padding: 30px;
color: #333;
background-color: #f8f9fa;
}
article {
background: white;
padding: 30px;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
h1 {
color: #2c3e50;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
}
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
code {
font-family: "Courier New", monospace;
background: #f5f5f5;
padding: 2px 5px;
border-radius: 3px;
color: #c7254e;
}
.example {
background: #f0f7fd;
padding: 15px;
border-left: 4px solid #3498db;
margin: 20px 0;
}
.warning {
background: #fff3e0;
padding: 15px;
border-left: 4px solid #ffa000;
margin: 20px 0;
}
</style>
</head>
<body>
<article>
<h1>HTML特殊字符实体完全指南</h1>
<section>
<h2>为什么需要字符实体？</h2>
<p>在HTML中，某些字符具有特殊含义：</p>
<div class="example">
<!-- 直接使用小于号会出问题 -->
<p>错误示范：<code><div></code> 直接写成 <div> 会被解析为标签</p>
<!-- 使用字符实体才是正确方式 -->
<p>正确写法：<code><div></code> 显示为 <div></p>
</div>
<p>其他常见场景：</p>
<ul>
<li>显示HTML代码示例</li>
<li>使用键盘上没有的符号（如©、®）</li>
<li>避免与CSS/JavaScript语法冲突</li>
</ul>
</section>
<section>
<h2>常用字符实体速查表</h2>
<table>
<thead>
<tr>
<th>字符</th>
<th>实体名称</th>
<th>实体编号</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><</td>
<td><code><</code></td>
<td><code><</code></td>
<td>小于号</td>
</tr>
<tr>
<td>></td>
<td><code>></code></td>
<td><code>></code></td>
<td>大于号</td>
</tr>
<tr>
<td>&</td>
<td><code>&</code></td>
<td><code>&</code></td>
<td>和号</td>
</tr>
<tr>
<td>"</td>
<td><code>"</code></td>
<td><code>"</code></td>
<td>双引号</td>
</tr>
<tr>
<td>©</td>
<td><code>©</code></td>
<td><code>©</code></td>
<td>版权符号</td>
</tr>
<tr>
<td> </td>
<td><code> </code></td>
<td><code> </code></td>
<td>不换行空格</td>
</tr>
<tr>
<td>—</td>
<td><code>—</code></td>
<td><code>—</code></td>
<td>长破折号</td>
</tr>
</tbody>
</table>
<div class="warning">
<h3>重要提示：</h3>
<p>在HTML5中，实体名称<strong>区分大小写</strong>：</p>
<p><code> </code> 有效，但 <code>&NBSP;</code> 无效</p>
</div>
</section>
<section>
<h2>实际应用案例</h2>
<h3>1. 代码显示</h3>
<div class="example">
<p>HTML段落标签：</p>
<pre><code><p>这是一个段落</p></code></pre>
<p>显示效果：</p>
<p><p>这是一个段落</p></p>
</div>
<h3>2. 数学公式</h3>
<div class="example">
<p>勾股定理：a² + b² = c²</p>
<p>显示效果：</p>
<p>勾股定理：a² + b² = c²</p>
</div>
<h3>3. 版权信息</h3>
<div class="example">
<p>© 2023 我的公司. 保留所有权利 ®</p>
<p>显示效果：</p>
<p>© 2023 我的公司. 保留所有权利 ®</p>
</div>
</section>
<section>
<h2>高级技巧</h2>
<h3>1. 组合字符</h3>
<p>可以使用多个实体组合特殊效果：</p>
<p><code>A¨</code> → Ä （A加变音符号）</p>
<h3>2. CSS伪元素中使用</h3>
<pre><code>blockquote::before {
content: "“";
}
blockquote::after {
content: "”";
}</code></pre>
<h3>3. JavaScript处理</h3>
<pre><code>// 解码HTML实体
function decodeEntities(encodedString) {
const textArea = document.createElement('textarea');
textArea.innerHTML = encodedString;
return textArea.value;
}</code></pre>
</section>
<section>
<h2>常见问题解答</h2>
<h3>Q1: 什么时候必须用实体编号？</h3>
<p>当字符没有对应的实体名称时，如：</p>
<p><code>♥</code> → ♥</p>
<h3>Q2: 如何输入emoji？</h3>
<p>现代HTML可以直接使用Unicode字符：</p>
<p><code><p>