迪欧IT

dio智能科技

博客

  • JavaScript学习

    Web-JavaScript-Study

    <u> 作者：jason-wrj </u>

    <u> 分类：服务器/网络服务器/JavaScript </u>

    <u> 标签：Server, Web Server, JavaScript </u>

    <u> 更多：www.dioit.com——迪欧IT——dio智能科技 </u>

    <u> 更多：www.dioit.com——dioIT——嵌入式电子智能技术 </u>

    1 JavaScript 概述

    1.1 JavaScript 简介

    JavaScript （简称 JS），是一种轻量级、解释型（或即时编译型）的弱类型动态编程语言，是基于原型、函数优先、支持多范式（如面向对象、函数式编程）的脚本语言。

    它最初由 Brendan Eich 在 1995 年为 Netscape Navigator 浏览器设计，原名 LiveScript，后与 Sun 公司合作更改名为 JavaScript（营销策略，为蹭 Java 热度），与 Java 没有直接关系，但这个名字反映了当时 Java 的流行。

    JavaScript 主要用于增强网页的动态交互性，现已成为 Web 开发的核心技术之一，是全栈开发的核心技术。

    1.2 JavaScript 规范

    语言规范由 ECMAScript（ES）定义标准化，ES6（2015）新增模块化、箭头函数等革命性特性，最新版本为ES2023。

    1.3 JavaScript 优势

    1. 生态丰富性

      • 跨平台：从浏览器到服务器均可运行。

      • 前端框架：React、Vue、Angular 简化复杂应用开发。

      • 后端工具：Express、Koa 构建 Web 服务，NestJS 支持企业级架构。

      • 包管理：npm 仓库拥有超 300 万开源包，覆盖从工具链（Webpack）到数据库（MongoDB 驱动）的全链路需求。

    2. 开发效率

      • 实时调试：浏览器开发者工具支持代码修改后即时生效。

      • 模块化：ES6 引入 import/export，结合 Webpack 实现代码分割与懒加载。

      • 快速迭代：ECMAScript 每年更新一次，持续引入现代化特性。

    3. 学习曲线平缓

      • 语法接近自然语言，适合新手入门。

      • 社区资源庞大（如 MDN 文档、Stack Overflow），问题解决路径清晰。

      • 社区活跃：npm 是全球最大的包仓库，社区支持丰富。

    2 特性和组成

    2.1 JavaScript 核心特性

    • 弱类型动态语言：

      • 变量无需预声明类型，无需编译，变量类型运行时自动推断确定，运行时动态解析。由浏览器或Node.js引擎（如V8）直接解释执行，简化开发流程。

      • 灵活但需注意类型转换问题，（如 let x = 10; x = "hello";），支持隐式类型转换。

      • ES6 新增 let/const 提升严谨性，声明可使用var（变量）、let（块级作用域）、const（常量）。

    • 函数优先（函数为一等公民）： JavaScript 将函数视为（一等公民），函数可赋值给变量、作为参数传递或返回值，支持高阶函数与闭包，适合函数式编程。

    • 语法灵活简洁：

      • 支持函数式编程（如箭头函数 const add = (a, b) => a + b;）

      • 基于原型的面向对象，通过原型链（Prototype Chain）实现继承（而非类），灵活性高。ES6 后新增 class 语法糖。

      • 模块化：ES6 模块标准（import/export）替代传统脚本。

    • 事件驱动与异步编程：

      • 特别适合处理网页中的交互事件，适合处理高并发场景。

      • 单线程事件循环模型：主线程处理同步任务，通过事件循环（Event Loop）机制处理异步操作，异步处理用户操作（点击、网络请求），避免阻塞主线程，避免页面阻塞（如 Ajax 请求）。

      • 异步操作（如网络请求）通过回调函数、Promise 或 async/await 交由事件循环管理，处理非阻塞操作。

      • 典型场景：高并发服务器（Node.js）、实时交互（WebSocket）。

    • 跨平台兼容执行：

      • 浏览器端：所有现代主流浏览器（Chrome、Firefox、Edge 等）均内置 JavaScript 引擎（如 V8、SpiderMonkey），通过 V8（Chrome）、SpiderMonkey（Firefox）等引擎直接解析执行，无需编译。

      • 服务器端：Node.js 扩展了 JavaScript 的运行环境，支持后端开发（如 API 接口、实时通信）。

      • 移动/桌面端：React Native、Electron 等框架实现跨平台应用开发（如 VS Code 桌面版）。

    • 丰富的生态系统：

      • 拥有大量库（如 jQuery、React、Vue）和框架（如 Express、Angular），以及包管理工具（npm）。

    2.2 Web 开发核心组成

    • ECMAScript：

      JavaScript 语言基础（语法、类型、语句）。

    • BOM（浏览器对象模型）：

      控制浏览器行为（窗口、历史、定位）。

    • DOM（文档对象模型）：

      操作 HTML/XML 元素（如修改内容、样式）。

    3 应用和技术栈

    3.1 应用领域

    JavaScript 是一种广泛使用的编程语言，主要用于 Web 开发的前端和后端全栈开发。

    • 前端开发：

      JavaScript 是前端开发的核心语言，实现浏览器端网页的动态交互（如 DOM 操作、动态更新 DOM、表单验证、动态内容渲染（如 AJAX 异步加载数据）、动画效果、动画 React/Vue/Angular 框架、用户事件处理、用户交互等）。

      • DOM 操作：与 HTML 和 CSS 协同工作，动态修改网页内容、样式和结构。

      • 用户交互：响应点击、滚动、输入等事件。

      • 动画与图形：使用 Canvas 或 WebGL 实现 2D/3D 渲染。

      • 单页应用（SPA）：通过 React、Vue 等框架构建复杂的 Web 应用。React Router 管理路由，Redux 状态管理。

      • 服务端渲染（SSR）：Next.js 优化 SEO 和首屏加载速度。

    • 后端开发（Node.js）：

      • 借助 Node.js 平台，JavaScript 可以进行后端开发，构建高性能的服务器端应用程序。

      • 通过 Node.js 构建高性能的服务器端应用（如 Express.js）和 API。

      • Node.js 的非阻塞 I/O 和事件驱动特性使得 JavaScript 在处理高并发场景下具有优势。

      • 构建 RESTful API、实时通信（WebSocket）和微服务。

      • 与数据库（MySQL、MongoDB）交互。

    • 跨平台开发：

      • 移动应用：通过 React Native、Ionic 等框架，开发跨平台移动应用，实现一套代码在多个移动平台上的运行。

      • 桌面应用：使用 Electron 等框架，封装 Web 技术，开发构建如 VS Code、Slack 客户端等桌面应用程序，将网页技术与桌面应用的优势相结合。

    • 脚本工具：自动化任务、浏览器扩展

    • 新兴领域扩展：

      • 游戏开发：结合 Canvas 或 WebGL 创建网页游戏，Web游戏（Phaser.js），（Three.js）等场景。

      • 物联网（IoT）：通过 Node.js 控制硬件IoT设备，Node-RED 结合 MQTT 协议实现设备通信。

      • 机器学习：使用 TensorFlow.js 在浏览器端运行轻量级训练模型（如图像分类）。

      • 区块链：以太坊智能合约开发（如 Solidity 语法与 JavaScript 相似）。

    领域 典型用途 代表技术/库
    网页交互 DOM 操作、表单验证、动态内容加载 React/Vue/Angular
    服务端 后端 API、实时通信、微服务 Node.js、Express
    移动开发 跨平台应用开发 React Native、Ionic
    桌面应用 跨操作系统桌面程序 Electron、NW.js

    3.2 应用场景对比

    场景 技术方案 优势
    实时通信 WebSocket + Socket.IO 低延迟双向通信
    状态管理 Redux / Vuex 可预测数据流
    静态站点 Next.js / Gatsby SEO 友好 + 服务端渲染
    微前端架构 Module Federation 独立部署的组件集成

    3.3 现代开发技术栈

    • 框架：

      • React（组件化）：用于构建用户界面的 JavaScript 库。

      • Vue.js（响应式）：渐进式 JavaScript 框架。

      • Angular（企业级）：完整的前端框架。

    • 构建工具：

      • Webpack（模块打包）、Vite（极速热更新）

    • 类型扩展：

      • TypeScript（静态类型检查）

    • 运行时：

      • Node.js（Chrome V8 引擎）：服务器端 JavaScript 运行环境。

      • Deno（安全优先）

    • 应用：

      • Express：基于 Node.js 的 Web 应用框架。

    3.4 发展趋势

    • 性能持续优化

      • WebAssembly 集成结合：高性能计算，JS 调用（C++/Rust）高性能模块编译运行。WebAssembly 允许 C/C++ 代码与 JavaScript 混合运行，突破性能瓶颈。

      • V8 引擎引入 TurboFan 编译器，提升复杂逻辑执行效率。

    • 语言特性演进

      • TypeScript兴起：微软开发的超集语言，静态类型增强代码健壮性。通过静态类型检查减少运行时错误。

      • ECMAScript 每年更新：ES2025 计划引入模式匹配、装饰器等特性。

    • 架构模式创新

      • 微前端：将单体应用拆分为独立模块（如 Webpack 5 Module Federation）。

      • Serverless：AWS Lambda、阿里云函数计算支持事件驱动的无服务器开发。

    • 行业深度融合

      • PWA（渐进式 Web 应用）：结合 Service Worker 实现离线访问和消息推送。

      • 智能设备控制：JavaScript 通过 Node.js 控制机器人、智能家居设备。

    • AI 开发：TensorFlow.js 实现浏览器端机器学习

    • 边缘计算：Cloudflare Workers 边缘 JS 运行时

    • 元宇宙支持：Three.js/Babylon.js 构建 Web3D 应用

    • 框架持续演进：如Next.js（服务端渲染）、Deno（安全运行时）。

    3.5 JavaScript 最新发展（ES2025）

    2025 年的 ECMAScript 标准（ES2025）引入了多项实用特性：

    • Promise.try()：统一处理同步和异步异常。

    Promise.try(() => {
    if (Math.random() < 0.5) throw new Error("同步错误");
  return "成功";
}).catch(err => console.error(err));

    • Set 集合运算：原生支持交集、并集、差集等操作。

    const A = new Set([1, 2, 3]);
const B = new Set([3, 4, 5]);
console.log(A.union(B)); // Set(5) {1, 2, 3, 4, 5}

    • 正则表达式增强：支持重复命名捕获组。

    const regex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/v;
const match = regex.exec("2025-08-18");
console.log(match.groups.year); // 2025

    4 编程规范

    4.1 JS 语法概述

    JavaScript 的语法与 Java、C 等语言有相似之处，包含变量声明、运算符、流程控制语句（如 if 语句、for 循环、switch 语句等）。

    4.2 编成规范

    • 变量：其值在程序运行过程中是可变，用于存储某种数据/某些数值的存储器，想象成存储物品的盒子。

    • 变量命名：用于区分存储器（盒子），必须以字母、下划线（_）或美元符号（$）开头，后面可以跟字母、下划线、美元符号和数字。变量名区分大小写，且不允许使用 JavaScript 关键字和 JavaScript 保留字做变量名。

    • 关键字：break，case，catch，default，delete，do，else，finally，for，if，in，instanceof，new，return，switch，throw，try，typeof，var，void，while。

    • 保留字：abstract，boolean，byte，char，class，const，debugger，double，enum，export，extends，final，float，goto，implements，import，int，interface，long，native，package，private，protected，public，short，static，super，synchronized，throws，transient，volatile。

    • 大小写：JavaScript 区分大小写。

    • 表达式：表达式是指具有一定的值，用操作符把常数和变量连接起来的代数式。

    • 操作符：

      • 算术操作符：（+ 加法、- 减法、* 乘法、/ 除法、% 余数、++ 自加一、-- 自减一）

      • 比较操作符：（< 小于、> 大于、<= 小于等于、>= 大于等于、==等于、!= 不等于、=== 值及类型均相等（恒等于）、!==值与类型均不等（不恒等于））

      • 条件运算符：（变量 = (条件) ? 值1:值2 符合条件赋值1，不符合赋值2）

      • 逻辑操作符：（&&与、|| 或、！ 非）

      • 位运算符：（& 位与、| 位或、~ 取反、^ 异或、<<左移、>> 右移）

      • 字符串连接操作符：（+ 连接运算符、+=）

      • 赋值运算符：（= 赋值、+=、-=、*=、/=、%=）

      操作符之间的优先级（左边高到右边低）：

      • 算术操作符 → 比较操作符 → 逻辑操作符 → “=”赋值符号

      如果要改变运算顺序，需添加 () 括号的方法来改变优先级。

    • 语句结束：通常在每条语句的结尾加上一个（分号 ;），来表示语句的结束。

    • 单行注释：在注释内容前加（双斜杠符号 //）.

    • 多行注释：以 “/*” 开始，以 “*/” 结束。

    4.3 编程范式

    • 面向对象：JavaScript 支持面向对象编程，通过构造函数、原型等方式创建对象，实现继承、封装等面向对象的特性。

    • 函数式编程：JavaScript 也支持函数式编程，如高阶函数、纯函数等概念在 JavaScript 中可以得到应用，可以使用函数式编程的方式处理数据、实现逻辑。

    4.4 变量作用域与闭包

    JavaScript 的变量虽然可以不声明，直接使用。但这样编程不规范，建议先声明，后使用。

    • 使用 var（函数作用域），声明变量。使用=等于号给变量赋值（存储内容）。

    // 使用var（函数作用域）
// 变量声明：var 变量名1[,变量名2];
// 变量赋值：变量名 = 变量值;
var my_var = 10; //声明变量my_var，并赋值＝10（数值类型）
my_var = "ABC"; //变量my_var，重新赋值＝"ABC"（字符串类型）
my_var = true; //变量my_var，重新赋值＝true（布尔类型）

    • 使用let/const（块级作用域），声明变量和常量。

    // 使用let（块级作用域）
let y = 20;
​
// 使用const（常量，块级作用域）
const PI = 3.14;

    • 闭包：函数保留其词法作用域（如计数器实现）。

    4.5 数据类型

    • 原始基本类型：

      Number（含 BigInt）、String、Boolean、Null、Undefined、Symbol（ES6 新增）。

    • 对象引用类型：

      Object、Array、Function（包括Array 数组、Date 日期、RegExp、函数等）。

      类型 示例 描述
      原始类型 let str = "hello"; 按值访问，不可变
      引用类型 let obj = {a: 1}; 按引用访问，属性可变
      特殊值 null, undefined 空值或未定义

    • Array 一维数组类型：

      数组是一个值的集合，每个值都有一个索引号，从 0 开始，每个索引都有一个相应的值，根据需要添加更多数值。

    // 创建数组语法
var my_arr = new Array(); // 创建数组
// 新创建的数组，默认是空数组，没有值，如果输出则显示 undefined
// 数组存储的数据可以是任何类型（数字、字符、布尔值等）
​
// 创建数组的同时，还可以为数组指定长度，长度可任意指定。
var my_arr = new Array(10); // 创建数组，存储10个数据
my_arr[0] = "索引0，第1个数值"; // 给数组赋值为字符串
my_arr[9] = "索引9，第10个数值"; // 给数组赋值为字符串
​
// 创建数组的同时，赋值
var my_array = new Array(12,34,56,78,90); // 创建数组同时赋值
var my_array = [90,78,56,34,12]; // 直接输入一个数组（字面量数组）
​
// 新增元素语法
// 使用下一个未用的索引，任何时刻可以不断向数组增加新元素
my_array[5] = 100;
​
// 获取数组元素的值，只需引用数组变量的索引
var my_var1 = my_array[4];
​
// 获取数组的大小，只需引用数组的 length 属性
var my_var2 = my_array.length;

    • Array 二维数组类型：

      一维数组 myarray[ ]，可以看成一组小盒子，每个小盒子只能放一个内容。

      二维数组 myarray[ ][ ]，可以看成一组大盒子，每个大盒子里面存放多个小盒子，每个小盒子只能放一个内容。

      二维数组的两个维度的索引值也是从 0 开始，两个维度的最后一个索引值为长度 -1。 

    // 第1种创建（二维）数组语法
// 先创建声明（一维）数组，再使用（循环）语句，给原（一维）数组的元素声明为数组类型。
​
// 第2种创建（二维）数组语法
var my_arr2 = [ [1,2,3],[4,5,6] ];
// my_arr2[0][2]的值为3，my_arr2[1][0]的值为4

    4.6 流程控制语句

    • （if）条件判断语句

    // if 单值判断
if (condition) {
  // 条件成立时执行的代码块
}
​
// if - else 二选一判断
if (condition) {
  // 条件成立时执行的代码块
} else {
  // 条件不成立时执行的代码块
}
​
// if - else if - else 多选一判断
if (condition_1) {
  // 条件1成立时执行的代码块
} else if (condition_2) {
  // 条件2成立时执行的代码块
} else if (condition_n) {
  // 条件n成立时执行的代码块
} else {
  // 所有条件都不成立时执行的代码块
}

    • （switch）条件判断语句

      当有很多种选项的时候，switch 比 if 使用更方便。

    // switch 多种选项判断，
switch (expression) {   // 表达式
case value_1: // 满足表达式的值，就会执行该 case 后的所有代码块
    // 代码块1;
    break; // 可使用 break 语句来阻止运行下一个 case 中的代码块
case value_2:
    // 代码块2;
    break;
case value_n:
    // 代码块n;
    break;
default:
    // 表达式没有符合的 case 值，执行此默认代码块
}

    • （for）循环语句

    // for 循环
for(初始化变量;循环条件;循环迭代)
{     
    循环语句代码块; 
}
​
for (let i = 0; i < 5; i++) {
  console.log(i);
}

    • （while）循环语句

    // while 循环
while(判断条件)
{
    循环语句代码块; 
}

    • （do ... while）循环语句

      do ... while 循环和 while 循环的唯一差别是，do ... while 循环保证循环体内的代码块至少被执行一次。因为它是先执行代码，后判断条件，如果条件为真，继续循环。

    // do ... while 循环
do
{
    循环语句代码块; 
}
while(判断条件)

    • （break）退出循环体语句

      在 for、while、do ... while 等循环中，使用 break 语句退出当前循环体，直接执行后面的代码。

    // break 退出循环体
break; // 退出当前循环体，直接执行（循环语句）后面的代码。

    • （continue）退出本次循环语句

      在 for、while、do ... while 等循环中，使用 continue 语句退出本次循环，直接进行后续循环。

    // continue 退出本次循环
continue; // 退出本次循环，直接进行后续循环。

    4.7 函数

    JavaScript 中的函数是一等公民，支持函数表达式、函数嵌套、箭头函数（=>）和闭包等高级特性，函数既可以作为对象的方法，也可以作为独立的函数使用。

    • 定义：声明式、表达式、箭头函数（() => {}）。

    • 参数：支持默认值、剩余参数（...args）。

    // 函数定义
// 函数中参数和返回值不只是数字，还可以是字符串等其它类型。 
/*
function 函数名([参数1],[参数2],[参数n])
{
    函数体代码;
    return 返回值; //返回函数值，return 后面的值叫做返回值。
}
*/
​
function add(a, b) {
  var sum = a + b;
  return sum;
}
​
// 可以通过变量存储调用函数的返回值，代码如下:
result = add(7,4); // 语句执行后，result 变量中的值为11。
​
// 箭头函数（ES6）
const multiply = (a, b) => a * b;
​
// 立即执行函数表达式（IIFE）
(function() {
  console.log('立即执行');
})();

    • 函数调用1：在 <script> </script> 标签内调用。

    <script type="text/javascript">
    function add()
    {
         sum = 1 + 2;
         alert(sum);
    }
  add();//调用函数，直接写函数名。
</script>

    • 函数调用2：在 HTML 文件中调用。

    <!-- 例如通过点击按钮后调用定义好的函数。 -->
<input type="button" value="click it" onclick="add()">

    4.8 异步编程

    • 回调函数 → Promise→ async/await（现代推荐方式，解决回调地狱）。

    // Promise
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));
​
// async/await（ES8）
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

    4.9 ES6+ 新特性

    • 模块化（import/export）、解构赋值、模板字符串、默认参数、展开运算符（...）等。

    4.10 代码示例

    • 前端示例（DOM 操作）

    <!DOCTYPE html>
<html>
<body>
  <button id="myButton">点击我</button>
  <p id="text"></p>
  <script>
    document.getElementById("myButton").addEventListener("click", () => {
      document.getElementById("text").innerHTML = "Hello, JavaScript!";
    });
  </script>
</body>
</html>

    • 后端示例（Node.js）

    const express = require("express");
const app = express();
​
app.get("/", (req, res) => {
  res.send("Hello from Node.js!");
});
​
app.listen(3000, () => {
  console.log("Server running on http://localhost:3000");
});

    • 异步处理（Async/Await）

    // 异步处理（Async/Await）
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data?.results?.map(item => ({ ...item, active: true }));
  } catch (error) {
    console.error("Fetch failed:", error);
    return [];
  }
}

    • 类与模块化

    // 类与模块化
export class User {
  #password;  // 私有字段
​
  constructor(name) {
    this.name = name;
  }
​
  login = (pass) => this.#password === pass;
}

    5 HTML 引入 JavaScript

    5.1 外部脚本

    • 编写在HTML文档中的<head> </head>头部元素之间，通过<link>元素标签引入独立 CSS 文件，方便实现多页面复用：

    <head>
    <!-- 引入外部 JavaScript 脚本 -->
    
    <script type="application/javascript" src="script1.js"> </script> 
    <!-- type="application/javascript" 在旧版浏览器中可能无法识别 -->
​
    <!-- 可以使用 type="text/javascript" 替代，或直接省略 type 属性。 -->
    <script type="text/javascript" src="script2.js"> </script> 
    <script src="script3.js"> </script> 
</head>

    5.2 内部脚本

    • 通常编写在HTML文档中的<head> </head>头部元素之间的<script> </script>元素内，通过在<script>元素内，直接插入 JavaScript 代码：

    <head>
    <!-- JavaScript 脚本，写在 <head> 元素内-->
    <script type="application/javascript">
        document.write("JS 文档流输出文本");
    </script>
</head>

    • JavaScript 能够直接写入 HTML 输出流中：

    <body>
    <!-- JavaScript 脚本，写在 <body> 元素内-->
    <script type="application/javascript">
        document.write("<h1>一级标题</h1>");
        document.write("<p>文本段落。</p>");
    </script>
</body>

    5.3 引入代码位置

    JavaScript 代码，可以放在 HTML 页面中任何位置，但是浏览器解释 HTML 时是按先后顺序的，所以放置前面的 script 脚本就先被执行。

    因此，进行页面显示初始化的 JavaScript 必须放在 <head>元素里面，因为初始化都要求提前进行（如给页面 <body> 设置 CSS 等）。

    如果是通过事件调用执行的 function，那么 JavaScript 代码放置的位置没什么特别要求。

    5.4 引入类型兼容性

    <script>元素标签中的 type 属性，若设置为 type="application/javascript" ，在旧版浏览器中可能无法识别。

    此时可以使用 type="text/javascript" 替代，或直接省略 type 属性。

    6 动态页面事件

    6.1 事件概述

    JavaScript 可应用于创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。

    例如：当网页用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，再返回给网页用户一个结果。

    使用事件，即在 HTML 网页元素中设置该事件属性。

    6.2 常用事件

    • onclick：鼠标单击事件

      当在网页上单击鼠标时，就会发生 onclick 事件。同时 onclick 事件调用的程序块就会被执行，通常与 HTML 输入/按钮一起使用。

    <input name="button1" type="button" value="点击提交" onclick="submit1()" />

    • onmouseover：鼠标经过事件

      当鼠标移到一个网页上的对象时，该对象就触发 onmouseover 事件，并执行 onmouseover 事件调用的程序块。

    • onmouseout：鼠标移开事件

      当鼠标移开当前网页上的对象时，就触发 onmouseout 事件，执行 onmouseout 调用的程序块。

    • onchange：文本框内容发生改变事件

      当 HTML 网页的文本框内容发生改变时，会触发 onchange 事件，同时执行 onchange 调用的程序块。

    • onselect：文本框内容被选中事件

      当文本框或者文本域中的文字被选中时，触发 onselect 事件，同时 onselect 调用的程序块就会被执行。

    • onfocus：光标聚集事件

      当网页中的对象获得聚点时，例如将光标移到 HTML 网页对象上进行聚焦时，就会执行 onfocus 调用的程序块。

    • onblur：光标离开事件

      onblur 事件与 onfocus 事件是相对互反的，例如将光标离开当前获得聚焦的 HTML 网页对象时，触发 onblur 事件，同时执行 onblur 调用的程序块。

    • onload：网页加载事件

      在页面加载完成后，写在 <body> 标签内的 onload 事件会立即发生，同时执行 onload 调用的程序块。

    • onunload：网页卸载事件

      当用户退出页面时（页面关闭、页面刷新等），会触发 onunload 事件，同时执行 onunload 调用的程序块。

    7 JavaScript 内置对象

    7.1 JS 对象概述

    JavaScript 中的所有事物都是对象，如:字符串、数值、数组、函数等，每个对象带有属性和方法。

    • 对象的属性：反映该对象某些特定的性质的。例如字符串的长度、图像的长宽等。

    • 对象的方法：能够在对象上执行的动作。例如表单的“提交”(Submit)，时间的“获取”(getYear)等。

      JavaScript 提供多个内置对象，比如 String、Date、Array 等等。使用内置对象前先定义，如下使用数组对象：

    var obj_name1 = new Array(); //使用new关键字定义对象
