Web 开发入门

网站建设指南

从零开始建设一个网站需要了解技术选型、域名、托管、开发与上线等完整流程。

建站流程总览

规划:明确网站目的、目标用户、内容结构
选型:选择技术栈(静态/动态、框架)
设计:页面布局、视觉风格、交互设计
开发:前端页面 + 后端逻辑 + 数据库
部署:购买域名、服务器,上线发布
运营:内容更新、SEO、数据分析、维护

技术栈选择

前端: HTML + CSS + JavaScript(必学三件套)
框架: React / Vue / Angular
后端: Node.js / Python / Java / PHP
数据库: MySQL / PostgreSQL / MongoDB

本教程内容

后续章节将依次介绍万维网基础、HTML、CSS、JavaScript、XML、服务端脚本、SQL 及网站设计规范。

WWW 指南 - 万维网

万维网(World Wide Web,WWW)是互联网上最广泛的信息服务系统,由 HTML 页面和超链接构成。

什么是万维网

万维网是一个通过互联网访问的、由相互链接的超文本文档组成的系统。用户通过浏览器输入网址即可访问分布在世界各地的网页。

关键概念

网页(Web Page):用 HTML 编写的文档
网站(Website):一组相关网页的集合
URL:统一资源定位符,网页的地址
超链接(Hyperlink):网页之间的跳转连接
浏览器:Chrome / Firefox / Edge / Safari

URL 结构

https://www.example.com:8080/path/page.html?q=1#section
协议      域名        端口  路径        查询   锚点

万维网 vs 互联网

互联网:全球互联的计算机网络基础设施
万维网:运行在互联网之上的信息服务体系(HTTP)

发展历史

1989 年:Tim Berners-Lee 在 CERN 提出万维网构想
1991 年:第一个网站上线
1993 年:Mosaic 浏览器发布,万维网普及
2004 年:Web 2.0 概念兴起(交互式应用)

HTML 指南

HTML(HyperText Markup Language,超文本标记语言)是构建网页的标准语言。

什么是 HTML

<!DOCTYPE html>
<html>
<head>
  <title>我的网页</title>
</head>
<body>
  <h1>标题</h1>
  <p>段落文本</p>
  <a href="https://example.com">链接</a>
</body>
</html>

HTML 基本构成

标签(Tag):<html> <body> 等,尖括号包裹
元素(Element):开始标签 + 内容 + 结束标签
属性(Attribute):标签的附加信息(href、src 等)

常用标签

<h1>-<h6>   标题
<p>        段落
<a>        链接
<img>      图片
<ul>/<ol>  无序/有序列表
<table>    表格
<form>     表单
<div>      块级容器
<span>     行内容器

语义化标签(HTML5)

<header> <nav> <main> <section> <article>
<aside> <footer> <figure> <time>

如何学习

动手写代码,浏览器查看效果
用浏览器"查看源代码"/开发者工具学习
配合 CSS 与 JavaScript 构建完整页面

CSS 指南

CSS(Cascading Style Sheets,层叠样式表)负责网页的表现层,控制颜色、布局、字体等视觉样式。

什么是 CSS

/* 选择器 { 属性: 值; } */
h1 {
  color: blue;
  font-size: 32px;
}

.button {
  background-color: #007bff;
  padding: 10px 20px;
  border-radius: 5px;
}

引入方式

/* 1. 外部样式表(推荐) */
<link rel="stylesheet" href="style.css">

/* 2. 内部样式表 */
<style> ... </style>

/* 3. 行内样式 */
<p style="color: red">

选择器

标签选择器   h1 { }
类选择器     .class { }
ID选择器     #id { }
后代选择器   div p { }
组合选择器   h1, h2 { }
伪类选择器   a:hover { }

盒模型

content(内容) → padding(内边距) → border(边框) → margin(外边距)

布局方式

传统: float / position
现代: Flexbox(一维) / Grid(二维)

响应式设计

@media (max-width: 768px) {
  .container { flex-direction: column; }
}

JavaScript 指南

