php冒泡排序代码如何用HTML显示出来

PHP冒泡排序代码如何在HTML中优雅展示

在Web开发中，我们经常需要将后端代码（如PHP）与前端展示（如HTML）结合起来，以便更好地理解和学习算法实现，本文将详细介绍如何将PHP冒泡排序的代码通过HTML页面清晰、美观地展示出来。

HTML展示PHP代码的基本方法

要在HTML中展示PHP代码,主要有以下几种方式：

使用<pre>标签保留代码格式
使用语法高亮库（如Prism.js或Highlight.js）
将代码嵌入到PHP文件中执行并输出

下面我们分别探讨这些方法在展示冒泡排序代码时的应用。

使用`<pre>`标签展示

最简单的方法是使用HTML的<pre>标签,它可以保留代码中的空格和换行符。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">PHP冒泡排序代码展示</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }
        .code-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        pre {
            background-color: #f8f8f8;
            padding: 15px;
            border-radius: 5px;
            overflow-x: auto;
        }
    </style>
</head>
<body>
    <div class="code-container">
        <h2>PHP冒泡排序实现</h2>
        <pre>
&lt;?php
function bubbleSort($arr) {
    $n = count($arr);
    for ($i = 0; $i < $n - 1; $i++) {
        for ($j = 0; $j < $n - $i - 1; $j++) {
            if ($arr[$j] > $arr[$j + 1]) {
                // 交换元素
                $temp = $arr[$j];
                $arr[$j] = $arr[$j + 1];
                $arr[$j + 1] = $temp;
            }
        }
    }
    return $arr;
}
// 测试代码
$numbers = [64, 34, 25, 12, 22, 11, 90];
echo "原始数组: " . implode(", ", $numbers) . "&lt;br&gt;";
$sorted = bubbleSort($numbers);
echo "排序后数组: " . implode(", ", $sorted);
?&gt;
        </pre>
    </div>
</body>
</html>

使用语法高亮库

为了提升代码的可读性，我们可以使用语法高亮库，这里以Prism.js为例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">PHP冒泡排序代码展示（带语法高亮）</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            background-color: #2d2d2d;
            color: #ccc;
        }
        .code-container {
            background-color: #1e1e1e;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
        }
        h2 {
            color: #569cd6;
            margin-top: 0;
        }
        pre {
            margin: 0;
            font-size: 14px;
        }
        code {
            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
        }
        .description {
            margin-bottom: 20px;
            color: #d4d4d4;
        }
    </style>
</head>
<body>
    <div class="code-container">
        <h2>PHP冒泡排序实现（带语法高亮）</h2>
        <div class="description">
            以下是一个优化的冒泡排序实现，包含详细的注释说明：
        </div>
        <pre><code class="language-php">&lt;?php
/**
 * 冒泡排序函数
 * @param array $arr 需要排序的数组
 * @return array 排序后的数组
 */
function bubbleSort($arr) {
    $n = count($arr);
    // 外层循环控制排序轮数
    for ($i = 0; $i < $n - 1; $i++) {
        // 内层循环进行相邻元素比较和交换
        for ($j = 0; $j < $n - $i - 1; $j++) {
            // 如果前一个元素大于后一个元素，则交换
            if ($arr[$j] > $arr[$j + 1]) {
                // 使用临时变量交换元素
                $temp = $arr[$j];
                $arr[$j] = $arr[$j + 1];
                $arr[$j + 1] = $temp;
            }
        }
    }
    return $arr;
}
// 测试代码
$numbers = [64, 34, 25, 12, 22, 11, 90];
echo "原始数组: " . implode(", ", $numbers) . "&lt;br&gt;";
$sorted = bubbleSort($numbers);
echo "排序后数组: " . implode(", ", $sorted);
?&gt;</code></pre>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-php.min.js"></script>
</body>
</html>

PHP文件输出HTML

如果需要在实际运行中展示PHP代码，可以创建一个PHP文件,将代码作为字符串输出：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">PHP冒泡排序动态展示</title>
    <style>
        body {
            font-family: 'Courier New', Courier, monospace;
            background-color: #f0f0f0;
            padding: 20px;
        }
        .code-block {
            background-color: #fff;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            white-space: pre-wrap;
        }
        .output {
            margin-top: 20px;
            padding: 15px;
            background-color: #e9f7ef;
            border: 1px solid #a3d9a5;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <h1>PHP冒泡排序动态演示</h1>
    <div class="code-block"><?php
$code = <<<'EOD'
<?php
function bubbleSort($arr) {
    $n = count($arr);
    for ($i = 0; $i < $n - 1; $i++) {
        for ($j = 0; $j < $n - $i - 1; $j++) {
            if ($arr[$j] > $arr[$j + 1]) {
                $temp = $arr[$j];
                $arr[$j] = $arr[$j + 1];
                $arr[$j + 1] = $temp;
            }
        }
    }
    return $arr;
}
// 测试代码
$numbers = [64, 34, 25, 12, 22, 11, 90];
echo "原始数组: " . implode(", ", $numbers) . "<br>";
$sorted = bubbleSort($numbers);
echo "排序后数组: " . implode(", ", $sorted);
?>
EOD;
highlight_string($code);
?></div>
    <div class="output">
        <h3>执行结果：</h3>
        <?php
        // 实际执行冒泡排序
        function bubbleSort($arr) {
            $n = count($arr);
            for ($i = 0; $i < $n - 1; $i++) {
                for ($j = 0; $j < $n - $i - 1; $j++) {
                    if ($arr[$j] > $arr[$j + 1]) {
                        $temp = $arr[$j];
                        $arr[$j] = $arr[$j + 1];
                        $arr[$j + 1] = $temp;
                    }
                }
            }
            return $arr;
        }
        $numbers = [64, 34, 25, 12

wps下载 wps官网 wps

欧意下载

欧意app