var obj_name2 = [];
​
// 访问对象的属性
obj_name1.property_Name;
​
// 访问对象的方法
obj_name2.method_Name;

    7.2 Array 数组对象

    • Array 数组对象属性

      • <数组对象>.length：返回数组的长度，即数组里有多少个元素。

      • <数组对象>.constructor： 返回创建数组对象的原型函数。

      • Array.prototype：允许向数组对象添加属性或方法。

    • Array 数组对象方法

      • [...]：创建一个新数组。

      • arrayObject.concat(array1,array2,...,arrayN);：连接两个或更多个数组，并返回结果。

        该方法不会改变现有的数组 arrayObject，而仅仅会返回被连接数组的一个副本。

      • arrayObject.copyWithin(targetIndex,sourceIndex);：从数组的指定位置拷贝元素到数组的另一个指定位置中。

      • arrayObject.entries();：返回数组的可迭代对象，包含了数组的键值对。

      • arrayObject.keys();：返回数组的可迭代对象，包含原始数组的键(key)。

      • arrayObject.every(函数);：通过函数，检测数值元素的每个元素是否都符合条件。

      • arrayObject.filter(函数);：通过函数，检测数值元素，并返回符合条件所有元素的数组。

      • arrayObject.find(函数);：返回符合测试（函数）条件的数组元素。

      • arrayObject.findIndex(函数);：返回符合测试（函数）条件的数组元素索引。

      • arrayObject.some(函数);：检测数组元素中是否有元素符合指定条件。

      • arrayObject.fill(固定值);：使用一个固定值来填充数组。

      • arrayObject.forEach(回调函数);：数组每个元素都执行一次回调函数。

      • arrayObject.reduce(回调函数);：将数组元素计算为一个值（从左到右）。

      • arrayObject.reduceRight(回调函数);：将数组元素计算为一个值（从右到左）。

      • arrayObject.from("字符串");：通过给定的对象中创建一个数组。

      • arrayObject.fromAsync();：从异步可迭代对象、可迭代对象或类数组对象创建一个新的数组。

      • arrayObject.includes(searchElement, fromIndex);：判断一个数组是否包含一个指定的值。

      • arrayObject.indexOf(searchElement);：搜索数组中的元素，并返回它所在的位置。

      • arrayObject.isArray(Object);：判断对象是否为数组。

      • arrayObject.map(function(currentValue, index,arr),thisValue);：通过指定函数处理数组的每个元素，并返回处理后的数组。

      • arrayObject.join(separator);：把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

        separator 是可选的分隔符，若省略，则使用逗号,作为分隔符。

        这个方法会返回一个字符串，该字符串把数组中的各个元素串起来，用<分隔符>置于元素与元素之间。这个方法不影响数组原本的内容。

      • arrayObject.reverse();：颠倒反转数组中元素的顺序。

        arrayObject.reverse(); 会改变原来的数组，而不会创建新的数组。

      • arrayObject.slice(start,end);：选取数组的一部分，并返回一个新数组，即从 start（包含）到 end（不包含）的 arrayObject 中的元素，并不会修改原数组。

        start 是必需的起始位置。如果 start 是负数，则从数组尾部开始算起，-1 是最后一个元素，-2 是倒数第二个元素，以此类推。

        end 是可选的结束位置。如果省略该参数，则切分的数组包含从 start 到数组结束的所有元素。如果 end 是负数，表示从数组尾部算起来的元素。

      • arrayObject.sort(sortMethod);：对数组的元素进行排序。

        如果不指定<sortMethod>，则按 unicode 码的顺序进行排列。

        如果指定<sortMethod>，则按<方法函数sortMethod>所指定的排序方法进行排序。

        sortMethod(A,B);比较函数应该具有两个参数 A 和 B，且该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。其返回值如下：

        若返回值 <=-1，则表示 A 在排序后的序列中出现在 B 之前。 若返回值 >-1 && <1，则表示 A 和 B 具有相同的排序顺序。 若返回值 >=1，则表示 A 在排序后的序列中出现在 B 之后。

      • <数组对象>.shift();：删除并返回数组的第一个元素。

      • <数组对象>.unshift(新元素1,新元素2,...,新元素N);：向数组的开头添加一个或更多元素，并返回新的长度。

      • <数组对象>.pop();：删除数组的最后一个元素并返回删除的元素。

      • <数组对象>.push(新元素);：向数组的末尾添加一个或更多元素，并返回新的长度。

      • <数组对象>.splice(index,数量,item1,...,itemX);：从数组中添加或删除元素。

      • <数组对象>.toString();：将数组转换为字符串，并返回结果。

      • <数组对象>.toLocaleString(locales[, options]);：将数组转化为本地数组，并返回结果。根据当前环境的语言设置（locale）来格式化数组中的每个元素。

        • locales（可选）：字符串或字符串数组，表示语言代码（如 “en-US”、”zh-CN”）。

        • options（可选）：配置对象，用于指定格式化选项。

      • <数组对象>.valueOf();：返回数组对象的原始值。

      • Array.of()：将一组值转换为数组。

      • Array.at()：用于接收一个整数值并返回该索引对应的元素，允许正数和负数。负整数从数组中的最后一个元素开始倒数。

      • Array.flat()：创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

      • Array.flatMap()：使用映射函数映射每个元素，然后将结果压缩成一个新数组。

      • Array.with()：更新数组元素。

      • Array.findLastIndex()：对数组中的每个元素执行一个函数。

      • Array.lastIndexOf()：对数组中的每个元素执行一个函数。

      • Array.findLast()：对数组中的每个元素执行一个函数。

      • Array.toReversed()：反转数组中元素的顺序。

      • Array.toSorted()：对数组中的元素按字母顺序进行排序。

      • Array.toSpliced()：向数组中添加和/或移除元素。

      • [Symbol.iterator]() 返回一个数组迭代器对象，该对象会产生数组中每个索引的值。

    7.3 Date 日期对象

    日期对象可以储存任意一个日期，并且可以精确到毫秒数（1/1000 秒）。

    • 定义 Date 日期对象：

    var c_date = new Date(); //定义 c_date 为日期对象，且初始值为(当前电脑系统时间)。
var d_date = new Date(2025, 8, 30);  //自定义初始值为2025年8月30日
var d_date = new Date('Oct 1, 2025'); //自定义初始值为2025年10月1日

    • Date 日期对象属性：

      • Object.constructor：返回对创建此对象的 Date 函数的引用。

    • Date.prototype：向对象添加属性和方法。

    • Date 日期对象方法：

      • <日期对象>.setFullYear(四位数字);：设置（全）年份。设置 Date 对象中的年份（四位数字）。

      • <日期对象>.getFullYear();：获取（全）年份。从 Date 对象以四位数字返回年份。

        例如(火狐浏览器)返回：【星期 月 日 年 时:分:秒 时区】这样的格式。

      • <日期对象>.setMonth();：设置月份。设置 Date 对象中月份 (0 ~ 11)。

      • <日期对象>.getMonth();：获取月份。从 Date 对象返回月份 (0 ~ 11)。

      • <日期对象>.setDate();：设置日期（天数）。设置 Date 对象中月的某一天 (1 ~ 31)。

      • <日期对象>.getDate();：获取日期（天数）。从 Date 对象返回一个月中的某一天 (1 ~ 31)。

      • <日期对象>.setHours();：设置小时。设置 Date 对象中的小时 (0 ~ 23)。

      • <日期对象>.getHours();：获取小时。返回 Date 对象的小时 (0 ~ 23)。

      • <日期对象>.setMinutes();：设置分钟。设置 Date 对象中的分钟 (0 ~ 59)。

      • <日期对象>.getMinutes();：获取分钟。返回 Date 对象的分钟 (0 ~ 59)。

      • <日期对象>.setSeconds();：设置秒数。设置 Date 对象中的秒钟 (0 ~ 59)。

      • <日期对象>.getSeconds();：获取秒数。返回 Date 对象的秒数 (0 ~ 59)。

      • <日期对象>.setMilliseconds();：设置毫秒数。设置 Date 对象中的毫秒 (0 ~ 999)。

      • <日期对象>.getMilliseconds();：获取毫秒数。返回 Date 对象的毫秒(0 ~ 999)。

      • <日期对象>.setTime(设置值);：设置时间（毫秒单位）。setTime() 方法以毫秒设置 Date 对象。

        设置值的计算从 1970年1月1日零时 到日期对象所指日期时间 的毫秒数，若设置时间推迟2小时，则可以表示为x.setTime(x.getTime() + 2 * 60 * 60 * 1000);

      • <日期对象>.getTime();：获取时间（毫秒单位）。返回（1970 年 1 月 1 日零时）至今的毫秒数。

      • <日期对象>.getDay();：获取星期。从 Date 对象返回一周中的某一天 (0 ~ 6)。

      • <日期对象>.setUTCFullYear(四位数字);：设置（全）年份。根据世界时 (UTC) 设置 Date 对象中的年份（四位数字）。

      • <日期对象>.getUTCFullYear();：获取（全）年份。根据世界时从 Date 对象返回四位数的年份。

        例如(火狐浏览器)返回：【星期 月 日 年 时:分:秒 时区】这样的格式。

      • <日期对象>.setUTCMonth();：设置月份。根据世界时 (UTC) 设置 Date 对象中的月份 (0 ~ 11)。

      • <日期对象>.getUTCMonth();：获取月份。 根据世界时从 Date 对象返回月份 (0 ~ 11)。

      • <日期对象>.setUTCDate();：设置日期（天数）。根据世界时 (UTC) 设置 Date 对象中月份的一天 (1 ~ 31)。

      • <日期对象>.getUTCDate();：获取日期（天数）。根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。

      • <日期对象>.setUTCHours();：设置小时。根据世界时 (UTC) 设置 Date 对象中的小时 (0 ~ 23)。

      • <日期对象>.getUTCHours();：获取小时。根据世界时返回 Date 对象的小时 (0 ~ 23)。

      • <日期对象>.setUTCMinutes();：设置分钟。根据世界时 (UTC) 设置 Date 对象中的分钟 (0 ~ 59)。

      • <日期对象>.getUTCMinutes();：获取分钟。根据世界时返回 Date 对象的分钟 (0 ~ 59)。

      • <日期对象>.setUTCSeconds();：设置秒数。根据世界时 (UTC) 设置指定时间的秒字段。

      • <日期对象>.getUTCSeconds();：获取秒数。根据世界时返回 Date 对象的秒钟 (0 ~ 59)。

      • <日期对象>.setUTCMilliseconds();：设置毫秒数。根据世界时 (UTC) 设置 Date 对象中的毫秒 (0 ~ 999)。

      • <日期对象>.getUTCMilliseconds();：获取毫秒数。根据世界时返回 Date 对象的毫秒(0 ~ 999)。

      • <日期对象>.getUTCDay();：获取星期。根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。

      • <日期对象>.parse("March 1, 2022");：返回1970年1月1日午夜到指定日期（字符串）的毫秒数。

      • <日期对象>.toString();：把 Date 对象转换为字符串。

      • <日期对象>.toDateString();：把 Date 对象的日期部分转换为字符串。

      • <日期对象>.toTimeString();：把 Date 对象的时间部分转换为字符串。

      • <日期对象>.toLocaleString();：根据本地时间格式，把 Date 对象转换为字符串。

      • <日期对象>.toLocaleDateString();： 根据本地时间格式，把 Date 对象的日期部分转换为字符串。

      • <日期对象>.toLocaleTimeString();：根据本地时间格式，把 Date 对象的时间部分转换为字符串。

      • <日期对象>.toUTCString();： 根据世界时，把 Date 对象转换为字符串。

      • <日期对象>.toISOString();：使用 ISO 标准返回字符串的日期格式。

      • <日期对象>.toJSON();：以 JSON 数据格式返回日期字符串。

      • <日期对象>.UTC();： 根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。

      • <日期对象>.valueOf();： 返回 Date 对象的原始值。

      • <日期对象>.now();：返回当前时间的毫秒数。

    7.4 String 字符串对象

    • 定义 String 字符串对象

      直接赋值="字符串内容";

    • String 字符串对象属性

      • stringObject.length：返回字符串的长度（字符数）。

      • Object.constructor：对创建该对象的函数的引用。

      • String.prototype：允许向对象添加属性和方法。

    • String 字符串对象方法

      • stringObject.toUpperCase();：把小写字符串转换为大写字符串。

      • stringObject.toLowerCase();：把大写字符串转换为小写字符串。

      • stringObject.toLocaleUpperCase();：根据本地主机的语言环境把字符串转换为大写字符串。

      • stringObject.toLocaleLowerCase();：根据本地主机的语言环境把字符串转换为小写字符串。

      • stringObject.concat(str1,str2,...,strN);：连接两个或更多字符串，并返回新的字符串。

      • stringObject.startsWith("subString");：判查看字符串是否以指定的子字符串开头的（区分大小写）。

      • stringObject.endsWith("subString");：判断当前字符串是否以指定的子字符串结尾的（区分大小写）。

      • stringObject.fromCharCode(Unicode 编码);：将 Unicode 编码转为字符。

      • stringObject.includes("subString");：查找字符串中是否包含指定的子字符串。

      • stringObject.match(正则表达式);：查找找到一个或多个正则表达式的匹配。

      • stringObject.replace("oldString","newString");：在字符串中查找匹配的第一个子串，并替换与正则表达式匹配的子串。

      • stringObject.replaceAll("oldString","newString");：在字符串中查找匹配的所有子串，并替换与正则表达式匹配的子串。

      • stringObject.search("subString");：查找与正则表达式相匹配的值。

      • stringObject.repeat(次数);：复制字符串指定次数，并将它们连接在一起返回。

      • stringObject.slice(startPos,stopPos);：提取字符串的片断，并在新的字符串中返回被提取的部分。

      • stringObject.trim();：去除字符串两边的空白。

      • stringObject.charAt(index);：返回在指定位置的字符。

        字符串中第一个字符的 index 下标是 0，最后一个字符的 index 下标为字符串长度减一（string.length-1）。

        如果参数 index 不在 0 与 string.length-1 之间，stringObject.charAt(index)方法将返回一个空字符串。

      • stringObject.charCodeAt(index);：返回在指定位置的字符的 Unicode 编码。

      • stringObject.indexOf("subString", startpos);：返回指定字符串首次出现的位置。

        subString 是必需指定的字符串。

        startpos 是可选的整数取值，从 0 到 string.length-1 选择，若省略 startpos ，表示从 0 （即首字符）开始检索 。

        如果 stringObject.indexOf("subString", startpos) 要检索的字符串值没有出现，则该方法返回 -1。

      • stringObject.lastIndexOf("subString");：从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。

      • stringObject.split(separator,limit);：把字符串分割为字符串数组。

        separator 是必需指定的分隔符，若 separator 设置为（空字符串" "），则表示每个字符都会被分割开。

        limit 是可选的分割次数。如果 limit 参数有设置值，则返回的（子字符串）数量不会多于这个设置值。如果 limit 参数没有设置值，则不限制返回的（子字符串）数量。

      • stringObject.substring(startPos,stopPos);： 提取字符串中两个指定的索引号之间的字符。

        startPos 是必需指定的开始位置，是一个非负数的整数。

        stopPos 是可选指定的结束位置，也是一个非负数的整数。如果省略 stopPos 参数，则返回的（子字符串）会一直到（原字符串）对象的结尾。

      • stringObject.substr(startPos,length);：从起始索引号提取字符串中指定数目的字符。

        startPos 是必需指定的起始位置。如果 startPos 是负数，从字符串的尾部开始算起的位置。-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。

        length 是可选的长度，如果省略 length 参数，则返回从 startPos开始到 stringObject 对象结尾的字符。

      • stringObject.valueOf();：返回某个字符串对象的原始值。

      • Object.toString();：返回一个字符串。

    7.5 Math 数学对象

    Math 对象是一个固有的对象，无需创建它，直接把 Math 作为对象使用就可以调用 Math 所有属性和方法。这是 Math 对象与 Date,String 对象的区别。

    • Math 对象属性

      • Math.E：返回算术常量 e，即自然对数的底数（约等于 2.718）。

      • Math.LN2：返回 2 的自然对数（约等于 0.693）。

      • Math.LN10：返回 10 的自然对数（约等于 2.302）。

      • Math.LOG2E：返回以 2 为底的 e 的对数（约等于 1.442）。

      • Math.LOG10E：返回以 10 为底的 e 的对数（约等于 0.434）。

      • Math.PI：返回圆周率（约等于 3.14159）。

      • Math.SQRT2：返回 2 的平方根（约等于 1.414）。

      • Math.SQRT1_2：返回 2 的平方根的倒数（约等于 0.707）。

    • Math 对象方法

      • Math.abs(x);：返回 x 的绝对值。

      • Math.cos(x);：返回 x 的余弦值。

      • Math.sin(x);：返回 x 的正弦值。

      • Math.tan(x);：返回 x 的正切值。

      • Math.acos(x);：返回 x 的反余弦值。

      • Math.asin(x);：返回 x 的反正弦值。

      • Math.atan(x);：返回 x 的反正切值。

      • Math.atan2(y,x);：返回由 x 轴到点（x,y）的角度（以弧度为单位）。

      • Math.ceil(x);：返回 x 进行上舍入后的值，对 x 进行向上取整。

      • Math.floor(x);：返回 x 进行下舍入后的值，对 x 进行向下取整。

      • Math.round(x);：把 x 四舍五入为最接近的整数。

      • Math.exp(x);：返回 e的指数（ x 次幂）。

      • Math.log(x);：返回 x 的自然对数（以 e 为底）。

      • Math.max(x,y);：返回 x 和 y 之中的最大值。

      • Math.min(x,y);：返回 x 和 y 之中的最小值。

      • Math.pow(x,y);：返回 x 的 y 次幂。

      • Math.sqrt(x);：返回 x 的平方根。

      • Math.random();：返回 0 ~ 1 之间的随机数，（大于或等于 0 ，但小于 1)。

      • Math.toSource();：返回 Math 对象的源代码。

      • Math.valueOf();：返回 Math 对象的原始值。

    7.6 Boolean 对象

    Boolean 对象用于转换一个不是 Boolean 类型的值转换为 Boolean 类型值 (true 或者false).

    • 定义 Boolean 对象：

      var myvar = new Boolean(1);

    • Boolean 对象属性

      • Object.constructor：返回对创建此对象的 Boolean 函数的引用。

      • Boolean.prototype：向对象添加属性和方法。

    • Boolean 对象方法

      • BooleanObject.toString();： 把布尔值转换为字符串，并返回结果。

      • BooleanObject.valueOf();：返回 Boolean 对象的原始值。

    7.7 Number 对象

    Number 对象是原始数值的包装对象。

    • 定义 Number 对象：

      var num = new Number(value);

    • Number 对象属性

      • Object.constructor：返回对创建此对象的 Number 函数的引用。

      • Number.prototype：允许向对象添加属性和方法。

      • Number.MAX_VALUE：可表示的最大的数。

      • Number.MIN_VALUE：可表示的最小的数。

      • Number.POSITIVE_INFINITY：正无穷大，溢出时返回该值。

      • Number.NEGATIVE_INFINITY：负无穷大，溢出时返回该值。

      • Number.NaN：非数字值。

      • Number.EPSILON：表示 1 和比最接近 1 且大于 1 的最小 Number 之间的差别。

      • Number.MIN_SAFE_INTEGER：表示在 JavaScript中最小的安全的 integer 型数字 (-(2^53 - 1))。

      • Number.MAX_SAFE_INTEGER：表示在 JavaScript 中最大的安全整数（2^53 - 1）。

    • Number 对象方法

      • Number.isFinite(参数)：检测指定参数是否为无穷大。

      • Number.isInteger(参数)：检测指定参数是否为整数。

      • Number.isNaN(参数)：检测指定参数是否为 NaN，即（不是一个数字）。

      • Number.isSafeInteger(参数)：检测指定参数是否为安全整数。

      • NumberObject.toExponential(x)：把对象的值转换为指数计数法。

      • NumberObject.toFixed(x)：把数字转换为字符串，结果的小数点后有指定位数的数字。

      • Number.toLocaleString(locales, options)：返回数字在特定语言环境下的表示字符串。

      • NumberObject.toPrecision(x)：把数字格式化为指定的长度。

      • NumberObject.toString()：把数字转换为字符串，使用指定的基数。

      • NumberObject.valueOf()：返回一个 Number 对象的基本数字值。

      • Number.isInteger(参数)：用来判断给定的参数是否为整数。

      • Number.isSafeInteger(参数)：判断传入的参数值是否是一个”安全整数”。

    7.8 RegExp 对象

    RegExp 正则表达式是描述字符模式的对象。

    正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。

    • 语法

    var patt=new RegExp(pattern,modifiers);
// 当使用构造函数创造正则对象时，需要常规的字符转义规则（在前面加反斜杠 \）。
​
var patt=/pattern/modifiers; // 更简单的方式
// pattern（模式） 描述了表达式的模式
// modifiers(修饰符) 用于指定全局匹配、区分大小写的匹配和多行匹配

    • RegEXp 对象属性

      • RegEXpObject.constructor：返回一个函数，该函数是一个创建 RegExp 对象的原型。

      • RegExpObject.global：判断是否设置了 “g” 修饰符。

      • RegExpObject.ignoreCase：判断是否设置了 “i” 修饰符。

      • RegExpObject.lastIndex：用于规定下次匹配的起始位置。

      • RegExpObject.multiline：判断是否设置了 “m” 修饰符。

      • RegExpObject.source：返回正则表达式的匹配模式。

    • RegEXp 对象方法

      • RegExpObject.exec(string)：检索字符串中指定的值。返回找到的值，并确定其位置。

      • RegExpObject.test(string)：检索字符串中指定的值。返回 true 或 false。

      • RegExpObject.toString：返回正则表达式的字符串。

    • 修饰符

      修饰符用于执行区分大小写和全局匹配。

      修饰符 描述
      i 执行对大小写不敏感的匹配。
      g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
      m 执行多行匹配。

    • 括号

      括号用于查找某个范围内的字符。

      表达式 描述
      [abc] 查找方括号之间的任何字符。
      [^abc] 查找任何不在方括号之间的字符。
      [0-9] 查找任何从 0 至 9 的数字。
      [a-z] 查找任何从小写 a 到小写 z 的字符
      [A-Z] 查找任何从大写 A 到大写 Z 的字符。
      [A-z] 查找任何从大写 A 到小写 z 的字符。
      [abrs] 查找给定集合内的任何字符。
      [^abrs] 查找给定集合外的任何字符。
      （r|g|b） 查找任何指定的选项。

    • 元字符

      元字符（Metacharacter）是拥有特殊含义的字符。

      元字符 描述
      . 查找单个字符，除了换行和行结束符。
      \w 查找数字、字母及下划线。
      \W 查找非单词字符。
      \d 查找数字。
      \D 查找非数字字符。
      \s 查找空白字符。
      \S 查找非空白字符。
      \b 匹配单词边界。
      \B 匹配非单词边界。
      \0 查找 NULL 字符。
      \n 查找换行符。
      \f 查找换页符。
      \r 查找回车符。
      \t 查找制表符。
      \v 查找垂直制表符。
      \xxx 查找以八进制数 xxx 规定的字符。
      \xdd 查找以十六进制数 dd 规定的字符。
      \uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。

    • 量词

      量词 描述
      n+ 匹配任何包含至少一个 n 的字符串。例如，/a+/ 匹配 “candy” 中的 “a”，”caaaaaaandy” 中所有的 “a”。
      n* 匹配任何包含零个或多个 n 的字符串。例如，/bo*/ 匹配 “A ghost booooed” 中的 “boooo”，”A bird warbled” 中的 “b”，但是不匹配 “A goat grunted”。
      n? 匹配任何包含零个或一个 n 的字符串。例如，/e?le?/ 匹配 “angel” 中的 “el”，”angle” 中的 “le”。
      n{X} 匹配包含 X 个 n 的序列的字符串。例如，/a{2}/ 不匹配 “candy,” 中的 “a”，但是匹配 “caandy,” 中的两个 “a”，且匹配 “caaandy.” 中的前两个 “a”。
      n{X,} X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。例如，/a{2,}/ 不匹配 “candy” 中的 “a”，但是匹配 “caandy” 和 “caaaaaaandy.” 中所有的 “a”。
      n{X,Y} X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次，至多 Y 次时匹配。例如，/a{1,3}/ 不匹配 “cndy”，匹配 “candy,” 中的 “a”，”caandy,” 中的两个 “a”，匹配 “caaaaaaandy” 中的前面三个 “a”。注意，当匹配 “caaaaaaandy” 时，即使原始字符串拥有更多的 “a”，匹配项也是 “aaa”。
      n$ 匹配任何结尾为 n 的字符串。
      ^n 匹配任何开头为 n 的字符串。
      ?=n 匹配任何其后紧接指定字符串 n 的字符串。
      ?!n 匹配任何其后没有紧接指定字符串 n 的字符串。

    7.9 Error 错误对象

    Error 对象在错误发生时提供了错误的提示信息。

    • Error 对象属性

      • ErrorObject.name：设置或返回一个错误名。

        • EvalError：eval() 函数产生的错误。

          注意: 新版的 JavaScript 使用 SyntaxError 替代 EvalError。

        • RangeError：数值超出规定的范围。

        • ReferenceError：非法引用。

        • SyntaxError：语法错误。

        • TypeError：类型错误。

        • URIError：encodeURI() 函数产生的错误。

      • ErrorObject.message：设置或返回一个错误信息（字符串）。

    7.10 全局属性和全局函数

    JavaScript 全局属性和函数可用于创建 Javascript 对象。

    • JavaScript 全局属性

      • Infinity：代表正的无穷大的数值。

      • NaN：指示某个值是不是数字值。

      • undefined：指示未定义的值。

    • JavaScript 全局函数

      • encodeURI("uri")：把字符串编码为 URI。

      • decodeURI("uri")：解码某个编码的 URI。

      • encodeURIComponent("uri")：把字符串编码为 URI 组件。

      • decodeURIComponent("uri")：解码一个编码的 URI 组件。

      • escape(string)：对字符串进行编码。

      • unescape(string)：对由 escape() 编码的字符串进行解码。

      • eval(string)：计算 JavaScript 字符串，并把它作为脚本代码来执行。

      • isFinite(value)：检查某个值是否为有穷大的数。

      • isNaN(value)：检查某个值是否是数字。

      • Number(object)：把对象的值转换为数字。

      • String(object)：把对象的值转换为字符串。

      • parseFloat(string)：解析一个字符串并返回一个浮点数。

      • parseInt(string,radix)：解析一个字符串并返回一个整数。

        radix 表示要解析的数字的基数，取值介于 2 ~ 36 之间。

    8 BOM 浏览器对象

    8.1 window 顶层对象

    window 对象是 BOM 浏览器对象模型（Browser Object Model）的核心，window 对象是指当前的浏览器窗口。

    window 对象方法如下：

    • alert(str);：显示带有一段消息和一个确认按钮的警告框。

    • confirm(str);：显示带有一段消息和一个确认按钮、一个取消按钮的对话框。

    • prompt(str1,str2);：显示可提示用户输入的对话框，带有一段消息，一个输入文本框，一个确认按钮，一个取消按钮。

    • open();：打开一个新的浏览器窗口或查找一个已命名的窗口。

    • close();：关闭浏览器窗口。

    • print();：打印当前窗口的内容。

    • focus();：把键盘焦点给予有一个窗口。

    • blur();：把键盘焦点从顶层窗口移开。

    • moveBy();：可相对窗口的当前坐标，把窗口移动到指定的像素。

    • moveTo();：把窗口的左上角移动到指定的坐标。

    • resizeBy();：按照指定的像素调整窗口的大小。

    • resizeTo();：把窗口的大小调整到指定的宽度和高度。

    • scrollBy();：按照指定的像素值来滚动内容。

    • scrollTo();：把内容滚动到指定的坐标。

    8.2 history 子对象

    history 对象用于历史记录管理，该对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。

    从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的 history 对象与特定的 window 对象关联。

    • history 对象语法：window.history.[属性|方法] (window 可以省略)

    • history 对象属性：

      • history.length：返回浏览器历史列表中的 URL 数量。

    • history 对象方法：

      • history.back();：加载 history 列表中的前一个 URL。等同于点击浏览器的倒退按钮。

        history.back(); 相当于 window.history.go(-1);

      • history.forward();：加载 history 列表中的下一个 URL。等同于点击浏览器的前进按钮。

        history.back(); 相当于 window.history.go(1);

      • history.go(number);：加载 history 列表中的某个具体的页面。

        number设置为 1：表示前一个页面，go(1); 等价 forward();

        number设置为 0：表示当前页面。

        number设置为 -1：表示后一个页面，go(-1); 等价 back();

        number设置为其它数值：表示要访问的 URL 在 history 的 URL 列表中的相对位置。

    8.3 location 子对象

    location 用于 URL 操作，可获取或设置窗体的 URL，并且可以用于解析 URL。

    // Location 对象的各部分属性，如下所示：
