web开发常用速查表

### 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 应用程序。