在 HTML 中嵌入 PHP 代码
在 HTML 中嵌入 PHP 代码
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 开发中非常高效。
腾讯云开发者