// href     : http://www.dioit.com:8080/index.php?id1=1&id2=2#id3
// protocol : http:
// host     : www.dioit.com:8080
// hostname : www.dioit.com
// port     : 8080
// pathname : index.php
// search   : id1=1&id2=2
// hash     : id3

    • location 对象语法：window.location.[属性|方法] (window 可以省略)

    • location 对象属性：

      • location.href：设置或返回完整的 URL。

      • location.protocol：设置或返回当前 URL 的协议。

      • location.host：设置或返回当前 URL 的主机名和端口号。

      • location.hostname：设置或返回当前 URL 的主机名。

      • location.port：设置或返回当前 URL 的端口号。

      • location.pathname：设置或返回当前 URL 的路径部分。

      • location.search：设置或返回从（问号?）开始的 URL (查询部分)。

      • location.hash：设置或返回从（井号#）开始的 URL （锚）。

    • location 对象方法：

      • location.assign();：加载新的文档。

      • location.reload();：重新加载当前文档。

      • location.replace();：用新的文档替换当前文档。

    8.4 navigator 子对象

    navigator 对象包含有关浏览器的信息，用于浏览器信息检测，检测浏览器与操作系统的版本。

    • navigator 对象语法：window.navigator.[属性] (window 可以省略)

    • navigator 对象属性：

      • navigator.appCodeName：浏览器代码名的字符串表示。

      • navigator.appName：返回浏览器的名称。

      • navigator.appVersion：返回浏览器的平台和版本信息。

      • navigator.platform：返回运行浏览器的操作系统平台。

      • navigator.userAgent：返回由客户机发送服务器的 user-agent 头部的值。

        userAgent 是返回用户代理头的字符串表示（包括浏览器版本信息等的字符串）。

        可使用 navigator.userAgent 判断使用的是什么浏览器。

    8.5 screen 子对象

    screen 对象用于屏幕参数获取，可获取用户的屏幕信息。

    • screen 对象语法：window.screen.[属性] (window 可以省略)

    • screen 对象属性：

      • screen.availHeight：返回访问者屏幕窗口可以使用的高度，单位（像素）。

      • screen.availWidth：返回访问者屏幕窗口可以使用的宽度，单位（像素）。

      • screen.colorDepth：用户浏览器表示的颜色位数，通常为 32 位（每像素的位数）。

      • screen.pixelDepth：用户浏览器表示的颜色位数，通常为 32 位（每像素的位数）（IE 不支持此属性）。

      • screen.height：返回屏幕分辨率的高度，单位（像素）。

      • screen.width：返回屏幕分辨率的宽度，单位（像素）。

    8.6 Storage 子对象

    Web 存储 API 提供了 localStorage（本地存储）和 sessionStorage （会话存储）两个存储对象来对网页的数据进行添加、删除、修改、查询操作。

    • Storage 对象属性

      • length：返回存储对象中包含多少条数据。

    • Storage 对象方法

      • key(n)：返回存储对象中第 n 个键的名称。

      • getItem(keyname)：返回指定键的值。

      • setItem(keyname, value)：添加键和值，如果对应的值存在，则更新该键对应的值。

      • removeItem(keyname)：移除键。

      • clear()：清除存储对象中所有的键。

    • Web 存储 API

      • window.localStorage：在浏览器中存储 key/value 对。用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。

      • window.sessionStorage：在浏览器中存储 key/value 对。 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

    8.7 document 对象

    document 对象是 window 对象的一部分，可通过 window.document 对其进行访问。当浏览器载入 HTML 文档，HTML 文档就会成为 Document 对象。Document 对象是 HTML 文档的根节点。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

    • document 对象语法：window.document.[属性|方法] (window 可以省略)

    • document 对象属性：

      • document.activeElement：返回当前获取焦点的元素。

      • document.anchors：返回对文档中所有 Anchor 对象的引用。

      • document.baseURI：返回文档的绝对基础 URI。

      • document.body：返回文档的 body 元素。

      • document.cookie：设置或返回与当前文档有关的所有 cookie。

      • document.doctype：返回与文档相关的文档类型声明 DTD。

      • document.documentElement：返回文档的根节点。

      • document.documentMode：返回用于通过浏览器渲染文档的模式。

      • document.documentURI：设置或返回文档的位置。

      • document.domain：返回当前文档的域名。

      • document.embeds：返回文档中所有嵌入的内容（embed）集合。

      • document.forms：返回对文档中所有 Form 对象引用。

      • document.images：返回对文档中所有 Image 对象引用。

      • document.implementation：返回处理该文档的 DOM Implementation 对象。

      • document.inputEncoding：返回用于文档的编码方式（在解析时）。

      • document.lastModified：返回文档被最后修改的日期和时间。

      • document.links：返回对文档中所有 Area 和 Link 对象引用。

      • document.readyState：返回文档状态 (载入中……).

      • document.referrer：返回载入当前文档的 URL。

      • document.scripts：返回页面中所有脚本的集合。

      • document.strictErrorChecking：设置或返回是否强制进行错误检查。

      • document.title：返回当前文档的标题。

      • document.URL：返回文档完整的 URL。

    • document 对象方法：

      • document.getElementById(id属性值);：返回对拥有唯一 id 属性 的第一个对象的引用。

      • document.getElementsByName(name属性值);：返回带有指定名称属性的节点对象集合（和数组类似，有 length 属性）。

      • document.getElementsByClassName(class属性值);：返回文档中所有指定类名属性的元素集合，作为 NodeList 对象。

      • document.getElementsByTagName(标签名);：返回带有指定标签名称的节点对象集合（和数组类似，有 length 属性）。

      • document.write();：向文档写 HTML 表达式 或 JavaScript 代码。

      • document.writeln();：等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

      • document.open();：打开一个流，以收集来自任何 document.write(); 或 document.writeln(); 方法的输出。

      • document.close();：关闭用 document.open(); 方法打开的输出流，并显示选定的数据。

      • document.createElement("tagName");：创建一个新的元素节点。

        "tagName"：字符串值，这个字符串用来指明创建元素的类型。

      • document.createAttribute();：创建一个属性节点。

      • document.createTextNode("给定文本");：创建一个新的文本节点（包含给定文本）。

      • document.createComment();：创建注释节点。

      • document.createDocumentFragment();：创建空的 DocumentFragment 对象，并返回此对象。

      • document.renameNode();：重命名元素或者属性节点。

      • document.normalize();：删除空文本节点，并连接相邻节点。

      • document.normalizeDocument();：删除空文本节点，并连接相邻节点的。

      • document.addEventListener();：向文档添加句柄。

      • document.removeEventListener();：移除文档中（由 addEventListener(); 添加）的事件句柄。

      • document.adoptNode(node);：从另外一个文档返回 adapded 节点到当前文档。

      • document.importNode();：把一个节点从另一个文档复制到该文档以便应用。

      • document.querySelector();：返回文档中匹配指定的CSS选择器的第一元素。

      • document.querySelectorAll();：返回文档中匹配的CSS选择器的所有元素节点列表。

    9 DOM 对象

    9.1 DOM 介绍

    DOM 是文档对象模型（Document Object Model），用于定义访问和处理 HTML 文档的标准方法。DOM 将 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。

    HTML 文档可以表示为由节点构成的集合：

    • 文档节点：HTML 文档。

    • 元素节点：<html>、<body>、<p> 等元素标签，都是元素节点。

    • 属性节点：元素标签的属性，如 <a> 标签的链接属性href。

    • 文本节点：HTML 文档中，给用户可视的内容。

    • 注释节点：HTML 文档注释。

    9.2 DOM 元素对象、NodeList 对象

    • DOM 元素对象代表着一个 HTML 元素。元素对象的子节点可以是：

      • 元素节点

      • 文本节点

      • 注释节点

    • NodeList 对象 代表了节点列表，类似于 HTML 元素的子节点集合。

    • DOM 元素对象属性

      • element.nodeName：是只读属性，返回一个字符串（元素的标记名），返回值是大写字母）其内容是给定元素的节点名字。

        • 如果是元素节点，返回这个元素的名字（与标签名相同，相当于tagName属性）。

        • 如果是属性节点，返回这个属性的名字。

        • 如果是文本节点，返回一个 #text 字符串。

        • 如果是文档节点，返回一个 #document 字符串。

      • element.nodeType：是只读属性，返回一个整数，数值代表给定元素的节点类型。

        nodeType 经常跟（if/switch 条件判断语句）配合使用，确保不会在错误的节点类型上，执行错误的操作。

        • 如果是元素节点，返回数值 1。

        • 如果是属性节点，返回数值 2。

        • 如果是文本节点，返回数值 3。

        • 如果是注释节点，返回数值 8。

        • 如果是文档节点，返回数值 9。

      • element.nodeValue：返回给定元素的节点值。

        nodeValue 是读写属性，但不能设置元素节点的值。一般只用来设置文本节点的值，而属性节点的值建议用 document.setAttribute() 进行设置。

        • 如果是元素节点，返回 null 或 undefined；

        • 如果是属性节点，返回这个属性节点的属性值。

        • 如果是文本节点，返回这个文本节点的内容本身。

      • element.childNodes：返回元素的一个子节点数组，数组内容由给定元素节点的子节点构成。如果选定的 element 没有子节点，则该属性返回不包含节点的 NodeList。

      • element.children：返回元素的子元素的集合。

      • element.firstChild：返回 element 子节点列表中的第一个子节点，与 element.childNodes[0] 是同样的效果 。

      • element.lastChild：返回 element 子节点列表中的最后一个子节点，与 elementNode.childNodes[elementNode.childNodes.length-1] 是同样的效果。

      • element.parentNode：返回元素的父节点，父节点只能有一个。

        可通过 element.parentNode.parentNode 访问父节点的父节点（即祖父节点）。

        parentElement=targetElement.parentNode; 通过父节点获取父元素。

      • element.nextSibling：返回该元素下一个紧跟着的兄弟节点（处于同一树层级中）。如果无此下一个紧跟的兄弟节点，则该属性返回 null。

      • element.nextElementSibling：返回指定元素之后的下一个兄弟元素（相同节点树层中的下一个元素节点）。

      • element.previousSibling：返回该元素上一个紧跟着的兄弟节点（处于同一树层级中）。如果无此上一个紧跟的兄弟节点，则该属性返回 null。

      • element.previousElementSibling：返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）。

      • element.accessKey：设置或返回accesskey一个元素。

      • element.attributes：返回一个元素的属性数组。

      • element.classList：返回元素的类名，作为 DOMTokenList 对象。

      • element.className：设置或返回元素的class属性。

      • element.clientTop：表示一个元素的顶部边框的宽度，以像素表示。

      • element.clientLeft：表示一个元素的左边框的宽度，以像素表示。

      • element.clientHeight：在页面上返回内容的可视高度（高度包含内边距（padding），不包含边框（border），外边距（margin）和滚动条）。

      • element.clientWidth：在页面上返回内容的可视宽度（宽度包含内边距（padding），不包含边框（border），外边距（margin）和滚动条）。

      • element.contentEditable：设置或返回元素的内容是否可编辑。

      • element.dir：设置或返回一个元素中的文本方向。

      • element.firstElementChild：返回元素的第一个子元素。

      • element.id：设置或者返回元素的 id。

      • element.innerHTML：设置或者返回元素的内容。

      • element.isContentEditable：如果元素内容可编辑返回 true，否则返回false

      • element.lang：设置或者返回一个元素的语言。

      • element.lastElementChild：返回指定元素的最后一个子元素。

      • element.namespaceURI：返回命名空间的 URI。

      • element.offsetHeight：返回任何一个元素的高度包括边框（border）和内边距（padding），但不包含外边距（margin）。

      • element.offsetWidth：返回元素的宽度，包括边框（border）和内边距（padding），但不包含外边距（margin）。

      • element.offsetLeft：返回当前元素的相对水平偏移位置的偏移容器。

      • element.offsetParent：返回元素的偏移容器。

      • element.offsetTop：返回当前元素的相对垂直偏移位置的偏移容器。

      • element.ownerDocument：返回元素的根元素（文档对象）。

      • element.scrollHeight：返回整个元素的高度（包括带滚动条的隐蔽的地方）。

      • element.scrollLeft：返回当前视图中的实际元素的左边缘和左边缘之间的距离。

      • element.scrollTop：返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离。

      • element.scrollWidth：返回元素的整个宽度（包括带滚动条的隐蔽的地方）。

      • element.style：设置或返回元素的样式属性。

      • element.tabIndex：设置或返回元素的标签顺序。

      • element.tagName：作为一个字符串返回某个元素的标记名（大写）。

      • element.textContent：设置或返回一个节点和它的文本内容。

      • element.title：设置或返回元素的title属性。

    • DOM 元素对象方法

      • element.addEventListener(event,function,useCapture);：向指定元素添加事件句柄。

      • element.removeEventListener(event,function,useCapture);：移除由 addEventListener() 方法添加的事件句柄。

      • element.appendChild(newChildNode);：在元素的子节点列表最后，添加一个新的子元素节点。

      • element.cloneNode(BooleanValue);：克隆某个元素。

      • element.compareDocumentPosition(node);：比较两个元素的文档位置。

      • element.focus();：设置文档或元素获取焦点。

      • element.getAttribute(属性名);：只能通过元素节点对象调用的函数，通过元素节点的属性名称获取属性的值。

      • element.getAttributeNode(属性名);：返回指定属性节点。

      • element.getElementsByTagName(标签名);：返回指定标签名的所有子元素集合。

      • element. getElementsByClassName(类名);：返回文档中所有指定类名的元素集合，作为 NodeList 对象。

      • element.getFeature();：返回指定特征的执行APIs对象。

      • element.getUserData();：返回一个元素中关联键值的对象。

      • element.hasAttribute(属性名);：如果元素中存在指定的属性返回 true，否则返回false。

      • element.hasAttributes();：如果元素有任何属性返回true，否则返回false。

      • element.hasChildNodes();：返回一个元素是否具有任何子元素。

      • element.hasFocus();：返回布尔值，检测文档或元素是否获取焦点。

      • element.insertBefore(newNode,existingNode);：现有已存在的子元素节点之前插入一个新的子元素节点。

      • element.isDefaultNamespace(namespaceURI);：如果指定了namespaceURI 返回 true，否则返回 false。

      • element.isEqualNode(node);：检查两个元素是否相等。

      • element.isSameNode(node);：检查两个元素所有有相同节点。

      • element.isSupported(feature,version);：如果在元素中支持指定特征返回 true。

      • element.matches(选择器);：如果元素匹配指定的 CSS 选择器，matches() 方法就返回 true，否则返回 false。

      • element.normalize();：使得此成为一个”normal”的形式，其中只有结构（如元素，注释，处理指令，CDATA节和实体引用）隔开Text节点，即元素（包括属性）下面的所有文本节点，既没有相邻的文本节点也没有空的文本节点。

      • document.querySelector(选择器);：返回匹配指定 CSS 选择器元素的第一个子元素。

      • document.querySelectorAll(选择器);：返回匹配指定 CSS 选择器元素的所有子元素节点列表。

      • element.removeAttribute(属性名);：从元素中删除指定的属性。

      • element.removeAttributeNode(属性节点);：删除指定属性节点并返回移除后的节点。

      • element.removeChild(targrtNode);：从一个给定元素节点中，删除一个指定的子元素节点。如果删除成功，返回被删除的节点。如果删除失败，则返回 NULL。

      • element.replaceChild(newNode,oldNode);：从一个给定元素节点中，把旧的子元素节点，替换成新的子元素节点。

      • element.setAttribute("属性名","属性值");：只能通过元素节点对象调用的函数，在元素节点增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。如果不存在该属性名，将创建一个新属性。

      • element.setAttributeNode(nodeValue);：设置或者改变指定属性节点。

      • element.setUserData();：在元素中为指定键值关联对象。

      • element.toString();：一个元素转换成字符串。

    • NodeList 对象属性

      • nodelist.length：返回节点列表的节点数目。

        • document.body.childNodes.length;：返回 body 元素子节点的的数目

    • NodeList 对象方法

      • nodelist.item(index);：返回某个元素基于文档树的索引

        • document.body.childNodes.item(0);：返回元素的第一个子节点。

        • document.body.childNodes[0];：返回元素的第一个子节点。

    9.3 DOM 属性对象、NamedNodeMap 对象

    • DOM 属性对象

      DOM 属性对象代表一个 HTML 属性，HTML 属性总是属于 HTML 元素。

    • NamedNodeMap 对象

      NamedNodeMap 对象表示一个无顺序的节点列表，可通过节点名称来访问 NamedNodeMap 对象中的节点。

    • DOM 属性对象属性

      • attr.isId：如果属性是 ID 类型，则 isId 属性返回 true，否则返回 false。

      • attr.name：返回属性名称

      • attr.value：设置或者返回属性值

      • attr.specified：如果属性被指定返回 true ，否则返回 false

    • NamedNodeMap 对象属性

      • nodemap.length：返回节点列表的节点数目。

    • NamedNodeMap 对象方法

      • nodemap.getNamedItem(nodeName);：从节点列表中返回的指定属性节点。

      • nodemap.item(index);：返回节点列表中处于指定索引号的节点。

      • nodemap.removeNamedItem(nodeName);：删除指定属性节点

      • nodemap.setNamedItem(node);：设置指定属性节点(通过名称)

    9.4 DOM 事件对象

    HTML DOM 事件允许 Javascript 在HTML文档元素中注册不同事件处理程序。

    事件通常与函数结合使用，函数不会在事件发生前被执行。

    • 鼠标事件

      事件 描述
      onclick 当用户点击某个对象时调用的事件句柄。
      oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发。
      ondblclick 当用户双击某个对象时调用的事件句柄。
      onmousedown 鼠标按钮被按下。
      onmouseup 鼠标按键被松开。
      onmouseenter 当鼠标指针移动到元素上时触发。
      onmouseleave 当鼠标指针移出元素时触发。
      onmouseover 鼠标移到某元素之上。
      onmouseout 鼠标从某元素移开。
      onmousemove 鼠标被移动。

    • 键盘事件

      事件 描述
      onkeydown 某个键盘按键被按下
      onkeypress 某个键盘按键被按下并松开
      onkeyup 某个键盘按键被松开

    • 剪贴板事件

      事件 描述
      oncopy 该事件在用户拷贝元素内容时触发。
      oncut 该事件在用户剪切元素内容时触发。
      onpaste 该事件在用户粘贴元素内容时触发。

    • 打印事件

      事件 描述
      onbeforeprint 该事件在页面即将开始打印时触发。
      onafterprint 该事件在页面已经开始打印，或者打印窗口已经关闭时触发。

    • 表单事件

      事件 描述
      onfocus 元素获取焦点时触发。
      onblur 元素失去焦点时触发。
      onfocusin 元素即将获取焦点时触发。
      onfocusout 元素即将失去焦点时触发。
      oninput 元素获取用户输入时触发。
      onsubmit 表单提交时触发。
      onreset 表单重置时触发。
      onchange 该事件在表单元素的内容改变时触发。（<input>、<keygen>、<select>、<textarea>）
      onsearch 用户向搜索域输入文本时触发。（<input="search">）
      onselect 用户选取文本时触发。（<input>、<textarea>）

    • 拖动事件

      事件 描述
      ondragstart 该事件在用户开始拖动元素时触发。
      ondrag 该事件在元素正在拖动时触发。
      ondragend 该事件在用户完成元素的拖动时触发。
      ondragenter 该事件在拖动的元素进入放置目标时触发。
      ondragover 该事件在拖动元素在放置目标上时触发。
      ondrop 该事件在拖动元素放置在目标区域时触发。
      ondragleave 该事件在拖动元素离开放置目标时触发。

    • 多媒体（Media）事件

      事件 描述
      oncanplay 事件在用户可以开始播放视频/音频（audio/video）时触发。
      onplay 事件在视频/音频（audio/video）开始播放时触发。
      onpause 事件在视频/音频（audio/video）暂停时触发。
      onended 事件在视频/音频（audio/video）播放结束时触发。
      oncanplaythrough 事件在视频/音频（audio/video）可以正常播放且无需停顿和缓冲时触发。
      ondurationchange 事件在视频/音频（audio/video）的时长发生变化时触发。
      onplaying 事件在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发。
      onwaiting 事件在视频由于要播放下一帧而需要缓冲时触发。
      onloadstart 事件在浏览器开始寻找指定视频/音频（audio/video）触发。
      onprogress 事件在浏览器下载指定的视频/音频（audio/video）时触发。
      onerror 事件在视频/音频（audio/video）数据加载期间发生错误时触发。
      onloadeddata 事件在浏览器加载视频/音频（audio/video）当前帧时触发触发。
      onabort 事件在视频/音频（audio/video）终止加载时触发。
      onloadedmetadata 事件在指定视频/音频（audio/video）的元数据加载后触发。
      onseeking 事件在用户开始重新定位视频/音频（audio/video）时触发。
      onseeked 事件在用户重新定位视频/音频（audio/video）的播放位置后触发。
      onstalled 事件在浏览器获取媒体数据，但媒体数据不可用时触发。
      onsuspend 事件在浏览器读取媒体数据中止时触发。
      ontimeupdate 事件在当前的播放位置发送改变时触发。
      onratechange 事件在视频/音频（audio/video）的播放速度发送改变时触发。
      onvolumechange 事件在音量发生改变时触发。
      onemptied 当期播放列表为空时触发。

    • 框架/对象（Frame/Object）事件

      事件 描述
      onabort 图像的加载被中断。（<object>）
      onbeforeunload 该事件在即将离开页面（刷新或关闭）时触发
      onerror 在加载文档或图像时发生错误。（<object>、<body> 和 <frameset>）
      onhashchange 该事件在当前 URL 的锚部分发生修改时触发。
      onload 一张页面或一幅图像完成加载。
      onpageshow 该事件在用户访问页面时触发。
      onpagehide 该事件在用户离开当前网页跳转到另外一个页面时触发
      onresize 窗口或框架被重新调整大小。
      onscroll 当文档被滚动时发生的事件。
      onunload 用户退出页面。（<body> 和 <frameset>）

    • 过渡事件

      事件 描述
      transitionend 该事件在 CSS 完成过渡后触发。

    • 动画事件

      事件 描述
      animationstart 该事件在 CSS 动画开始播放时触发。
      animationend 该事件在 CSS 动画结束播放时触发。
      animationiteration 该事件在 CSS 动画重复播放时触发。

    • 其他事件

      事件 描述
      ononline 该事件在浏览器开始在线工作时触发。
      onoffline 该事件在浏览器开始离线工作时触发。
      onmessage 该事件通过或者从对象（WebSocket, Web Worker, Event Source 或者子 frame 或父窗口）接收到消息时触发。
      onwheel 该事件在鼠标滚轮在元素上下滚动时触发。
      onpopstate 该事件在窗口的浏览历史（history 对象）发生改变时触发。
      onshow 该事件当 <menu> 元素在上下文菜单显示时触发。
      ontoggle 该事件在用户打开或关闭 <details> 元素时触发。
      onstorage 该事件在 Web Storage（HTML 5 Web 存储）更新时触发。
      visibilitychange 该事件用于检测当前页面的可见性状态是否发生变化。

    • Event 事件对象常量

      1. CAPTURING-PHASE：当前事件，处于捕获阶段。

        事件从 Document 对象沿着文档树向下传递给目标节点。如果目标的任何一个先辈专门注册了捕获事件句柄，那么在事件传播过程中运行这些句柄。

      2. AT-TARGET：当前事件，处于目标阶段。在评估目标事件。

        直接注册砸目标上的适合的事件句柄将运行。这与 0 级事件模型提供的事件处理方法相似。

      3. BUBBLING-PHASE：当前事件，处于冒泡阶段。

        在此阶段，事件将从目标元素向上传播回或起泡回 Document 对象的文档层次。

    • Event 事件对象属性

      • event.bubbles：返回布尔值，指示事件是否是起泡事件类型。

      • event.cancelable：返回布尔值，指示事件是否可拥可取消的默认动作。

        用 preventDefault() 方法可以取消与事件关联的默认动作。

      • event.currentTarget：返回其监听器触发事件的节点。即当前处理该事件的元素、文档或窗口。在捕获和起泡阶段，该属性是非常有用的。

      • event.eventPhase：返回事件传播的当前阶段。

      • event.target：返回事件的目标节点（触发该事件的节点）。例如生成事件的元素、文档或窗口。

      • event.timeStamp：返回一个时间戳。指示发生事件的日期和时间（从 epoch 开始的毫秒数）。

        epoch 是一个事件参考点，是客户机启动的时间。

      • event.type：返回发生的事件的类型（当前 Event 对象表示的事件的名称）。

    • Event 事件对象方法

      • initEvent();：初始化新创建的 Event 对象的属性。

      • preventDefault();：通知浏览器不要执行与事件关联的默认动作。

      • stopPropagation();：不再派发事件。

    • 目标事件对象方法

      • addEventListener();：允许在目标事件中注册监听事件（IE8 = attachEvent()）。

      • dispatchEvent();：允许发送事件到监听器上（IE8 = fireEvent()）。

      • removeEventListener();：运行一次注册在事件目标上的监听事件（IE8 = detachEvent()）。

    • 事件监听对象方法

      • handleEvent();：把任意对象注册为事件处理程序。

    • 文档事件对象方法

      • createEvent();：创建自定义事件对象。

    • 鼠标事件对象属性

      • button：返回当事件被触发时，哪个鼠标按钮被点击。

      • clientX：返回当事件被触发时，鼠标指针的水平坐标。

      • clientY：返回当事件被触发时，鼠标指针的垂直坐标。

      • screenX：返回当某个事件被触发时，鼠标指针的水平坐标。

      • screenY：返回当某个事件被触发时，鼠标指针的垂直坐标。

      • relatedTarget：返回与事件的目标节点相关的节点。

    • 鼠标事件对象方法

      • initMouseEvent();：初始化鼠标事件对象的值。

    • 键盘事件对象属性

      • key：在按下按键时返回按键的标识符。

      • ctrlKey：返回当事件被触发时，”CTRL” 键是否被按下。

      • altKey：返回当事件被触发时，”ALT” 是否被按下。

      • shiftKey：返回当事件被触发时，”SHIFT” 键是否被按下。

      • metaKey：返回当事件被触发时，”meta” 键是否被按下。

      • which：返回 onkeypress 事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。

      • keyCode：返回 onkeypress 事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。

      • charCode：返回 onkeypress 事件触发键值的字母代码。

      • Location：返回按键在设备上的位置。

    • 键盘事件对象方法

      • initKeyboardEvent();：初始化键盘事件对象的值。

    9.5 DOM 控制台对象

    Console 控制台对象提供了访问浏览器调试模式的信息到控制台。

    控制台需要可见（浏览器按下 F12 打开控制台）。

    • Console 控制台对象方法

      • console.assert(expression, message);：如果第一个参数断言为 false，则在信息到控制台输出错误信息。

      • console.warn(message);：输出警告信息，信息最前面加一个黄色三角，表示警告。该方法对于开发过程进行测试很有帮助。

      • console.error(message);：输出错误信息到控制台。该方法对于开发过程进行测试很有帮助。

      • console.info(message);：控制台输出一条信息。该方法对于开发过程进行测试很有帮助。

      • console.log(message);：控制台输出一条信息。该方法对于开发过程进行测试很有帮助。

      • console.table(tabledata, tablecolumns);：以表格形式显示数据。第一个参数是必需的，且对象类型需要是对象或数组，对应的数据会填充到表格中。控制台需要可见（浏览器按下 F12 打开控制台）。

      • console.clear();：清除控制台上的信息。在执行成功后，会在控制台输出: “Console was cleared”。

      • console.trace(label);：用于显示当前执行的代码在堆栈中的调用路径。

      • console.count(label);：记录 count()调用次数，一般用于计数。在调用时会将数字（调用次数）写入到控制台。

      • console.time(label);：作为计时器的起始方法，开始计时间。与 timeEnd() 联合使用，用于算出一个操作所花费的准确时间。

      • console.timeEnd(label);：作为计时器的结束方法，计时结束。与 time() 联合使用，用于算出一个操作所花费的准确时间。

      • console.group(label);：在控制台创建一个信息分组。 一个完整的信息分组以 console.group() 开始，以 console.groupEnd() 结束。

      • console.groupEnd();：设置当前信息分组结束。 一个完整的信息分组以 console.group() 开始，以 console.groupEnd() 结束。

      • console.groupCollapsed(label);：在控制台创建一个信息分组。 类似 console.group() ，但它默认是折叠的。

    9.6 DOM CSS 样式声明对象

    CSS 样式声明对象（CSS Style Declaration）表示一个 CSS 属性-值（property-value）对的集合。

    • CSS 样式声明对象属性

      • element.style.cssText：设置或返回样式声明文本，cssText 对应的是 HTML 元素的 style 属性。

      • element.style.length：返回样式中包含多少条声明。

      • object.parentRule：返回包含当前规则的规则。

    • CSS 样式声明对象方法

      • object.getPropertyPriority(propertyname);：返回指定的 CSS 属性是否设置了 !important 属性。

      • object.getPropertyValue(propertyname);：返回指定的 CSS 属性值。

      • style.item(index);：通过索引方式返回 CSS 声明中的 CSS 属性名。

      • object.setProperty(propertyname,value,priority);：在 CSS 声明块中新建或者修改 CSS 属性。

      • object.removeProperty(propertyname);：移除 CSS 声明中的 CSS 属性。

    9.7 DOM HTML 集合对象

    HTML 集合对象（HTML Collection）表示一个 HTML 元素的集合，类似一个包含 HTML 元素的数组列表。

    例如通过 getElementsByTagName(标签名); 方法，返回的就是一个 HTML Collection 集合对象。

    • HTML 集合对象属性

      • HTMLCollection.length：返回 HTMLCollection 中元素的数量。

    • HTML 集合对象方法

      • HTMLCollection.item(index);：返回 HTML Collection 集合对象中指定索引的元素。也可以使用HTMLCollection[index]。

      • HTMLCollection.namedItem(name);：返回 HTML Collection 集合对象中指定 ID 或 name 属性的元素。也可以使用HTMLCollection[name]。

    10 DOM 对象操作示例

    10.1 DOM 获取 HTML 节点示例

    • 通过 HTML 元素的 id 属性值，获取元素节点：

      document.getElementById("id属性值");

    • 通过 HTML 元素的 name 属性值，获取元素节点集合：

      document.getElementsByName(name属性值);

    • 通过 HTML 元素的 class 属性值，获取元素节点集合：document.getElementsByClassName(class属性值);

    • 通过 HTML 元素的 tagName 标签名，获取元素节点集合：document.getElementsByTagName(标签名);

    10.2 DOM 操作 HTML 元素示例

    • Object.innerHTML，可用于获取或替换 HTML 元素的内容。

      • Object：是获取的元素对象，例如通过object1=document.getElementById("id属性值"); 等方法获取的元素节点。

    • Object.className = new_class_name;，设置或返回 Object 对象元素的类名。

    10.3 DOM 操作 CSS 样式示例

    • Object.style.property=new_style_Value;，用于改变 HTML 元素的样式。

      • Object：是获取的元素对象，例如通过object1=document.getElementById("id属性值"); 等方法获取的元素节点。

      • property：是样式属性，常见样式属性如下：

        • backgroundColor：HTML 元素的背景颜色。

        • width：HTML 元素的宽带。

        • height：HTML 元素的高度。

        • color：HTML 元素的颜色。

        • font：HTML 元素的字体属性。

        • fontFamily：HTML 元素的字体类型。

        • fontSize：HTML 元素的字体大小。

    • Object.style.display = none;：将 Object 对象元素隐藏，关闭显示。

    • Object.style.display = block;：将 Object 对象元素显示为区块级。

    11 常用属性和函数方法

    11.1 网页内容输出（document）

    • 输出内容：document.write(字符串或变量或 HTML 标签);

      document.write 可用于直接向 HTML 输出流写内容，直接在网页中输出内容。

    document.write("hello world!"); //输出内容：双引号""里包含的内容。
