如何在HTML中实现四个字符的空格缩进

<section>
    <h3>一、HTML实体字符方案</h3>
    <pre><code>&lt;p&gt;开头  这里是四个汉字空位&lt;/p&gt;</code></pre>
    <ul>
        <li><strong>全角空格</strong>：使用<code>&amp;emsp;</code>（1个汉字宽度）<br>示例：<code>&amp;emsp;&amp;emsp;</code>实现两汉字缩进</li>
        <li><strong>半角空格</strong>：使用<code>&amp;nbsp;</code>（半个汉字宽度）<br>示例：连续8个实现近似四个汉字空位</li>
        <li><strong>推荐场景</strong>：简单文本段落、CMS编辑器内容排版</li>
    </ul>
</section>
<section>
    <h3>二、CSS文本缩进方案</h3>
    <pre><code>p {
text-indent: 4em;

<section>
    <h3>三、布局属性控制方案</h3>
    <div class="code-group">
        <pre><code>/* 内边距方案 */

/* 外边距方案 */
.margin-space {
    margin-left: 4ch; /* 基于字符宽度 */
}

应用建议：

• 容器级元素适用
• 结合flex布局使用效果更佳
• 避免影响其他布局属性

<section>
    <h3>四、预格式化文本处理</h3>
    <pre><code>&lt;pre&gt;
这是保留所有空格和换行的
预格式化文本内容

</pre>

• 特性说明：
  • 保留原始空格和换行
  • 等宽字体显示
• 适用场景：代码展示、诗歌排版、ASCII艺术

<section>
    <h3>五、动态内容处理方案</h3>
    <pre><code>document.querySelector('.target').innerHTML = 
'&amp;emsp;&amp;emsp;' + dynamicContent;</code></pre>
    <ul>
        <li><strong>实现逻辑</strong>：通过JavaScript动态添加空格</li>
        <li><strong>注意事项</strong>：
            <ul>
                <li>避免XSS注入风险</li>
                <li>做好空值处理</li>
                <li>考虑SSR兼容性</li>
            </ul>
        </li>
    </ul>
</section>
<section class="notice">
    <h3>技术选型建议</h3>
    <table>
        <tr>
            <th>方案类型</th>
            <th>适用场景</th>
            <th>维护成本</th>
            <th>SEO友好度</th>
        </tr>
        <tr>
            <td>CSS方案</td>
            <td>全站统一排版</td>
            <td>低</td>
            <td>★★★★★</td>
        </tr>
        <tr>
            <td>HTML实体</td>
            <td>临时性调整</td>
            <td>中</td>
            <td>★★★☆☆</td>
        </tr>
        <tr>
            <td>JavaScript</td>
            <td>动态内容加载</td>
            <td>高</td>
            <td>★★☆☆☆</td>
        </tr>
    </table>
</section>
<section class="best-practice">
    <h3>最佳实践建议</h3>
    <ol>
        <li>优先使用CSS<code>text-indent</code>实现段落缩进</li>
        <li>混合字体场景使用<code>ch</code>单位进行字符计算</li>
        <li>移动端适配使用rem单位</li>
        <li>定期检查页面在不同语言环境下的显示效果</li>
    </ol>
    <p><strong>代码维护建议</strong>：建立全局样式规范，避免多处重复定义空格样式</p>
</section>
<section class="references">
    <p>引用权威资料：</p>
    <ul>
        <li>MDN Web Docs - CSS text-indent属性规范</li>
        <li>W3C HTML5语义化标准文档</li>
        <li>Google搜索中心-网页可访问性指南</li>
    </ul>
</section>