### Web开发常用速查表
#### PHP 基础语法
**变量声明：**
- 变量以 `$` 符号开始，例如：`$name = "John";`
**数组处理：**
- 创建数组：`$arr = array("apple", "banana", "cherry");`
- 访问数组元素：`echo $arr[0];` 输出 `"apple"`
- 数组遍历：使用 `foreach` 循环
```php
foreach ($arr as $value) {
echo $value;
}
```
**条件语句：**
- `if` 语句：`if ($age > 18) { echo "Adult"; }`
- `switch` 语句：
```php
switch ($day) {
case 'monday':
echo "It's Monday";
break;
case 'tuesday':
echo "It's Tuesday";
break;
default:
echo "Other day";
}
```
**循环结构：**
- `for` 循环：`for ($i = 0; $i < 5; $i++) { echo $i; }`
- `while` 循环：`$i = 0; while ($i < 5) { echo $i; $i++; }`
**函数定义与调用：**
- 定义函数：`function sayHello($name) { return "Hello, $name"; }`
- 调用函数：`echo sayHello("John");`
#### CSS 选择器与样式
**基本选择器：**
- 类选择器：`.box { color: red; }`
- ID 选择器：`#header { font-size: 20px; }`
- 元素选择器：`p { margin: 10px; }`
**复合选择器：**
- 后代选择器：`div p { color: blue; }`
- 相邻兄弟选择器：`h1 + p { color: green; }`
- 通用兄弟选择器：`h1 ~ p { color: orange; }`
**伪类与伪元素：**
- 链接状态：`a:hover { color: red; }`
- 伪元素：`::before { content: "Icon"; }`
**布局与定位：**
- 盒模型：`margin`, `padding`, `border`
- 定位方式：`position: absolute; top: 0; left: 0;`
- 弹性盒子：`display: flex; justify-content: center; align-items: center;`
#### HTML5 新特性
**语义化标签：**
- `<header>`、`<nav>`、`<section>`、`<article>`、`<footer>`
- 示例：`<header><h1>Page Title</h1></header>`
**多媒体元素：**
- 视频：`<video controls><source src="movie.mp4" type="video/mp4"></video>`
- 音频：`<audio controls><source src="song.mp3" type="audio/mpeg"></audio>`
**表单增强：**
- `required` 属性：`<input type="text" required>`
- `placeholder` 属性：`<input type="text" placeholder="Enter your name">`
- 新型输入类型：`<input type="date">`、`<input type="email">`
**离线存储：**
- `localStorage`：`localStorage.setItem('name', 'John');`
- `sessionStorage`：`sessionStorage.setItem('name', 'John');`
#### jQuery 基础操作
**DOM 操作：**
- 获取元素：`$('#id')`、`$('.class')`、`$('div')`
- 添加元素：`$('body').append('<div>Hello</div>');`
- 修改属性：`$('img').attr('src', 'new-image.png');`
- 修改内容：`$('p').html('New Text');`
**事件绑定：**
- 绑定点击事件：`$('#button').click(function() { alert('Clicked!'); });`
- 绑定鼠标移动事件：`$('div').hover(function() { $(this).css('color', 'red'); }, function() { $(this).css('color', 'black'); });`
**动画效果：**
- 显示隐藏元素：`$('#box').hide().show();`
- 淡入淡出效果：`$('#box').fadeOut(1000).fadeIn(1000);`
- 滑动动画：`$('#box').slideUp(500).slideDown(500);`
通过以上介绍，我们可以看到 PHP、CSS、HTML、jQuery 和 HTML5 在 Web 开发中的应用非常广泛，涵盖了从前端到后端的各种技术点。这些技术是现代 Web 开发的基础，掌握它们将极大地提高开发者的能力，并有助于构建更加丰富和动态的 Web 应用程序。
