html+css+js基础
html+css+js基础
html
1
1 |
|
2
1 |
|
3
1 |
|
4
1 |
|
1 | <form> |
5
1 | <font color="" size="" face=""></font> <!-- 字体 --> |
1 |
|
table 中定义 tr, tr 中定义 td, td 中存放内容
6
表单标签<form></form>
输入类型 <input> 选择菜单 <select> 文本域 <textarea>
input
<input type="xxx"/>
- text（默认） 文本框
- password 密码框
- radio 单选框：同一组单选框 name 属性相同
- checkbox 复选框：同一组多选框 name 属性相同
- file 文件选择框
- date 日期选择框
- hidden 隐藏域：向服务器提交数据，不在页面上展示出来
- submit 提交按钮：内置提交表单的功能
- button 普通按钮：不内置任何功能，需要在学习 js 之后给它绑定点击事件
- reset 重置按钮：内置重置表单的功能
select
1 | <select name=""> |
textarea
1 | <textarea row="20" cols="30" name="introduce"></textarea> |
如果表单项的数据需要提交给服务器，必须具备 name 属性
同一组单选、多选框需要具备相同的 name
输入框、密码框、文件选择框、日期选择框等等的 value 属性的值，就是你输入的值
单选或多选框，默认 value 均为 on，所以我们需要手动给单选框和多选框设置 value
readonly 属性：表示只读，数据可以向服务器提交
disabled 属性：表示不可用, 数据无法向服务器提交
placeholder 属性：表示输入提示
checked 属性：单选和多选框也可以设置默认选中
7
1 | <a id="top"></a> |
css
层叠样式表
1. CSS 语法
CSS 规则由选择器和声明块组成。
- 选择器：用于选择页面上的 HTML 元素。
- 声明块：包含多个 CSS 声明，每个声明定义元素的某个样式属性。
1 | 选择器 { |
示例：
1 | p { |
- 选择器：
p（选择所有<p>元素） - 声明块：
color: red;和font-size: 16px;（将段落的文字颜色设为红色，字体大小设为 16 像素）
2. 将 CSS 添加到 HTML 中
1. 内联样式（Inline CSS）
直接在 HTML 元素的 style 属性中编写 CSS。适用于单个元素的样式定义。
1 | <p style="color: blue; font-size: 20px;">这是一个内联样式的段落。</p> |
2. 内部样式表（Internal CSS）
将 CSS 代码写在 HTML 文档的 <head> 部分的 <style> 标签中。适用于单个页面的样式定义。
1 |
|
3. 外部样式表（External CSS）
将 CSS 代码写在独立的 .css 文件中，并通过 <link> 标签引用。适用于多个页面共享样式。
1 |
|
在 styles.css 文件中：
1 | p { |
3. 选择器
CSS 选择器用于选择特定的 HTML 元素，以应用样式。常见的选择器包括：
元素选择器：选择某种 HTML 元素。
1
p { color: red; } /* 选择所有 <p> 元素 */
类选择器：选择带有特定类的元素，类选择器以
.开头。1
.intro { font-weight: bold; } /* 选择 class="intro" 的元素 */
ID 选择器：选择具有特定 ID 的元素，ID 选择器以
#开头。1
#main-title { color: blue; } /* 选择 id="main-title" 的元素 */
通用选择器：选择页面上的所有元素。
1
* { margin: 0; padding: 0; } /* 清除所有元素的外边距和内边距 */
后代选择器：选择嵌套在其他元素内的元素。
1
div p { color: green; } /* 选择所有在 <div> 内的 <p> 元素 */
属性选择器 :根据HTML元素的属性来选择元素，选择所有
type属性为text的<input>元素。1
2
3input[type="text"] {
background-color: yellow;
}以上是基本选择器，组合选择器只举一例：
后代选择器 : 选择某个元素的所有后代元素。
1
2
3div p {
color: blue;
}
4. CSS 属性
一些常见的 CSS 属性如下：
颜色相关
color: 文本颜色。background-color: 背景颜色。
1
2
3
4h1 {
color: blue;
background-color: yellow;
}文本和字体
font-size: 字体大小。font-family: 字体系列。font-weight: 字体粗细（如bold、normal）。text-align: 文本对齐方式（如left、right、center）。
1
2
3
4
5p {
font-size: 16px;
font-family: Arial, sans-serif;
text-align: center;
}布局相关
margin: 元素外边距。padding: 元素内边距。width: 宽度。height: 高度。
1
2
3
4
5
6div {
margin: 20px;
padding: 10px;
width: 300px;
height: 200px;
}边框
border: 边框样式，宽度、颜色和类型可以组合。
1
2
3img {
border: 2px solid black;
}显示和定位
display: 定义元素的显示方式，如block、inline、none。position: 定义元素的定位方式，如relative、absolute、fixed。
1
2
3
4
5
6
7
8
9.hidden {
display: none;
}
.absolute-box {
position: absolute;
top: 50px;
left: 100px;
}
5. 层叠与优先级
CSS 的 C（Cascading）代表“层叠”，它表示当多个样式同时作用于一个元素时，浏览器会按以下优先级规则决定使用哪个样式：
- 内联样式：直接写在元素内的样式，优先级最高。
- ID 选择器：ID 选择器的样式优先级高于类选择器和元素选择器。
- 类选择器：类选择器的优先级高于元素选择器。
- 元素选择器：元素选择器的优先级最低。
如果多个样式有相同的优先级，后定义的样式会覆盖先定义的样式。
1 | p { |
6. 响应式设计
CSS 可以通过媒体查询来响应不同设备的屏幕大小。这样可以使网站在不同设备上（如手机、平板、桌面）表现良好。
1 | @media screen and (max-width: 600px) { |
7. CSS 框模型（Box Model）
每个 HTML 元素都被看作一个盒子，CSS 盒模型包含以下几个部分：
- 内容（content）：元素的内容。
- 内边距（padding）：内容周围的空白区域。
- 边框（border）：内边距外的边框。
- 外边距（margin）：边框外的空白区域。
1 | div { |
在这个例子中，div 的内容宽度是 200 px，内边距 10 px，边框 5 px，外边距 20 px。
8. 其他
div是块级元素，会独占一行；span是行内元素，不会独占一行
div中可以嵌套其它的标签，span标签中只能嵌套文本/图片/超链接
js
1. JavaScript
- 动态内容更新：可以根据用户交互修改网页内容，无需刷新整个页面。
- 表单验证：在用户提交表单之前，验证输入是否合法。
- 浏览器控制：可以控制浏览器的行为，比如弹出对话框、导航历史等。
- 事件驱动编程：响应用户的鼠标点击、键盘按键等操作。
- 动画和图形：通过 DOM 操作和 CSS 动画，JavaScript 可以实现丰富的视觉效果。
2. JavaScript 语法
1. 基本语法
JavaScript 是一种基于语句的语言，语句以分号 ; 结束（虽然不强制要求，但最好使用）。
- 变量声明：通过
var、let或const声明变量。var：有函数作用域，较老的变量声明方式。let：有块作用域，适用于现代 JavaScript。const：声明不可变的常量。
1 | var name = "John"; // 使用 var 声明变量 |
2. 数据类型
- 数字（Number）：整数和浮点数。
- 字符串（String）：用双引号或单引号括起来的文本。
- 布尔值（Boolean）：
true或false。 - 未定义（Undefined）：未定义的变量。
- 空（Null）：表示空值。
- 对象（Object）：用于存储键值对或复杂数据结构。
1 | let number = 42; // 数字 |
3. 运算符
- 算术运算符：
+（加）、-（减）、*（乘）、/（除）、%（取余）。 - 赋值运算符：
=（赋值）、+=（加并赋值）、-=（减并赋值）等。 - 比较运算符：
==（相等）、===（严格相等）、!=（不相等）、>、<等。 - 逻辑运算符：
&&（与）、||（或）、!（非）。
1 | let x = 10; |
3. 条件语句
- if… else 语句：根据条件执行不同的代码块。
1 | let age = 20; |
- switch 语句：用于对多个条件进行比较。
1 | let color = "blue"; |
4. 循环
- for 循环：用于执行指定次数的循环。
1 | for (let i = 0; i < 5; i++) { |
- while 循环：只要条件为
true，就会不断执行。
1 | let i = 0; |
- do… while 循环：至少会执行一次，然后根据条件判断是否继续。
1 | let i = 0; |
5. 函数
- 函数声明：
1 | function greet(name) { |
- 函数表达式：可以将函数赋值给变量。
1 | const sayHello = function(name) { |
- 箭头函数：ES 6 引入的一种简洁写法。
1 | const add = (a, b) => a + b; |
箭头函数
箭头函数（Arrow Function）是ES6中引入的一种更简洁的书写函数的方法。它使用 => 语法，通常用于简化匿名函数的书写方式。
- 简洁语法：箭头函数提供了一种更简洁的书写方式，尤其是针对简单函数。
this绑定：箭头函数不创建自己的this，而是**继承封闭上下文中的this**。- 不适合作为构造函数：箭头函数不能被用作构造函数，也没有
new关键字的行为。 - 没有
arguments对象：箭头函数没有arguments对象，但可以使用剩余参数语法来处理参数。
箭头函数特别适合需要保留上下文this的场景，或需要编写简洁代码时的使用。
1 | // 传统函数表达式 |
参数：
如果只有一个参数，参数括号可以省略。1
let singleParam = x => x * 2;
没有参数时：
必须使用空括号。1
let noParam = () => console.log('No parameters');
箭头函数在处理 this 时有一个重要特性：它不会创建自己的 this，而是继承自定义它的上下文。这与传统的函数不同，传统函数的 this 取决于函数是如何调用的。
1 | function TraditionalFunction() { |
箭头函数与传统函数的另一个不同点是，箭头函数不能作为构造函数（即不能用 new 关键字来调用），而传统函数可以。
1 | let ArrowFunction = () => {}; |
传统函数有一个 arguments 对象，表示传递给函数的所有参数。箭头函数没有自己的 arguments，但可以通过剩余参数语法来获取参数。
1 | let traditionalFunction = function() { |
arguments对象
arguments 对象是 JavaScript 中所有非箭头函数内置的一个类数组对象，包含了函数调用时传入的所有参数。它允许你访问传递给函数的参数，而不需要明确在函数声明中定义它们。
arguments是一个类数组对象，包含了传给函数的所有参数。- 它对处理不确定数量的参数非常有用。
arguments在 ES 6 中已经被...剩余参数语法部分取代，后者更灵活方便。- 它不能在箭头函数中使用，在这种情况下，它会从外层上下文继承。
arguments对象虽然经典，但在现代 JavaScript 中，通常更推荐使用 剩余参数 (...rest) 来处理可变数量的参数，因为它提供了更清晰的语法和更强大的功能。
特点：
- 类数组对象：
arguments是一个类似数组的对象，它有length属性，但不是真正的数组，因此没有数组的方法（如push,forEach等）。然而，你可以通过索引来访问各个参数。
- 动态性：
- 无论函数定义了多少个参数，
arguments对象都会包含函数调用时传入的所有参数（即使传入的参数比函数声明的参数多或少）。
- 无论函数定义了多少个参数，
- 不可用于箭头函数：
arguments对象在箭头函数中不存在。箭头函数不会绑定自己的arguments对象，它会从它的封闭上下文中继承arguments。
1 | function exampleFunction() { |
输出：
1 | [Arguments] { '0': 1, '1': 'Hello', '2': true } |
应用场景：
处理可变参数个数的函数：
arguments对象经常用于函数的参数个数不固定时，特别是在 ES 6 之前没有默认参数和剩余参数的场景下。1
2
3
4
5
6
7
8
9function sum() {
let total = 0;
for (let i = 0; i < arguments.length; i++) {
total += arguments[i];
}
return total;
}
console.log(sum(1, 2, 3, 4)); // 输出：10与剩余参数对比：
在 ES 6 引入的剩余参数（Rest Parameters）后，arguments对象的使用有所减少。剩余参数可以将传入的参数作为一个真正的数组，而不是类数组对象，这更加方便。**使用
arguments**：1
2
3
4
5
6
7
8function multiply() {
let result = 1;
for (let i = 0; i < arguments.length; i++) {
result *= arguments[i];
}
return result;
}
console.log(multiply(2, 3, 4)); // 输出：24使用剩余参数：
1
2
3
4function multiply(...args) {
return args.reduce((product, current) => product * current, 1);
}
console.log(multiply(2, 3, 4)); // 输出：24
...args是一个真正的数组，可以直接使用数组方法如reduce，而不需要像arguments那样手动迭代。
6. 事件和 DOM 操作
在 JavaScript 中，事件 和 DOM 操作 是构建动态网页的核心。事件使网页能够对用户的交互（如点击、键盘输入等）作出响应，而 DOM（Document Object Model） 操作则允许 JavaScript 动态地更改网页的内容和结构。
- 事件：通过事件处理器监听用户行为（如点击、按键等），并通过
addEventListener()绑定事件。事件对象可以提供详细的事件信息。 - DOM 操作：允许我们动态地获取、修改、创建、删除页面中的 HTML 元素，进而实现动态的网页交互。
一、事件
事件 是用户或浏览器执行的动作，例如鼠标点击、按键按下、窗口加载等。
- 常见事件类型
鼠标事件：
click：当用户点击元素时触发。dblclick：当用户双击元素时触发。mouseover：当鼠标移到元素上时触发。mouseout：当鼠标移出元素时触发。mousedown/mouseup：鼠标按下和释放时触发。
键盘事件：
keydown：按下键盘按键时触发。keyup：释放按键时触发。
表单事件：
submit：表单提交时触发。change：表单元素的值发生变化时触发（如<input>、<select>）。
窗口事件：
load：页面加载完成时触发。resize：浏览器窗口大小发生变化时触发。scroll：当页面或元素滚动时触发。
- 事件处理器（Event Handlers）
事件处理器（或事件监听器）是指在特定事件发生时执行的函数。有三种常见的方式来添加事件处理器：
方法 1：HTML 内联事件处理
将 JavaScript 直接写在 HTML 元素的事件属性中。
1 | <button onclick="alert('你点击了按钮!')">点击我</button> |
方法 2：DOM 的 onEvent 属性
通过 JavaScript 设置元素的 onEvent 属性（例如 onclick）来添加事件处理。
1 | let button = document.querySelector("button"); |
方法 3：addEventListener() 方法
这是推荐的方式，允许我们为同一事件添加多个事件处理器，并能更好地控制事件（如移除事件处理器等）。
1 | let button = document.querySelector("button"); |
使用 addEventListener() 的好处：
- 可以为同一个元素添加多个事件监听器。
- 可以在需要时轻松移除事件处理器。
- 支持事件冒泡和捕获。
- 事件对象（Event Object）
当事件被触发时，浏览器会生成一个事件对象，该对象包含了与事件相关的详细信息，例如触发事件的元素、鼠标的坐标、按键状态等。
- 常用属性：
target：事件触发的元素。type：事件类型，如click、keydown。key：当处理键盘事件时，表示按下的键。clientX/clientY：鼠标事件中，表示鼠标点击时的 X 和 Y 坐标。
1 | document.addEventListener("click", function(event) { |
- 事件传播模型
事件传播是指事件从触发源开始如何传播到其他相关元素。JavaScript 中有三种传播阶段：
- 捕获阶段：事件从文档的根元素向事件目标传播。
- 目标阶段：事件到达目标元素（触发事件的元素）。
- 冒泡阶段：事件从目标元素向上冒泡，经过其祖先元素。
事件监听器默认在冒泡阶段执行，但可以通过 addEventListener 的第三个参数将监听器绑定在捕获阶段。
1 | document.querySelector("div").addEventListener("click", function(event) { |
二、DOM 操作
DOM（Document Object Model） 是网页的编程接口，表示页面的结构。通过 DOM，我们可以动态地修改、创建、删除页面中的元素，改变样式，响应用户交互等。
- 获取 DOM 元素
获取元素:
**
getElementById()**：通过元素的 ID 获取元素。1
let element = document.getElementById("myElement");
**
getElementsByClassName()**：通过类名获取元素集合。1
let elements = document.getElementsByClassName("myClass");
**
getElementsByTagName()**：通过标签名获取元素集合。1
let elements = document.getElementsByTagName("p");
**
querySelector()**：通过 CSS 选择器获取第一个匹配的元素。1
let element = document.querySelector(".myClass");
**
querySelectorAll()**：通过 CSS 选择器获取所有匹配的元素。1
let elements = document.querySelectorAll(".myClass");
- 修改 DOM 元素
修改内容
**
innerHTML**：更改元素的 HTML 内容。1
2let div = document.getElementById("myDiv");
div.innerHTML = "<p>新内容</p>";**
textContent**：更改元素的纯文本内容（不会解析 HTML）。1
2let div = document.getElementById("myDiv");
div.textContent = "新文本内容";修改属性
**
setAttribute()**：设置元素的属性。1
2let img = document.querySelector("img");
img.setAttribute("src", "newImage.jpg");**
removeAttribute()**：移除元素的属性。1
2let img = document.querySelector("img");
img.removeAttribute("alt");直接修改属性：可以通过点语法直接修改元素的属性。
1
2let input = document.querySelector("input");
input.type = "password";
修改样式
可以通过 style 属性直接修改元素的内联样式：
1 | let div = document.getElementById("myDiv"); |
- 创建和删除元素
创建新元素
- **
createElement()**：创建一个新的 DOM 元素。1
2let newElement = document.createElement("div");
newElement.textContent = "这是一个新元素";
插入元素
**
appendChild()**：将新元素添加为某个元素的子元素。1
2let parentElement = document.getElementById("parent");
parentElement.appendChild(newElement);**
insertBefore()**：在指定子元素前插入新元素。1
2let firstChild = parentElement.firstChild;
parentElement.insertBefore(newElement, firstChild);
删除元素
**
removeChild()**：从父元素中删除子元素。1
2
3let parentElement = document.getElementById("parent");
let child = document.getElementById("child");
parentElement.removeChild(child);**
remove()**：直接删除当前元素。1
2let element = document.getElementById("myElement");
element.remove();
- 事件与 DOM 操作结合
例如，点击按钮后动态生成一个新的段落：
1 | <button id="addParagraph">添加段落</button> |
点击按钮时，新的段落会动态添加到 div 中。
7. 数组和对象
1. 数组
1 | let fruits = ["apple", "banana", "cherry"]; |
push()：在数组末尾添加元素。pop()：移除数组末尾的元素。length：获取数组长度。
2. 对象：存储键值对，可以表示一个实体及其属性。
1 | let person = { |
8. 异步编程
允许程序在等待较长时间的操作（如文件读取、网络请求）完成时，继续执行其他任务，而不必阻塞程序的执行流。
回调函数：函数可以作为参数传递到另一个函数中，在异步操作完成后执行。
1 | setTimeout(function() { |
1 | function fetchData(callback) { |
但它存在一个问题，即回调地狱（Callback Hell）：当多个异步任务依赖于彼此时，回调函数会不断嵌套，代码难以维护和阅读。
Promise：用于处理异步操作的对象。
- 解决回调地狱：
Promise提供了链式调用. then ()的方式，避免了多层嵌套的回调函数。 - 增强可读性：通过链式调用，代码逻辑更加线性和直观，易于理解。
- 错误处理机制：通过
. catch ()统一处理异步操作中的错误。 - 更灵活的异步控制：通过
Promise.all ()、Promise.race ()等方法，控制多个异步任务的执行方式。
1 | let promise = new Promise(function(resolve, reject) { |
Promise 是 JavaScript 中用于处理异步操作的对象，它提供了一种更优雅、简洁的方式来处理异步任务，避免了传统的回调函数（callback）方式容易导致的“回调地狱”（callback hell）问题。Promise 可以通过 .then() 和 .catch() 方法进行链式调用，并提供了错误处理机制。
Promise 是一个代表异步操作最终完成或失败的对象。它有三种状态：
- 待定（Pending）：异步操作尚未完成，Promise 还没有被解决或拒绝。
- 已解决（Fulfilled）：异步操作成功完成，Promise 被解决，返回结果。
- 已拒绝（Rejected）：异步操作失败，Promise 被拒绝，返回错误。
Promise 的基本语法
- **
resolve**：表示异步操作成功时调用，通常会传递成功的结果。 - **
reject**：表示异步操作失败时调用，通常会传递失败的原因或错误信息。
模拟一个异步任务（例如，从服务器获取数据）。
1 | let myPromise = new Promise(function(resolve, reject) { |
myPromise 是一个 Promise 对象，它表示一个异步操作，模拟了 2 秒后异步任务的完成。根据 success 的值决定是否调用 resolve（成功）或 reject（失败）。我们可以使用 .then() 来处理成功的结果，使用 .catch() 来处理失败的情况。
Promise 状态转换
Promise 的状态一旦从“待定”变为“已解决”或“已拒绝”，就不能再变更。这意味着：
- 如果 Promise 被解决（
resolve），它的结果值就固定下来了，不会再变化。 - 如果 Promise 被拒绝（
reject），它的错误信息也固定了。
无论 Promise 成功还是失败，它只会改变一次。
链式调用 .then()
Promise 的一个强大特性是 .then() 方法可以链式调用。当一个异步操作成功完成并返回结果时，可以通过 .then() 来处理这个结果。如果 .then() 方法返回一个新的 Promise，那么可以继续链式调用后续的 .then()。
1 | let promise = new Promise(function(resolve, reject) { |
在这个例子中，每个 .then() 的返回值会传递给下一个 .then()，形成链式结构，依次处理结果。这种链式调用机制让异步操作之间的依赖关系更加清晰。
错误处理：.catch() 和 .finally()
- .catch() 方法
.catch()用于捕获 Promise 链中的错误。如果 Promise 被拒绝，或者在.then()中发生了错误，.catch()都会捕获到这些错误。
1 | let promise = new Promise(function(resolve, reject) { |
- .finally() 方法
.finally()无论 Promise 成功或失败，都会执行。它用于编写在 Promise 结束后都需要执行的逻辑，比如关闭加载动画或清理资源。
1 | let promise = new Promise (function (resolve, reject) { |
Promise.all () 并行执行多个异步操作
Promise.all () 用于并行执行多个 Promise，等待所有 Promise 都成功后再返回。如果其中一个 Promise 被拒绝，整个 Promise.all () 都会被拒绝。
语法：
1 | Promise.all ([promise 1, promise 2, promise 3]) |
Promise.race ()：竞争模式
Promise.race () 类似于比赛，它会返回第一个解决或拒绝的 Promise，无论是成功还是失败。也就是说，它会返回最快执行的那个 Promise 的结果或错误。
1 | let promise 1 = new Promise ((resolve) => setTimeout (() => resolve ("结果 1"), 1000)); |
Promise.resolve () 和 Promise.reject ()
- Promise.resolve ()
Promise.resolve ()方法返回一个已解决的 Promise，可以快速返回一个成功的结果。
1 | let promise = Promise.resolve ("快速成功的结果"); |
- Promise.reject ()
Promise.reject ()方法返回一个已拒绝的 Promise，用于快速返回一个失败的结果。
示例：
1 | let promise = Promise.reject ("快速失败的原因"); |
async/await：基于 Promise的语法糖，使异步代码更加直观。
async 用于声明一个异步函数，而 await 用于等待一个异步操作完成。使用 await 可以让代码看起来像是同步执行的，避免了复杂的 then 链式调用，提升了代码的可读性。
async函数会返回一个Promise对象。await只能在async函数中使用，它会暂停函数的执行，等待Promise完成。1
2
3
4
5
6async function fetchData() {
let response = await fetch("https://api.example.com/data");
let data = await response.json();
console.log(data);
}
fetchData();
1 | async function fetchData(){ |
1 | async function myFunction(){ |
常见的异步操作
- 定时器：如
setTimeout和setInterval，用于延时和周期性任务。 - 网络请求：如
fetch或XMLHttpRequest，用于异步数据加载。 - 文件操作：在Node.js中，文件系统操作通常是异步的。
