在 HTML 中嵌入 PHP 代码

上篇教程,学院君给大家演示了如何基于 PHP 编写第一个程序 —— 打印一段欢迎语句,并且通过浏览器和命令行展示了代码执行结果,今天,我们将给大家演示基于 PHP + HTML 进行混合编程。

PHP 与 HTML

PHP 天生对 Web 和 HTML 友好,在 PHP 诞生之初,主要用于在 Web 1.0 中构建个人主页,那个时候,PHP 代表的是 Personal Home Page,随着 Web 互联网的发展,在 Web 2.0 时代,PHP 进一步进化为 PHP:Hypertext Preprocessor,即超文本处理器,而 HTML 则是 HyperText Markup Language 的缩写,也就是超文本标记语言。

一个是标记语言,一个是处理器,可见二者之间的渊源,它们之间的关系甚至亲密到可以直接混合在一起进行编程,PHP 脚本在 HTML 文档中只是一种特殊标记而已,并且可以在 HTML 文档中直接编写任何 PHP 脚本代码,然后将文档保存为 .php 文件,就可以被 PHP 解释器解析和执行。

下面我们就来看看如何基于 PHP + HTML 进行混合编程。

注:以下教程基于 Mac + PhpStorm 进行演示,Windows 环境流程完全一致,不再重复介绍。

创建新文件

上篇教程创建的 php_learning 项目中,新建一个 HTML 文件,我们将基于这个 HTML 模板编写 PHP 代码:

在 PhpStorm 中新建 HTML 文件

然后在弹出窗口选择新建一个 HTML 5 文件,将文件名设置为 hello

新建 HTML 5 模板文件

创建完成后,选中新建的 hello.html,点击鼠标右键,在下拉菜单选择 Refactor->Rename 对该文件进行重命名:

在 PhpStorm 中进行文件重命名

这里,将文件后缀名修改为 .php 即可,点击「Refactor」按钮确认修改:

在 PhpStorm 中进行文件重命名

至此,我们就基于 PhpStorm 自带的 HTML 5 模板新建了一个包含完整 HTML 结构骨架的 PHP 文件。

编写 HTML 代码

hello.php 中,将文档标题修改为 Hello,然后在 <body></body> 之间新增一个 h1 标签,内容设置为 你好,PHP!,和上篇教程打印的欢迎语句一致:

在 PhpStorm 中编写 Html 代码

通过 php -S localhost:9000 启动 PHP 内置的 Web 服务器(已启动忽略),在浏览器中访问 http://localhost:9000/hello.php,返回结果如下:

查看页面渲染结果

表明 PHP 解释器无需任何额外设置即可原生支持解析纯 HTML 文档。

在 HTML 中嵌入 PHP 代码

接下来,我们在 hello.php 中,将上一步 <h1></h1> 之间的 HTML 文本替换成 PHP 代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
</head>
<body>
<h1><?php echo "你好,PHP!";?></h1>
</body>
</html>

这段 PHP 代码的作用和之前 HTML 文本的渲染结果完全一致,都是打印「你好,PHP!」,这里需要注意的是在 HTML 文档中嵌入 PHP 代码需要将 PHP 代码放到 <?php?> 之间,并且末尾的 ?> 不能省略,在包含纯 PHP 代码的文件中,最后的 ?> 可以省略(并且最好不要设置,以免在引入其他 PHP 文件时出现问题,关于这一点,后面学院君会介绍原因),这一点我们在上篇教程中已经看到了。

在浏览器中刷新 http://localhost:9000/hello.php(PHP 是动态语言,无需编译即可生效),即可看到如下效果,和之前 HTML 文本渲染效果完全一致:

查看页面渲染结果

此外,对于 <?php echo expression;?> 这种格式的打印语句,PHP 还提供了形如 <?=expression?>这种简写标签(其中 expression 表示一段 PHP 表达式),所以对于上面的 PHP 代码,可以通过如下这种方式简写:

<?="你好,PHP!"?></h1>

渲染效果和之前完全一致。

应用 CSS 样式表

为了让 HTML 页面渲染效果更好看一些,我们还可以为包裹 PHP 代码的 HTML 标签应用 CSS 样式。

hello.php</head> 之前,新增如下样式代码,为 h1 标签设置背景色、字体颜色、间距以及对齐方式:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
    <style>
        h1 {
            background-color: #f4645f;
            color: #fff;
            padding: 1em;
            text-align: center;
        }
    </style>
</head>
<body>
<h1><?="你好,PHP!"?></h1>
</body>
</html>

在浏览器中刷新 http://localhost:9000/hello.php,即可看到如下渲染效果:

查看页面渲染结果(应用CSS)

表明应用 CSS 样式表成功。

应用 JavaScript 动态代码

既然是作用在 HTML 标签上,支持 CSS,当然也支持 JavaScript,我们在 hello.php 中,为 h1 标签新增一个 id 属性,然后在 </body> 之前编写一段 JavaScript 代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
    <style>
        h1 {
            background-color: #f4645f;
            color: #fff;
            padding: 1em;
            text-align: center;
        }
    </style>
</head>
<body>
<h1 id="h1"><?="你好,PHP!"?></h1>
<script>
    var h1Element = document.getElementById("h1")
    h1Element.onclick = function () {
        alert("该页面由学院君通过 PHP + HTML 实现");
    }
</script>
</body>
</html>

这段 JavaScript 代码的作用是点击 h1 标签区域时,弹出一个提示框,显示作者信息。

在浏览器中刷新 http://localhost:9000/hello.php,即可看到如下渲染效果:

查看页面渲染结果(应用 JavaScript)

表明 JavaScript 代码生效。

小结

由此可见,在 PHP 文件中,既可以编写纯 PHP 代码,也可以混合 HTML + PHP 代码进行编程(在 HTML 中嵌入 PHP 代码需要通过完整的 <?php?> 进行包裹)。在混合 HTML 的 PHP 文件中,还可以引入 CSS、JavaScript 代码让渲染效果和页面功能更加丰富,这些在 PHP 中都是原生支持的,不需要引入任何额外的设置、扩展包,并且 PHP 本身是动态解释型语言,代码修改无需编译即可立即生效,所以在 Web 开发中非常高效。

从下篇教程开始,学院君将开始给大家系统介绍 PHP 的函数式编程和面向对象编程语法,以及数据库操作、Web 编程概念,并通过一个系统的 CMS 项目收尾,让大家更加全面地认识 PHP,并学会用 PHP 进行 Web 开发。

作为入门篇的收尾作业,请大家基于 PHP + HTML 实现一个类似阮一峰博客首页的页面,后面的教程会以此为基础进行讲解。为了方便对初学者进行指导,学院君专门开设了学习群对教程学习和课后作业进行督促和指导,感兴趣的同学可以联系学院君微信加入(学习群需要收费,加我时备注「精品课」):

上一篇: 编写第一个 PHP 程序

下一篇: PHP 变量与常量