JavaScript 是 Web 的编程语言,让网页具备交互能力,是现代前端开发的核心。

什么是 JavaScript

// 改变页面内容
document.getElementById("demo").innerHTML = "Hello JS!";

// 事件处理
button.onclick = function() {
  alert("点击了按钮");
};

// 数据操作
const list = [1, 2, 3];
const doubled = list.map(n => n * 2);

三大能力

DOM 操作:增删改查页面元素
事件处理:点击、输入、滚动等交互
异步通信(AJAX):与服务器交换数据

基本语法

变量:  let / const(推荐)  var(旧)
函数:  function f() {}  / 箭头函数 () => {}
对象:  { key: value }
数组:  [1, 2, 3]

现代 JavaScript 生态

框架:  React / Vue / Angular / Svelte
运行时: Node.js(服务端)
工具:   npm / Vite / Webpack
语言超集: TypeScript

学习路径

基础语法:变量、类型、流程控制、函数
DOM 与事件
异步编程:Promise / async-await
ES6+ 新特性
选择框架深入

XML 指南

XML(eXtensible Markup Language,可扩展标记语言)用于描述和传输结构化数据。

什么是 XML

<book>
  <title>Web 开发入门</title>
  <author>老王</author>
  <price currency="CNY">99</price>
</book>

XML 的特点

自描述:标签表达含义
可扩展:自定义标签
平台无关:纯文本,任何系统可解析
严格结构:必须有根元素、正确嵌套

XML 语法规则

必须有声明: <?xml version="1.0" encoding="UTF-8"?>
必须有根元素
标签大小写敏感
属性值必须加引号
标签必须正确闭合

XML 的应用

配置文件(pom.xml / web.xml)
数据交换(Web Service / SOAP)
文档格式(SVG / RSS / Office 文件)
序列化存储

XML vs JSON

XML: 标签丰富、适合文档,较冗长
JSON: 轻量简洁、Web API 主流格式

服务端脚本指南

服务端脚本在服务器上运行,负责处理业务逻辑、数据库交互并生成动态网页。

什么是服务端脚本

客户端浏览器
    ↓ 请求
服务器(运行服务端脚本:处理请求、查询数据库)
    ↓ 响应(HTML/JSON)
客户端浏览器展示

主流服务端技术

PHP        最流行的 Web 脚本语言(Laravel)
Node.js    用 JavaScript 写服务端(Express/NestJS)
Python     Django / Flask / FastAPI
Java       Spring Boot
C# / .NET  ASP.NET Core
Go         Gin / Echo

服务端能做什么

处理表单提交与用户输入
用户认证与权限控制
数据库读写
文件上传下载
生成动态内容(个性化页面)

基础示例(Node.js)

const http = require("http");

const server = http.createServer((req, res) => {
  res.writeHead(200, {"Content-Type": "text/plain"});
  res.end("Hello from server!");
});

server.listen(3000);

客户端 vs 服务端

客户端脚本: 在浏览器运行(JS),负责交互与展示
服务端脚本: 在服务器运行,负责数据与业务

SQL 指南

SQL(Structured Query Language,结构化查询语言)是操作关系数据库的标准语言。

什么是 SQL

-- 查询
SELECT * FROM users WHERE age > 18;

-- 插入
INSERT INTO users (name, age) VALUES ('Alice', 25);

-- 更新
UPDATE users SET age = 26 WHERE name = 'Alice';

-- 删除
DELETE FROM users WHERE name = 'Alice';

SQL 分类

DDL 数据定义: CREATE / ALTER / DROP(表结构)
DML 数据操作: INSERT / UPDATE / DELETE(数据)
DQL 数据查询: SELECT(查询)
DCL 数据控制: GRANT / REVOKE(权限)

常用数据库

MySQL    开源最流行
PostgreSQL  功能强大开源
SQLite   轻量嵌入式
SQL Server  微软
Oracle   企业级

核心概念

表(Table)   数据的二维结构(行列)
主键(PK)    唯一标识一行
外键(FK)    关联其他表
索引(Index) 加速查询
视图(View)  虚拟表