​
var mystr="hello world!"; //声明变量，并定义初值。
document.write(mystr); //输出内容：变量名存储的内容。
document.write(mystr+"123"); //多项内容之间用+号连接，再输出。
​
var mystr="hello";
document.write(mystr+"<br>");//输出hello后，输出一个换行符
document.write("JavaScript");
document.write("&nbsp;");//输出空格

    11.2 网页用户交互（window）

    • 警告：alert(str);

    • alert 会弹出消息对话框，用于提示用户相关信息。

      alert 带有一个确定按钮。弹出消息对话框后，必须点击确定按钮后，才可继续其它操作。

      • str：显示在消息对话框中的文本。

    var mysrt = "hello world!";
alert(mysrt);

    • 确认：confirm(str);

      confirm 会弹出消息对话框，用于提示用户相关信息，并让用户做选择的动作。

      confirm 带有一个确定按钮和一个取消按钮。 弹出消息对话框后，必须点击确定/取消按钮后，才可继续其它操作。

      • str：显示在消息对话框中的文本。

      • 返回值：Boolean 值。当点击”确定”按钮时，返回true；当点击”取消”按钮时，返回false。

    var response_massage=confirm("确定或取消？");
if(response_massage==true){
    document.write("确定");
}
else {
    document.write("取消");
}

    • 提问：prompt(str1,str2);

      prompt 会弹出消息对话框，用于询问一些需要与用户交互的信息，并让用户做出回应。

      prompt 带有一个文本输入框，带有一个确定按钮和一个取消按钮。弹出消息对话框后，必须点击确定/取消按钮后，才可继续其它操作。

      • str1：要显示在消息对话框中的文本，不可修改。

      • str2：文本输入框中的默认显示内容，可以修改。

      • 返回值：点击确定按钮，文本输入框中的内容将作为函数返回值。若点击取消按钮，将返回 null。

    var input_content=prompt("请输入内容，并点击确定按钮！");
if(myname!=null) {
    alert("你输入的内容是："+input_content);
}
else {
    alert("你点击的是取消按钮！");
}

    11.3 网页窗口操作（window）

    • 打开窗口：window.open([URL], [窗口名称], [参数字符串]);

      window.open() 可以新建一个浏览器窗口，或者查找一个已经存在的浏览器窗口。

      • URL：可选参数，在窗口中要显示网页的网址或路径。

        如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。

      • 窗口名称：可选参数，被打开窗口的名称。

        窗口名称由字母、数字和下划线字符组成，不能包含空格，且多个窗口的名称必须唯一。_blank 表示在新窗口显示目标网页，_self表示在当前窗口显示目标网页，_top用于框架网页中在上部窗口中显示目标网页。

      • 参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。

        • top=Number：设置窗口顶部和屏幕顶部的像素距离。

        • left=Number：设置窗口左边和屏幕左边的像素距离。

        • width=Number：设置窗口的宽度。

        • height=Number：设置窗口的高度。

        • menubar=yes|no：设置窗口有没有菜单栏。

        • toolbar=yes|no：设置窗口有没有工具栏。

        • status=yes|no：设置窗口有没有状态栏。

        • scrollbars=yes|no：设置窗口有没有滚动条。

    /*
打开http://www.dioit.com网站，新窗口，距离屏幕顶部100px，距离屏蔽坐标100px，窗口大小为800px * 600px，无菜单栏，无工具栏，无状态栏，有滚动条窗口：
*/
window.open('http://www.dioit.com','_blank','top=100,left=100,width=800,height=600,menubar=no,toolbar=no, status=no,scrollbars=yes');

    • 关闭窗口：window.close();或<窗口对象>.close();

      window.close() 用于关闭当前窗口。

      <窗口对象>.close() 用于关闭指定窗口。

    var window1=window.open('http://www.dioit.com'); //将打开的窗口对象，存储在变量window1中。
window1.close(); //window1窗口关闭

    11.4 JavaScript 计时器

    在 JavaScript 中，可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。

    （1）间隔性触发计时器：每隔一定的时间间隔就触发一次。

    • setInterval(代码,交互时间) 或setInterval("代码()",交互时间)：在每隔（指定的）时间，执行一次代码。

      • 代码：要调用的函数或要执行的程序块。

      • 交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒为单位（1s=1000ms）。

      • 返回值：一个可以传递给 clearInterval() 从而取消对”代码”的周期性执行的值。

    • clearInterval(id_of_setInterval)：取消 setInterval() 的设置。

      • id_of_setInterval：由 setInterval() 返回的 ID 值。该值标识要取消的间隔性执行代码块。

      （2）一次性计时器：仅在指定的延迟时间之后触发一次。

    • setTimeout(代码,延迟时间) 或 setTimeout("代码()",延迟时间) ：在指定的延迟时间之后，执行代码。

      • 代码：要调用的函数或要执行的程序块。

      • 延时时间：在执行代码前需等待的时间，以毫秒为单位（1s=1000ms)。

    • clearTimeout(id_of_setTimeout)：取消 setTimeout() 的设置。

      • id_of_setTimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

    12 浏览器网页尺寸

    12.1 浏览器窗口可视区域

    获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法：

    var browserVisibleWidth= document.documentElement.clientWidth
      || document.body.clientWidth;
var browserVisibleHeight= document.documentElement.clientHeight
      || document.body.clientHeight;

    Document 对象的 body 属性，对应 HTML 文档的 <body> 标签：

    • document.body.clientWidth：HTML文档所在窗口的当前宽度。

    • document.body.clientHeight：HTML文档所在窗口的当前高度。

      对于 Internet Explorer 8、7、6、5：

    • document.documentElement.clientWidth：HTML文档所在窗口的当前宽度。

    • document.documentElement.clientHeight：HTML文档所在窗口的当前高度。

      对于 IE9+、Chrome、Firefox、Opera、Safari：

    • window.innerWidth：表示的文档显示区域的宽度，不包括工具栏和地址栏等区域；

    • window.innerHeight：表示的文档显示区域的高度，不包括工具栏和地址栏等区域；

    12.2 网页内容尺寸

    scrollWidth 和 scrollHeight 属性，可用于获取网页内容宽度和高度。

    var webpageContentWidth=document.documentElement.scrollWidth
   || document.body.scrollWidth;
var webpageContentHeight=document.documentElement.scrollHeight
   || document.body.scrollHeight;

    12.3 网页内容尺寸(含滚动条)

    offsetWidth 和 offsetHeight 属性，可用于获取网页内容宽度和高度（包括滚动条等边线，且会随窗口的显示大小改变）。

    var webpageWidth= document.documentElement.offsetWidth
    || document.body.offsetWidth;
var webpageHeight= document.documentElement.offsetHeight
    || document.body.offsetHeight;

    12.4 网页卷去的距离

    • Object.scrollLeft：设置或获取（位于给定对象最左边界）与（窗口中目前可见内容的最左端）之间的距离。

    • Object.scrollTop：设置或获取（位于给定对象最顶端）与（窗口中目前可见内容的最顶端）之间的距离。

    12.5 网页的偏移量

    • Object.offsetLeft：获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 。

      offsetParent：CSS 布局中设置 postion属性（relative、absolute、fixed）的父容器，从最近的父节点开始，一层层向上找，直到 HTML 的 body 元素。

    • Object.offsetTop：获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置 。

      offsetParent：CSS 布局中设置 postion属性（relative、absolute、fixed）的父容器，从最近的父节点开始，一层层向上找，直到 HTML 的 body 元素。

    13 学习建议

    13.1 学习路径

    学习 JavaScript，可以构建从简单的网页交互到复杂的全栈应用的完整解决方案。

    1. 基础：语法 → DOM → 异步编程（Promise）

    2. 进阶：ES6+ → TypeScript → 框架原理

    3. 工程化：单元测试（Jest）→ CI/CD → 性能优化

    4. 拓展：Node.js 服务端开发 → WebGL 可视化

    13.2 学习资源

    • 官方文档：

      • MDN JavaScript 教程

      • ECMAScript 标准文档

    • 入门教程：

      • 菜鸟教程 JavaScript 教程

      • 《JavaScript 基础教程（第9版）》

    • 进阶学习：

      • 《JavaScript 高级程序设计》

    关键资源：

    • MDN Web Docs（权威文档）

    • JavaScript.info（现代教程）

    • StackBlitz（在线 IDE）

    • Node.js 官方指南（服务端开发）

    14 总结

    JavaScript 已从简单的网页脚本发展为全平台通用语言，其生态持续引领 Web 技术革新，2025 年市场份额仍保持 >95% 的浏览器覆盖率（StatCounter 数据）。

    JavaScript凭借其灵活性、全栈能力及庞大生态（npm库年下载量超万亿次），稳居全球最流行语言前三。掌握其核心概念（原型链、异步、闭包）及现代框架，是成为全栈工程师的必经之路。

    JavaScript 不断发展，ES6 + 引入了许多新特性，如箭头函数、解构赋值、扩展运算符等，使代码更加简洁高效。它是 Web 开发不可或缺的一部分，并且在其他领域也有广泛应用。

    JavaScript 从最初的网页脚本语言，已演变为覆盖全栈开发、跨平台应用、物联网和 AI 的“全能选手”。其核心优势在于灵活的语法、庞大的生态和持续进化的标准。对于开发者而言，掌握 JavaScript 不仅是进入 Web 开发的钥匙，更是适应全栈技术栈、参与新兴领域创新的基础。未来，随着性能提升和框架演进，JavaScript 将继续拓展其技术边界，成为连接数字世界与物理世界的核心桥梁。

    随着技术的不断演进，JavaScript 仍然是现代软件开发的核心语言之一。

    内容目录

    Web-JavaScript-Study

    1 JavaScript 概述

    1.1 JavaScript 简介1.2 JavaScript 规范1.3 JavaScript 优势

    2 特性和组成

    2.1 JavaScript 核心特性2.2 Web 开发核心组成

    3 应用和技术栈

    3.1 应用领域3.2 应用场景对比3.3 现代开发技术栈3.4 发展趋势3.5 JavaScript 最新发展（ES2025）

    4 编程规范

    4.1 JS 语法概述4.2 编成规范4.3 编程范式4.4 变量作用域与闭包4.5 数据类型4.6 流程控制语句4.7 函数4.8 异步编程4.9 ES6+ 新特性4.10 代码示例

    5 HTML 引入 JavaScript

    5.1 外部脚本5.2 内部脚本5.3 引入代码位置5.4 引入类型兼容性

    6 动态页面事件

    6.1 事件概述6.2 常用事件

    7 JavaScript 内置对象

    7.1 JS 对象概述7.2 Array 数组对象7.3 Date 日期对象7.4 String 字符串对象7.5 Math 数学对象7.6 Boolean 对象7.7 Number 对象7.8 RegExp 对象7.9 Error 错误对象7.10 全局属性和全局函数

    8 BOM 浏览器对象

    8.1 window 顶层对象8.2 history 子对象8.3 location 子对象8.4 navigator 子对象8.5 screen 子对象8.6 Storage 子对象8.7 document 对象

    9 DOM 对象

    9.1 DOM 介绍9.2 DOM 元素对象、NodeList 对象9.3 DOM 属性对象、NamedNodeMap 对象9.4 DOM 事件对象9.5 DOM 控制台对象9.6 DOM CSS 样式声明对象9.7 DOM HTML 集合对象

    10 DOM 对象操作示例

    10.1 DOM 获取 HTML 节点示例10.2 DOM 操作 HTML 元素示例10.3 DOM 操作 CSS 样式示例

    11 常用属性和函数方法

    11.1 网页内容输出（document）11.2 网页用户交互（window）11.3 网页窗口操作（window）11.4 JavaScript 计时器

    12 浏览器网页尺寸

    12.1 浏览器窗口可视区域12.2 网页内容尺寸12.3 网页内容尺寸(含滚动条)12.4 网页卷去的距离12.5 网页的偏移量

    13 学习建议

    13.1 学习路径13.2 学习资源

    14 总结内容

    目录

    迪欧IT——dio智能科技

  • CSS学习

    Web-CSS-Study

    <u> 作者：jason-wrj </u>

    <u> 分类：服务器/网络服务器/CSS </u>

    <u> 标签：Server, Web Server, CSS </u>

    <u> 更多：www.dioit.com——迪欧IT——dio智能科技 </u>

    <u> 更多：www.dioit.com——dioIT——嵌入式电子智能技术 </u>

    1 概述

    1.1 CSS 的基本概念

    CSS（Cascading Style Sheets，层叠样式表）是一种用于描述HTML或XML（包括 SVG、XHTML 等）网页结构化文档（外观和格式视觉表现）呈现方式的样式表语言，由W3C制定标准。

    CSS 通过定义网页元素的字体、间距、颜色、布局、动画等外观视觉属性，控制网页内容外观和布局，实现网页美化。

    CSS 通过将样式与内容分离，使得网页设计更加灵活、高效，并支持动态变化的布局和交互效果。

    CSS 是现代网页设计（前端开发）的核心技能之一，通过实践和参考优秀案例可以快速掌握。

    1.2 CSS 的发展历程

    • 1994年：由哈坤·利（Håkon Wium Lie）首次提出，旨在解决HTML样式与内容混杂导致的代码臃肿问题。

    • 1996年：CSS1成为W3C推荐标准，支持基础样式控制。

    • 1998年：CSS2增加浮动、定位等复杂布局功能。

    • 2010年：CSS3引入圆角、阴影、动画等现代特性，与HTML5共同成为网页开发主流。

    1.3 CSS 的版本演进

    • CSS3：当前主流版本，模块化引入弹性布局、动画、媒体查询等功能。

    • 向后兼容：新特性在不支持的老浏览器中可平稳降级。

    1.4 CSS 的应用场景

    • 网页设计

      • 网页视觉美化（字体、颜色、背景）。

      • 构建响应式网站，适配不同设备（手机、平板、桌面）。

      • 动态交互效果（悬停、点击反馈）。

      • 打印样式优化（@media print）。

      • 组件化开发（配合CSS-in-JS或CSS Modules）。

    • 实现复杂的 UI 组件

      • 如导航栏、卡片布局、模态框。

    • 主题与样式库

      • 开发可复用的 UI 框架（如 Bootstrap、Tailwind CSS）。

      • 动态切换主题（如暗色模式）。

    • 性能优化

      • 使用 CSS 压缩工具减少文件体积。

      • 利用缓存策略提升加载速度。

    • 国际化与无障碍

      • 通过逻辑属性支持多语言排版（如阿拉伯语的 RTL 布局）。

      • 确保样式兼容屏幕阅读器。

    1.5 CSS 的核心特点

    • 分离性

      内容与表现分离，HTML 专注结构，CSS 控制样式，便于维护和协作。CSS 将样式与 HTML 结构分离，提升代码可维护性。修改样式无需调整 HTML 结构，只需更新 CSS 文件。

    • 层叠性

      多个样式规则可叠加作用于同一元素，按优先级（如!important> 内联样式 > ID 选择器 > 类选择器 > 标签选择器）确定最终效果。

    • 继承性

      父元素的样式（如字体、颜色）可自动传递到子元素，减少重复代码。

    • 响应式设计

      通过媒体查询（Media Queries）适配不同设备屏幕（如手机、电脑），实现自适应布局。

    • 精准控制

      像素级调整元素位置、大小、边框等。

    • 样式复用

      一套样式可应用于多个页面，减少重复代码。

    • 性能优化

      支持外部样式表缓存，减少重复代码加载。

    • 丰富效果

      支持渐变、圆角、阴影、动画等现代视觉特性（CSS3）。

    • 可扩展性

      通过预处理器（如 Sass/Less）或后处理器（如PostCSS）增强功能。

    • 跨浏览器一致性

      通过标准化属性（如 display: flex）减少样式差异。

    1.6 CSS 的功能作用

    • 控制网页外观

      • 颜色表示：支持十六进制（如 #FFFF00 表示黄色）、RGB 等格式。

      • 文本样式：字体、颜色、对齐方式。

      • 排版控制 ：可以精确地设置字体、字号、行距、字距等排版属性，实现丰富的文本排版效果，如不同的字体样式、大小写转换、文本阴影等。

      • 外观美化 ：可设置元素的颜色、背景图像、边框样式、圆角、阴影等外观属性，使网页更具视觉吸引力。

    • 实现复杂的布局（（Flexbox）弹性盒子、（Grid）网格布局、响应式设计）。

      • 布局设计 ：通过定位属性（如 position）、盒模型（margin、padding、border、width、height 等）以及弹性布局（flex 布局）、网格布局（grid 布局）等技术，实现复杂的网页布局，如响应式布局、多列布局等。

    • 管理元素的动态状态（悬停效果、动画）。

      • 交互效果 ：利用伪类和 CSS 动画（@keyframes）、过渡（transition）等特性，为网页添加交互效果，如按钮悬停效果、点击效果、元素的动画过渡、关键帧动画等。

    • 内容与样式的分离

      • 通过 CSS 将网页的结构（HTML）与表现（CSS 样式）解耦，实现内容（HTML）与样式（CSS）分离，便于维护和更新，提升代码可维护性和复用性。

      • 允许通过一个样式表文件统一管理多个页面的样式。

    1. 提升开发效率

      • 避免重复的 HTML 标签（如 <font> 或表格布局），减少代码冗余。

      • 支持继承和层叠规则，简化样式覆盖逻辑。

    1.7 CSS 的工作原理

    1. 解析 HTML，生成 DOM 树。

    2. 解析 CSS ，生成 CSSOM 树。

    3. 合并 DOM + CSSOM，构建渲染树。

    4. 布局与绘制，计算元素位置并渲染页面。

    1.8 CSS 的优势与局限

    • 优势

      • 性能优化：外部样式表可被浏览器缓存，减少重复加载。

      • SEO友好：结构清晰的HTML更易被搜索引擎抓取。

      • 维护便捷：全局样式可通过单一CSS文件统一调整。

    • 局限

      • 浏览器兼容性问题（如旧版IE不支持部分CSS3属性）。

      • 学习曲线较陡，需掌握选择器优先级、盒模型等复杂概念。

      • CSS 本身主要用于样式和布局，对于页面的结构和内容逻辑的控制能力较弱，通常需要与 HTML 和 JavaScript 配合使用来实现更复杂的网页功能。

      • 一些复杂的样式效果可能需要使用较多的代码和技巧来实现，并且在不同浏览器中可能存在兼容性问题，需要进行额外的测试和调整。

    2 CSS 引入方式与优先级

    2.1 外部样式表（最常用）

    外部样式表（External style sheet），编写在HTML文档中的<head> </head>头部元素之间，通过<link>元素标签引入独立 CSS 文件，方便实现多页面复用：

    <head>
    <link rel="stylesheet" href="style.css">
