如何为 PHP 动态输出的文本添加 CSS 样式

例如，优化后的 PHP 代码如下：

if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        echo '<div class="comment-item">';
        echo '  <p><strong class="comment-user">User:</strong> <span class="user-name">' . htmlspecialchars($row['user']) . '</span></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/7fc7563c4182" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">PHP免费学习笔记（深入）</a>”；</p>';
        echo '  <p><strong class="comment-time">Time:</strong> <time datetime="' . htmlspecialchars($row['time']) . '">' . date('Y-m-d H:i', strtotime($row['time'])) . '</time></p><div class="aritcle_card flexRow">
                                                        <div class="artcardd flexRow">
                                                                <a class="aritcle_card_img" href="/ai/2001" title="HaiSnap"><img
                                                                                src="https://img.php.cn/upload/ai_manual/000/000/000/175679963482713.png" alt="HaiSnap"  onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
                                                                <div class="aritcle_card_info flexColumn">
                                                                        <a href="/ai/2001" title="HaiSnap">HaiSnap</a>
                                                                        <p>一站式AI应用开发和部署工具</p>
                                                                </div>
                                                                <a href="/ai/2001" title="HaiSnap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                        </div>
                                                </div>';
        echo '  <p><strong class="comment-content">Message:</strong> <span class="message-text">' . htmlspecialchars($row['content']) . '</span></p>';
        echo '</div>';
    }
}

? 关键要点说明：

• 语义化结构优先：使用 标签标记时间、 强调字段名，提升可访问性与 SEO 友好性；
• CSS 类命名清晰：如 comment-user、user-name、message-text，便于后期维护与复用；
• 必须转义输出内容：使用 htmlspecialchars() 防止 XSS 攻击——这是动态输出 HTML 时不可省略的安全步骤；
• 避免滥用
  ： 是错误写法（HTML5 中
  为自闭合标签，无 ），且换行应由 CSS（如 margin、display: block）控制，而非硬编码换行符；
• 推荐外链 CSS：在 中引入样式表，例如：

  <style>
  .comment-item { margin-bottom: 1.2em; padding: 0.8em; border-left: 3px solid #4a90e2; }
  .user-name { color: #2c3e50; font-weight: 600; }
  .message-text { line-height: 1.5; color: #34495e; }
  time { font-style: italic; color: #7f8c8d; }
  </style>

? 进阶建议：

• 若项目使用现代前端框架（如 Vue/React），可考虑将数据以 JSON 形式传至前端渲染，实现关注点分离；
• 对于大量评论，建议启用分页与懒加载，避免单次 echo 渲染过多 DOM 节点；
• 所有用户输入字段（尤其是 content）务必服务端校验 + 前端过滤，双重保障内容安全。

通过结构化 HTML + 模块化 CSS + 安全输出，你既能保持 PHP 后端逻辑简洁，又能获得媲美静态页面的样式表现力与可维护性。