phpstorm作为一款主流的php与前端开发工具，对html5的支持非常友好。要在phpstorm中运行html5页面，核心思路是利用编辑器自带的本地服务或浏览器直开功能，把写好的html5文件渲染出来。下面按实际操作顺序说明具体做法。
一、创建html5文件
在phpstorm中新建项目后，右键项目目录选择 New - HTML File，命名如 index.html。phpstorm默认生成的模板已经包含 html5 的 doctype 声明。你可以写成如下最简结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>第一个html5页面</title>
</head>
<body>
<canvas id="cv" width="200" height="100"></canvas>
<script>
// 使用html5 canvas画一个红色矩形
var c = document.getElementById('cv');
var ctx = c.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 150, 80);
</script>
</body>
</html>
二、用浏览器直接打开
最简单的方式是在文件编辑区内右键，选择 Open in Browser，然后挑一个已安装的浏览器，比如 Chrome。phpstorm会临时起一个静态服务并把页面在浏览器中加载。这种方式适合纯静态 html5，不涉及后端接口。
注意事项
- 浏览器必须在本机安装并且phpstorm能识别路径
- 如果右键菜单没有 Open in Browser，可在设置里检查 Tools - Web Browsers 配置
三、配置本地服务器运行
当 html5 页面需要配合 php 接口或 ajax 请求时，建议用 phpstorm 的 Run Configuration 启动内置服务器。操作如下：
- 点击顶部 Run - Edit Configurations
- 添加 PHP Built-in Web Server
- 设置 Host 为 127.0.0.1，Port 为 8000，Document root 指向项目目录
- 保存后点击绿色三角运行
启动后访问 http://127.0.0.1:8000/index.html 即可看到 html5 效果。
四、常见问题处理
| 现象 | 原因 | 解决办法 |
|---|---|---|
| 页面空白 | 端口被占用 | 换一个 Port 如 8080 |
| js报错 | 浏览器缓存 | 硬刷新 Ctrl+F5 |
| 无法识别浏览器 | 路径未配置 | 在设置中手动指定exe路径 |
五、使用代码术语说明
在上面的例子中，getElementById() 是文档对象模型提供的函数调用，用来获取 html5 元素节点，而不是标签写法。我们提到的 <canvas> 标签就是 html5 新增的绘图容器。
只要掌握上面几种方式，日常在 phpstorm 里运行和调试 html5 页面就会非常顺畅。