</head>

    2.2 内部样式表

    内部样式表（Internal style sheet），通常编写在HTML文档中的<head> </head>头部元素之间的<style> </style>元素内，通过在<style>元素内，（且需要写在 link 外部样式表的后面，否则会被外部样式表优先覆盖内部样式表），直接定义 CSS 样式，仅当前页面有效：

    <style>
    body { background: #f0f0f0; }
</style>

    2.3 内联样式表

    内联样式表（Inline style），直接写在 HTML 文档元素标签的style属性中，优先级最高但不利于维护：

    <p style="color: purple;">示例文本</p>

    2.4 样式表的优先级

    内联样式 > 内部样式 > 外部样式 > 浏览器默认样式。

    3 CSS 的基础语法

    3.1 CSS 样式规则

    由一系列规则集组成，规则集（ruleset）常简称为规则（rule）。每条规则集（ruleset）是由选择器（selector）和声明块构成。如下所示：

    selector_1,     /* 选择器1 */
selector_2,     /* 选择器2 */
selector_n {    /* 选择器n */
  property_1: value_1; /* 声明块1 */ /* 属性名_1: 属性值_1 */
  property_2: value_2; /* 声明块2 */ /* 属性名_2: 属性值_2 */
  property_n: value_n; /* 声明块n */ /* 属性名_n: 属性值_n */
}

    • 选择器

      选择器（Selectors）用于指定要应用样式的 HTML 或 XML 元素（如#id、.class、h1），例如： #id 用于选择具有特定 ID 的元素，.class 用于选择具有特定类的元素，p 用于选择所有段落元素等。

    • 声明块

      声明块（Declaration Block）由一对大括号 {} 包围，其中包含一条或多条（属性: 值;）声明（Declaration） 。每条声明都是由属性和值组成，用于指定元素的样式，例如（ color: black;） 表示设置元素的文本颜色为黑色。

      • 属性（Property）：是一个标识符，用可读的名称来表示其特性。如color、font-size、margin等样式属性（style attribute）。

      • 值（Value）：属性的具体设置，每个属性都包含一个有效值的集合，它有正式的语法和语义定义。如red、16px、auto等。（属性值与单位不能有空格，16 px是错误的，正确的写法是16px）。

    • 注释

      使用 /* 注释内容 */，添加 CSS 层叠样式表中的注释内容。

    3.2 CSS 样式选择器

    选择器（Selectors）至少要有一个，通过ID、类名、元素标签名等精准定位HTML元素，并指定要应用的样式（如 #id、.class、p），或通过属性、伪类等实现动态样式。如果包含多个选择器的集合分组，则用逗号,分隔。

    #header { background-color: gray; } /* ID选择器 */
.text-red { color: red; } /* 类选择器 */
[type="text"] { border: 1px solid black; } /* 属性选择器 */
:hover { } /* 伪类（状态） */
::before { } /* 伪元素（生成内容） */
p { color: blue; } /* 元素标签选择器 */
div p { margin: 10px; }      /* 关系组合选择器 */ /* 后代选择器 */
div > p { padding: 5px; }    /* 关系组合选择器 */ /* 子选择器 */
h1 + p { font-weight: bold; } /* 关系组合选择器 */ /* 相邻兄弟选择器 */

    常见的选择器类型，有以下几种：

    • ID 选择器

      使用唯一的 ID 标识符来选择元素，匹配具有同名 ID 属性值的元素，（ID 标识符不要以数字开头，个别浏览器不起作用）。ID 前需要加上（井号 #），如 #myId 只会选中页面上唯一具有 id="myId" 属性的元素。

      例如：

      • #bg1 { background: blue; }，匹配具有 id 属性，且 id 属性值为 bg1 的所有元素 。

    • 类选择器

      使用类名来选择元素，匹配具有同名 class 属性值的元素，（类名不要以数字开头，个别浏览器不起作用）。类名前需要加上（点号 .），如 .myClass 会选中所有具有 class="myClass" 属性的元素。

      例如：

      • .text1 { font-size: 16px; }，匹配具有 class 属性，且 class 属性值为 text1 的所有元素。

    • 属性选择器

      根据元素的属性及其值来选择元素，如 [type="text"] 会选中所有具有 type="text" 属性的元素。

      例如：

      • [attribute] { background: red; } ，匹配具有 attribute 属性的所有元素。

      • [attribute1=value1] { background: red; } ，匹配具有 attribute1 属性，且 attribute1 属性值与 value1 等同的所有元素。

      • [attribute2^=value2] { background: red; }，匹配具有 attribute2 属性，且 attribute2 属性值以 value2 开头的所有元素。

      • [attribute3$=value3] { background: red; }，匹配具有 attribute3 属性，且 attribute3 属性值以 value3 结尾的所有元素。

      • [attribute4*=value4] { background: red; }，匹配具有 attribute4 属性，且 attribute4 属性值包含 value4 的所有元素。

      • [attribute5~=value5] { background: red; }，匹配具有 attribute5 属性，且 attribute5 属性值包含一个以空格分隔的值与 value5 等同的所有元素。即 attribute5 属性的值里，必须有 value5这个单词，并且value5要与其它单词之间有空格分隔。

      • [attribute6|=value6] { background: red; }，匹配具有 attribute6 属性，且 attribute6 属性值与 value6 等同或以 value6 开头的所有元素。

    • 伪类选择器

      用于选择处于特定状态的元素，如 :hover 用于选择鼠标悬停在元素上时的状态，:active 用于选择鼠标点击元素时的状态等。例如：a:hover { color: green; }。

      例如：

      • :first-child，结构性伪类选择器，匹配在一组兄弟元素中的第一个元素。

      • :last-child，结构性伪类选择器，匹配在一组兄弟元素中的最后一个元素。

      • :nth-child(n)，结构性伪类选择器，根据元素在父元素内的子元素列表中的索引来匹配选择元素。n 表示元素在子元素列表中的第几个。

      • :nth-last-child(n)，结构性伪类选择器，匹配子元素列表中的倒数第 n 个子元素。

      • :nth-child(odd)，结构性伪类选择器，根据元素在父元素内的子元素列表中的索引来匹配选择元素。odd 表示元素在兄弟元素列表中的位置是奇数：1、3、5……。

      • :nth-child(even)，结构性伪类选择器，根据元素在父元素内的子元素列表中的索引来匹配选择元素。even 表示元素在兄弟元素列表中的位置是偶数：2、4、6……。

      • :only-child，结构性伪类选择器，匹配仅有一个子元素的元素。

      • :first-of-type，结构性伪类选择器，匹配在一组兄弟元素中其类型的第一个元素。

      • :last-of-type，结构性伪类选择器，匹配在（它父元素的）子元素列表中，最后一个给定类型的元素。

      • :only-of-type，结构性伪类选择器，匹配任意一个元素，这个元素没有其他相同类型的兄弟元素。

      • :nth-of-type(n)，结构性伪类选择器，匹配相同类型元素的第 n 个元素。

      • :nth-last-of-type(n)，结构性伪类选择器，匹配相同类型元素的倒数第 n 个元素。

      • :checked，UI元素状态伪类选择器，匹配选中状态的元素，选择任何处于选中状态的radio(<input type="radio">)，checkbox (<input type="checkbox">) 或 select 元素中的 ("option") 元素。即匹配任意被勾选/选中的 radio(单选按钮),checkbox(复选框),或者 option(select 中的一项) 。

      • :enabled，UI元素状态伪类选择器，匹配任何已启用的元素。如果元素可以被激活（例如被选择、单击、输入文本等），或者能够获得焦点，那么它就是启用的。

      • :disabled，UI元素状态伪类选择器，匹配任何被禁用的元素。如果一个元素不能被激活（如选择、点击或接受文本输入）或获取焦点，则该元素处于被禁用状态。

      • :in-range，UI元素状态伪类选择器，匹配指定范围以内值的元素。

      • :out-of-range，UI元素状态伪类选择器，匹配指定范围以外值的元素。

      • :optional，UI元素状态伪类选择器，匹配没有 “required” 属性的元素。

      • :required，UI元素状态伪类选择器，匹配有 “required” 属性的元素。

      • :invalid，UI元素状态伪类选择器，匹配无效的元素。

      • :read-only，UI元素状态伪类选择器，匹配只读状态的元素，表示元素不可被用户编辑的状态（如锁定的文本输入框）。

      • :read-write，UI元素状态伪类选择器，匹配可读可写状态的元素。

      • :focus，UI元素状态伪类选择器，匹配获得焦点的元素（如表单输入）。当用户点击或轻触一个元素或使用键盘的 Tab 键选择它时，它会被触发。

      • :link，UI元素状态伪类选择器，所有未访问链接。

      • :visited，UI元素状态伪类选择器，匹配在用户访问链接后生效。但由于出于隐私保护的原因，使用该选择器可以修改的样式非常有限。

      • :hover，UI元素状态伪类选择器，匹配在用户使用指针设备与元素进行交互时匹配，但不一定激活它。通常在用户将光标（鼠标指针）悬停在元素上时触发。

      • :active，UI元素状态伪类选择器，匹配被用户激活的元素。它让页面能在浏览器监测到激活时给出反馈。当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间。

      • :empty，UI元素状态伪类选择器，匹配没有子元素的元素。

    • 否定反选伪类选择器（negation pseudo-class）

      用来匹配不符合一组选择器的元素，它的作用是防止特定的元素被选中。

      例如：

      • :not(selectors)，匹配与selectors选择器相反的所有元素。

    • 元素选择器

      直接使用 HTML 元素的名称作为选择器，如 p 会选中页面上所有的 <p> 元素。

      例如：

      • p { color: blue; }，匹配所有p元素。

    • 伪元素选择器

      • ::first-letter，用于将样式应用于区块容器第一行的第一个字母，但仅当其前面没有其他内容（例如图像或行内表格）时才有效。

      • ::first-line，只能在块容器中，匹配在区块容器的第一行应用样式。

      • ::before，会创建一个伪元素，作为所选中元素的第一个子元素。通常用于为具有 content 属性的元素添加修饰性的内容。此元素默认情况下是行级的。

      • ::after，会创建一个伪元素，作为所选中元素的最后一个子元素。通常用于为具有 content 属性的元素添加修饰性的内容。此元素默认情况下是行向布局的。

    • 关系组合选择器（combinator）

      包含祖先后代选择器（A B）、第一级父子元素选择器（A > B）、相邻兄弟选择器（A + B）、后续兄弟选择器（A ~ B）等。

      例如：

      • div p { color: blue; }，祖先后代选择器，匹配所有 div 元素内的所有 p 元素。

      • .class1>p { color: blue; }，第一级父子元素选择器，匹配具有 class 类属性，且类属性的值为 .class1 的所有元素下的第一级 p 子元素。

      • h1+p { color: blue; }，相邻兄弟选择器，匹配所有 h1 元素后面紧接相邻着的第一个 p 元素。

      • h2~p { color: blue; }，后续兄弟选择器，匹配所有 h2 元素后面所有的 p 元素。

    • 通配选择器（universal selector）

      通配符选择器（*），用于匹配当前 HTML 文档中所有的元素。

      例如：

      • * { color: red; }，匹配当前 HTML 文档中所有的元素，并设置颜色为红色。

    • 集合分组选择器

      上述所有选择器均可集合成同一分组选择器，通过（逗号 ,）分隔不同的选择器。

      例如：

      • div p, .class1>p, h1+p, h2~p { color: red; }，集合匹配所有 div 元素内的所有 p 元素，集合匹配具有 class 类属性，且类属性的值为 .class1 的所有元素下的第一级 p 子元素，集合匹配所有 h1 元素后面紧接相邻着的第一个 p 元素，集合匹配所有 h2 元素后面所有的 p 元素。

    3.3 CSS 样式声明块

    包含一个或多个声明，用花括号 { } 包裹。每个声明由属性和值组成，不同声明用分号;分隔。

    • 样式属性与属性值

      • 样式属性（如color、margin），用于定义样式特性。如 background-color 用于设置元素的背景颜色，font-size 用于设置字体大小等。

      • 属性值（如red、20px），为样式属性指定具体效果的值。如 background-color: #ff0000; 表示将背景颜色设置为红色，font-size: 16px; 表示将字体大小设置为 16 像素。

    • 声明缩写优化

      • margin: 10px 20px;（上下10px，左右20px）。

    3.4 CSS 的 at 规则

    以 @（）开始，随后是标识符，一直到以分号或右大括号结束。

    每个 at 规则由其标识符定义，可能有它自己的语法。

    at 规则涵盖了 meta 信息（比如 @charset @import）、条件信息（比如 @media @document）、描述信息（比如 @font-face）。

    • @charset——定义样式表使用的字符集。

    • @import——告诉 CSS 引擎引入一个外部样式表。

    • @namespace——告诉 CSS 引擎必须考虑 XML 命名空间。

    • @layer ——声明了一个层叠层，同一层内的规则将级联在一起，这给予了开发者对层叠机制的更多控制。

    3.5 CSS 的语法示例

    body {
  background: #f0f0f0; /* 浅灰色背景 */
  font-family: "Microsoft YaHei"; /* 字体 */
}
​
h1 {
  color: #0A0000;      /* 深红色标题（RGB 10,0,0） */
}
​
/* 选择所有 <p> 标签，声明设置字体颜色和背景 */
p {
  color: blue;
  background-color: #f0f0f0;
}
​
/* 选择 class 为 "highlight" 的元素,声明 */
.highlight {
  font-weight: bold;
  border: 1px solid red;
}
​
/* 选择 id 为 "header" 的元素 */
#header {
  text-align: center;
  padding: 20px;
}

    4 核心组成

    4.1 盒模型（Box Model）

    定义元素的空间占用规则，每个元素在页面中都被视为一个矩形盒子，由内容区（content）、内边距（padding）、边框 （border）和 外边距（margin）组成），是布局的基础。

    从内部到外围，分别为：

    1. content（内容）：盒子的内容，显示文本和图像。

    2. padding（内边距）：清除内容周围的区域，内边距是透明的。

    3. border（边框）：围绕在内边距和内容外的边框。

    4. margin（外边距）：清除边框外的区域，外边距是透明的。

    .box {
  width: 300px;       /* 内容区宽度 */
  padding: 20px;      /* 内边距 */
  border: 1px solid black; /* 边框 */
  margin: 10px;       /* 外边距 */
  box-sizing: border-box; /* 宽度包含padding和border */
}

    通过设置 box-sizing 属性，可分为两种盒模型。

    • box-sizing: content-box;，设置为标准模式的盒模型，此种模式下，矩形盒子的总宽度和总高度，仅指内容区的宽度和高度。

    • box-sizing: border-box;，设置为怪异模式的盒模型，此种模式下，矩形盒子的总宽度和总高度，包含了（内容区+内边距+边框）的宽度和高度。

    /* 默认：width/height 仅指内容区域 */
box-sizing: content-box;
​
/* width/height 包含内容、内边距和边框 */
box-sizing: border-box;

    4.2 布局系统

    • 浮动（Float）

      传统布局，通过 float 实现元素左右对齐，实现文字环绕效果，常用于早期的多列布局。可分为设置浮动（float）、清除浮动（clear）。

    .float-left { 
    float: left; /* 浮动（Float） */
}
.clearfix::after {
    content: " ";
    display: table;
    clear: both; /* 清除浮动 */
}

    • 定位（Positioning）

      传统布局，通过 position: static/relative/absolute/fixed/sticky; 控制元素的绝对或相对位置。可分为默认状态（static）、相对定位（relative）、绝对定位（absolute）、固定定位（fixed）、粘性定位（sticky）。

      • 默认状态（static）：HTML 元素的默认值，即没有定位。

        static 定位的元素不会受到 top、bottom、left、right 这4个属性影响。

      • 相对定位（relative）：relative 定位的元素位置，是相对其正常位置。

        移动 relative 定位的元素，元素原本所占的空间（会保留）不会发生改变。

        relative 定位元素经常被用来作为绝对定位元素的容器块。

      • 绝对定位（absolute）：absolute 定位的元素位置，是相对于已定位的父元素，如果没有已定位的父元素。那么absolute 定位的元素的位置，则是相对于 <html>。

        absolute 定位的元素和其他元素重叠，与文档流无关，不占据空间。

      • 固定定位（fixed）：fixed 定位的元素位置相对于浏览器窗口是固定位置。

        即使窗口是滚动的，fixed 定位的元素也不会移动。

        fixed 定位的元素和其他元素重叠，与文档流无关，不占据空间。

      • 粘性定位（sticky）：sticky 定位的元素位置，是是依赖于用户的滚动位置来定位，且是在 relative 与 fixed 定位之间切换。

        当页面滚动没有超出目标区域时（跨越特定阈值前），sticky 定位的行为，像 relative 。当页面滚动超出目标区域时（跨越特定阈值后），sticky 定位的表现，像 fixed，会固定在目标位置。

        这个特定阈值指的是 top、bottom、left、right 这4个属性之一，指定这4个属性阈值的其中任何1个，才会使粘性定位生效。否则其行为与相对定位相同。

      • 定位的重叠属性：

        定位后的元素与文档流无关，定位元素可以覆盖页面上的其它元素。通过 z-index 属性，可以指定元素的堆叠顺序（即指定哪个元素在前面，哪个在后面）。

        一个元素可以有正数或负数的 z-index 堆叠顺序，具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。而如果两个定位元素重叠，没有指定 z - index 属性值，那么最后定位在 HTML 代码中的元素将被显示在最前面。

    .static {
    position: static; /* 默认状态 */
}
.relative {
    position: relative; /* 相对定位 */
}
.absolute {
    position: absolute; /* 绝对定位 */
    top: 10px; 
    left: 20px;
}
.fixed {
    position: fixed; /* 固定定位 */
    bottom: 0;
}
.sticky {
    position: sticky; /* 粘性定位 */
    top: 0;
}

    • 定位相关属性

      属性 说明 值
      position 指定元素的定位类型。 static、relative、 absolute、fixed、 sticky、inherit
      top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 auto、length、 %、inherit
      right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 auto、length、 %、inherit
      bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 auto、length、 %、inherit
      left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 auto、length、 %、inherit
      z-index 设置元素的堆叠顺序。 number、auto、 inherit
      overflow 只工作于指定高度的块元素上，用于控制内容溢出元素框时显示的方式。 auto、hidden、 scroll、visible、 inherit
      overflow-x 指定如何处理右边/左边边缘的内容溢出元素的内容区域。 auto、hidden、 scroll、visible、 no-display、no-content
      overflow-y 指定如何处理顶部/底部边缘的内容溢出元素的内容区域。 auto、hidden、 scroll、visible、 no-display、no-content
      clip 剪辑一个绝对定位的元素。 shape、auto、 inherit
      cursor 显示光标移动到指定的类型。 auto、default、 pointer、crosshair、 move、wait、 text、help、url、 e-resize、ne-resize、 nw-resize、n-resize、 se-resize、sw-resize、 s-resize、w-resize、

    • 弹性盒子（Flexbox）

      现代新式布局，设置一维弹性布局，用于简化响应式布局。适合简单对齐和空间分配。

      弹性盒子由弹性容器（Flex container）和弹性子元素（Flex item）组成。

      通过设置 display属性的值为 flex 或 inline-flex ，将显示布局定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。

      相关属性：flex，flex-basis，flex-direction，flex-flow，flex-grow，flex-shrink，flex-wrap，order，align-content，align-items，align-self，justify-content，place-content，row-gap，column-gap，gap。

      • flex-direction（指定弹性子元素在父容器中的位置）：row | row-reverse | column | column-reverse;。

        • row：横向从左到右排列（左对齐），默认的排列方式。

        • row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。

        • column：纵向排列。

        • column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

      • flex-wrap（用于指定弹性盒子的子元素换行方式）：nowrap | wrap | wrap-reverse | initial | inherit;。

        • nowrap： 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。

        • wrap：弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行。

        • wrap-reverse：反转 wrap 排列。

      • flex-flow（设置或检索弹性盒模型对象的子元素排列方式）：flex-direction flex-wrap|initial|inherit;。

      • flex（设置弹性盒子的子元素如何分配空间）：flex-grow flex-shrink flex-basis|auto|initial|inherit;。

      • flex-grow（设置或检索弹性盒子的扩展比率）：number | initial | inherit;。

      • flex-shrink（flex 元素的收缩大小）：number | initial | inherit;。

      • flex-basis（设置或检索弹性盒伸缩基准值）：number | auto | initial | inherit;。

      • justify-content（沿着弹性容器的主轴线（横轴），进行内容对齐）：flex-start | flex-end | center | space-between | space-around;。

        • flex-start：弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。

        • flex-end：弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。

        • center：弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。

        • space-between：弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。

        • space-around：弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。

      • align-items（设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式）：flex-start | flex-end | center | baseline | stretch;。

        • flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

        • flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

        • center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

        • baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。

        • stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

      • align-content（用于修改 flex-wrap 属性的行为）：flex-start | flex-end | center | space-between | space-around | stretch;。

        align-content 类似于 align-items, 但 align-content 不是设置弹性子元素的对齐，而是设置各个行的对齐。

        • stretch：默认。各行将会伸展以占用剩余的空间。

        • flex-start：各行向弹性盒容器的起始位置堆叠。

        • flex-end：各行向弹性盒容器的结束位置堆叠。

        • center：各行向弹性盒容器的中间位置堆叠。

        • space-between：各行在弹性盒容器中平均分布。

        • space-around：各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

      • align-self（在弹性子元素上使用，覆盖容器的 align-items 属性）：auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;。

        • auto：默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”。

        • stretch：元素被拉伸以适应容器。

        • center：元素位于容器的中心。

        • flex-start：元素位于容器的开头。

        • flex-end：元素位于容器的结尾。

        • baseline：元素位于容器的基线上。

        • initial：设置该属性为它的默认值。

        • inherit：从父元素继承该属性。

      • order（设置弹性盒子的子元素排列顺序）：number | initial | inherit;。

    .flexbox-container {
    display: flex;           /* 创建弹性容器 */
    justify-content: center; /* 水平居中对齐 */
    /* justify-content: space-between; */ /* 主轴对齐方式 */
    align-items: center;     /* 垂直居中对齐 */
    /* align-items: center; */ /* 交叉轴对齐方式 */
}

    • 网格布局（Grid）

      现代新式布局，设置二维网格布局，用于实现复杂页面结构。网格是一组相交的水平线和垂直线，分别定义网格的列和行。

      通过设置 display属性的值为 grid 或 inline-grid ，将显示布局定义为网格容器。网格容器带有行和列，可以更轻松地设计网页，而无需使用浮动和定位。

      网格引入了（fr 单位），可以创建灵活的网格轨道。一个（fr 单位）代表网格容器中可用空间的一等份。

      相关属性：grid-template-columns，grid-template-rows，grid-template-areas，grid-template，grid-auto-columns，grid-auto-rows，grid-auto-flow，grid，grid-row-start，grid-column-start，grid-row-end，grid-column-end，grid-row，grid-column，grid-area，grid-row-gap，grid-column-gap，grid-gap。

      • grid（ CSS 所有网格容器的简写属性），可以用来设置以下属性：

        • 显式网格属性： grid-template-rows、grid-template-columns 和 grid-template-areas。

        • 隐式网格属性： grid-auto-rows、grid-auto-columns 和 grid-auto-flow。

        • 间距属性： grid-row-gap 和 grid-column-gap。

      • grid-template（设置网格中行、列与分区）：none | grid-template-rows/grid-template-columns | grid-template-areas | initial | inherit;。

      • grid-template-rows（定义网格中的行）：none | auto | max-content | min-content | length | initial | inherit;。

      • grid-template-columns（定义网格中的列）：none | auto | max-content | min-content | length | initial | inherit;。

      • grid-template-areas（指定如何显示行和列，使用网格元素的名称来布局网格）：none | itemnames;。

      • grid-auto-rows（设置网格容器中行的默认大小）：auto | max-content | min-content | length;。

      • grid-auto-columns（设置网格容器中列的默认大小）：auto | max-content | min-content | length;。

      • grid-auto-flow（指定自动布局算法，精确指定自动布局的元素排列）：row | column | dense | row dense | column dense;。

      • grid-gap（同时设置行间距和列间距）：grid-row-gap grid-column-gap。

      • grid-row-gap（定义网格行间距）：length | %。

      • grid-column-gap（定义网格列间距）：length | %。

      • grid-row（同时指定网格元素行线的开始位置和结束位置）：grid-row-start / grid-row-end;。

      • grid-area（指定网格元素在网格布局中的大小和位置）：grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;。

      • grid-row-start（指定网格元素行线的开始位置）：auto | row-line;。

      • grid-row-end（指定网格元素行线的结束位置）：auto | row-line | span n;。

      • grid-column（同时指定网格元素列线的开始位置和结束位置）：grid-column-start / grid-column-end;。

      • grid-column-start（指定网格元素列线的开始位置）：auto | span n | column-line;。

      • grid-column-end（指定网格元素列线的结束位置）：auto | span n | column-line;。

      • justify-content （用于对齐容器内的网格，设置如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间），网格的总宽度必须小于容器的宽度才能使 justify-content 属性生效。。

      • align-content（用于设置垂直方向上的网格元素在容器中的对齐方式），网格元素的总高度必须小于容器的高度才能使 align-content 属性生效。

    .grid-container {
    display: grid;                  /* 创建网格容器 */
    grid-template-columns: 1fr 2fr; /* 列宽比例 */
    /* grid-template-columns: repeat(3, 1fr);*/ /* 3 列等宽 */
    gap: 10px;                     /* 网格间隔 */
}

    参考函数：repeat()，minmax()，fit-content()。

    相关术语：网格（Grid），网格线（Grid lines），网格轨道（Grid tracks），网格单元格（Grid cell），网格区域（Grid areas），网格间隙（Gutters），网格轴（Grid Axis），网格行（Grid row），网格列（Grid column）。

    • 弹性盒子和网格布局的示例

    /* 示例：居中元素 */
