PHP Academy · 课时

使用 PHP 循环生成动态 HTML

Q: 「使用 PHP 循环生成动态 HTML」这节课中我会学到什么？

在模板中根据 PHP 数组生成 HTML 表格和列表。 你通过在浏览器中直接运行的动手代码来练习 PHP Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

在模板中根据 PHP 数组生成 HTML 表格和列表。

使用 PHP 循环生成动态 HTML 是 CoddyKit 上的免费 PHP Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 PHP Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 PHP Academy 课程共包含 4 节课。

使用 PHP 生成 HTML

PHP 最强大的用途之一，是根据数据数组动态生成 HTML，例如列表、表格、下拉菜单、导航菜单等。

生成列表

请根据 PHP 数组渲染 HTML 无序列表：

<?php
$fruits = ['Apple', 'Banana', 'Cherry', 'Durian'];
?>

<ul>
<?php foreach ($fruits as $fruit): ?>
    <li><?= htmlspecialchars($fruit) ?></li>
<?php endforeach; ?>
</ul>

生成 HTML 表格

请根据二维数组构建动态表格：

<?php
$users = [
    ['Alice', 'alice@test.com', 'Admin'],
    ['Bob',   'bob@test.com',   'User'],
];
?>
<table>
    <thead><tr><th>Name</th><th>Email</th><th>Role</th></tr></thead>
    <tbody>
    <?php foreach ($users as [$name, $email, $role]): ?>
        <tr>
            <td><?= htmlspecialchars($name) ?></td>
            <td><?= htmlspecialchars($email) ?></td>
            <td><?= htmlspecialchars($role) ?></td>
        </tr>
    <?php endforeach; ?>
    </tbody>
</table>

生成选择下拉菜单

请根据数组构建 HTML select 元素：

<?php
$countries = ['TR' => 'Turkey', 'US' => 'United States', 'DE' => 'Germany'];
$selected  = 'TR';
?>

<select name="country">
<?php foreach ($countries as $code => $name): ?>
    <option value="<?= htmlspecialchars($code) ?>"
        <?= $code === $selected ? 'selected' : '' ?>>
        <?= htmlspecialchars($name) ?>
    </option>
<?php endforeach; ?>
</select>

为行添加斑马纹

请应用交替的行样式，以提高可读性：

<?php
$rows = range(1, 8);
?>

<table>
<?php foreach ($rows as $i => $row): ?>
    <tr class="<?= $i % 2 === 0 ? 'even' : 'odd' ?>">
        <td>Row <?= $row ?></td>
    </tr>
<?php endforeach; ?>
</table>

条件式 CSS 类

请根据数据条件应用 CSS 类：

<?php
$tasks = [
    ['title' => 'Write tests',  'done' => true],
    ['title' => 'Deploy app',   'done' => false],
];
?>

<ul class="task-list">
<?php foreach ($tasks as $task): ?>
    <li class="task <?= $task['done'] ? 'done' : 'pending' ?>">
        <?= htmlspecialchars($task['title']) ?>
    </li>
<?php endforeach; ?>
</ul>

分页链接

请通过 for 循环生成分页界面：

<?php
$totalPages  = 10;
$currentPage = 3;
?>

<nav class="pagination">
<?php for ($p = 1; $p <= $totalPages; $p++): ?>
    <a href="?page=<?= $p ?>"
       class="<?= $p === $currentPage ? 'active' : '' ?>">
        <?= $p ?>
    </a>
<?php endfor; ?>
</nav>

使用嵌套循环生成嵌套 HTML

请使用嵌套循环生成嵌套的 HTML 结构：

<?php
$menu = [
    ['Home', '/', []],
    ['Products', '/products', ['Widgets', 'Gadgets']],
    ['About', '/about', []],
];
?>

<ul>
<?php foreach ($menu as [$label, $href, $sub]): ?>
    <li><a href="<?= $href ?>"><?= htmlspecialchars($label) ?></a>
    <?php if ($sub): ?>
        <ul>
        <?php foreach ($sub as $child): ?>
            <li><?= htmlspecialchars($child) ?></li>
        <?php endforeach; ?>
        </ul>
    <?php endif; ?>
    </li>
<?php endforeach; ?>
</ul>

处理空状态

在模板中始终处理空数组的情况：

<?php
$posts = [];
?>

<?php if (!empty($posts)): ?>
    <ul>
    <?php foreach ($posts as $post): ?>
        <li><?= htmlspecialchars($post['title']) ?></li>
    <?php endforeach; ?>
    </ul>
<?php else: ?>
    <p class="empty-state">No posts found. <a href="/new">Create one!</a></p>
<?php endif; ?>

生成数据属性

请通过 HTML 数据属性将数据传递给 JavaScript：

<?php
$products = [
    ['id' => 1, 'name' => 'Widget', 'price' => 9.99],
    ['id' => 2, 'name' => 'Gadget', 'price' => 24.99],
];
?>

<div class="product-grid">
<?php foreach ($products as $p): ?>
    <div class="product-card"
         data-id="<?= $p['id'] ?>"
         data-price="<?= $p['price'] ?>">
        <?= htmlspecialchars($p['name']) ?>
    </div>
<?php endforeach; ?>
</div>

PHP 和 JSON 供 JavaScript 使用

请使用 json_encode 安全地将 PHP 数组传递给 JavaScript：

<?php
$config = [
    'apiUrl'  => '/api/v1',
    'userId'  => $user['id'] ?? 0,
    'locale'  => 'en-US',
];
?>

<script>
const APP_CONFIG = <?= json_encode($config, JSON_HEX_TAG | JSON_HEX_APOS) ?>;
console.log(APP_CONFIG.apiUrl);
</script>

快速检查

在 HTML 中输出由用户控制的字符串时，必须使用哪个函数来防止 XSS？

回顾：使用循环生成动态 HTML

关键技巧：

在模板中使用替代的 foreach/for 冒号语法
始终使用 htmlspecialchars() 转义输出
在属性中使用三元表达式实现条件式 CSS 类
使用 if/else 包围循环，以处理空数组
通过 json_encode() 将 PHP 数据传递给 JavaScript

常见问题解答

「使用 PHP 循环生成动态 HTML」课时是免费的吗？

是的 — 「使用 PHP 循环生成动态 HTML」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 PHP Academy 课程的其余内容，请升级到 CoddyKit PRO。 PHP Academy 课程共包含 4 节课。

「使用 PHP 循环生成动态 HTML」这节课中我会学到什么？

在模板中根据 PHP 数组生成 HTML 表格和列表。你通过在浏览器中直接运行的动手代码来练习 PHP Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 PHP Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 PHP Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「使用 PHP 循环生成动态 HTML」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 PHP Academy 课中编写并运行代码吗？

能。每节 PHP Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 PHP Academy