档提供了 Web 创建与设计的全面指南，涵盖从需求分析、信息架构、原型设计到视觉设计、前后端开发及部署维护的全流程。内容包括 UI/UX 设计核心原则，HTML/CSS/JavaScript 等前端基础代码示例，以及 Node.js、Python、Java 等后端技术方案。此外还整理了常用工具推荐、不同网站类型的技术选型建议、最佳实践规范以及从零到进阶的学习路径，旨在帮助开发者建立完整的 Web 开发知识体系。
Web 创建（Web Development）= 网站功能的开发（HTML/CSS/JS + 后端 + 数据库） Web 设计（Web Design）= 网站视觉与体验设计（UI/UX）
两者结合就是： ✔ 视觉设计（UI） ✔ 用户体验（UX） ✔ 前端开发（HTML/CSS/JS） ✔ 后端开发（服务器逻辑） ✔ 数据管理（数据库） ✔ 部署上线
工具：Figma、Sketch、Axure、Adobe XD
框架：
常用语言：
要素：
视觉风格（推荐）：
原则：
工具：
你会学到：
示例：
<header>头部</header>
<main>主要内容</main>
<footer>页脚</footer>
示例：
.box {
display: flex;
justify-content: center;
padding: 20px;
}
示例：
document.querySelector("#btn").onclick = () => {
alert("点击按钮！");
};
你需要了解：
示例：Node.js
app.get("/api/user", (req, res) => {
res.json({ id: 1, name: "Tom" });
});
| 网站类型 | 主要技术 |
|---|---|
| 企业官网 | HTML/CSS/JS + 响应式设计 |
| 博客 | WordPress / Hexo / Node + DB |
| 商城 | 后端框架 + 数据库 + 支付接口 |
| 后台管理系统 | Vue/React + REST API |
| Web App | Vue/React/Svelte + API |
| 社区论坛 | Node/PHP + DB |
✔ 一定使用响应式布局 ✔ 使用一致的设计组件（按钮、输入框） ✔ 保证导航简单 ✔ 不要让加载时间超过 3 秒 ✔ 颜色对比度足够（无障碍） ✔ 有效的提示信息（表单错误提示） ✔ 加强安全性（SQL 注入 / XSS 防护）
设计工具：
前端工具：
后端工具：
部署工具：
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online