.container {
    display: flex;      /* 传统flex方案 */
    justify-content: center;
    align-items: center;
}
​
.container {
    display: grid;          /* 现代grid方案 */
    place-items: center; /* 一行代码实现居中 */
}

    4.3 响应式设计

    • 媒体查询（Media Queries）

      使用@media媒体查询，适配不同设备尺寸，根据设备特性（如屏幕宽度）应用不同的样式，适配不同终端（PC/平板/手机）。

    @media screen and (max-width: 768px) { /* 屏幕宽度小于768px时应用 */
    body { 
        font-size: 14px; 
    }
    .container { 
        flex-direction: column; 
    }
}

    • 多媒体类型

      • all：用于所有多媒体类型设备。

      • print：用于打印机。

      • screen：用于电脑屏幕，平板，智能手机等。

      • speech：用于屏幕阅读器。

    • 多媒体查询语法

    @media not|only mediatype and (expressions) {
    CSS 代码...;
}
/* not: not是用来排除掉某些特定的设备的。 */
/* only: 用来定某种特别的媒体类型。 */

    • 在不同的媒体上使用不同的样式文件

    <link rel="stylesheet" media="mediatype and|not|only (expressions)" href="select.css">

    • 视口单位（Viewport Units）

      • vw（视口宽度）（视口宽度的百分比）。

      • vh（视口高度）（视口高度的百分比）。

    5 常用 CSS 样式

    5.1 文本相关样式

    • color（颜色）：red | #ff0000 | rgb(255,0,0) | rgba(255,0,0,0.5) 。

    • font-size（字号）：14px | 1em | 2rem | 100%。

    • font-weight（字重）：normal | light | bold | 500 。

    • font-style（字体样式）：normal | italic | oblique 。

    • font-family（字体类型）："黑体", "宋体", "Microsoft Yahei", "Times New Roman" 。

    • direction（文本方向）：ltr | rtl | inherit

    • unicode-bidi（文本是否被重写）：normal | embed | bidi-override | initial | inherit。

    • text-transform（文本转换）：uppercase | lowercase | capitalize。

    • text-decoration（文本装饰线）：none | underline | overline | line-through 。

    • text-indent（文本缩进）：16px | 2em | 1rem 。

    • text-shadow（文本阴影）：h-shadow v-shadow blur color;

    • text-align（文本水平对齐）：left | center | right | justify 。

    • vertical-align（非块级元素垂直对齐）：top | middle | bottom 。

    • line-height（文本行高）：16px | 32px 。

    • letter-spacing（字符间距）：2px | -2px 。

    • word-spacing（字间距）：12px | 22px 。

    • white-space（元素内空白）：pre | pre-line | pre-wrap | nowrap。

    5.2 盒模型相关样式

    • content（内容），用于在元素的 ::before和 ::after伪元素中插入内容。使用 content 属性插入的内容都是匿名的可替换元素。

    • padding（内边距），该属性为给定元素设置所有四个（上右下左）方向的内边距属性。

      单个设置值会统一应用于（所有边），两个设置值则应用于（上边下边，左边右边），三个设置值则应用于（上边，左边右边，下边），四个设置值则分别按（顺时针方向）应用于（上边，右边，下边，左边）。

      padding（内边距）：length | %。

      padding（内边距）可细分为：

      • padding-top（上方内边距）：length | %。

      • padding-right（右方内边距）：length | %。

      • padding-bottom（下方内边距）：length | %。

      • padding-left（左方内边距）：length | %。

    • border（边框），该属性最多只接受三个参数，分别是宽度、风格和颜色，这样会使得四条边的边框相同。也可以使用一个，两个或三个值来指定 border 属性，值的顺序无关紧要。（可按四边分为 border-top、border-right、border-bottom、border-left）。

      border（边框）：border-width border-style border-color。

      可细分为：

      • border-width：边框宽度。（支持单值、双值、三值、四值分别设置四个边，也可按四边分为 border-top-width、border-right-width、border-bottom-width、border-left-width）。

        border-width（边框宽度）：thin | medium | thick | length。

        • 值为thin：定义细的边框。

        • 值为medium：定义中等粗细的边框。

        • 值为thick：定义粗的边框。

        • 值为length：自定义边框的粗细宽度。

      • border-style：边框风格。（支持单值、双值、三值、四值分别设置四个边，也可按四边分为 border-top-style、border-right-style、border-bottom-style、border-left-style）。

        outline-style（边框风格）：none | dotted | dashed | solid | double | groove | ridge | inset | outset。

        • 值为none：和关键字 hidden 类似，不显示边框。

        • 值为hidden：和关键字 none 类似，不显示边框。

        • 值为dotted：显示为一系列圆点，圆点半径是 border-width计算值的一半。

        • 值为dashed：显示为一系列短的方形虚线。

        • 值为solid：显示为一条实线。

        • 值为double：显示为一条双实线，宽度是 border-width 。

        • 值为groove：显示为三维沟槽雕刻效果的边框，样式与 ridge 相反。

        • 值为ridge：显示为三维脊状浮雕效果的边框，样式与 groove 相反。

        • 值为inset：显示为三维嵌入效果的边框，样式与 outset 相反。

        • 值为outset：显示为三维突出效果的边框，样式与 inset 相反。

      • border-color：边框颜色。（支持单值、双值、三值、四值分别设置四个边，也可按四边分为 border-top-color、border-right-color、border-bottom-color、border-left-color）。

        border-color（边框颜色）：color-name | hex-number | rgb-number | transparent。

        • 值为color：指定背景颜色。

        • 值为transparent：指定边框的颜色是透明的。

      • border-radius：边框圆角。（支持单值、双值、三值、四值分别设置四个角，也可按四角分为 border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius）。

        border-radius（边框圆角）：(1-4个 length | %) / (1-4个 length | %)。

        • 单值语法：border-radius: length|%，这一个值表示所有的边框宽度。

        • 双值语法： border-radius: length|% length|%，第一个值表示 top-left 和 bottom-right 方向的角；第二个值表示 top-right 和 bottom-left 方向的角。

        • 三值语法：border-radius: length|% length|% length|%，第一个值表示 top-left 方向的角，第二个值表示 top-right 和 bottom-left 方向的角，第三个值表示 bottom-right 方向的角。

        • 四值语法：border-radius: length|% length|% length|% length|%，这四个值分别表示 top-left、top-right、bottom-right、bottom-left，即从 top-left 开始的顺时针顺序。

    • margin（外边距），该属性为给定元素设置所有四个（上右下左）方向的外边距属性。

      单个设置值会统一应用于（所有边），两个设置值则应用于（上边下边，左边右边），三个设置值则应用于（上边，左边右边，下边），四个设置值则分别按（顺时针方向）应用于（上边，右边，下边，左边）。

      margin（外边距）：auto | length | %。

      margin（外边距）可细分为：

      • margin-top（上方外边距）：auto | length | %。

      • margin-right（右方外边距）：auto | length | %。

      • margin-bottom（下方外边距）：auto | length | %。

      • margin-left（左方外边距）：auto | length | %。

    • outline（轮廓），绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。可按顺序设置（outline-color outline-style outline-width）

      可细分为：

      outline-color（轮廓的颜色）：color-name | hex-number | rgb-number | invert。

      outline-style（轮廓的样式）：none | dotted | dashed | solid | double | groove | ridge | inset | outset。

      outline-width（轮廓的宽度）：thin | medium | thick | length。

    • box-shadow（阴影）。

    • width（宽度）：100px | 1em | 2rem 。

    • height（高度）：100px | 1em | 2rem 。

    5.3 显示相关样式

    • display（显示）用于设置元素是块级盒子（占用整行）或是行级盒子（仅需必要宽度，不强制换行）。display 也可用于设置子元素的布局，例如：文档流式布局、弹性盒子布局、网格布局。

      display（显示）用于设置一个元素应如何显示，display:none;可以隐藏某个元素，且隐藏的元素不会占用任何空间。

      visibility（可见性）用于指定一个元素可见或隐藏。visibility:hidden;可以隐藏元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。

    /* 预组合值 */
display: block; /* 块级 */
display: inline; /* 行内 */
display: inline-block; /* 行内块 */
display: flex; /* 弹性盒子 */
display: inline-flex;
display: grid; /* 网格布局 */
display: inline-grid;
display: flow-root;
​
/* 生成盒子 */
display: none;
display: contents;
​
/* 多关键字语法 */
display: block flex;
display: block flow;
display: block flow-root;
display: block grid;
display: inline flex;
display: inline flow;
display: inline flow-root;
display: inline grid;
​
/* 其他值 */
display: table;
display: table-row; /* 所有的 table 元素 都有等效的 CSS display 值 */
display: list-item;
​
/* 全局值 */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;

    • 关键值可以被分组为六个种类：

      • display-outside，外部表现，规定元素的外部显示类型。

      • display-inside，内部表现，元素的内部显示类型，其定义了该内容布局时的格式上下文的类型。

      • display-listitem，列表元素，为内容生成一个块级盒子和一个单独的列表元素行级盒子。

      • display-internal，内部，一些布局模型，例如 table 和 ruby 有一个复杂的内置结构，它们的子孙后代可以扮演几个不同的角色。

      • display-box，盒，定义一个元素到底是否产生 display 盒。

      • display-legacy，预组合，对相同布局模式的块级和行级变体需要单独的关键字。

    • position（定位）：static | relative | absolute | fixed 。

      • static（静态定位），relative（相对定位）。absolute（绝对定位），fixed（固定定位）。

      • top（上坐标），right（右坐标），bottom（下坐标），left（左坐标）。

      • z-index（层叠）。

    • float（浮动）：left | right 。

      • 清除浮动：overflow：hidden 。

      • 清除浮动：clear：left | right | both 。

      • 设置父级盒子的固定高度：height 。

    5.4 背景相关样式

    • background：背景。

      样式设置语法：background:#颜色值 url("图像") 是否重复 固定或滚动 图像起始位置;。

      可细分为如下5种样式。

      • background-color：背景颜色。

      • background-image：背景图像。

      • background-repeat：背景图像重复。

      • background-attachment：背景图像是否固定或者随着页面的其余部分滚动。

      • background-position：背景图像的起始位置。

    5.5 链接列表表格样式

    • 链接相关样式：

      1. a:link（未访问过的链接）：可以用颜色、字体、背景等样式属性。

      2. a:visited（用户已访问过的链接）：可以用颜色、字体、背景等样式属性。

      3. a:hover（当用户鼠标放在链接上时）：可以用颜色、字体、背景等样式属性。

      4. a:active（链接被点击的那一刻）：可以用颜色、字体、背景等样式属性。

    • 列表相关样式：

      • list-style（ul/ol列表样式）：none | circle | disc | decimal 。

      • list-style-type（ul 列表项标记）：circle、square 。

      • list-style-type（ol 列表项标记）：lower-alpha、upper-roman 。

      • list-style-position（列表项标志的位置）：inside | outside 。

      • list-style-image（作为列表项标记的图像）：url('xxx.gif') 。

    • 表格相关样式：

      • border（边框）。

      • border-collapse（折叠边框）：collapse 。

      • width（宽）。

      • height（高）。

      • text-align（水平对齐）。

      • vertical-align（垂直对齐）。

      • padding（内边距填充）：10px 。

      • color（颜色）。

      • background-color（背景颜色）。

    5.6 元素尺寸样式

    • width（元素的宽度）：auto | length | % 。

    • height（元素的高度）：auto | length | % 。

    • max-width（元素的最大宽度）：none | length | % 。

    • max-height（元素的最大高度）：none | length | % 。

    • min-width（元素的最小宽度）：length | % 。

    • min-height（元素的最小高度）：length | % 。

    5.7 溢出和浮动样式

    • overflow（溢出）只工作于指定高度的块元素上，用于控制内容溢出元素框时显示的方式。

      • overflow:visible;：内容不会被修剪，会呈现在元素框之外。

      • overflow:hidden;：内容会被修剪，并且其余内容是不可见的。

      • overflow:scroll;：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

      • overflow:auto;：如果内容出现被修剪，则浏览器会显示滚动条以便查看其余的内容。

      • overflow:inherit;：从父元素继承 overflow 属性的值。

    • float（浮动）会使元素向左或向右移动，其周围的元素也会重新排列，通常是用于图像。

      float（浮动）：none | left | right | inherit;。

      • 在布局时，是水平方向浮动，元素只能左右移动而不能上下移动。

      • 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

      • 浮动元素之后的元素将围绕它（例如图像是左浮动，文本流将环绕在它右边）。

      • 如果把几个浮动的元素放到一起，且有空间的话，这几个浮动元素会彼此相邻。

    • clear（清除）：不允许元素周围有浮动元素，即指定元素两侧不能出现浮动元素。

      clear（清除）：none | left | right | both | inherit;。

    6 颜色与单位

    6.1 颜色值

    .color-name { color: red; }           /* 颜色名称 */
