WebStorm零配置搭建静态网页：安装后激活并选VS Code键位，新建空项目建html/css/js目录，自动生成index.html骨架，通过相对路径引入CSS/JS，写按钮交互代码并用内置浏览器运行，启用Live Edit实时预览CSS效果。
你想在没有前端开发经验的情况下，用WebStorm从空白文件开始做出一个能打开、能看、能交互的网页——不需要安装额外服务、不依赖命令行、不配置构建工具，只要装好WebStorm就能立刻写HTML、加CSS样式、运行JavaScript效果。
安装并首次启动WebStorm
访问 https://www.jetbrains.com/webstorm/ 下载对应操作系统的安装包，Windows选.exe，macOS选.dmg，Linux选.tar.gz；双击安装时勾选“Add to PATH”和“Create Desktop Shortcut”，这能避免后续终端找不到命令的问题。
首次启动时，WebStorm会弹出许可激活窗口——【必须完成激活才能新建项目】；选择“Evaluate for free”可试用30天，点击Continue后进入初始设置页。
在Keymap选项中直接选“Visual Studio Code”，它比默认的IntelliJ方案更贴近新手直觉；主题选“Light”或“Darcula”均可，但别选“High Contrast”，它会让代码高亮失效。
创建空项目并建立基础目录结构
在欢迎界面点击“New Project”，左侧选“Empty Project”，右侧Project location保持默认路径即可，Project name填英文（如my-first-website），【不能含中文、空格、特殊符号或数字开头】。
点击Create后，左侧项目面板出现项目名，右键它 → New → Directory，依次新建三个文件夹：html、css、js；注意不要建在.idea或node_modules这类隐藏目录下。
这一步做完，项目结构就具备了标准静态网站雏形：资源分离、路径清晰、后续扩展无阻。
在html文件夹中新建首页并自动生成HTML5骨架
展开html文件夹 → 右键空白处 → New → HTML File，输入文件名index.html，回车确认。
WebStorm会自动填充完整的HTML5文档结构，包括、、等基础标签；此时光标已定位在
这是WebStorm最省力的功能之一：不用手敲doctype，不担心漏掉viewport meta，连闭合标签都自动补全——你只需专注内容本身。
引入外部CSS与JS并验证路径有效性
在index.html的内添加：<link rel="stylesheet" href="../css/style.css">；在末尾添加：<script src="../js/main.js"></script>。
保存index.html后，立即在css文件夹下右键 → New → Stylesheet，命名为style.css；同样在js文件夹下右键 → New → JavaScript File，命名为main.js。
此时所有路径都是相对且正确的：../表示上一级目录，从html/index.html出发，能准确找到css/style.css和js/main.js；如果路径写错，浏览器控制台会报404，而WebStorm会在引用处标红提示。
写第一段交互代码：点击按钮弹出提示
第一步：在index.html的内部，放在</main>标签之前，插入以下代码：
<button id="testBtn">点我试试</button>
第二步：打开js/main.js，在里面写入：
document.getElementById("testBtn").onclick = function() { alert("成功！你已运行了第一行JavaScript"); };
第三步：把鼠标悬停在index.html编辑器右上角，出现Chrome/Firefox图标 → 点击Chrome图标，网页将在浏览器中打开；点击按钮，弹窗出现即表示JS已生效。
这个操作链路完全脱离终端：不输npm start，不配webpack，不启本地服务器——WebStorm内置的“Open in Browser”功能直接读取本地文件系统，对纯静态页面零配置运行。
用Live Edit实时预览CSS修改效果
方法一：在css/style.css中写入body { background-color: #e0f7fa; }，保存文件，切换到已打开的浏览器窗口，按Ctrl+R刷新，背景色立即变化。
方法二（更高效）：点击WebStorm顶部菜单栏Run → Start Live Edit；此时浏览器窗口保持打开状态，你在style.css里改完任意一行CSS，无需手动刷新，1秒内页面自动更新。
Live Edit只对CSS和HTML生效，JS修改仍需刷新；启用后右下角会出现“Live Edit active”提示，关闭它只需再次点击Run → Stop Live Edit。
