本文介绍两种语义正确、样式可控的 HTML 方式，将 PHP 查询出的用户字段（如 ID、用户名、姓名等）以“标题: 值”垂直对齐形式呈现，替代混乱的 拼接，兼顾可维护性与 CSS 可定制性。
本文介绍两种语义正确、样式可控的 html 方式，将 php 查询出的用户字段（如 id、用户名、姓名等）以“标题: 值”垂直对齐形式呈现，替代混乱的 `
` 拼接，兼顾可维护性与 css 可定制性。
在 PHP 中直接用 定义列表 配套 CSS（放入 ⚠️ 安全提醒：务必使用 htmlspecialchars() 对输出内容进行转义，防止 XSS 攻击——这是生产环境的强制要求。 当强调字段间的强关联性与行列结构时， 配套简洁 CSS： 采用上述任一方式，即可优雅、健壮地实现数据库字段的垂直对齐展示，同时为后续样式定制、无障碍访问和响应式优化打下坚实基础。
拼接数据库字段（如 "ID: " . $row["id"] . "
"）虽能实现换行，但无法保证标签（如 “ID:”）与对应值严格左对齐，且缺乏语义结构，导致样式控制困难、响应式适配差、无障碍支持弱。真正可靠的解决方案是引入语义化 HTML 容器——推荐使用 定义列表（）
或 表格（），二者均天然支持“术语–定义”或“标题–数据”的垂直配对关系。
✅ 推荐方案一：使用定义列表（语义最优，现代推荐）
是 HTML5 中专为“名词–解释”类内容设计的语义元素，
while ($row = $result->fetch_assoc()) {
echo '
';
}.user-profile {
display: grid;
grid-template-columns: max-content 1fr;
gap: 0.25em 1em;
margin: 1.5rem 0;
}
.user-profile dt {
font-weight: bold;
text-align: right;
padding-right: 0.5em;
}
.user-profile dd {
margin: 0;
}
/* 响应式优化：小屏幕下堆叠显示 */
@media (max-width: 600px) {
.user-profile {
grid-template-columns: 1fr;
}
.user-profile dt {
text-align: left;
padding-right: 0;
}
}
✅ 方案二：使用语义化表格（兼容性强，逻辑直观）
是完全合理的选择（W3C 明确指出：表格适用于二维数据关系）。此处每组用户信息构成一个独立小表，列宽自动由最长标签（如 “Username:”）撑开，无需手动计算：
while ($row = $result->fetch_assoc()) {
echo '
';
echo "
';
}
";
echo "ID:
" . htmlspecialchars($row["id"]) . "
";
echo "Username:
" . htmlspecialchars($row["username"]) . "
";
echo "Name:
" . htmlspecialchars($row["name"]) . "
";
echo 'Surname:
" . htmlspecialchars($row["surname"]) . "
.user-table {
border-collapse: collapse;
margin: 1.5rem 0;
width: max-content;
}
.user-table th,
.user-table td {
padding: 0.4em 0.8em;
text-align: left;
}
.user-table th {
font-weight: bold;
background-color: #f5f5f5;
min-width: 90px;
}
? 关键总结
+ 内联样式：结构脆弱、不可维护、无语义、难响应； + CSS Grid：语义精准、灵活可控、现代标准；
：逻辑直观、兼容性极佳、适合强结构化字段；
php免费学习视频：立即使用
踏上前端学习之旅，开启通往精通之路！从前端基础到项目实战，循序渐进，一步一个脚印，迈向巅峰！
