Web开发-前端

你先想什么就写什么，然后再打磨它。

本教程不在于详细的教会你html，css，js中的所有详细细节，而是总体性的讲述如何使用这三样组成一个网页。具体的细节你可以直接查阅官方文档。

HTML: 网页的骨架

HTML (HyperText Markup Language, 超文本标记语言) 是用于创建网页的标准标记语言。它不是一种编程语言，而是一种标记语言，通过一系列的标签 (tags) 来描述网页的结构和内容。你可以把 HTML 看作是网页的骨架，它定义了网页的各个组成部分，如标题、段落、图片、链接等。

浏览器负责读取 HTML 文档，并将其渲染成用户最终看到的视觉化网页。

如何编写 HTML

一个基础的 HTML 文档由以下几个核心部分组成：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

让我们来分解这个结构：

<!DOCTYPE html>: 这是一个文档类型声明，告诉浏览器这是一个 HTML5 文档。它必须是 HTML 文档的第一行。
<html>: 这是整个 HTML 文档的根元素，所有其他元素都必须是它的后代。
<head>: 这个元素包含了文档的元数据（meta-information），这些信息不会在页面上直接显示给用户。常见的元数据包括：
- <title>: 定义了浏览器工具栏、收藏夹和搜索引擎结果中显示的网页标题。
- <meta>: 提供关于 HTML 文档的元数据，如字符编码 (<meta charset="UTF-8">)、视口设置等。
- <link>: 用于链接外部资源，最常见的是链接外部 CSS 样式表。
- <script>: 用于嵌入或引用 JavaScript 代码。
<body>: 这个元素包含了网页的所有可见内容，如文本、图片、链接、表格等。用户在浏览器窗口中看到的所有东西都在 <body> 标签内。

编写要点:

HTML 标签通常是成对出现的，例如 <p> 和 </p>。第一个标签是开始标签，第二个是结束标签。
有些标签是自闭合的，例如 <img> 和 <br>。
标签可以拥有属性 (attributes)，它们提供了关于元素的额外信息。属性总是在开始标签中指定，并通常以 名称="值" 的形式出现。
标签可以嵌套，但必须正确闭合，不能交叉嵌套。

常用 HTML 标签及属性

下面是一些构建网页时最常用的标签，按照功能分类：

1. 文本与结构

标签	描述	常用属性
`<h1>` - `<h6>`	定义六级标题，`<h1>` 最大，`<h6>` 最小。
`<p>`	定义一个段落。
`<br>`	插入一个换行符 (自闭合)。
`<hr>`	创建一条水平线 (自闭合)。
`<div>`	定义文档中的一个区块或容器，常用于组合其他 HTML 元素并用 CSS 设置样式。	`id`, `class`
`<span>`	用作文本的行内容器，常用于为部分文本设置样式。	`id`, `class`
`<strong>`	定义重要性强的文本 (通常显示为粗体)。
`<b>`	加粗文本
`<em>`	定义强调文本 (通常显示为斜体)。

HTML中无论输入多少空格，只会显示一个。需要使用空格占位符：&nbsp

2. 链接与图片

标签	描述	常用属性
`<a>`	定义超链接，用于从一个页面链接到另一个页面。	`href` (链接地址), `target` (`_blank` 在新窗口打开，`_self`在当前窗口打开)
`<img>`	嵌入一张图片 (自闭合)。	`src` (图片源地址), `alt` (替代文本), `width`, `height`

3. 列表

标签	描述
`<ul>`	定义一个无序列表 (项目符号)。
`<ol>`	定义一个有序列表 (数字或字母)。
`<li>`	定义列表中的一个项目。

示例:

<ul>
  <li>咖啡</li>
  <li>茶</li>
</ul>

<ol>
  <li>第一步</li>
  <li>第二步</li>
</ol>

4. 表格

标签	描述
`<table>`	定义一个表格。
`<tr>`	定义表格中的一行。
`<th>`	定义表头单元格。
`<td>`	定义一个标准数据单元格。
`<thead>`	分组表格的头部内容。
`<tbody>`	分组表格的主体内容。
`<tfoot>`	分组表格的尾部内容。

5. 表单

表单用于收集用户输入。

标签	描述	常用属性
`<form>`	定义一个 HTML 表单。	`action` (提交表dan的 URL), `method` (`GET` 或 `POST`)
`<input>`	定义一个输入控件。	`type` (如 `text`, `password`, `submit`, `radio`, `checkbox`), `name`, `value`, `placeholder`
`<textarea>`	定义一个多行文本输入区域。	`rows`, `cols`, `name`
`<button>`	定义一个可点击的按钮。	`type` (`button`, `submit`, `reset`)
`<label>`	为 `<input>` 元素定义标注。	`for` (关联 input 的 id)
`<select>`	创建一个下拉列表。	`name`
`<option>`	定义下拉列表中的一个选项。	`value`

示例:

<form action="/submit-form" method="post">
  <label for="username">用户名:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="password">密码:</label><br>
  <input type="password" id="password" name="password"><br><br>
  <input type="submit" value="提交">
</form>

通过组合这些标签，你就可以构建出结构清晰、内容丰富的网页了。

CSS

官方文档：CSS 教程

CSS (Cascading Style Sheets, 层叠样式表) 用来为网页添加样式（如颜色、字体、布局等），让网页看起来更美观。有三种主要的方式可以将 CSS 应用到 HTML 文档中。

CSS 样式的使用方式