学习建议

先学 SELECT 查询(WHERE/ORDER BY/JOIN/GROUP BY)
再学增删改与建表
配合实际项目实践

Web 创建设计

好的网站设计兼顾美观与可用性,本节介绍网页设计的核心原则。

设计原则

一致性:页面风格统一,导航位置一致
简洁:减少不必要的元素,突出核心内容
视觉层次:通过大小、颜色、留白区分主次
响应式:适配手机、平板、桌面
无障碍:考虑色盲、屏幕阅读器等用户

页面布局

标准结构:
┌─────────────┐
│   Header    │
├─────┬───────┤
│ Nav │ Main  │
├─────┴───────┤
│   Footer    │
└─────────────┘

配色与字体

主色 1-2 个 + 强调色 1 个 + 中性色
正文用易读字体(14-16px),标题用醒目字体
限制字体种类(不超过 3 种)

设计工具

Figma / Sketch / Adobe XD  设计稿
Canva                    快速设计
Coolors / Paletton       配色工具
Google Fonts             字体库

开发实现

CSS 框架: Bootstrap / Tailwind
组件库:  Ant Design / Element Plus
图标库:  Font Awesome / Material Icons

Web 标准

Web 标准由 W3C 等组织制定,保证网页在各种浏览器和设备上一致呈现。

核心标准

HTML  结构标准(W3C)
CSS   样式标准(W3C)
JavaScript  行为标准(ECMAScript, Ecma 组织)
URL  资源定位标准
HTTP 传输协议标准(IETF)

为什么遵循标准

跨浏览器兼容:Chrome/Firefox/Safari/Edge
可访问性:残障用户也能使用
SEO 友好:搜索引擎正确解析
面向未来:新浏览器特性无缝升级
开发效率:标准化写法更容易维护

W3C 推荐标准流程

工作草案(WD) → 候选推荐(CR) → 正式推荐(REC)

标准验证

HTML 验证: validator.w3.org
CSS 验证: jigsaw.w3.org/css-validator

DOCTYPE 声明

<!DOCTYPE html>   <!-- HTML5 标准声明,每个页面必须有 -->

常见标准组织

W3C     HTML/CSS/SVG/XML 标准
WHATWG  HTML 标准维护(与 W3C 协作)
Ecma    JavaScript 标准
IETF    HTTP/TCP/IP 协议

网站验证

网站验证是指检查网页代码是否符合标准和规范,确保质量与兼容性。

验证什么

HTML 验证:标签嵌套、属性、DOCTYPE
CSS 验证:语法、属性拼写
链接检查:死链检测
兼容性:多浏览器、多设备测试
性能:加载速度、资源优化

验证工具

W3C Markup Validator    HTML 验证
W3C CSS Validator       CSS 验证
Lighthouse(Chrome)      性能/SEO/无障碍审计
Broken Link Checker     死链检测
CanIUse                  浏览器特性兼容查询

Lighthouse 使用

1. Chrome 打开目标网站
2. F12 → Lighthouse 标签
3. 点击"分析网页加载"
4. 查看性能/无障碍/最佳实践/SEO 评分

常见验证错误

标签未闭合
属性值未加引号
重复 ID
img 缺少 alt 属性
HTML 标签嵌套错误

验证流程建议

开发中随手验证(IDE 插件)
上线前全站验证
CI 中加入自动化检查

Web 语义化

语义化(Semantics)指用有意义的 HTML 标签描述内容含义,而非仅关注外观。

为什么要语义化

搜索引擎准确理解页面结构
屏幕阅读器等无障碍工具更好工作
代码可读性高,便于维护
减少不必要的 div 嵌套

语义化标签(HTML5)

<header>   页眉
<nav>      导航
<main>     主体内容
<section>  章节
<article>  独立文章
<aside>    侧边栏
<footer>   页脚
<figure>   配图
<figcaption> 图注
<time>     时间
<mark>     高亮
<strong>   重要(加粗语义)
<em>       强调(斜体语义)

语义化示例