.hex-code { color: #FF0000; }         /* 十六进制 */
.rgb-value { color: rgb(255, 0, 0); } /* RGB值 */
.rgba-value { color: rgba(255, 0, 0, 0.5); } /* 带透明度 */

    6.2 单位

    .px-unit { font-size: 16px; }       /* 固定像素 */
.em-unit { font-size: 1.5em; }      /* 相对于父元素 */
.rem-unit { font-size: 1.2rem; }    /* 相对于根元素 */
.percentage { width: 50%; }         /* 百分比 */
.vw-vh { width: 50vw; }             /* 视口宽度的50% */

    7 关键特性

    7.1 优先级（Specificity）

    • 多个样式规则可叠加作用于同一元素，当多个样式规则冲突时，通过优先级规则（如特异性、来源顺序）确定最终应用的样式。CSS 样式有不同的优先级，优先级高的样式规则会覆盖优先级低的。

    • 优先级规则（从高到低）：

      • !important（例外规则，强制覆盖）。应该尽量避免，因为这会破坏了样式表中的固有的级联规则 使得调试找 bug 变得更加困难了。

      • 行内样式（inline)，在 HTML 元素的 style 属性中定义的样式。

      • ID 选择器（例如#example）。

      • 类选择器（例如.example），属性选择器（例如[type="radio"]），伪类（例如:hover）。

      • 元素标签选择器（例如h1），伪元素（例如::before）。

      • 继承样式（inheritance）。

      • 通配符选择器（*）。

    • 通配选择器（universal selector）（*）、关系选择器（combinator）（+、>、~、" "、||）和 否定伪类（negation pseudo-class）（:not()）对优先级没有影响。但是，在 :not() 内部声明的选择器会影响优先级。

    • 优先级建议

      • 更好地利用 CSS 级联属性。

      • 使用更具体的规则。在你选择的元素之前，增加一个或多个其他元素，使选择器变得更加具体，并获得更高的优先级。

    7.2 继承（Inheritance）

    子元素自动继承父元素样式（如font-family），部分属性（如margin）不继承。

    • 当元素的一个继承属性（inherited property）没有指定值时，则取父元素的同属性的计算值。

    • 某些属性（如 color、font-family）会从父元素自动继承到子元素。

    • 不可继承的属性（如 border、margin）需要显式设置。

    7.3 层叠（Cascading）

    层叠是 CSS 的一个基本特征，它是一个定义了如何合并来自多个源的属性值的算法。它在 CSS 处于核心地位，CSS 的全称层叠样式表正是强调了这一点。

    • CSS 声明的来源

      • 用户代理样式：浏览器会有一个基本的样式表来给任何网页设置默认样式。

      • 页面作者样式：网页的作者可以定义文档的样式，这是最常见的样式表。大多数情况下此类型样式表会定义多个，它们构成网站的视觉和体验，即主题。

      • 读者用户样式：读者，作为浏览器的用户，可以使用自定义样式表定制使用体验。

    • 层叠顺序（从高到低）

      假如层叠顺序相等，则使用哪个值取决于优先级（Specificity）。

      1. CSS 过渡 (CSS Transition)

      2. 用户代理样式的!important

      3. 读者用户样式的!important

      4. 页面作者样式的!important

      5. CSS 动画（CSS Animation）

      6. 页面作者样式

      7. 读者用户样式

      8. 用户代理样式

    • 重置样式

      当 CSS 对样式完成更改之后，也许会在某种情况下希望还原到一个已知样式上，这可能发生在动画、主题修改之类的情形中。CSS 属性 all能够快速地把（几乎）所有 CSS 属性设置到一个已知样式上。

    • 层叠层/级联层

      使用 @layer 声明了一个层叠层/级联层，同一层内的规则将级联在一起，这给予了开发者对层叠机制的更多控制。

      • 一个层叠层同样可以通过 @import来创建，规则存在于被引入的样式表内：@import (utilities.css) layer(utilities);。

      • 可以创建带命名的层叠层，但不指定任何样式。例如，单一的命名层：@layer utilities;。

      • 多个命名层也可以被同时定义。例如：@layer theme, layout, utilities;。

        对于多个命名层的声明而言，如果同一声明在多个层叠层中被指定，最后一层中的将优先于其他层。因此，在上面的例子中，如果 theme 层和 utilities 层中存在冲突的规则，那么 utilities 层中的将优先被应用。

    • 层叠层的嵌套

      层叠层允许嵌套，例如： 

    @layer framework {
    @layer layout {
        
    }
}

    • 嵌套层的附加规则

      向 framework 层内部的 layout 层附加规则，只需用 . 连接这两层。

    @layer framework.layout {
    p {
        margin-block: 1rem;
    }
}

    • 匿名层

      如果创建了一个层叠层但并未指定名字，则称为一个匿名层。除创建后无法向其添加规则外，该层和其他命名层功能一致。例如：

    @layer {
    p {
        margin-block: 1rem;
    }
}

    7.4 格式化上下文（Formatting Context）

    • 行内格式化上下文（Inline Formatting Context），是一个网页的渲染结果的一部分。

      其中，各行内框（inline box）一个接一个地排列，其排列顺序根据书写模式（writing-mode）的设置来决定：

      • 对于水平书写模式，各个框从左边开始水平地排列。

      • 对于垂直书写模式，各个框从顶部开始水平地排列。

    • 区块格式化上下文（Block Formatting Context，BFC），是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

      区块格式化上下文（BFC）是一个独立的布局环境，BFC 内部的元素布局与外部互相不影响。BFC 有一套属于自己的规则：

      • BFC 的区域不会与浮动 Box 重叠。

      • BFC 是一个独立容器，BFC 内部的元素布局与外部互相不影响。

      • 计算 BFC 的高度时，浮动子元素也要参与计算。

      下列方式会创建区块格式化上下文：

      • 文档的根元素（<html>）。

      • 浮动元素（即 float值不为 none 的元素）。

      • 绝对定位元素（position值为 absolute 或 fixed 的元素）。

      • 行内块元素（display值为 inline-block 的元素）。

      • 表格单元格（display值为 table-cell，HTML 表格单元格默认值）。

      • 表格标题（display 值为 table-caption，HTML 表格标题默认值）。

      • 匿名表格单元格元素（display值为 table（HTML 表格默认值）、table-row（表格行默认值）、table-row-group（表格体默认值）、table-header-group（表格头部默认值）、table-footer-group（表格尾部默认值）或 inline-table）。

      • overflow值不为 visible 或 clip 的块级元素。

      • display 值为 flow-root 的元素。

      • contain值为 layout、content 或 paint 的元素。

      • 弹性元素（display 值为 flex 或 inline-flex 元素的直接子元素），如果它们本身既不是弹性、网格，也不是表格容器。

      • 网格元素（display 值为 grid 或 inline-grid 元素的直接子元素），如果它们本身既不是弹性、网格，也不是表格容器。

      • 多列容器（column-count或 column-width值不为 auto，且含有 column-count: 1 的元素）。

      • column-span 值为 all 的元素始终会创建一个新的格式化上下文，即使该元素没有包裹在一个多列容器中）

    • 格式化上下文影响布局，通常，我们会为定位和清除浮动创建新的 BFC，而不是更改布局，因为它将：

      • 包含内部浮动。

      • 排除外部浮动。

      • 阻止外边距重叠。

    • 块级格式化上下文（BFC ）的常用场景

      • 解决浮动元素使父级元素的高度坍塌问题。

      • 解决非浮动元素被浮动元素覆盖问题。

      • 解决盒子顶底外边距重合问题。

      • 两栏自适应布局，一侧是有固定宽度和浮动的固定栏，另一侧为开启 BFC 的不固定栏。

    7.5 变量（Custom Properties）

    定义和复用样式值（可复用的值）：

    :root {
  --primary-color: #3498db;
}
button {
  background: var(--primary-color);
}

    7.6 函数与运算

    1. 使用calc()。

    2. 进行动态计算：

    width: calc(100% - 20px);

    7.7 逻辑属性（Logical Properties）

    基于书写模式（如左到右或右到左）自动适配布局：

    .text {
  margin-inline-start: 20px; /* 自动适配 LTR/RTL */
}

    7.8 动画与过渡

    • 过渡（Transition）

      通过 transition ，平滑改变属性值，实现平滑动画效果，提升用户体验。使页面元素显示从一种样式转变到另一个的时候，无需使用 Flash 动画或 JavaScript 脚本。

      transition（过渡）：property duration timing-function delay;

      可细分为：

      • transition-property（需要应用过渡的 CSS 属性名）：`none | all | property。

      • transition-duration（定义过渡效果需要花费的时间）：time。

      • transition-timing-function（规定过渡效果的时间曲线）：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n)。

        • linear：匀速过渡效果。

        • ease：默认值，缓慢加速，然后缓慢减速的过渡效果。

        • ease-in：缓慢加速的过渡效果。

        • ease-out：缓慢减速的过渡效果。

        • ease-in-out：先缓慢加速，再缓慢减速的过渡效果。

        • cubic-bezier(n,n,n,n)：自定义的贝塞尔曲线函数，通过四个值来定义曲线的控制点，分别对应 x1、y1、x2、y2。

      • transition-delay（过渡效果延迟开始的时间，默认是0）：time。

    .button {
    background-color: blue;
    transition: background-color 0.3s ease; /* 过渡 */
}
.button:hover { /* 悬停时颜色渐变 */
    background-color: red; 
}
​
.box {
    transition: transform 0.3s ease; /* 过渡 */
}
.box:hover { /* 悬停时颜色渐变 */
    transform: scale(1.1);
}

    • 动画（Animation）

      通过 @keyframes 定义复杂动画，提升用户体验。CSS 动画可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

      animation（动画）：name duration timing-function delay iteration-count direction fill-mode play-state;

      • animation-name（指定要绑定到选择器的关键帧的名称）：keyframename | none。

      • animation-duration（指定动画需要多少秒或毫秒完成）：time。

      • animation-timing-function（设置动画将如何完成一个周期）：linear | ease | ease-in | ease-out | ease-in-out | steps(int,start|end) | cubic-bezier(n,n,n,n)。

        • linear：动画从头到尾的速度是相同的。

        • ease：默认。动画以低速开始，然后加快，在结束前变慢。

        • ease-in：动画以低速开始。

        • ease-out：动画以低速结束。

        • ease-in-out：动画以低速开始和结束。

        • steps(int,start|end)：指定了时间函数中的间隔数量（步长）。

          int 指定函数的间隔数，该参数是一个正整数（大于 0）。

          start|end 表示动画是从时间段的开头连续（start 直接开始）还是末尾连续（end 戛然而止）。

        • cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

      • animation-delay（设置动画在启动前的延迟时间）：time。

      • animation-iteration-count（定义动画的播放次数或无限次）：n | infinite。

      • animation-direction（指定是否应该轮流反向播放动画。）：normal | reverse | alternate | alternate-reverse | initial | inherit。

        • normal：默认值。动画按正常播放。

        • reverse：动画反向播放。

        • alternate：动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。

        • alternate-reverse：动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。

        • initial：设置该属性为它的默认值。

        • inherit：从父元素继承该属性。

      • animation-fill-mode（当动画不播放时、完成时，或有延迟未开始播放时，要应用到元素的样式）：none | forwards | backwards | both | initial | inherit。

        • none：默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。

        • forwards：在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。

        • backwards：动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。

        • both：动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。

        • initial：设置该属性为它的默认值。

        • inherit：从父元素继承该属性。

      • animation-play-state（指定动画是否正在运行或已暂停）：paused | running。

    /* 关键帧动画 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.element {
    animation: fadeIn 2s forwards; 
}
​
@keyframes slide {
    0% {
        transform: translateX(0); 
    }
    100% {
        transform: translateX(100px); 
    }
}
​
.animate {
    animation: slide 2s infinite;
}

    7.9 CSS 的外边距折叠

    区块的上下外边距有时会合并（折叠）为单个边距，其大小为两个边距中的最大值（或如果它们相等，则仅为其中一个），这种行为称为外边距折叠。

    注意：有设定浮动和绝对定位的元素不会发生外边距折叠。

    有三种情况会形成外边距折叠：

    • 相邻的兄弟元素

      相邻的同级元素之间的外边距会被折叠（除非后面的元素需要清除之前的浮动）。

    • 没有内容将父元素和后代元素分开

      如果没有设定边框（border）、内边距（padding）、行级（inline）内容，也没有创建区块格式化上下文或间隙来分隔块级元素的上边距 margin-top 与其内一个或多个子代块级元素的上边距 margin-top；

      或者没有设定边框、内边距、行级内容、高度 height 或最小高度 min-height 来分隔块级元素的下边距 margin-bottom 与其内部的一个或多个后代后代块元素的下边距 margin-bottom，则会出现这些外边距的折叠，重叠部分最终会溢出到父代元素的外面。

    • 空的区块

      如果块级元素没有设定边框、内边距、行级内容、高度height、最小高度min-height来分隔块级元素的上边距 margin-top 及其下边距 margin-bottom，则会出现其上下外边距的折叠。

    7.10 现代 CSS 新特性

    • 滚动条样式：scrollbar-gutter 和 scrollbar-color。

    • Ruby 排版：ruby-align 和 ruby-position（用于注音文本）。

    • 锚点定位（Anchor Positioning）：简化动态定位（如弹出框）。

    • 嵌套（Nesting）：支持类似 Sass 的嵌套语法（需浏览器支持）。

    8 现代 CSS 技术

    8.1 CSS 预处理器

    如 Sass/Less，支持嵌套、变量、混合宏：

    $primary: #3498db;
.button {
  background: $primary;
  &:hover { background: darken($primary, 10%); }
}

    8.2 CSS 框架

    Bootstrap、Tailwind CSS 等提供预设组件与工具类。

    8.3 CSS-in-JS

    在 JavaScript 中编写 CSS（如Styled Components）。

    9 学习实践建议

    • 使用外部样式表：提升代码复用率与可维护性。

    • 避免滥用!important：防止优先级混乱。

    • 采用CSS预处理器：如 Sass/Less，支持变量、嵌套等高级功能。

    • 命名规范：使用BEM（Block__Element–Modifier）提高可维护性。

    • 性能优化：

      • 减少选择器复杂度（避免div > ul > li）

      • 使用 transform/opacity 触发GPU加速动画

    • 浏览器兼容性：通过 Autoprefixer 等工具自动添加厂商前缀（如-webkit-）。

    10 学习资源

    11 总结

    CSS 是前端开发的基石之一，与 HTML（结构）、JavaScript（行为）并称网页三剑客。

    CSS 作为网页设计的核心语言，通过简洁的语法实现对网页样式的精细控制。CSS 通过层叠、继承等机制实现样式与结构的分离，显著提升开发效率与用户体验。从基础的文本美化到复杂的响应式布局，其功能覆盖现代网页开发的全场景。掌握选择器、盒模型、布局技术等要点，是构建高性能、可维护网站的关键。

    CSS 通过推动响应式设计与动态效果的普及，不断演进（如 CSS3 模块化、变量 --var()、容器查询 @container），持续提升开发者对样式的底层控制能力，是构建现代 Web 界面的基石，是构建现代 Web 界面不可或缺的工具。

    内容目录

    Web-CSS-Study

    1 概述

    1.1 CSS 的基本概念1.2 CSS 的发展历程1.3 CSS 的版本演进1.4 CSS 的应用场景1.5 CSS 的核心特点1.6 CSS 的功能作用1.7 CSS 的工作原理1.8 CSS 的优势与局限

    2 CSS 引入方式与优先级

    2.1 外部样式表（最常用）2.2 内部样式表2.3 内联样式表2.4 样式表的优先级

    3 CSS 的基础语法

    3.1 CSS 样式规则3.2 CSS 样式选择器3.3 CSS 样式声明块3.4 CSS 的 at 规则3.5 CSS 的语法示例

    4 核心组成

    4.1 盒模型（Box Model）4.2 布局系统4.3 响应式设计

    5 常用 CSS 样式

    5.1 文本相关样式5.2 盒模型相关样式5.3 显示相关样式5.4 背景相关样式5.5 链接列表表格样式5.6 元素尺寸样式5.7 溢出和浮动样式

    6 颜色与单位

    6.1 颜色值6.2 单位

    7 关键特性

    7.1 优先级（Specificity）7.2 继承（Inheritance）7.3 层叠（Cascading）7.4 格式化上下文（Formatting Context）7.5 变量（Custom Properties）7.6 函数与运算7.7 逻辑属性（Logical Properties）7.8 动画与过渡7.9 CSS 的外边距折叠7.10 现代 CSS 新特性

    8 现代 CSS 技术

    8.1 CSS 预处理器8.2 CSS 框架8.3 CSS-in-JS

    9 学习实践建议

    10 学习资源

    11 总结内容目录

    迪欧IT——dio智能科技

  • HTML学习

    HTML5学习

    <u> 作者：jason-wrj </u>

    <u> 分类：服务器/网络服务器/HTML </u>

    <u> 标签：Server, Web Server, HTML </u>

    <u> 更多：www.dioit.com——迪欧IT——dio智能科技 </u>

    <u> 更多：www.dioit.com——dioIT——嵌入式电子智能技术 </u>

    1 HTML简介

    1.1 简介

    HTML的英文全称是（Hyper Text Markup Language），中文名称是超文本标记语言。HTML 是一种用于定义网页结构和内容的标记语言，而非编程语言，因为HTML 缺乏逻辑处理能力，不包含变量、循环等逻辑控制。

    HTML 是通过各种元素的标签（TAG）进行“标记”（Markup），以此来描述网页内容，在 Web 浏览器中显示。是万维网的通用标记语言。HTML 是万维网的核心技术之一，也是网页开发的基础。

    所有网页均基于 HTML 构建，浏览器通过解析 HTML 标签并渲染为可视化页面。

    1.2 特性

    • 超文本特性

      支持超链接（Hyperlink），实现文档间的跳转与资源关联。

    • 平台无关性

      可在（Windows、macOS等）任何操作系统的浏览器中解析显示。

    • 简单易学

      语法直白，标签易学。通过使用各种标签定义页面元素，描述页面结构（文档类型、根标签、头部、主体、标题、导航栏、侧边栏、段落、页脚）。

    • 可扩展性

      大多数 HTML 元素的标签可拥有属性，标签通过属性可以提供额外信息，增强元素功能。例如：

      • <a href="https://example.com">中的href指定链接地址。

      • <img src="image.jpg" alt="示例图片">中的src和alt指定源路径和替代文本。

      • <div class="container" id="main">中的class和id用于样式选择和脚本操作。

    1.3 基本结构框架

    HTML 文档是由各种元素的标签嵌套而组成，所有 HTML 文档需包含以下基本框架：

    <!DOCTYPE html> <!-- 文档类型声明 DOCTYPE 标签：声明文档类型为HTML5标准 -->
​
<html lang="zh-CN"> <!-- 根元素 html 标签，语言 lang 属性：定义语言为中文 -->
​
<head> <!-- 头部元素 head 标签：定义元数据（字符集编码、标签页标题） -->
  <meta charset="UTF-8" /> <!-- 元数据信息 meta 标签，字符集 charset 属性：定义字符集编码为UTF-8 -->
  <meta name="description" content="网页描述" />
  <meta name="keywords" content="网页关键词" />
  <meta name="viewport" content="width=device-width"> <!-- 视口元素 viewport 可以确保页面以设备的视口宽度进行渲染，避免移动端浏览器以比视口更宽的宽度渲染内容，导致内容缩小。-->
  <title>标签页标题</title> <!-- 标题 title 标签：定义显示在浏览器标签页的标题 -->
  <base target="_blank" href="http://www.example.com/" /> <!-- 文档根 URL 元素：定义文档中相对 URL 地址的基础 URL -->
  <link rel="shortcut icon" href="favicon.ico" /> <!-- 连接 link 标签：设置网站图标 -->
  <link rel="alternate icon" type="image/svg+xml" href="favicon.svg" /> <!-- 连接 link 标签：设置网站图标 -->
  <link rel="stylesheet" type="text/css" href="MyStyle.css"> <!-- 连接 link 标签：引入外部 CSS 层叠样式表 -->
  <script type="text/JavaScript" src="MyScript.js" > <!-- 脚本 script 标签：引入外部 JavaScript 脚本 -->
</head>
​
<body> <!-- 主体元素 body 标签：包含所有用户可见元素（文本、图片、表单等） -->
  <h1>可见内容：主标题</h1> <!-- 一级标题 h1 标签：属于页面可见内容 -->
  <p>可见内容：段落文本</p> <!-- 段落 p 标签：属于页面可见内容 -->
  <img />
  <a> </a>
  <div> </div>
  <span> </span>
</body>
​
</html>

    1. DOCTYPE 声明： 使用 <!DOCTYPE html> 声明文档类型，通知浏览器这是一个 HTML5 标准的网页文档，为文档内容的正确呈现和验证奠定基础，使浏览器能按照标准模式来解析和显示页面。

    2. 根元素标签： 使用 <html> 和 </html> 包含整个页面（除声明文档类型标签之外）的其它所有元素标签，是其它所有 HTML 元素的根元素标签，其他 HTML 元素标签都应该嵌套在这个根元素标签内部。通过 lang 属性定义语言（如中文用 zh-CN ）。

    3. 头部元素： 使用 <head> 和 </head> 包含网页文档的元数据，如字符编码声明、网页描述、网页关键词、标签页标题、 CSS 样式链接、JavaScript 脚本引用等信息，这些内容不会在网页的正文中显示。 可以添加在头部区域内的元素标签有：<meta> 、 <title> 、 <link> 、 <style> 、 <script> 、 <noscript> 、 <base>。

      • <meta /> 元素标签，可以用于指定网页字符集、网页关键词、网页描述等元数据，这些元数据不会显示在页面上，但会被浏览器解析，关键词和描述有助于提升可读性、可访问性与 SEO 优化。例如：<meta name="keywords" content="HTML, CSS, JavaScript">。

      • <title> </title> 元素标签，用于描述标签页的标题，会显示在浏览器的标签页。

      • <base /> 元素标签，用于定义文档中相对 URL 地址的基础 URL。放置在所有需要包含 href 属性的元素的最前面，且一份HTML文档中只能有一个 <base> 元素，放在 <link /> 元素或 <a> </a> 元素最前面。

      • <link /> 元素标签，规定了当前文档与某个外部资源的关系，常用于链接到外部 CSS 层叠样式表。也可以被用来创建站点图标，或加载外部资源。

    4. 主体元素： 使用 <body> 和 </body> 承载用户可见的网页主体内容部分，包括文本、图像、链接、列表、表格、音频、视频、表单等各种可见元素都放置在这个标签内，用于向用户展示实际的网页内容。

    5. 注释： 使用 <!-- 和 --> 添加HTML代码注释。

    1.4 与 CSS 层叠样式表协同

    • 通过在 HTML 元素标签内直接使用 "style" 属性，可添加行内样式，进而控制网页的外观和布局。

    <p style="color:blue;margin-left:20px;">这是一个内联style样式属性的段落。</p>

    • 通过在 HTML 头部 <head> 元素标签区域内使用 <style> 标签，可添加内部层叠样式表，进而控制网页的外观和布局。

    <head>
    <style type="text/css"> 
        body { background-color: lightblue; } 
        p {color: red;}
    </style>
</head>

    • 通过在 HTML 头部 <head> 元素标签区域内，使用 <link> 标签，可引用外部 CSS 层叠样式表文件，进而控制网页的外观和布局。

    <head>
    <link rel="stylesheet" type="text/css" href="MyStyle.css">
</head>

    1.5 与 JavaScript 脚本协同

    • JavaScript 常用于图片操作、表单验证以及内容动态更新。通过使用 <script> 标签定义客户端脚本，可实现网页交互功能。<script> 标签既可直接包含脚本语句，也可通过 "src" 属性指向外部脚本文件。直接包含脚本语句，如下所示：

    <p>
    <script> alert("欢迎！"); </script>
</p>

    • JavaScript 能够直接写入 HTML 输出流中：

    <script>
    document.write("<h1>一级标题</h1>");
    document.write("<p>文本段落。</p>");
</script>

    • 通过 <noscript> 和 </noscript> 定义浏览器不支持脚本时，所需要输出的文本内容。

    <script>
    document.write("Hello World!")
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>

    • 通过在 HTML 头部 <head> 元素标签区域内，使用 <script> 和 </script> 标签添加外部 JavaScript 脚本文件。

    <head>
  <script type="text/JavaScript" src="MyScript.js" > <!-- 脚本 script 标签：引入外部 JavaScript 脚本 -->
</head>

    2 HTML语法

    2.1 元素标签说明

    HTML元素（Element）包含标签（Tag）和内容（Content）。

    HTML 各元素（Element）的标签（Tag）是由尖括号包围的关键词，比如标题 <h1> 、段落 <p>。HTML 标签可分为双标签和单标签。

    双标签是成对出现的，比如 <head> 和 </head>。标签对中的第一个标签是开始标签，第二个标签是结束标签。双标签可以嵌套包含其它双标签或单标签。

    单标签标签不是成对的，比如 <img /> 、 <br /> 、 <hr />。这种只有开始标签，没有结束标签。单标签没有结束标签，因此建议标签编写时，在右侧右尖括号 > 前面增加反斜杠 / 符号，例如 <br > 编写为 <br />，即在开始标签中添加反斜杠，是关闭单标签的正确方法。单标签不能嵌套包含其它标签。

    2.2 标签语法规则

    属于双标签的 HTML 元素可以嵌套包含其他 HTML 元素，HTML 文档是由相互嵌套的 HTML 元素标签构成。且要求双标签的每一对开始标签（Opening tag）和结束标签（Closing tag）必须正确闭合，（如 <div> <p> 内容 Content </p> </div>），禁止出现双标签不成对的交叉嵌套。

    例如 <html> 和 </html> 元素定义了整个HTML文档，内部包含了 <body> 和 </body> 元素，而 <body> 和 </body> 元素可以包含 <p> 和 </p> 元素。

    • 行内元素与块级元素

      • HTML内联元素在浏览器显示时，后面的元素不会以新行开始。例如以下元素标签： <span> 、 <b> 、 <td> 、 <a> 、 <img>。

      • HTML块级元素在浏览器显示时，默认占用一整行，后面的元素会以新行来开始和结束。例如以下元素标签： <div> 、 <h1> 、 <p> 、 <ul> 、 <ol> 、 <table>。

    • 元素的属性格式

      大多数 HTML 元素标签拥有属性，属性总是 name="value" 这样的（名称/值对）形式写在开始标签内，name 是属性的名称，value 是属性的值。属性值用引号包围（如 <img src="image.jpg" alt="描述">）。

      属性值被包围在引号内。双引号是最常用的，不过使用单引号也可以使用。在某些个别的情况下，比如属性值本身就含有双引号，那么必须使用单引号。又比如属性值本身就含有单引号，那么必须使用双引号。

    • 代码大小写规范

      HTML 标签里的元素名不区分大小写，但推荐使用小写，在未来 (X)HTML 版本中强制使用小写。

    2.3 元素标签的常用属性

    HTML 元素标签通过属性值的设置，可以提供需要额外添加的信息，用于定义元素的内容、样式、行为或其他特性，增强元素功能。

    下面所列出的属性，适用于大多数 HTML 元素。

    • 适用所有元素的属性

      • 全局属性

        id，class，style，title

      • 自定义属性

        data-*

    • 适用特定元素的属性

      href，src，alt，type，value，checked，placeholder，target

    • 事件处理属性

      onclick，onmouseover，onchange

    • 布尔属性

      disabled，readonly，required，autoplay

    属性的详细说明，如下表所示：

    属性名 适用元素 说明
    class 所有元素 为元素指定一个或多个类名，用于 CSS 或 JavaScript 选择。
    data-* 所有元素 用于存储自定义数据，通常通过 JavaScript 访问。
    id 所有元素 为元素指定唯一的标识符。
    onclick 所有元素 当用户点击元素时触发 JavaScript 事件。
    onmouseover 所有元素 当用户将鼠标悬停在元素上时触发 JavaScript 事件。
    style 所有元素 用于直接在元素上应用 CSS 样式。
    title 所有元素 为元素提供额外的提示信息，通常在鼠标悬停时显示。
    target <a>, <form> 指定链接或表单提交的目标窗口或框架（如 _blank 表示新标签页）。
    href <a>, <link> 指定链接的目标 URL。
    autoplay <audio>, <video> 自动播放媒体。
    alt <img> 为图像提供替代文本，当图像无法显示时显示。
    src <img>, <script>, <iframe> 指定外部资源（如图片、脚本、框架）的 URL。
    checked <input type="checkbox">, <input type="radio"> 指定复选框或单选按钮是否被选中。
    type <input>, <button> 指定输入控件的类型（如 text, password, checkbox 等）。
    value <input>, <button>, <option> 指定元素的初始值。
    placeholder <input>, <textarea> 在输入框中显示提示文本。
    disabled 表单元素 禁用元素，使其不可交互。
    onchange 表单元素 当元素的值发生变化时触发 JavaScript 事件。
    readonly 表单元素 使输入框只读。
    required 表单元素 指定输入字段为必填项。

    2.4 基本框架标签

    1. 文档类型标签

      • 使用 <!DOCTYPE> 定义文档类型。

    2. HTML 根元素标签

      • 使用 <html 属性> 内容 </html> 定义一个 HTML 文档。

    3. HTML 头部元素标签

      • 使用 <head> 内容 </head> 定义关于文档的头部信息。

      • 使用 <title> 内容 </title> 为文档定义一个标题。

      • 使用 <meta /> 定义关于 HTML 文档的元数据信息、关键词、描述。

      • 使用 <base /> 定义页面中所有链接的默认地址或默认目标。默认链接地址定义后，其它链接可以用相对地址，即相对于默认链接的地址。

      • 使用 <link /> 定义一个文档和外部资源之间的关系，可用于链接外部层叠样式表。

      • 使用 <style 属性> 内容 </style> 定义HTML文档的样式文件。

      • 使用 <script 属性> 内容 </script> 定义客户端的脚本文件。

    4. HTML 主体元素标签

      • 使用 <body> 内容 </body> 定义 HTML 文档的可见内容主体。

      • 使用 <h1> 内容 </h1>、<h2> 内容 </h2>、<h3> 内容 </h3>、<h4> 内容 </h4>、<h5> 内容 </h5>、<h6> 内容 </h6> 定义网页的内容标题（Heading）。在标题h1~h6（Header 1 ~ Header 6）中，<h1> </h1> 是最高级标题，字号最大，<h2> </h2> 次之，依此类推，<h6> </h6> 是最低级标题，字号最小。

      • 使用 <p 属性> 内容 </p> 创建一个文本段落（Paragraph），<p> </p> 是块级元素标签，块级元素默认占用一整行，会在段落前后添加一些默认的空白距离，使文本内容更具可读性。创建文本段落中，如果有连续的空格或空行都会被算作一个空格。

      • 使用 <hgroup> H标题 P副标题/关联内容 <hgroup> 创建文档标题和与标题相关联的内容，将一个 <h1>–<h6> 元素与一个或多个 <p> 元素组合在一起。

      • 使用 <br /> 定义简单的折行（Break），在文本中强制换行。不添加额外的空白距离，常用于诗句、地址等需要换行的地方。

      • 使用 <hr /> 定义水平线（Horizontal Rule）。

    5. 注释标签

      • 使用 <!-- 注释内容 --> 添加代码注释。

    2.5 块级布局元素标签

    1. 分隔符区块容器分组元素标签

      使用 <div 属性> 内容 </div> （Division），定义 HTML 页面中的一个分隔区块。区块容器分组标签，属于块级元素，且默认占用一整行。<div> </div> 主要是用于组合其他 HTML 元素的块级容器分组标签，以便通过CSS 层叠样式表来对这些组合元素进行格式化。

    2. 语义化区块容器分组元素标签

      推荐优先使用下面所列出的各种语义化标签替代 <div> </div> 标签定义区块分组内容，以便提升可读性、可访问性与 SEO 优化。区块容器分组标签，属于块级元素，且默认占用一整行。语义化标签如下所示：

    • 使用 <header 属性> 内容 <header> ，定义文档页面或者文档的一部分区域的顶部页眉内容，该元素标签应该作为介绍内容或者导航链接栏的容器。 注意：<header> 标签不能被放在 <footer> 、 <address> 或者另一个 <header> 元素内部。

    • 使用 <nav 属性> 内容 </nav> ，定义页面的导航链接（navigation）。

    • 使用 <main 属性> 内容 </main> ，定义文档的主体部分。在一个文档中，不能出现多个<main>元素。

    • 使用 <footer 属性> 内容 </footer> ，定义文档页面或者文档的最近的祖先区域的底部页脚内容。一般情况下，该元素用于包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等。联系信息，可以在 <footer> 元素内使用 <address> 标签。

      • 使用 <address> 内容 </address> ，定义文档作者的联系信息。

    • 使用 <article 属性> 内容 </article> ，定义页面的文章内容，该元素标签的内容本身必须是有意义的且必须是独立于文档的其余部分。表示文档、页面、应用或网站中具有独立分发或复用意义的自包含内容块。

    • 使用 <aside 属性> 内容 </aside> ，表示文档中内容仅与主内容间接相关的部分，页面所处内容之外的内容，该元素标签的内容应该与附近的内容相关，通常以侧边栏或提示框的形式呈现。

    • 使用 <section 属性> 内容 </section> ，定义页面的某个区域、内容区块。比如章节、头部、底部，没有更具体的语义元素来表示，可包含（Heading）标题元素。

    • 使用 <details 属性> 内容 </details> ，定义页面的补充细节，用户可见的内容或者隐藏的需求。与 <summary> 标签配合使用可以为 <details> 元素定义标题。标题是可见的，用户点击标题时，才会显示出 <details> 元素的具体内容。<details> 元素的内容默认对用户是不可见的，除非设置了open属性。

      • 使用 <summary> 标题 </summary> ，嵌套在 <details> </details> 里面，<summary> 标签为 <details> 元素定义一个可见的标题，当点击标题时才会显示出详细信息。 注意：<summary> 元素标签应该是 <details> 元素的第一个子元素标签。

    • 使用 <dialog 属性> 内容 </dialog> ，定义一个对话框或者窗口。一般设置open属性，如 <dialog open="open">会话窗口内容</dialog>

    2.6 行内布局元素标签

    使用 <span 属性> 内容 </span> ，对文档中的行内元素进行组合，该标签可以将文本的一部分或者文档的一部分独立出来。

    对 <span> 应用样式时，才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。

    被 <span> 元素包含的文本，可以使用 CSS 对它定义样式，或者使用 JavaScript 对它进行操作。

    例如：<p>背景是<span style="color:red">红色</span> 的。</p>

    2.7 链接元素标签

    • 使用 <a 属性> 内容 </a> ，定义一个超链接（anchor），用于创建从一个网页到另一个网页资源的链接，包括其他网页、图片、文件等。该元素标签的格式为 <a href="url">链接文本</a>。其主要属性有：

      • href 属性，是最重要的属性，用于指定链接的的目标 URL 地址，可以是绝对路径或相对路径，建议在子目录 subdirectory 后面添加斜杠符号 / 。例如：<a href="https://example.com/subdirectory/">访问示例网站</a>。

      • target 属性，用于设置在何处打开目标 URL。常用值有 _self（在当前窗口打开，也是默认值）、_blank（在新窗口或新标签页中打开）、_parent（在父框架中打开链接）、_top（在整个窗口中打开链接，取消任何框架）。例如：<a href="https://example.com" target="_blank">在新窗口打开示例网站</a>。

      • download 属性，用于下载链接目标而不是导航到该目标。如果指定文件名，浏览器会提示下载并保存为指定的文件名。例如：<a href="/document_file.pdf" download="file_name.pdf">下载文件</a>。

      • id 属性，用于描点链接。例如：<a id="tips">提示部分</a> <a href="#tips">跳到提示部分</a>

    • 使用 <link 属性 /> ，定义文档与外部资源的关系，最常见的用途是链接外部样式表，且应存在于 <head> </head> 元素内部。

    2.8 图像元素标签

    • 使用 <img 属性 /> （image），用于在网页中嵌入图像。格式为 <img src="图片地址" alt="替代文本" width="128" height="128">。其主要属性有：

      • src 属性：指定图像的源路径，可以是本地路径或网络路径。例如：<img border="1" src="image.jpg" alt="描述图像的替代文本" width="256" height="512">。

      • border 属性：为图像定义外边框粗细。

      • alt 属性：为图像提供替代文本，当图像无法显示时，浏览器会显示这个替代文本，对搜索引擎和屏幕阅读器也很重要。

      • width 和 height 属性：设置图像的宽度和高度，单位可以是像素或百分比。养成指定图像高度和宽度的习惯，避免加载页面时可能会破坏HTML页面的整体布局。

    • 使用 <picture> <source /> <img /> </picture> 包含零或多个 <source> 元素和一个 <img> 元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 <source> 元素，如果没有匹配的，就选择 <img> 元素的 src 属性中的 URL。

    • 使用 <map 属性> 内容 </map> ，定义图像映射，图像映射指的是带有可点击区域的图像。常添加id和name属性。

      • 使用 <area /> ，定义图像映射内部的区域，该标签始终嵌套在 <map> 元素标签内部。

    • 使用 <canvas 属性> 内容 </canvas> ，通过 JavaScript 脚本（Canvas API 或 WebGL API）绘制图形及图形动画（比如图表和其他图像）。该元素标签只是图形容器，必须使用脚本来绘制图形。

    • 使用 <figure 属性> 内容 </figure> ，定义独立的流内容（图像、图表、照片、代码），对其它元素进行组合。<figure> 元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。即使被删除，也不应对文档流产生影响。

      • 使用 <figcaption> figure标题 </figcaption> ，定义一个 <figure> 元素标题。<figcaption> 元素应该放置在 <figure> 元素的第一个或最后一个子元素的位置。

    2.9 媒体元素标签

    • 使用 <audio 属性> 内容 </audio> （音频），定义声音，比如音乐或其他音频流。该元素标签支持MP3、Wav、Ogg格式的音频。<audio> 元素标签，除全局属性外，还支持的属性有：

      • accesskey 属性：用于设置访问元素的键盘快捷键。

      • contenteditable 属性：用于规定是否可编辑元素的内容。

      • contextmenu 属性：用于指定一个元素的上下文菜单。当用户击该元素，出现上下文菜单。

      • dir 属性：用于设置元素中内容的文本方向。

      • draggable 属性：用于指定某个元素是否可以拖动。

      • dropzone 属性：用于指定是否将数据复制，移动，或链接，或删除。

      • hidden 属性：用于属性规定对元素进行隐藏。

      • lang 属性：用于设置元素中内容的语言代码。

      • spellcheck 属性：用于检测元素是否拼写错误。

      • tabindex 属性：用于设置元素的 Tab 键控制次序。

      • translate 属性：用于指定是否一个元素的值在页面载入时是否需要翻译。

    • 使用 <video 属性> 内容 </video> （视频），定义一个视频，比如电影片段等视频流。该元素标签支持MP4、WebM、Ogg格式的视频。<video> 元素标签，除全局属性外，还支持的属性有：

      • autoplay 属性：出现该属性时，则视频在就绪后马上播放。

      • controls 属性：出现该属性时，则向用户显示控件，比如播放按钮。

      • width 属性：用于设置视频播放器的宽度pixels。

      • height 属性：用于设置视频播放器的高度pixels。

      • loop 属性：出现该属性时，则当媒介文件完成播放后再次开始播放。

      • muted 属性：出现该属性时，视频的音频输出为静音。

      • poster 属性：用于设置视频正在下载时显示的图像URL，直到用户点击播放按钮。

      • preload 属性：出现该属性时，则视频在页面加载时进行加载，并预备播放。

      • src 属性：用于设置要播放的视频的 URL。

    • 使用 <source 属性> 内容 </source> ，定义media元素 (<video> 和 <audio>)的媒体资源。

    • 使用 <track 属性> 内容 </track> ，为媒体(<video> 和 <audio>)元素定义外部文本轨道。

    2.10 文本元素标签

    • <b> 和 </b> 之间用于定义粗体字（Bold）。

    • <em> 和 </em> 之间用于定义着重文字_斜体字（Emphasized）。

    • <i> 和 </i> 之间用于定义斜体字（Italic）。

    • <small> 和 </small> 之间用于定义小号字（small）。

    • <strong> 和 </strong> 之间用于定义加重语气_粗体字（strong）。

    • <sub> 和 </sub> 之间用于定义下标字（Subscripted）。

    • <sup> 和 </sup> 之间用于定义上标字（Superscripted）。

    • <ins> 和 </ins> 之间用于定义插入字（Inserted）。

    • <del> 和 </del> 之间用于定义删除字（Deleted）。

    • <mark> 和 </mark> 之间用于定义带有记号的文本。

    • <meter> 和 </meter> 之间用于定义已知最大和最小值的标量值或分数值。

    • <progress> 和 </progress> 之间用于定义运行中的任务进度（进程）。

    • <rp> 和 </rp> 之间用于定义不支持 ruby 元素的浏览器所显示的内容。

    • <rt> 和 </rt> 之间用于定义字符（中文注音或字符）的解释或发音。

    • <ruby> 和 </ruby> 之间定义 ruby 注释（中文注音或字符）。

    • <time> 和 </time> 之间定义一个日期/时间。

    • <data> 和 </data> 之间将一个指定内容和机器可读的翻译联系在一起。但如果内容是与时间或者日期相关的，则一定要使用 <time>。

    • <wbr> 和 <wbr> 之间规定在文本中的何处适合添加换行符。

    • <s> 和 </s> 之间使用删除线来渲染文本。

    2.11 列表元素标签

    • <ul> 和 </ul> （Unordered List）用于创建无序列表，列表项用 <li> 和 </li> ，列表项前通常以圆点符号作为标记。例如：

    <ul>    <!-- Unordered List -->
  <li>苹果</li> <!--  List Item -->
  <li>橙子</li>
  <li>香蕉</li>
</ul>

    • <ol> 和 </ol> （Ordered List）用于创建有序列表，列表项用 <li> 和 </li> ，列表项前会自动添加数字编号。例如：

    <ol>    <!-- Ordered List -->
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

    • <dl> 和 </dl> （Definition List）用于创建自定义列表，每个自定义列表项用 <dt> 和 </dt> ，而每个自定义列表项的定义描述说明用 <dd> 和 </dd> 。

    <dl> <!-- Definition List -->
<dt>自定义列表项a</dt> <!-- Definition Term -->
<dd>自定义列表项a的定义描述说明</dd> <!-- Definition Description -->
<dt>自定义列表项b</dt>
<dd>自定义列表项b的定义描述说明</dd>
</dl>

    • <menu> 和 </menu> 用于定义菜单列表。<menu> 元素在 HTML 规范中被描述为 <ul> 的语义替代，但浏览器视其与 <ul> 没有区别。

    • <command> 和 </command> 定义用户可能调用的命令（比如单选按钮、复选框或按钮）。

    2.12 表格元素标签

    表格标签包含 <table> （表格）、 <caption> （标题）、 <tr> （行）、 <th> （表头）、 <td>（单元格）、 <thead> （表头）、 <tbody> （主体）、 <tfoot> （表注脚注）、 <col> （列）、 <colgroup> （列组）。

    表格可以嵌套包含另一个表格元素或列表元素。

    • <table> （表格）：表格标签，用于创建表格来组织和展示数据，如产品列表、时间表等。例如：

    <table width="80%" border="1" cellpadding="5" cellspacing="5" align="center"> 
<!-- width用于定义表格整体宽度占比 -->
<!-- border用于定义边框粗细 -->
<!-- cellpadding用于定义单元格边距，增加单元格内容与其边框之间的距离。 -->
<!-- cellspacing用于定义单元格间距，增加单元格与其它单元格之间的距离。 -->
<!-- align用于定义单元格对齐方式 -->
<caption>表格标题</caption>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th height="60" >职业</th> <!-- height用于定义单元格高度 -->
        <th colspan="2">备注1</th> <!-- colspan用于定义单元格横跨n列 -->
        <th rowspan="3">备注2</th> <!-- rowspan用于定义单元格竖跨n行 -->
    </tr>
    <tr>
        <td>李四</td>
        <td>27</td>
        <td>程序员</td>
        <td>备注描述</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>28</td>
        <td>设计师</td>
        <td>备注描述</td>
    </tr>
</table>

    • <caption> </caption> ：用于定义表格的标题。

    • <colgroup> </colgroup> （列组）：用于定义表格中供格式化的列组。

      • <col /> （列）：用于定义表格中一个或多个列的属性值。

    • <thead> </thead> （表头）：用于定义义表格中的表头内容。

    • <tbody> </tbody> （主体）：用于定义表格中的主体内容。

    • <tfoot> </tfoot> （表注脚注）：用于定义表格中的表注内容（脚注）。

    • <tr> </tr> （table row行）：表格行标签，用于定义表格中的一行，一个表格可以包含多行。

    • <th> </th> （table header表头）：表格表头单元格标签，用于定义表格的表头内容，通常会以加粗、居中等样式显示，用于描述表格列的标题。

    • <td> </td> （table data单元格）：表格数据单元格标签，用于定义表格中的单元格内容，放置实际的数据信息。

    2.13 表单元素标签

    表单标签用于用户输入，包含 <form> 、 <label> 、 <input> 、 <select> 、 <option> 、 <textarea> 、 <fieldset> 、 <legend> 、 <optgroup> 、 <button> 、 <datalist> 、 <keygen> 、 <output>等。

    <form action="demo_form.php" method="post"> <!-- method="get" -->
    <fieldset>  
    <legend>information:</legend>
        <input type="text" name="email" size="40" maxlength="50">
        <input type="password"> <br>
​
        <input type="checkbox" name="checkbox[]" value="A" > A <br>
        <input type="checkbox" name="checkbox[]" value="B" checked="checked"> B <br>
​
        <input type="radio" name="sex" value="male"> Male <br>
        <input type="radio" name="sex" value="female" checked="checked"> Female <br>
​
        <input type="submit" value="Send">
​
        <input type="reset">
​
        <input type="hidden">
        <select>
            <option>香蕉</option>
            <option selected="selected">樱桃</option>
            <option>苹果</option>
        </select>
​
        <textarea name="comment" rows="10" cols="20"></textarea>  
    </fieldset>
</form>

    • <form> ：表单标签，用于创建用户输入数据的表单，以便收集用户信息并提交到服务器进行处理。其主要属性有：

      • action ：指定表单提交的服务器目标 URL 地址，即表单数据将被发送到哪里进行处理。

      • method ：指定表单提交的方法，常用值为 get（将表单数据附加在 URL 后面进行提交）和 post（将表单数据放在请求体中进行提交）。

    • <fieldset> ：用于定义一组相关的表单元素，并使用外框包含起来，也包括 <label> 元素。

    • <legend> ：用于定义 <fieldset> 元素的标题。

    • <label> ：用于为 <form> 表单元素添加标签，提高可读性。

    • <input> ：输入框标签，用于创建各种类型的输入框，如文本框、密码框、单选按钮、复选框等。其主要属性有：

      • type ：指定输入框的类型，如 radio（单选按钮）、 checkbox（复选框）、 button（按钮）、 submit（提交按钮）、 reset（f复位按钮）、 search（搜索按钮）、 text（文本框）、 password（密码框）、 number（数字框）、 tel（电话号码框）、 email（邮件地址框）、 url（网页地址框）、 image（图像）、 file（选择文件）、 range（输入范围）、 color（选择颜色）、 datetime-local（选择日期时间）、 date（选择日期）、 time（选择时间）、 month（选择月份）、 week（选择星期） 等。

      • name ：指定输入框的名称，用于标识表单数据中的字段名称，提交表单时会将字段名称和用户输入的值一起发送到服务器。

      • value ：指定输入框的默认值或提交时的值。

      • id ：ID属性用于关联 <label> 元素标签。

    • <select> ：下拉列表标签，用于创建下拉选择框，用户可以从预定义的选项中选择一个或多个选项。

    • <option> ：用于定义 <select> 下拉列表中的选项。例如：

    <select name="城市">
    <option value="北京">北京</option>
    <option value="上海">上海</option>
    <option value="广州" selected>广州</option>
    <!-- selected用于定义默认预选项 -->
    <option value="深圳">深圳</option>
</select>

    • <optgroup> ：用于定义选项组，为 <select> 元素中的选项创建分组。

    • <textarea> ：多行文本输入框标签，用于创建一个较大面积的文本输入区域，用户可以在其中输入多行文本信息。

      其中 rows 属性指定文本框的行数， cols 属性指定文本框的列数。例如：

    <textarea name="留言" rows="4" cols="50">在此输入留言内容...</textarea>

    • <button> ：用于定义一个点击按钮。

    • <datalist> ：包含了一组 <option> 元素，用于指定一个预先定义的输入控件选项列表。

    • <keygen> ：定义了表单的密钥对生成器字段。

    • <output> ：用于定义一个计算结果或用户操作结果。

    2.14 程序元素标签

    • <script> ：用于定义客户端脚本。

    • <noscript> ：用于定义针对不支持客户端脚本的用户的替代内容。

    • <embed> ：定义一个容器，将外部内容嵌入文档中的指定位置，用来嵌入外部应用程序或其他交互式内容源（插件）。

    • <object> ：定义嵌入的对象，可引入一个外部资源。这个资源可能是一张图片，一个嵌入的浏览上下文，亦或是一个插件所使用的资源。

    • <param> ：定义对象的参数。

    2.15 框架元素标签

    • <iframe> 和 </iframe> （Inline frame）是内嵌框架标签，用于标记一个内联框架。通过使用框架，可以在同一个浏览器窗口中显示不止一个页面。

    <iframe src="demo_iframe.htm" width="20" height="20" frameborder="0"> </iframe>
<!-- width和height可以是像素单位，也可以按百分比数值 -->
<!-- frameborder="0"，表示不显示边框 -->

    • 可以使用 <iframe> 来显示 <a> 链接的页面，例如：

    <iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://www.baidu.com" target="iframe_a" rel="noopener">百度</a></p>

    • <fencedframe> 和 </fencedframe> 是围栏框架元素标签，用于将另一个 HTML 页面嵌入到当前页面中。

    2.16 HTML 计算机输出元素标签

    • <code> 和 </code> 之间用于定义计算机代码，表明其中的文本是一段简短的计算机代码的样式。默认情况下，内容文本使用用户代理默认的等宽字体显示。。

    • <kbd> 和 </kbd> 之间用于定义键盘码（Keyboard）。

    • <samp> 和 </samp> 之间用于定义计算机程序输出样本（Sample）。

    • <var> 和 </var> 之间用于定义变量（Variable）。

    • <pre> 和 </pre> 之间用于定义预定义格式文本（Preformatted）。 被包围在 <pre> 和 </pre> 之间的文本通常会保留空格和换行符，紧跟在 <pre> 开始标签后的换行符也会被省略。

    2.17 HTML 引文引用定义元素标签

    • <abbr> 和 </abbr> 之间用于定义词语缩写（Abbreviation）。

    • <address> 和 </address> 之间用于定义地址。 <address> 和 </address> 通常用来表示作者/所有者的联系信息，并建议被包含在 <footer> 元素里面。

    • <bdi> 和 </bdi> 是双向隔离元素，在其标签之间用于设置一段文本，使其脱离其父元素的文本方向设置，当网站动态插入一些文本且不知道所插入文本的方向性时，此功能特别有用。

    • <bdo> 和 </bdo> 是双向文本覆盖元素，在其标签之间用于修改文字方向。

    <p> <bdo dir="rtl">段落文字从右到左显示。</bdo> </p>

    • <blockquote> 和 </blockquote> 是块级引用元素，在其标签之间的文字是引用内容。通常在渲染时，这部分的内容会有一定的缩进。若引文来源于网络，则可以将原内容的出处 URL 地址设置到 cite 属性上。若要以文本的形式告知读者引文的出处时，可以通过 <cite> 元素。

      • cite 属性:标注引用的信息的来源文档或者相关信息的 URL 。

    • <q> 和 </q> 之间用于定义短引用（Quotation）。

    • <cite> 和 </cite> 之间用于定义引用、引证。

    • <dfn> 和 </dfn> 之间用于定义一个定义项目（Defines a Definition Term）。

    2.18 HTML 其它元素

    • <search> 和 </search> 通用搜索元素，是一个容器，代表文档或应用程序中包含与执行搜索或过滤操作相关的表单控件或其他内容的部分。<search> 元素在语义上标识了元素内容的用途——具有搜索或过滤功能。搜索或过滤功能可以针对网站或应用程序、当前网页或文档，也可以针对整个互联网或其子部分。

    2.19 HTML 颜色定义

    HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。每种颜色的最小值是0（十六进制：#00），最大值是255（十六进制：#FF）。

    如下表所示：

    颜色(Color) 颜色十六进制(Color HEX) 颜色RGB(Color RGB)
    黑色 #000000 rgb(0,0,0)
    红色 #FF0000 rgb(255,0,0)
    黄色 #FFFF00 rgb(255,255,0)
    绿色 #00FF00 rgb(0,255,0)
    青色 #00FFFF rgb(0,255,255)
    蓝色 #0000FF rgb(0,0,255)
    洋红色 #FF00FF rgb(255,0,255)
    白色 #FFFFFF rgb(255,255,255)
    灰色 #C0C0C0 rgb(192,192,192)

    通过 <style> 元素标签，可以定义文本段落的背景颜色，如下所示 ：

    <p style="background-color:rgb(255,255,0)">
通过 rbg 值设置背景颜色
</p>
<p style="background-color:rgba(255,0,255,0.3)">
通过 rbga 值设置背景颜色, a表示颜色透明度。
</p>

    2.20 HTML 字符实体

    1. HTML 中的预留字符必须用字符实体来替换显示。

    • &lt; 表示小于号< （less than） 。

    • &gt; 表示大于号> （greater than）。

    • &amp; 表示与号& （ampersand）。

    • &apos; 表示单引号' （apostrophe） 。

    • &quot; 表示双引号" （quotation mark）。

      例如需要显示（<小于号），我们必须写成 &lt; 这样的字符实体名称，或 &#60; / &#060; 这样的字符实体编号。

    1. 一些在键盘上找不到的字符可以使用字符实体来替换显示。

      例如需要显示（© 版权图标），我们必须写成&copy;这样的字符实体名称，或 &#169; 这样的字符实体编号。

    2. 不间断空格也需要使用字符实体来替换显示。

      空格的字符实体名称为 &nbsp; ，字符实体编号为 &#160; 。

    2.21 HTML 的 URL 说明

    URL 是统一资源定位器(Uniform Resource Locators)的缩写，用来表示一个网页地址。

    一个网页地址的语法规则为 scheme://host.domain:port/path/filename ，各代码的描述说明如下：

    • scheme ：表示因特网服务的类型。最常见的类型是 http、https、ftp、file。

    • host ：表示域主机（http 的默认主机是 www）

    • domain ：表示因特网域名。

    • :port ：表示主机上的端口号（http 的默认端口号是 80）

    • path ：表示服务器上的路径（如果省略，则文档必须位于网站的根目录中）。

    • filename ：定义说明文档/资源的名称

    3 HTML 文档的后缀名

    HTML文档支持两种后缀名，如下所示，没有区别，都可以使用。

    • .html（推荐统一采用 .html ）

    • .htm

    4 浏览器作用

    浏览器的作用是解析HTML各元素标签，并渲染成可视化网页，但不显示标签本身。

    5 学习建议

    5.1 掌握核心标签

    文本、链接、图片、列表、表格。

    5.2 浏览器调试网页

    • 打开浏览器，在想学习的网页，右击鼠标，选择“查看页面源代码” 或 “查看网页源代码”。

    • 打开浏览器，右键鼠标，选择“检查”，或按“ F12 功能键”，可以打开调试界面，进行代码调试。

    5.3 实践工具

    使用编辑器（如 VS Code）创建 .html 文件。

    VS Code 编辑器可以安装 Live Server 插件 或 Live Preview 插件来实时预览编写的代码，是否达到预期的显示效果。

    5.4 实践简单页面

    <!DOCTYPE html>
<html>
<head>
    <title>我的第一个网页</title>
</head>
<body>
    <h1>这是用HTML创建的一级标题。</h1>
    <p>这是用HTML创建的段落。</p>
    <p>Hello World!</p>
</body>
</html>

    5.5 进阶内容

    • 表单设计

      复杂控件（文件上传、验证）。

    • HTML5 API

      地理定位、拖放操作、 Web Workers 。

    • 语义化布局

      使用 <article> 、 <section> 等标签替代传统 <div> 。

    • 结合 CSS 实现布局，用 JavaScript 添加交互

    • 关键技能

      响应式设计（媒体查询）、Flex box / Grid 布局、表单验证。

    5.6 实践建议

    5.6.1 语义化编码

    优先使用 <header> 、 <footer> 、 <section> 、 <article> 、 <aside> 、 <details> 、 <dialog> 、 <summary> 、 <main> 、 <nav> 等语义化标签替代 <div> ，以便提升可读性、可访问性与 SEO 优化。

    5.6.2 响应式设计

    通过CSS媒体查询适配不同设备（如手机、平板）。

    5.6.3 性能优化

    压缩图片、使用 CDN 加速资源加载、按需加载 JavaScript 。

    5.6.4 持续学习

    关注 HTML 新特性（如 Web Components 、 Shadow DOM）及框架更新。

    5.7 学习资源

    官方文档

    MDN Web Docs（权威指南）。

    • https://developer.mozilla.org/zh-CN/docs/Web/HTML

    • https://developer.mozilla.org/en-US/docs/Web/CSS

    • https://developer.mozilla.org/en-US/docs/Web/JavaScript

    6 应用场景

    • 网页开发

      与 CSS （样式）、 JavaScript （交互）构成前端技术栈。

    • 电子邮件模板

      使用 HTML 定制化邮件内容。

    • 静态网站生成

      配合静态站点生成器，创建博客、文档站点。

    7 总结

    HTML 是 Web 开发的基石，其核心价值在于结构化内容并实现资源互联。

    HTML （内容结构）是前端开发的基础，结合 CSS （样式控制）和 JavaScript （交互逻辑）协同工作，可以创建出功能丰富、视觉精美的网页，共同实现现代网页的视觉效果与动态功能。

    内容目录

    HTML5学习

    1 HTML简介

    1.1 简介1.2 特性1.3 基本结构框架1.4 与 CSS 层叠样式表协同1.5 与 JavaScript 脚本协同

    2 HTML语法

    2.1 元素标签说明2.2 标签语法规则2.3 元素标签的常用属性2.4 基本框架标签2.5 块级布局元素标签2.6 行内布局元素标签2.7 链接元素标签2.8 图像元素标签2.9 媒体元素标签2.10 文本元素标签2.11 列表元素标签2.12 表格元素标签2.13 表单元素标签2.14 程序元素标签2.15 框架元素标签2.16 HTML 计算机输出元素标签2.17 HTML 引文引用定义元素标签2.18 HTML 其它元素2.19 HTML 颜色定义2.20 HTML 字符实体2.21 HTML 的 URL 说明

    3 HTML 文档的后缀名

    4 浏览器作用

    5 学习建议

    5.1 掌握核心标签5.2 浏览器调试网页5.3 实践工具5.4 实践简单页面5.5 进阶内容5.6 实践建议5.6.1 语义化编码5.6.2 响应式设计5.6.3 性能优化5.6.4 持续学习5.7 学习资源

    6 应用场景

    7 总结

    迪欧IT——dio智能科技

     

    dioIT.迪欧IT.dio智能科技

    迪欧智慧

     

     

  • 欢迎来到迪欧IT，愉快~

    本博客空间主要分享智能科技相关知识。

2025 年 9 月
一 二 三 四 五 六 日
1234567
891011121314
15161718192021
22232425262728
2930  

粤ICP备2021093735号

粤公网安备44522402000161号

dioIT.迪欧IT.dio智能科技

Technical Support From dioIT.