1. 内联样式 (Inline Styles)

直接在 HTML 元素的 style 属性中设置 CSS 规则。这种方式只对当前这一个元素生效。

优点: 简单直接，可以快速测试样式。
缺点:

将内容和表现混合在一起，不符合关注点分离的原则。
样式无法复用，维护困难。
当样式很多时，HTML 代码会变得混乱。

示例:

1	`<p style="color: red; font-size: 16px;">这是一个红色的段落。</p>`

2. 内部样式表 (Internal Style Sheet)

在 HTML 文档的 <head> 部分，使用 <style> 标签来定义 CSS 规则。这些规则对当前整个 HTML 页面都生效。

优点:

实现了内容与表现的部分分离。
样式可以在当前页面内复用。
易于管理单个页面的样式。

缺点:

样式无法在多个页面之间共享。

示例:

<!DOCTYPE html>
<html>
<head>
    <title>内部样式表示例</title>
    <style>
        body {
            background-color: #f0f0f0;
        }
        p {
            color: blue;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <p>这是一个蓝色的段落。</p>
    <p>这是另一个蓝色的段落。</p>
</body>
</html>

3. 外部样式表 (External Style Sheet)

将所有的 CSS 规则写在一个单独的 .css 文件中，然后在 HTML 文档的 <head> 部分使用 <link> 标签来引入它。这是最常用也是最推荐的方式。

优点:

完全实现内容与表现的分离，结构更清晰。
样式可复用，一个 CSS 文件可以被多个 HTML 页面引用，方便维护和修改。
提高页面加载速度，因为浏览器可以缓存 .css 文件。

步骤:

创建一个名为 styles.css (或任何你喜欢的名字) 的文件。

在 styles.css 文件中编写 CSS 规则：

/* styles.css */
body {
    font-family: Arial, sans-serif;
}
p {
    color: green;
}

在 HTML 文件中通过 <link> 标签引入它：

<!DOCTYPE html>
<html>
<head>
    <title>外部样式表示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>这是一个绿色的段落。</p>
</body>
</html>

CSS 选择器 (Selectors)

CSS 选择器是 CSS 规则的第一部分，它定义了样式将应用于哪些 HTML 元素。选择器是 CSS 的核心，它使得我们能够精确地“选择”我们想要添加样式的目标。

下面是一些基本和常用的选择器：

选择器类型	语法	描述	示例
基本选择器
元素选择器	`element`	选择所有指定类型的 HTML 元素。	`p { color: blue; }`
ID 选择器	`#id`	选择具有特定 `id` 属性的元素。ID 在页面上必须是唯一的。	`#header { font-size: 24px; }`
类选择器	`.class`	选择所有具有指定 `class` 属性的元素。一个元素可以有多个类。	`.note { color: gray; }`
通用选择器	`*`	选择所有 HTML 元素。	`* { box-sizing: border-box; }`
属性选择器	`[attr]`	选择所有带有指定属性的元素。	`[target] { color: green; }`
属性值选择器	`[attr=val]`	选择所有带有指定属性和值的元素。	`[type="submit"] { background: blue; }`
组合选择器
后代选择器	`A B`	选择所有在元素 A 内部的元素 B (无论层级多深)。	`div p { color: red; }`
子代选择器	`A > B`	选择所有作为元素 A 直接子元素的元素 B。	`ul > li { list-style: none; }`
相邻兄弟选择器	`A + B`	选择紧接在元素 A 后面的同级元素 B。	`h1 + p { margin-top: 0; }`
通用兄弟选择器	`A ~ B`	选择在元素 A 之后的所有同级元素 B。	`h1 ~ p { color: gray; }`
分组选择器	`A, B`	同时选择所有匹配 A 或匹配 B 的元素，用逗号分隔。	`h1, h2, h3 { font-family: sans-serif; }`

熟练掌握选择器是高效编写和组织 CSS 的关键。

样式的优先级

当多种方式同时为一个元素定义样式时，浏览器需要决定应用哪一个。这个决定基于优先级规则，通常被称为层叠 (Cascading) 和特殊性 (Specificity)。

基本层叠顺序:

浏览器会按照以下顺序来层叠样式，后面的会覆盖前面的：

浏览器默认样式
外部样式表
内部样式表
内联样式

简单来说，离元素越近的定义，优先级越高。所以内联样式的优先级最高。

特殊性 (Specificity) 规则:

当你在样式表（内部或外部）中通过不同的选择器 (Selector) 为同一个元素定义了冲突的样式时，浏览器会通过计算选择器的“特殊性”来决定哪个样式生效。特殊性越高的规则，优先级越高。

特殊性从高到低的顺序是：

!important 规则: 在样式值后面加上 !important 会覆盖任何其他声明。应避免滥用。
内联样式: style="..."
ID 选择器: #my-id
类选择器、属性选择器、伪类选择器: .my-class, [type="text"], :hover
标签选择器、伪元素选择器: p, ::before
通配符选择器: *

总结:

!important > 内联样式 > ID > 类/属性/伪类 > 标签 > 通配符
如果特殊性相同，则后定义的规则会覆盖先定义的规则。
从父元素继承的样式的特殊性最低。

示例:

1
2
3

p { color: blue; } /* 标签选择器 */
.my-paragraph { color: green; } /* 类选择器 */
#intro { color: red; } /* ID 选择器 */

1	`<p id="intro" class="my-paragraph" style="color: purple;">这个段落最终会是紫色的。</p>`

在这个例子中，文本颜色会是 purple，因为内联样式的优先级最高。如果没有内联样式，它会是 red (ID 选择器)。如果没有 ID 和内联样式，它会是 green (类选择器)。最后，如果以上都没有，它才会是 blue (标签选择器)。

常用 CSS 样式

以下是一些最常用的 CSS 属性，可以帮助你快速开始美化页面。

1. 颜色与背景 (Color & Background)

属性	描述	常用值
`color`	设置文本颜色。	颜色名 (`red`), HEX (`#FF0000`), RGB (`rgb(255,0,0)`)
`background-color`	设置元素的背景颜色。	同上
`background-/image`	设置元素的背景图片。	`url('/image.jpg')`
`background-repeat`	设置背景图片是否以及如何重复。	`no-repeat`, `repeat-x`, `repeat-y`, `repeat`
`background-position`	设置背景图片的起始位置。	`center`, `top left`, `50% 50%`

2. 字体与文本 (Font & Text)

属性	描述	常用值
`font-family`	设置字体。	`Arial`, `"Times New Roman"`, `sans-serif` (提供备用字体是个好习惯)
`font-size`	设置字体大小。	`16px`, `1.2em`, `120%`
`font-weight`	设置字体的粗细。	`normal`, `bold`, `400`, `700`
`font-style`	设置字体样式。	`normal`, `italic`
`text-align`	设置文本的水平对齐方式。	`left`, `right`, `center`, `justify`
`text-decoration`	设置文本的装饰。	`none`, `underline`, `line-through`
`line-height`	设置行高。	`1.5`, `24px`

3. 盒子模型 (Box Model)

每个 HTML 元素都可以看作一个矩形的盒子。盒子模型描述了这些盒子的大小和它们之间的距离。它由四个部分组成：内容 (content)、内边距 (padding)、边框 (border) 和外边距 (margin)。、

1755404802908

属性	描述	常用值
`width`	设置元素内容的宽度。	`200px`, `50%`, `auto`
`height`	设置元素内容的高度。	`100px`, `auto`
`padding`	设置内边距 (内容与边框之间的空间)。	`10px`, `10px 20px` (上下左右)
`border`	设置边框。一个简写属性。	`1px solid black` (宽度样式颜色)
`margin`	设置外边距 (边框与相邻元素之间的空间)。	`10px`, `auto` (常用于水平居中)

4. 布局与定位 (Layout & Position)

属性	描述	常用值
`display`	改变元素的显示类型。	`block`, `inline`, `inline-block`, `none`, `flex`, `grid`
`position`	指定元素的定位类型。	`static` (默认), `relative`, `absolute`, `fixed`, `sticky`
`top`, `right`, `bottom`, `left`	当 `position` 不为 `static` 时，用来定位元素。	`10px`, `-20px`
`float`	使元素浮动，常用于实现文字环绕图片。 (旧的布局方式)	`left`, `right`, `none`
`clear`	指定元素的哪一侧不允许有浮动元素。	`left`, `right`, `both`
`z-index`	设置定位元素的堆叠顺序 (哪个元素在上面)。	数字 (如 `10`, `999`), `auto`

JavaScript

官方文档：JavaScript 教程

引入方式

内部脚本：将JS代码定义在HTML页面中

JavaScript代码必须位于 <script></script>标签之间
在HTML文档中，可以在任何地方，放置任意数量的 <script>
一般会把脚本置于 <body>元素的底部，可以改善显示速度

1
2
3

<script>
    alert("Hello JavaScript")
</script>

外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中

外部JS文件中，只包含JS代码，不包含 <script>标签
<script>标签不能自闭合

1	`<script src="js/demo.js"></script>`

1	`alert("Hello JavaScript")`

基础语法

基本输出

使用 window.alert()

功能：在浏览器中弹出一个警告框（Alert Box）。
特点：会阻塞页面交互，直到用户点击“确定”按钮。
语法示例：
1
window.alert("Hello JavaScript");

使用 document.write()

功能：将文本直接写入到 HTML 文档中。
特点：会改变当前文档的内容，如果在页面加载完成后调用，会覆盖整个页面。
语法示例 ：

1	`document.write("Hello JavaScript");`

适用场景 ：简单的页面演示（不推荐在正式项目中使用）。

使用 console.log()

功能：将文本输出到浏览器开发者工具的控制台（Console）。
特点：不会影响页面内容，适合调试和记录日志。
语法示例 ：
1
console.log("Hello JavaScript");
适用场景 ：开发调试、记录程序运行信息。

变量

`var`

作用域：函数作用域 (Function Scope)在函数内声明的 var 变量只在函数内有效；如果在函数外声明，则为全局变量。
提升 (Hoisting)：声明会被提升到作用域顶部，值不提升。未赋值前访问为 undefined。
重复声明：同一作用域内允许重复声明，不会报错。

示例：

function test() {
    console.log(a); // undefined（声明提升）
    var a = 10;
    console.log(a); // 10
}
test();

`let`

作用域 ：块级作用域 (Block Scope) 在 {} 内声明的变量只在该块内有效。
提升 (Hoisting) ：声明会被提升，但存在 暂时性死区 (TDZ) ，在声明前访问会报错。
重复声明 ：同一作用域内不能重复声明。

示例：

{
    // console.log(b); // ReferenceError: Cannot access 'b' before initialization
    let b = 20;
    console.log(b); // 20
}

`const`

作用域 ：块级作用域。
提升与TDZ ：与 let 一样，存在暂时性死区。
重复声明 ：禁止重复声明。
赋值规则 ：声明时必须初始化，且指向的变量引用不可变（对于对象和数组，内容可变）。

示例：

const c = 30;
// c = 40; // TypeError: Assignment to constant variable

const obj = { name: "JS" };
obj.name = "JavaScript"; // ✅ 内容可改
// obj = {}; // ❌ 不能重新赋值引用

数据类型

在 JavaScript 中，数据类型分为两大类：

原始类型 (Primitive Types)
引用类型 (Reference Types)

原始类型

number 数字

包含整数、小数，以及特殊值 NaN（Not a Number，表示非数字运算结果）。

示例：

1
2
3

let age = 25;        // 整数
let price = 99.99;   // 小数
let result = NaN;    // 非数字

string字符串

表示文本数据，可以用单引号 ' ' 或双引号 " "。

示例：

1 2	`let name = "张三"; let city = '北京';`

boolean布尔

表示逻辑值：true 或 false。

示例：

1 2	`let isOpen = true; let hasData = false;`

null

表示对象为空或有意留空的值
示例：
1
let user = null; // 暂无数据

undefined

当声明变量未赋值时，默认为 undefined

示例：

1 2	`let value; console.log(value); // undefined`

使用 `typeof`检查数据类型

typeof 运算符可以获取变量的数据类型。

示例：

var a = 20;
console.log(typeof a); // "number"

a = "张三";
console.log(typeof a); // "string"

数据类型	含义	示例	typeof 结果
number	数字（整数/小数/NaN）	`42`/`3.14`/`NaN`	“number”
string	字符串	`"hello"`/`'world'`	“string”
boolean	逻辑值	`true`/`false`	“boolean”
null	空对象引用	`null`	“object”*
undefined	未定义	`undefined`	“undefined”

注意：typeof null 返回 "object" 是 JavaScript 的历史遗留问题。

运算符

算数运算符：

运算符	说明	示例
`+`	加法	`a + b`
`-`	减法	`a - b`
`*`	乘法	`a * b`
`/`	除法	`a / b`
`%`	取余	`a % b`
`++`	自增	`a++` 或 `++a`
`--`	自减	`a--` 或 `--a`

赋值运算符：

运算符	说明	示例
`=`	赋值	`x = 5`
`+=`	加后赋值	`x += 3`
`-=`	减后赋值	`x -= 2`
`*=`	乘后赋值	`x *= 4`
`/=`	除后赋值	`x /= 2`
`%=`	取余后赋值	`x %= 3`

比较运算符：

运算符	说明	示例
`>`	大于	`a > b`
`<`	小于	`a < b`
`>=`	大于等于	`a >= b`
`<=`	小于等于	`a <= b`
`!=`	不等于（类型转换）	`a != b`
`==`	等于（类型转换）	`a == b`
`===`	全等（不转换类型）	`a === b`

逻辑运算符：

运算符	说明	示例
`&&`	与（and）	`a > 0 && b > 0`
`		`
`!`	非（not）	`!(a > 0)`

三元运算符：

语法：

1	`条件表达式 ? 值1 : 值2`

示例：

1	`let result = score >= 60 ? "及格" : "不及格";`

== 与 === 的区别

==：会进行类型转换后再比较
===：不进行类型转换，要求值和类型都相同

var a = 10;
console.log(a == "10");  // true
console.log(a === "10"); // false
console.log(a === 10);   // true

类型转换

字符串 → 数字
- 转换方法：Number("123") → 123
- 如果字符无法被解析为数字，则返回 NaN
- 示例：
  1
  2
  Number("99"); // 99 Number("abc"); // NaN

其他类型 → Boolean

类型	转换为 `false`的情况	其他均为 `true`
Number	`0`,`NaN`	其它数值
String	`""`空字符串	非空字符串
null	`null`	无
undefined	`undefined`	无

示例：

Boolean(0);       // false
Boolean(123);     // true
Boolean("");      // false
Boolean("hi");    // true
Boolean(null);    // false
Boolean(undefined); // false

流程控制语句

流程控制语句是用来控制程序执行流程的。主要分为两种：条件语句和循环语句。

1. 条件语句

条件语句根据不同的条件执行不同的代码块。

`if...else`

这是最基本的条件语句。

语法:

if (条件1) {
    // 条件1为 true 时执行的代码
} else if (条件2) {
    // 条件1为 false，条件2为 true 时执行的代码
} else {
    // 所有条件都为 false 时执行的代码
}

示例:

let score = 75;

if (score >= 90) {
    console.log("优秀");
} else if (score >= 60) {
    console.log("及格");
} else {
    console.log("不及格");
}
// 输出: 及格

`switch`

当有多个确定的值需要判断时，使用 switch 语句通常比 if...else 更清晰。

语法:

switch (表达式) {
    case 值1:
        // 表达式的值 === 值1 时执行的代码
        break; // break 用于跳出 switch 语句
    case 值2:
        // 表达式的值 === 值2 时执行的代码
        break;
    default:
        // 所有 case 都不匹配时执行的代码
}

要点:

switch 使用全等 (===) 进行比较。
每个 case 后的 break 是可选的，但通常是必需的。如果没有 break，代码会继续执行下一个 case，这被称为“穿透”(fall-through)。
default 是可选的，用于处理所有其他情况。

示例:

let day = new Date().getDay(); // 返回 0 (周日) 到 6 (周六)
let dayName;

switch (day) {
    case 0:
        dayName = "星期日";
        break;
    case 1:
        dayName = "星期一";
        break;
    case 2:
        dayName = "星期二";
        break;
    case 3:
        dayName = "星期三";
        break;
    case 4:
        dayName = "星期四";
        break;
    case 5:
        dayName = "星期五";
        break;
    case 6:
        dayName = "星期六";
        break;
    default:
        dayName = "未知";
}
console.log(`今天是${dayName}`);

2. 循环语句

循环语句用于重复执行一段代码，直到满足某个条件为止。

`for` 循环

for 循环是最常用的循环结构，适用于已知循环次数的情况。

语法:

1
2
3

for (初始化; 条件; 增量) {
    // 循环体代码
}

初始化: 循环开始前执行一次 (例如 let i = 0;)。
条件: 每次循环开始前检查。如果为 true，则执行循环体。
增量: 每次循环体执行后执行 (例如 i++)。

示例: 打印 0 到 4

for (let i = 0; i < 5; i++) {
    console.log(i);
}
// 输出:
// 0
// 1
// 2
// 3
// 4

`while` 循环

while 循环在指定条件为 true 时重复执行代码块。适用于未知循环次数的情况。

语法:

while (条件) {
    // 循环体代码
    // 需要在循环体内更新条件，否则可能造成死循环
}

示例:

let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}
// 输出结果与 for 循环示例相同