<!-- 非语义化 -->
<div class="header">网站标题</div>

<!-- 语义化 -->
<header>网站标题</header>

语义化 vs 表现化

语义化: <strong> 表示重要,样式由 CSS 控制
表现化: <b> 仅表示加粗(无语义,已弃用语义)

实践要点

每个页面只有一个 main
用 h1-h6 表达标题层级
按钮用 button,链接用 a(不要混用)
表格用 table 语义元素(caption/thead/tbody)

Web 词汇表

掌握 Web 开发常用术语,帮助你阅读文档和交流。

基础术语

URL          统一资源定位符
HTTP/HTTPS   超文本传输协议(加密版)
DNS          域名系统(域名→IP)
IP 地址      设备网络地址
端口          服务标识(80/443)
Cookie       浏览器存储的小数据
Session      服务器会话
Cache        缓存(加速访问)

前端术语

HTML/CSS/JS  网页三件套
DOM          文档对象模型
AJAX/Fetch   异步数据请求
SPA          单页应用
SSR          服务端渲染
响应式       自适应多端
前端框架     React/Vue/Angular

后端术语

API          应用程序接口
RESTful      接口设计风格
数据库       数据存储(MySQL/Mongo)
中间件       请求处理管道组件
鉴权         身份认证与授权
部署         上线运行

工具术语

IDE          集成开发环境(VS Code)
Git          版本控制
npm/pnpm     包管理器
构建工具     打包编译(Vite/Webpack)
CI/CD        持续集成与部署

性能与安全

加载时间     页面显示耗时
SEO          搜索引擎优化
XSS          跨站脚本攻击
CSRF         跨站请求伪造
HTTPS 证书   加密传输凭证

Web 搜索引擎优化

SEO(Search Engine Optimization)是提升网站在搜索引擎中排名的技术。

为什么需要 SEO

自然流量成本低、可持续
高排名带来高点击率
品牌曝光与可信度

技术 SEO

<title>页面标题(含关键词)</title>
<meta name="description" content="页面描述">
<meta name="keywords" content="关键词">

语义化标签(header/main/article)
正确的 heading 层级(h1→h6)
图片 alt 属性
友好的 URL(可读、含关键词)
robots.txt 与 sitemap.xml
HTTPS 加密

内容 SEO

原创、高质量、有价值的内容
关键词自然融入标题与正文
定期更新内容
内链与外链建设

页面速度优化

压缩图片(WebP)
启用 CDN
代码压缩(JS/CSS)
延迟加载图片
减少 HTTP 请求

移动端优化

响应式设计
移动端加载速度
避免拦截式弹窗

SEO 工具

Google Search Console
Bing Webmaster Tools
百度搜索资源平台
Ahrefs / SEMrush(付费)

W3C 词汇和术语表

W3C(World Wide Web Consortium,万维网联盟)是制定 Web 标准的核心组织,本节介绍其相关术语。

W3C 是什么

由 Tim Berners-Lee 于 1994 年创立,负责制定 HTML、CSS、XML 等 Web 技术标准,成员包括各大科技公司与研究机构。

常见 W3C 术语

Recommendation(REC)  正式推荐标准
Working Draft(WD)    工作草案
Candidate Rec(CR)    候选推荐
W3C Validator        官方验证器
WAI                  Web 无障碍倡议
WebIDL               接口定义语言
CSSWG                CSS 工作组

W3C 主要标准

HTML5        网页结构
CSS3         样式
XML / XSLT   数据与转换
SVG          矢量图形
WebSocket    实时通信
WebAssembly  高性能执行
WAI-ARIA     无障碍

标准制定流程

编辑草案(ED) → 工作草案(WD)
→ 候选推荐(CR) → 提议推荐(PR)
→ 正式推荐(REC)

与 WHATWG 的关系

WHATWG 维护 HTML "living standard"(持续演进)
W3C 发布 HTML 快照版本
两者协作,确保标准统一

为什么关注 W3C

遵循 W3C 标准意味着:跨浏览器兼容、无障碍支持、面向未来的技术演进。