`do...while` 循环

do...while 循环与 while 类似，但它保证循环体至少执行一次，因为条件判断是在循环体执行之后进行的。

语法:

1
2
3

do {
    // 循环体代码
} while (条件);

示例:

let i = 5;
do {
    console.log(i); // 这行代码会执行一次
    i++;
} while (i < 5);
// 输出: 5

函数

函数（方法）：一段为执行特定任务而封装的代码块，可以多次调用。

定义关键字：function
语法：
1
2
3
function functionName(参数1, 参数2, ...) { // 要执行的代码 }
特点：
- 形参不需要声明类型
- 返回值无需声明，在函数体中直接使用 return返回
调用函数：
1
functionName(实参1, 实参2, ...);
说明：
- 参数顺序与个数应与函数定义一致（多余的会被忽略，缺少的为 undefined）。
- 调用时函数体中的代码会按顺序执行。

匿名函数：

定义：函数没有名字，不会在全局作用域留下引用，定义的同时就运行。
基本语法：
1
2
3
(function() { console.log("这是一个匿名自执行函数"); })();
- 外层的 () 把 function 变成 函数表达式 （否则会被当作函数声明，语法报错）。
- 末尾的 () 立即调用这个函数。

JS对象

Array

JavaScript 提供两种常见方式创建数组：

方式	语法示例	特点
方式一：构造函数	`var arr = new Array(1, 2, 3, 4);`	可指定初始元素列表；如果只传一个数字，会被当作数组长度而不是元素
方式二：字面量	`var arr = [1, 2, 3, 4];`	语法更简洁，推荐使用

⚠️ 注意： new Array(3) 会创建一个长度为 3 的空数组（元素为 empty 占位），而不是包含数字 3 的数组。

访问与修改：

var arr = [1, 2, 3];
console.log(arr[0]); // 访问索引 0 元素 → 1
arr[1] = 99;         // 修改索引 1 元素
console.log(arr);    // [1, 99, 3]

索引（index 从 0 开始。
访问或修改超出当前长度的索引会自动扩展数组，并在中间填充 empty。

常用属性：

属性	描述
length	设置或返回数组中元素的数量。

常用方法：

方法	描述
forEach()	遍历数组中的每个有值的元素，并调用一次传入的函数
push()	将新元素添加到数组的末尾，并返回新的长度。
splice(start, deleteCount)	从数组中删除元素。

forEach 示例:

forEach 方法提供了一种简洁的方式来遍历数组。它接受一个函数作为参数，并对数组中的每个元素执行该函数。

const fruits = ['apple', 'banana', 'cherry'];

// 使用箭头函数遍历数组
fruits.forEach((fruit, index) => {
    console.log(`索引 ${index}: ${fruit}`);
});

// 输出:
// 索引 0: apple
// 索引 1: banana
// 索引 2: cherry

在上面的例子中，我们使用了一个箭头函数 (Arrow Function)。这是 ES6 中引入的一种更简洁的函数写法，在现代 JavaScript 中非常流行。

箭头函数 (Arrow Functions)

箭头函数提供了一种更短的语法来写函数表达式。

基本语法:

1
2
3

(参数1, 参数2, ...) => {
    // 函数体
}

与传统函数的对比:

// 传统函数表达式
const add_trad = function(a, b) {
    return a + b;
};

// 箭头函数
const add_arrow = (a, b) => {
    return a + b;
};

语法简化规则:

单个参数: 如果只有一个参数，可以省略括号 ()。

const greet = name => {
    console.log(`Hello, ${name}`);
};
greet('World'); // 输出: Hello, World

单个返回语句: 如果函数体只有一条 return 语句，可以省略花括号 {} 和 return 关键字。这被称为隐式返回 (implicit return)。

// 传统写法
const square_trad = (x) => {
    return x * x;
};

// 简化后的箭头函数
const square_arrow = x => x * x;

console.log(square_arrow(5)); // 输出: 25

String

创建方法

方式	示例代码	说明
构造函数	`var str = new String("Hello");`	创建一个 `String`对象（包装类型），类型是 `object`
字面量	`var str = "Hello";`	创建一个原始字符串（基础类型），类型是 `string`

⚠️ 建议：日常开发推荐使用字面量方式，性能更高，语法简洁。

常用属性：

属性	作用
`length`	返回字符串的长度（字符数）

常用方法：

方法	说明	示例
`charAt(index)`	返回指定索引位置的字符	`"abc".charAt(1)`→`'b'`
`indexOf(substr)`	返回子串第一次出现的位置，找不到返回 `-1`	`"abc".indexOf("b")`→`1`
`trim()`	去除首尾空格	`" hi ".trim()`→`'hi'`
`substring(start, end)`	返回指定索引范围内的子串（不包含 `end`索引字符）	`"abcdef".substring(2,5)`→`'cde'`

不可变性 ：字符串一旦创建就不能修改，任何改变都会返回一个新的字符串。

包装对象的陷阱 ：new String() 返回对象，不完全等价于字面量，可能在 === 比较时产生差异

js对象

定义格式：

var 对象名 = {
  属性名1: 属性值1,
  属性名2: 属性值2,
  属性名3: 属性值3,
  函数名称: function(形参列表) {
    // 方法体
  }
};

示例：

var user = {
  name: "Tom",
  age: 20,
  gender: "male",
  eat: function() {
    alert("用膳~");
  }
};

调用格式：

类型	语法	示例
访问属性	`对象名.属性名`	`console.log(user.name)`
调用方法	`对象名.方法名()`	`user.eat()`

JSON(JavaScript Object Notation)

JSON （JavaScript Object Notation）是一种轻量级的数据交换格式，易于人类阅读和书写，也方便机器解析和生成。

基本格式：

{
  "key1": value1,
  "key2": value2
}

规则：

键名必须是双引号包裹的字符串
值可以是多种类型（见下表）
不允许多余的逗号（最后一个键值对后不能加逗号）

类型	示例
数字	`18`,`3.14`
字符串	`"Hello"`（必须双引号）
布尔	`true`/`false`
数组	`["北京","上海","西安"]`
对象	`{"name":"Jerry","age":18}`
空值	`null`

{
  "name": "Jerry",
  "age": 18,
  "addr": ["北京", "上海", "西安"]
}

json与js对象相互转换

操作	语法	说明
JSON 字符串 → JS 对象	`JSON.parse(jsonStr)`	解析 JSON 字符串
JS 对象 → JSON 字符串	`JSON.stringify(jsObj)`	序列化成 JSON 字符串

示例：

1
2
3

var userStr = '{"name":"Jerry","age":18}';
var jsObject = JSON.parse(userStr);     // 解析
var jsonStr = JSON.stringify(jsObject); // 序列化

JSON 不能包含函数、undefined、NaN、Infinity 等

BOM

概念：

定义：BOM 是 浏览器对象模型 ，允许 JavaScript 与浏览器进行交互
作用：将浏览器的各个组成部分 封装为对象 ，方便开发者读取或操作
核心意义 ：通过 BOM，可以控制浏览器窗口、地址栏、历史记录等非网页内容

对象	作用	常用属性/方法示例
Window	浏览器窗口对象，BOM 顶级对象	`alert()`、`setTimeout()`、`innerWidth`、`innerHeight`
Navigator	浏览器本身信息	`navigator.userAgent`、`navigator.language`
Screen	用户屏幕信息	`screen.width`、`screen.height`
History	浏览历史记录	`history.back()`、`history.forward()`
Location	当前页面的 URL 信息	`location.href`、`location.reload()`

Window

概念与特点：

定义：浏览器窗口对象，是 BOM（浏览器对象模型） 的顶级对象
作用：管理和操作浏览器窗口，以及访问其他 BOM 对象
特点：
- 在浏览器环境中，所有全局变量和函数都是 window 的属性或方法
- 访问 window 成员时，window. 可以省略

常用属性：

属性	说明	示例
`history`	对History对象的只读引用	`window.history.back()`
`location`	对Location对象的引用	`window.location.href`
`navigator`	对Navigator对象的只读引用	`window.navigator.userAgent`

常用方法：

方法	说明	示例
`alert(msg)`	显示提示框（含确认按钮）	`alert("Hello Window")`
`confirm(msg)`	显示确认/取消对话框，返回 `true`/`false`	`confirm("确定删除？")`
`setInterval(fn, ms)`	每隔指定毫秒周期性执行函数	`setInterval(showTime, 1000)`
`setTimeout(fn, ms)`	延迟指定毫秒后执行一次函数	`setTimeout(init, 3000)`

Location

地址栏对象，提供与当前 URL 相关的信息与操作方法

作用：

获取或修改当前文档的 URL
实现页面跳转、刷新等操作

获取方式：

1 2	`window.location // 推荐全写 location // 省略 window`

常用属性：

属性	说明	示例
`href`	获取或设置完整 URL	`console.log(location.href)`/`location.href = "https://www.itcast.cn"`

补充：Location 对象还有其他属性（如 protocol、host、pathname、search、hash），可更精细地读取/修改 URL 结构。

常用方法：

方法	说明	示例
`assign(url)`	加载新页面（记录进浏览器历史）	`location.assign("page.html")`
`replace(url)`	替换当前页面（不保留历史记录）	`location.replace("login.html")`
`reload(force)`	刷新当前页面，`force=true`表示强制从服务器加载	`location.reload(true)`

示例：

// 获取当前完整 URL
console.log(location.href);

// 页面跳转
location.href = "https://www.itcast.cn";

// 刷新页面
location.reload();

// 无历史记录跳转
location.replace("https://example.com");

href赋值会立即触发跳转，等价 assign方法。

DOM

DOM ：Document Object Model（文档对象模型），是浏览器将 HTML、XML 等标记语言解析成可编程操作的对象集合。

将标记语言中的各组件抽象为对象：

Document ：整个文档对象
Element ：元素对象
Attribute ：属性对象
Text ：文本对象
Comment ：注释对象

DOM 提供了树形结构，方便脚本动态访问与修改内容、结构、样式。

HTML示例代码：

<html>
  <head>
    <title>DOM</title>
  </head>
  <body>
    <h1>DOM对象标题</h1>
    <a href="https://itcast.cn">传智教育</a>
  </body>
</html>

DOM树：

Document
└── <html>
    ├── <head>
    │   └── <title>
    │       └── #text "DOM"
    └── <body>
        ├── <h1>
        │   └── #text "DOM对象标题"
        └── <a>
            ├── href="https://itcast.cn"
            └── #text "传智教育"

根节点是 Document，HTML文档的最外层元素是 <html>

JavaScript 通过DOM，就能够对HTML进行操作：

改变HTML元素的内容
改变HTML元素的样式
对HTML DOM事件做出反应
添加和删除HTML元素

如何获取DOM

HTML 中的 Element 对象 ：表示 HTML 文档中的各个标签。

获取方式 ：

所有 Element 都由 Document 对象 提供。
Document 对象可通过 window 对象访问（window.document）。

方法	语法	返回类型	说明	使用场景
按 id 获取	`document.getElementById(id)`	`Element`（单个）	根据元素的 `id`属性值查找	精确定位唯一元素
按标签名获取	`document.getElementsByTagName(tagName)`	`HTMLCollection`（类数组）	根据标签名称查找	批量获取相同类型元素
按 name 属性获取	`document.getElementsByName(name)`	`NodeList`/`HTMLCollection`（类数组）	根据 `name`属性查找	表单元素批量获取
按 class 获取	`document.getElementsByClassName(className)`	`HTMLCollection`（类数组）	根据 `class`属性值查找	样式分组选择元素

常用DOM属性或方法

可以在官方文档查阅所有对象的属性和方法：JavaScript 和 HTML DOM 参考手册

公用属性和方法

这些属性和方法对于大多数HTML元素（DOM对象）都是通用的。

属性/方法	描述	示例
`innerHTML`	获取或设置元素内部的 HTML 内容。会解析 HTML 标签。	`div.innerHTML = "<strong>Hello</strong>";`
`innerText`	获取或设置元素内部的文本内容，会自动编码 HTML 标签，不会解析。	`div.innerText = "<strong>Hello</strong>";` (页面会显示纯文本)
`id`	获取或设置元素的 `id` 属性。	`div.id = "myDiv";`
`className`	获取或设置元素的 `class` 属性。	`div.className = "container highlight";`
`style`	获取或设置元素的内联样式。通过它访问的属性名需要使用驼峰命名法（如 `backgroundColor`）。	`div.style.color = "red"; div.style.fontSize = "16px";`
`getAttribute(name)`	获取指定属性的值。	`img.getAttribute("src");`
`setAttribute(name, value)`	设置或修改指定属性的值。	`img.setAttribute("src", "new_image.jpg");`
`removeAttribute(name)`	移除指定的属性。	`div.removeAttribute("style");`
`appendChild(node)`	将一个新节点添加为指定元素的最后一个子节点。	`ul.appendChild(newLi);`
`removeChild(node)`	从元素中移除一个子节点。	`ul.removeChild(firstLi);`
`parentElement`	返回元素的父元素节点。	`let container = p.parentElement;`
`children`	返回一个包含元素所有子元素节点的实时 `HTMLCollection`。	`let items = ul.children;`

示例：动态创建一个列表

<div id="container"></div>
<button id="addBtn">添加一项</button>

<script>
    const container = document.getElementById('container');
    const addBtn = document.getElementById('addBtn');

    // 创建一个 ul 元素
    const ul = document.createElement('ul');
    container.appendChild(ul);

    let itemCount = 1;

    addBtn.onclick = function() {
        // 创建一个新的 li 元素
        const newLi = document.createElement('li');
        // 设置 li 的文本内容
        newLi.innerText = '列表项 ' + itemCount;
        // 将 li 添加到 ul 中
        ul.appendChild(newLi);
        itemCount++;
    };
</script>

特定标签的属性和方法

不同类型的HTML元素拥有一些自己特有的属性和方法，方便进行针对性的操作。

1. 图片 `<img>`

属性	描述	示例
`src`	获取或设置图片的源文件地址。	`img.src = "new_pic.png";`
`alt`	获取或设置图片的替代文本。	`img.alt = "一张新图片";`

2. 链接 `<a>`

属性	描述	示例
`href`	获取或设置链接的 URL 地址。	`link.href = "https://www.google.com";`
`target`	获取或设置链接的打开方式（如 `_blank`）。	`link.target = "_blank";`

3. 表单 `<form>`

属性/方法	描述	示例
`action`	获取或设置表单提交的服务器端 URL。	`form.action = "/login";`
`method`	获取或设置表单提交的 HTTP 方法 (`get` 或 `post`)。	`form.method = "post";`
`submit()`	提交表单。	`form.submit();`
`reset()`	重置表单中的所有控件为初始值。	`form.reset();`

4. 输入框 `<input>`

输入框的属性会根据 type 类型的不同而有所差异。

属性	描述	适用类型	示例
`value`	获取或设置输入框的值。	`text`, `password`, `hidden`, `button` 等	`usernameInput.value = "Tom";`
`type`	获取或设置输入框的类型。	所有	`input.type = "password";`
`checked`	获取或设置单选框或复选框是否被选中（布尔值 `true`/`false`）。	`radio`, `checkbox`	`checkbox.checked = true;`
`disabled`	获取或设置输入框是否被禁用（布尔值 `true`/`false`）。	所有	`submitBtn.disabled = true;`
`name`	获取或设置输入框的名称，用于表单提交。	所有	`input.name = "gender";`

5. 下拉列表 `<select>`

属性	描述	示例
`options`	返回一个包含所有 `<option>` 元素的 `HTMLOptionsCollection`（类数组）。	`let allOptions = select.options;`
`selectedIndex`	获取或设置被选中项的索引（从 0 开始）。设置为 -1 表示没有选中项。	`select.selectedIndex = 2;` (选中第三个选项)
`value`	获取或设置被选中 `<option>` 的 `value` 属性值。	`console.log(select.value);` `` `select.value = "shanghai";`

示例：获取下拉列表选中的值

<select id="citySelect">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="tokyo">东京</option>
</select>
<p>当前选中的城市是: <span id="selectedValue"></span></p>

<script>
    const citySelect = document.getElementById('citySelect');
    const selectedValueSpan = document.getElementById('selectedValue');

    // 页面加载时显示默认值
    selectedValueSpan.innerText = citySelect.options[citySelect.selectedIndex].text;

    // 当选项改变时触发事件
    citySelect.onchange = function() {
        // this.value可以直接获取选中项的value属性
        console.log('选中的value:', this.value);
    
        // 通过 selectedIndex 获取选中的 option 对象，再获取其文本
        const selectedOptionText = this.options[this.selectedIndex].text;
        selectedValueSpan.innerText = selectedOptionText;
    };
</script>

事件监听

事件绑定

将特定的交互事件（如 click）与元素的事件处理函数关联起来。

通过HTML标签中的事件属性进行绑定

<input type="button" onclick="on()" value="按钮1">

<script>
function on(){
    alert('我被点击了！');
}
</script>

通过DOM元素属性绑定

<input type="button" id="btn" value="按钮2">

<script>
document.getElementById('btn').onclick = function(){
    alert('我被点击了！');
}
</script>

现代推荐：addEventListener绑定事件

<input type="button" id="btn" value="按钮3">

<script>
const btn = document.getElementById('btn');

// 处理函数1
btn.addEventListener('click', function(){
    alert('第一次处理函数：我被点击了!');
});

// 处理函数2
btn.addEventListener('click', function(){
    console.log('第二次处理函数：控制台记录点击事件');
});

// 处理函数3（可以是具名函数）
function highlightBtn(){
    btn.style.backgroundColor = 'yellow';
}
btn.addEventListener('click', highlightBtn);
</script>

支持同一事件绑定多个处理函数
可控制事件捕获
支持更多事件类型(如 input、keydown)

常见事件

事件名	说明
onclick	鼠标单击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	某个页面或图像被成功加载
onsubmit	当表单提交时触发该事件
onkeydown	某个键盘的键被按下
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开

笔记

#前端 #web开发

Web开发-前端

http://blog.ulna520.com/2025/08/17/Web开发-前端_20250817_103105/

Veröffentlicht am

August 17, 2025

Urheberrechtshinweis

Web开发-前端框架 Vorheriger

SQL基础 Nächster

Web开发-前端

HTML: 网页的骨架

如何编写 HTML

常用 HTML 标签及属性

1. 文本与结构

2. 链接与图片

3. 列表

4. 表格

5. 表单

CSS

CSS 样式的使用方式

1. 内联样式 (Inline Styles)

2. 内部样式表 (Internal Style Sheet)

3. 外部样式表 (External Style Sheet)

CSS 选择器 (Selectors)

样式的优先级

常用 CSS 样式

1. 颜色与背景 (Color & Background)

2. 字体与文本 (Font & Text)

3. 盒子模型 (Box Model)

4. 布局与定位 (Layout & Position)

JavaScript

引入方式

基础语法

基本输出

变量

var

let

const

数据类型

原始类型

使用 typeof检查数据类型

运算符

== 与 === 的区别

类型转换

流程控制语句

1. 条件语句

if...else

switch

2. 循环语句

for 循环

while 循环

do...while 循环

函数

JS对象

Array

箭头函数 (Arrow Functions)

String

js对象

JSON(JavaScript Object Notation)

json与js对象相互转换

BOM

Window

Location

DOM

如何获取DOM

常用DOM属性或方法

公用属性和方法

特定标签的属性和方法

1. 图片 <img>

2. 链接 <a>

3. 表单 <form>

4. 输入框 <input>

5. 下拉列表 <select>

事件监听

事件绑定

常见事件

`var`

`let`

`const`

使用 `typeof`检查数据类型

`if...else`

`switch`

`for` 循环

`while` 循环

`do...while` 循环

1. 图片 `<img>`

2. 链接 `<a>`

3. 表单 `<form>`

4. 输入框 `<input>`

5. 下拉列表 `<select>`