WWW 指南 - 万维网(World Wide Web)

本指南深入介绍万维网的工作原理与组成要素。

万维网如何工作

1. 用户在浏览器输入网址
2. 浏览器通过 DNS 把域名解析为 IP 地址
3. 浏览器向服务器发起 HTTP 请求
4. 服务器返回 HTML 等资源
5. 浏览器解析渲染页面
6. 用户点击链接,重复以上流程

组成要素

资源:HTML、图片、视频、CSS、JS 文件
标识:URL 唯一定位资源
协议:HTTP/HTTPS 传输规则
载体:浏览器与服务器

HTTP 请求-响应模型

GET /index.html HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0 ...

HTTP/1.1 200 OK
Content-Type: text/html
<html>...</html>

静态 vs 动态网页

静态: 服务器直接返回 HTML 文件
动态: 服务端脚本生成(数据库驱动)

Web 技术演进

Web 1.0  只读静态页面
Web 2.0  交互、社交、用户生成内容
Web 3.0  语义网、去中心化概念

WWW - 万维网

万维网是互联网上基于超文本的信息系统,是绝大多数人接触互联网的入口。

核心要素回顾

URL    资源地址(https://example.com/page)
HTTP   传输协议
HTML   内容标记语言
浏览器 用户访问工具
服务器 资源托管方

输入网址后发生了什么

DNS 解析 → TCP 连接 → HTTP 请求
→ 服务器处理 → HTTP 响应 → 浏览器渲染

浏览器的主要组件

用户界面(地址栏/按钮)
渲染引擎(解析 HTML/CSS)
JavaScript 引擎(V8/SpiderMonkey)
网络模块(HTTP 请求)
存储(Cookie/LocalStorage)

网站托管方式

虚拟主机   共享服务器
VPS        独立虚拟服务器
云托管      AWS/阿里云/腾讯云
静态托管    GitHub Pages/Netlify/CloudStudio

域名体系

顶级域: .com .org .cn .net
二级域: example.com
子域名: www.example.com / blog.example.com

学习建议

理解万维网工作原理(请求-响应、DNS、协议)是 Web 开发的基石,建议结合抓包工具(F12 开发者工具)观察真实请求。

HTML - WEB 标记语言

HTML 是万维网的基础语言,所有网页都由 HTML 构建。

HTML 的作用

定义页面结构:标题、段落、列表、表格、表单
提供语义:让内容含义清晰
支撑样式与脚本:CSS 美化、JS 交互

文档结构

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>页面标题</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>欢迎</h1>
    <p>正文内容</p>
    <script src="app.js"></script>
  </body>
</html>

常用元素分类

文本: <h1> <p> <span> <strong> <em>
链接: <a href="">
媒体: <img> <video> <audio>
列表: <ul> <ol> <li>
表格: <table> <tr> <td>
表单: <form> <input> <button>
布局: <div> <header> <nav> <main> <footer>

属性与实体

常用属性: id/class/style/src/href
特殊实体: &lt; <  &gt; >  &amp; &  &nbsp; 空格

HTML 版本

HTML5(现行标准): 语义化标签、多媒体、Canvas
替代老式写法: <center> <font> 已废弃

学习资源

MDN(Mozilla Developer Network)是 HTML 最权威的参考文档。

CSS - 层叠样式表

CSS 定义网页的视觉呈现,与 HTML 分工协作:HTML 负责结构,CSS 负责样式。

CSS 能做什么

颜色与字体
间距与对齐
布局(Flex/Grid)
动画与过渡
响应式适配
主题切换

层叠规则

优先级: 行内 > ID > 类/属性 > 标签 > 通配符
!important 最高优先级(慎用)
同优先级后写的覆盖先写的

选择器示例

.nav a:hover { color: red; }        /* 组合 */
div > p { }                          /* 直接子元素 */
input[type="text"] { }               /* 属性选择器 */
li:nth-child(2n) { }                 /* 偶数行 */
.container::before { content: ""; }  /* 伪元素 */

现代布局:Flexbox

.flex-container {
  display: flex;
  justify-content: space-between;  /* 主轴 */
  align-items: center;             /* 交叉轴 */
  gap: 10px;                       /* 间距 */
}

现代布局:Grid

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

CSS 方法论

BEM       块-元素-修饰符命名
OOCSS     对象导向
CSS Modules / Tailwind CSS 工具类
预处理器: Sass / Less

JavaScript - 客户端脚本

JavaScript 是运行在浏览器中的脚本语言,让网页从"静态文档"变成"动态应用"。

核心能力

DOM 操作: 增删改查页面元素
事件: 点击/输入/键盘/滚动
表单验证: 提交前校验
异步请求: Fetch API 获取数据
动画: CSS3 + JS 驱动
本地存储: localStorage/sessionStorage

基础语法速览

// 变量
let count = 0;
const name = "Web";

// 函数
function greet(name) {
  return `Hello, ${name}`;
}
const arrow = (x) => x * 2;

// 对象与数组
const user = { name: "Alice", age: 25 };
const arr = [1, 2, 3];

// DOM 操作
document.querySelector(".btn").addEventListener("click", () => {
  alert("clicked!");
});

异步编程

fetch("https://api.example.com/data")
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

// async/await 更清晰
async function loadData() {
  const res = await fetch(url);
  return await res.json();
}

常见坑

this 指向问题(箭头函数解决)
同步阻塞 UI(耗时任务用异步)
类型转换陷阱(=== 严格比较)

学习资源

MDN JavaScript
JavaScript.info(中文教程)
现代 JavaScript 教程(zh.javascript.info)

XML - 扩展标记语言

XML 是一种通用的数据描述语言,在 Web 世界用于数据交换与配置。

XML 核心特性

纯文本: 任何平台可解析
结构化: 树形嵌套
自定义: 标签自由定义
标准: W3C 规范,工具生态成熟

XML 文档示例

<?xml version="1.0" encoding="UTF-8"?>
<library>
  <book id="1">
    <title>Web 开发入门</title>
    <author>老王</author>
    <year>2026</year>
  </book>
  <book id="2">
    <title>数据库基础</title>
    <author>李四</author>
    <year>2025</year>
  </book>
</library>

XML 语法要点

必须有根元素
标签闭合与嵌套正确
属性值加引号
大小写敏感
注释: <!-- 注释 -->

Web 中的 XML 应用

RSS/Atom 订阅
Sitemap.xml 站点地图
SVG 矢量图(基于 XML)
配置文件
Web Service(SOAP)

解析 XML

DOM   一次性加载成树,方便修改
SAX   流式解析,内存友好
XPath 查询语言(XML 的 SQL)

XML vs HTML

HTML: 预定义标签,用于展示
XML: 自定义标签,用于数据描述

PHP 和 ASP - 服务器端脚本化

PHP 与 ASP 是最早普及的两大服务端脚本技术,用于生成动态网页。

PHP 简介

<?php
  $name = "World";
  echo "Hello, $name!";
  // 连接数据库、处理表单、生成动态内容
?>

开源免费,部署简单(搭配 Apache/Nginx + MySQL)
流行框架:Laravel、ThinkPHP、Symfony
WordPress 基于 PHP,占据大量网站市场

ASP 简介

<% Response.Write "Hello, World!" %>

微软技术(经典 ASP 用 VBScript)
现代替代:ASP.NET(C#)
Windows 平台 + IIS 服务器

服务端脚本流程

浏览器请求 → 服务器执行脚本
→ 脚本处理逻辑(查数据库等)
→ 输出 HTML → 返回浏览器

表单处理示例(PHP)

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $name = htmlspecialchars($_POST["name"]);
  echo "你好, $name";
}
?>
<form method="post">
  <input name="name">
  <button>提交</button>
</form>

现代趋势

Node.js、Python、Java、Go 等也成为主流服务端技术,PHP 依然广泛使用,ASP.NET 已演化为跨平台框架。

SQL - 结构化查询语言

SQL 是访问关系数据库的标准语言,几乎所有动态网站都用它存储和读取数据。

为什么需要 SQL

用户数据(注册/登录)
内容管理(文章/商品)
订单交易
统计分析

数据库表结构

users 表:
┌────┬────────┬─────┐
│ id │ name   │ age │
├────┼────────┼─────┤
│ 1  │ Alice  │ 25  │
│ 2  │ Bob    │ 30  │
└────┴────────┴─────┘

建表语句

CREATE TABLE users (
  id INT PRIMARY KEY AUTO_INCREMENT,
  name VARCHAR(50) NOT NULL,
  age INT
);

查询数据

SELECT name, age FROM users WHERE age > 20 ORDER BY age DESC;

SELECT COUNT(*) FROM users;
SELECT age, COUNT(*) FROM users GROUP BY age;

关联查询(JOIN)

SELECT u.name, o.amount
FROM users u
JOIN orders o ON o.user_id = u.id
WHERE o.amount > 100;

增删改

INSERT INTO users (name, age) VALUES ('Carol', 28);
UPDATE users SET age = 29 WHERE name = 'Carol';
DELETE FROM users WHERE name = 'Carol';

在 Web 中使用 SQL

PHP:   mysqli / PDO
Python: SQLAlchemy / psycopg2
Node:  mysql2 / Prisma
Java:  JDBC / MyBatis

安全提示

永远使用参数化查询(预处理语句),防止 SQL 注入攻击。

Web 网站验证

网站上线前必须进行完整验证,确保质量、兼容性与安全。

验证清单

□ HTML/CSS 标准验证
□ 所有链接可用(无死链)
□ 图片有 alt 与正确尺寸
□ 表单验证与提交正常
□ 多浏览器测试(Chrome/Firefox/Safari/Edge)
□ 移动端响应式测试
□ 页面加载性能达标
□ 无控制台报错
□ HTTPS 证书有效
□ 无障碍基础检查

开发工具验证

Chrome DevTools
  Console: 检查 JS 错误
  Network: 检查请求状态
  Lighthouse: 综合评分
  Device Toolbar: 移动端模拟

命令行验证

# 检查链接
curl -I https://example.com

# 批量检测死链
npx broken-link-checker https://example.com

上线前测试流程

本地开发环境测试
测试服务器(预发布)测试
真实设备(手机/电脑)验收
上线后监控(可用性、错误日志)

持续验证

CI/CD 集成自动化测试
监控工具: UptimeRobot / 阿里云监控
定期重跑 Lighthouse 与安全扫描

验证不是一次性的,而是持续的过程。好的网站 = 建设 + 验证 + 持续优化。

第 1 / 24 节

网站建设指南

网站建设指南

建站流程总览

技术栈选择

本教程内容

WWW 指南 - 万维网

WWW 指南 - 万维网

什么是万维网

关键概念

URL 结构

万维网 vs 互联网

发展历史

HTML 指南

HTML 指南

什么是 HTML

HTML 基本构成

常用标签

语义化标签(HTML5)

如何学习

CSS 指南

CSS 指南

什么是 CSS

引入方式

选择器

盒模型

布局方式

响应式设计

JavaScript 指南

JavaScript 指南

什么是 JavaScript

三大能力

基本语法

现代 JavaScript 生态

学习路径

XML 指南

XML 指南

什么是 XML

XML 的特点

XML 语法规则

XML 的应用

相关技术

XML vs JSON

服务端脚本指南

服务端脚本指南

什么是服务端脚本

主流服务端技术

服务端能做什么

基础示例(Node.js)

客户端 vs 服务端

SQL 指南

SQL 指南

什么是 SQL

SQL 分类

常用数据库

核心概念

学习建议

Web 创建设计

Web 创建设计

设计原则

页面布局

配色与字体

设计工具

开发实现

Web 标准

Web 标准

核心标准

为什么遵循标准

W3C 推荐标准流程

标准验证

DOCTYPE 声明

常见标准组织

网站验证

网站验证

验证什么

验证工具

Lighthouse 使用

常见验证错误

验证流程建议

Web 语义化