HTML

基础语法

声明

HTML声明(文档类型声明)是HTML文档的第一行代码,用于告诉浏览器当前文档使用的HTML版本和规范。

核心功能
版本标识:声明文档遵循的HTML规范版本
标准模式渲染:确保浏览器使用标准模式而非怪异模式渲染页面
兼容性保障:提供向后的兼容性支持

主要声明类型
HTML5 声明

html
<!DOCTYPE html>

现代网页开发的标准声明,简洁且向前兼容。

HTML 4.01 声明

html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

XHTML 1.0 声明

html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

完整HTML5文档示例

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
</head>
<body>
    <h1>欢迎访问</h1>
    <p>这是一个标准的HTML5文档。</p>
</body>
</html>

重要说明
声明必须位于文档最顶端,在标签之前
声明不区分大小写,但推荐使用小写
HTML5声明最为简洁,是现代开发的首选
省略声明可能导致浏览器进入怪异模式,影响布局渲染
使用正确的DOCTYPE声明是构建标准兼容网页的基础。

Head(头标签)

元素是 HTML 文档的元数据容器,包含文档标题、字符编码、视口设置、样式表链接、脚本引用等非可视内容。

核心功能与语法

html
<!DOCTYPE html>
<html>
<head>
    <!-- 字符编码声明 -->
    <meta charset="UTF-8">
    
    <!-- 视口设置,响应式设计必备 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- 文档标题 -->
    <title>页面标题</title>
    
    <!-- 样式表链接 -->
    <link rel="stylesheet" href="styles.css">
    
    <!-- 内部样式 -->
    <style>
        body { font-family: Arial, sans-serif; }
    </style>
    
    <!-- 外部脚本 -->
    <script src="script.js" defer></script>
    
    <!-- 内部脚本 -->
    <script>
        console.log("页面加载中");
    </script>
    
    <!-- 元数据 -->
    <meta name="description" content="页面描述">
    <meta name="keywords" content="关键词1,关键词2">
    <meta name="author" content="作者名">
    
    <!-- 图标 -->
    <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

主要元素详解

  1. 元数据标签
<title>:定义浏览器标签页标题
<meta>:提供文档元数据
charset:字符编码
viewport:移动端适配
description:搜索引擎描述
keywords:搜索引擎关键词
  1. 资源链接
<link>:链接外部资源
rel="stylesheet":CSS 样式表
rel="icon":网站图标
  1. 脚本
<script>:JavaScript 代码
src 属性:引用外部脚本
defer 属性:延迟执行
  1. 样式
<style>:内嵌 CSS 样式

标签

结构标签
<html>
功能:定义HTML文档的根元素
说明:所有其他HTML元素都包含在此标签内

html
<html>
  <!-- 页面内容 -->
</html>
<head>
功能:包含文档的元数据
说明:包含标题、字符集声明、样式、脚本等

html
<head>
  <title>页面标题</title>
  <meta charset="UTF-8">
</head>
<body>
功能:定义文档的主体内容
说明:包含所有可见的页面内容

html
<body>
  <h1>页面标题</h1>
  <p>段落内容</p>
</body>
文本内容标签
<h1> - <h6>
功能:定义标题,h1最重要,h6最不重要

说明:用于创建层次结构标题

html
<h1>主标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<p>
功能:定义段落
说明:浏览器会自动在段落前后添加空白

html
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<br>
功能:插入单个换行
说明:空元素,没有结束标签

html
<p>第一行<br>第二行</p>
<hr>
功能:创建水平分隔线
说明:用于内容分隔

html
<p>第一部分内容</p>
<hr>
<p>第二部分内容</p>
文本格式化标签
> <strong> 
> 功能:定义重要文本
> 说明:通常以粗体显示
> 
> html <p>这是<strong>重要</strong>文本。</p>
<em>
功能:定义强调文本
说明:通常以斜体显示

html
<p>这是<em>强调</em>文本。</p>
<mark>
功能:定义标记/高亮文本
说明:背景通常为黄色

html
<p>这是<mark>高亮</mark>文本。</p>
<small>
功能:定义小号文本
说明:通常比周围文本小一号

html
<p>正常文本<small>小号文本</small></p>
链接与图像
<a>
功能:创建超链接
说明:href属性指定链接目标

html
<a href="https://example.com">访问示例网站</a>
<img>
功能:嵌入图像
说明:src属性指定图像源,alt提供替代文本

html
<img src="image.jpg" alt="图片描述">
列表标签
<ul> 和 <li>
功能:创建无序列表
说明:列表项默认以项目符号显示

html
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
</ul>
<ol> 和 <li>
功能:创建有序列表
说明:列表项默认以数字显示

html
<ol>
  <li>第一项</li>
  <li>第二项</li>
</ol>
表格标签
<table>, <tr>, <td>, <th>
功能:创建表格结构
说明:table定义表格,tr定义行,td定义单元格,th定义表头

html
<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
</table>

单元格合并
colspan:水平合并单元格
rowspan:垂直合并单元格

html
<table>
  <tr>
    <td colspan="2">跨两列</td>
  </tr>
  <tr>
    <td rowspan="2">跨两行</td>
    <td>普通单元格</td>
  </tr>
  <tr>
    <td>普通单元格</td>
  </tr>
</table>
表单标签
<form>
功能:创建HTML表单
说明:用于收集用户输入

html
<form action="/submit" method="post">
  <!-- 表单元素 -->
</form>
<input>
功能:创建输入字段
说明:type属性定义输入类型

html
<input type="text" placeholder="请输入文本">
<input type="password" placeholder="请输入密码">
<input type="email" placeholder="请输入邮箱">
<textarea>
功能:创建多行文本输入
说明:rows和cols属性定义大小

html
<textarea rows="4" cols="50">默认文本</textarea>
<select> 和 <option>
功能:创建下拉列表
说明:option定义列表选项

html
<select>
  <option value="1">选项1</option>
  <option value="2">选项2</option>
</select>
<button>
功能:创建可点击按钮
说明:可用于提交表单或触发操作

html
<button type="submit">提交</button>
<button type="button">普通按钮</button>
语义化标签
<header>
功能:定义页面或区域的页眉
说明:通常包含logo、导航等

html
<header>
  <h1>网站标题</h1>
</header>
<nav>
功能:定义导航链接
说明:用于主要导航区域

html
<nav>
  <a href="/home">首页</a>
  <a href="/about">关于</a>
</nav>
<main>
功能:定义文档主要内容
说明:每个页面应只有一个main元素

html
<main>
  <h1>主要内容标题</h1>
  <p>主要内容段落</p>
</main>
<article>
功能:定义独立的内容
说明:如博客文章、新闻故事等

html
<article>
  <h2>文章标题</h2>
  <p>文章内容...</p>
</article>
<section>
功能:定义文档中的节
说明:用于对相关内容分组

html
<section>
  <h2>章节标题</h2>
  <p>章节内容...</p>
</section>
<footer>
功能:定义页面或区域的页脚
说明:通常包含版权信息、联系方式等

html
<footer>
  <p>&copy; 2023 公司名称</p>
</footer>
其他常用标签
<div>
功能:定义文档分区或节
说明:常用于CSS样式化和布局

html
<div class="container">
  <p>分区内容</p>
</div>
<span>
功能:定义行内元素分组
说明:用于对文本的一部分应用样式

html
<p>这是<span class="highlight">高亮</span>文本。</p>
<meta>
功能:提供关于HTML文档的元数据
说明:常用于字符集声明、视口设置等

html
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link>
功能:链接外部资源
说明:常用于链接CSS样式表

html
<link rel="stylesheet" href="styles.css">
<script>
功能:嵌入或引用JavaScript代码
说明:可内嵌代码或引用外部文件

```html
html
<script>
  console.log("Hello World!");
</script>
<script src="script.js"></script>

特殊符号转义

HTML 特殊符号转义是将具有特殊含义的字符转换为对应的 HTML 实体,以避免与 HTML 标签和语法冲突,确保内容正确显示。

主要转义字符

  1. 基础转义字符
html
<!-- 小于号 -->
&lt;    <!-- < -->

<!-- 大于号 -->
&gt;    <!-- > -->

<!-- 引号 -->
&quot;  <!-- " -->

<!-- 单引号 -->
&apos;  <!-- ' (HTML5新增) -->

<!-- 与符号 -->
&amp;   <!-- & -->
  1. 常用特殊符号
html
<!-- 空格 -->
&nbsp;   <!-- 不换行空格 -->

<!-- 版权符号 -->
&copy;   <!-- © -->

<!-- 注册商标 -->
&reg;    <!-- ® -->

<!-- 商标符号 -->
&trade;  <!-- ™ -->
  1. 数学符号
html
<!-- 乘号 -->
&times;  <!-- × -->

<!-- 除号 -->
&divide; <!-- ÷ -->

<!-- 不等于 -->
&ne;     <!-- ≠ -->

<!-- 约等于 -->
&asymp;  <!-- ≈ -->

使用场景
显示 HTML 代码:防止浏览器解析标签
数学公式:准确显示数学符号
版权信息:正确显示版权相关符号
多语言支持:显示特殊语言字符

注意事项
转义字符以 & 开头,以 ; 结尾
& 符号本身必须转义
数字实体格式:&#数字;
命名实体格式:&名称;

JavaScript

JavaScript 是一种轻量级的‌脚本语言‌,主要用于增强网页的交互性和动态性‌12。它可以直接在浏览器中运行,无需提前编译,具有很高的灵活性‌3。作为 Web 开发的三大核心技术之一(HTML、CSS、JavaScript),它负责处理用户与网页之间的交互逻辑

基本语法

变量、常量

变量 (var, let)
var (函数作用域)

javascript
var name = "张三";  // 声明并初始化
var age;           // 仅声明,值为undefined
age = 25;          // 后续赋值

特点:
函数作用域
存在变量提升
可重复声明

let (块级作用域)

javascript
let count = 10;     // 声明并初始化
let score;          // 仅声明
score = 95;         // 后续赋值

特点:
块级作用域 ({})
不存在变量提升
不可重复声明
推荐使用

常量 (const)

javascript
const PI = 3.14159;           // 必须初始化
const USER = {name: "李四"};  // 对象常量

// USER = {};                 // 错误:不能重新赋值
USER.name = "王五";           // 正确:可修改对象属性

特点:
块级作用域
声明时必须初始化
不可重新赋值
对象/数组内容可修改

使用建议
优先使用 const - 确保数据不被意外修改
其次使用 let - 需要重新赋值时使用
避免使用 var - 存在作用域问题

javascript
// 推荐写法
const fixedValue = 100;
let changeableValue = 50;

// 不推荐
var oldVariable = "过时写法";

记住:好的变量命名比注释更重要!

数据类型

JavaScript 数据类型分为两大类:原始类型和引用类型。

一、原始类型(基本类型)
存储在栈内存中,按值访问。
Number - 数字类型

javascript
let age = 25;
let price = 99.8;

String - 字符串类型

javascript
let name = "张三";
let msg = 'Hello';

Boolean - 布尔类型

javascript
let isActive = true;
let isLoading = false;

Undefined - 未定义

javascript
let value;
console.log(value); // undefined

Null - 空值

javascript
let empty = null;

Symbol - 唯一值(ES6)

javascript
let id = Symbol("id");
BigInt - 大整数(ES2020)

javascript
let bigNum = 123n;

二、引用类型
存储在堆内存中,按引用访问。

Object - 对象

javascript
let person = {
  name: "李四",
  age: 30
};

Array - 数组

javascript
let colors = ["red", "green", "blue"];
Function - 函数

javascript
function greet() {
  return "Hello!";
}

Date - 日期

javascript
let now = new Date();

RegExp - 正则表达式

javascript
let pattern = /test/gi;

三、类型检测
typeof - 检测基本类型

javascript
typeof "hello" // "string"
typeof 42      // "number"

instanceof - 检测引用类型

javascript
[] instanceof Array    // true
{} instanceof Object   // true

特点总结:
原始类型:不可变,值比较
引用类型:可变,引用比较
原始类型存储在栈,引用类型存储在堆

运算符

  1. 算术运算符
    用于数学计算。
javascript
let a = 10, b = 3;

console.log(a + b);  // 13 - 加法
console.log(a - b);  // 7  - 减法
console.log(a * b);  // 30 - 乘法
console.log(a / b);  // 3.33 - 除法
console.log(a % b);  // 1  - 取模
console.log(a ** b); // 1000 - 指数
console.log(++a);    // 11 - 前置递增
console.log(b--);    // 3  - 后置递减
  1. 赋值运算符
    将值赋给变量。
javascript
let x = 10;

x += 5;  // x = x + 5 → 15
x -= 3;  // x = x - 3 → 12
x *= 2;  // x = x * 2 → 24
x /= 4;  // x = x / 4 → 6
x %= 5;  // x = x % 5 → 1
  1. 比较运算符
    比较值并返回布尔值。
javascript
console.log(5 == "5");   // true - 相等
console.log(5 === "5");  // false - 严格相等
console.log(5 != "5");   // false - 不等
console.log(5 !== "5");  // true - 严格不等
console.log(5 > 3);      // true - 大于
console.log(5 < 3);      // false - 小于
console.log(5 >= 5);     // true - 大于等于
  1. 逻辑运算符
    组合或操作布尔值。
javascript
let isTrue = true, isFalse = false;

console.log(isTrue && isFalse); // false - 与
console.log(isTrue || isFalse); // true  - 或
console.log(!isTrue);           // false - 非
  1. 位运算符
    在二进制位级别操作。
javascript
let m = 5, n = 3;  // 5 = 101, 3 = 011

console.log(m & n);  // 1  - 与 (101 & 011 = 001)
console.log(m | n);  // 7  - 或 (101 | 011 = 111)
console.log(m ^ n);  // 6  - 异或 (101 ^ 011 = 110)
console.log(~m);     // -6 - 非
console.log(m << 1); // 10 - 左移 (101 → 1010)
console.log(m >> 1); // 2  - 右移 (101 → 10)
  1. 三元运算符
    条件表达式。
javascript
let age = 18;
let canVote = age >= 18 ? "可以投票" : "不能投票";
console.log(canVote); // "可以投票"
  1. 类型运算符
    检查类型或实例。
javascript
console.log(typeof "hello");        // "string"
console.log("hello" instanceof String); // false (原始类型)
  1. 其他运算符
javascript
// 空值合并 - 左侧为null/undefined时返回右侧
let name = null ?? "默认名";

// 可选链 - 安全访问嵌套属性
let user = {};
let street = user?.address?.street;

// 展开运算符
let arr1 = [1, 2];
let arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]

流程结构

  1. 顺序结构
    代码默认按从上到下的顺序执行。
javascript
let a = 1;
let b = 2;
let sum = a + b; // 按顺序执行
  1. 条件分支结构
    if-else
javascript
if (condition) {
    // 条件为真时执行
} else {
    // 条件为假时执行
}

// 多条件
if (score >= 90) {
    console.log("优秀");
} else if (score >= 60) {
    console.log("及格");
} else {
    console.log("不及格");
}

switch-case

javascript
switch (expression) {
    case value1:
        // 代码块
        break;
    case value2:
        // 代码块
        break;
    default:
        // 默认代码块
}

三元运算符

javascript
let result = condition ? value1 : value2;
  1. 循环结构
    for循环
javascript
for (let i = 0; i < 5; i++) {
    console.log(i);
}

while循环

javascript
while (condition) {
    // 循环体
}

do-while循环

javascript
do {
    // 循环体(至少执行一次)
} while (condition);
  1. 循环控制语句
    break
javascript
for (let i = 0; i < 10; i++) {
    if (i === 5) break; // 跳出循环
}
continue
javascript
for (let i = 0; i < 10; i++) {
    if (i % 2 === 0) continue; // 跳过本次迭代
    console.log(i); // 只输出奇数
}
  1. 异常处理
    try-catch-finally
javascript
try {
    // 可能出错的代码
    riskyOperation();
} catch (error) {
    // 错误处理
    console.log("出错:", error.message);
} finally {
    // 无论是否出错都会执行
    cleanup();
}

throw

javascript
throw new Error("自定义错误信息");
  1. 特殊循环
    for…in (遍历对象属性)
javascript
for (let key in object) {
    console.log(key, object[key]);
}

for…of (遍历可迭代对象)

javascript
for (let item of array) {
    console.log(item);
}

关键特点总结:
顺序结构:默认执行方式
分支结构:根据不同条件执行不同代码路径
循环结构:重复执行代码块
控制语句:改变正常的执行流程
异常处理:处理运行时错误

函数

函数定义
函数是执行特定任务的代码块,可重复调用。

基础语法:

javascript
// 函数声明
function functionName(parameters) {
  // 函数体
  return value;
}

// 函数表达式
const functionName = function(parameters) {
  // 函数体
};

// 箭头函数
const functionName = (parameters) => {
  // 函数体
};

参数传递

javascript
function greet(name, age = 18) { // 默认参数
  return `Hello, ${name}! Age: ${age}`;
}

// 剩余参数
function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

返回值

javascript
function multiply(a, b) {
  return a * b; // 返回计算结果
}

function noReturn() {
  // 无return语句,返回undefined
}

函数调用

javascript
// 直接调用
const result = multiply(5, 3);

// 方法调用
const obj = {
  method: function() {
    return "method called";
  }
};
obj.method();

作用域

javascript
let globalVar = "global";

function testScope() {
  let localVar = "local"; // 局部变量
  console.log(globalVar); // 可访问全局变量
}

高阶函数

javascript
// 接收函数作为参数
function operate(a, b, operation) {
  return operation(a, b);
}

// 返回函数
function createMultiplier(factor) {
  return function(x) {
    return x * factor;
  };
}

箭头函数特点

javascript
const arrowFunc = (x, y) => x + y; // 隐式返回
const singleParam = x => x * 2; // 单参数可省略括号

核心要点:
函数是"一等公民",可作为值传递
支持参数默认值和剩余参数
箭头函数没有自己的this绑定
通过return返回值,无return返回undefined
函数作用域保护局部变量

事件

事件基础概念
事件是用户或浏览器执行的特定动作,如点击、滚动、按键等。
事件处理是通过JavaScript代码响应这些动作的过程。

事件流
事件在DOM中传播的三个阶段:
捕获阶段 - 从window向下到目标元素
目标阶段 - 到达目标元素
冒泡阶段 - 从目标元素向上到window

事件处理方式

  1. HTML事件处理程序
html
<button onclick="handleClick()">点击我</button>
<script>
function handleClick() {
    console.log('按钮被点击了');
}
</script>
  1. DOM0级事件处理
javascript
const btn = document.getElementById('myButton');
btn.onclick = function() {
    console.log('按钮被点击了');
};
  1. DOM2级事件处理
javascript
const btn = document.getElementById('myButton');

// 添加事件监听器
btn.addEventListener('click', function(event) {
    console.log('按钮被点击了', event);
});

// 移除事件监听器
btn.removeEventListener('click', handlerFunction);

常用事件类型
鼠标事件

javascript
element.addEventListener('click', handleClick);      // 点击
element.addEventListener('dblclick', handleDblClick); // 双击
element.addEventListener('mouseover', handleMouseOver); // 鼠标进入
element.addEventListener('mouseout', handleMouseOut);  // 鼠标离开
element.addEventListener('mousemove', handleMouseMove); // 鼠标移动

键盘事件

javascript
element.addEventListener('keydown', handleKeyDown);   // 按键按下
element.addEventListener('keyup', handleKeyUp);       // 按键释放
element.addEventListener('keypress', handleKeyPress); // 按键按下并释放

表单事件

javascript
form.addEventListener('submit', handleSubmit);        // 表单提交
input.addEventListener('change', handleChange);       // 值改变
input.addEventListener('focus', handleFocus);         // 获得焦点
input.addEventListener('blur', handleBlur);           // 失去焦点
input.addEventListener('input', handleInput);         // 输入时

窗口事件

javascript
window.addEventListener('load', handleLoad);          // 页面加载完成
window.addEventListener('resize', handleResize);      // 窗口大小改变
window.addEventListener('scroll', handleScroll);      // 页面滚动

事件对象
事件处理函数接收的事件对象包含事件相关信息:

javascript
element.addEventListener('click', function(event) {
    console.log(event.type);        // 事件类型
    console.log(event.target);      // 触发事件的元素
    console.log(event.clientX);     // 鼠标X坐标
    console.log(event.clientY);     // 鼠标Y坐标
    console.log(event.key);         // 按下的键
});

事件委托
利用事件冒泡,在父元素上处理子元素的事件:

javascript
const list = document.getElementById('myList');
list.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log('点击了列表项:', event.target.textContent);
    }
});
阻止默认行为和事件传播
javascript
element.addEventListener('click', function(event) {
    event.preventDefault();   // 阻止默认行为
    event.stopPropagation(); // 阻止事件传播
    event.stopImmediatePropagation(); // 阻止其他处理函数执行
});

自定义事件

javascript
// 创建自定义事件
const customEvent = new CustomEvent('myEvent', {
    detail: { message: '自定义事件数据' }
});

// 触发事件
element.dispatchEvent(customEvent);

// 监听自定义事件
element.addEventListener('myEvent', function(event) {
    console.log(event.detail.message);
});

使用addEventListener而不是内联事件
合理使用事件委托提高性能
及时移除不需要的事件监听器
使用事件对象属性和方法进行精确控制
考虑事件处理的性能影响

HTML DOM

什么是 DOM?
DOM(Document Object Model)是 HTML 和 XML 文档的编程接口,它将文档表示为节点树,允许 JavaScript 动态访问和更新文档的内容、结构和样式。

DOM 节点树
HTML 文档被表示为节点对象树:
文档节点:整个文档
元素节点:HTML 标签
属性节点:HTML 属性
文本节点:元素内的文本内容

基础 DOM 操作

  1. 选择元素
javascript
// 通过 ID 选择
const element = document.getElementById("myId");

// 通过类名选择(返回类数组)
const elements = document.getElementsByClassName("myClass");

// 通过标签名选择
const divs = document.getElementsByTagName("div");

// 通过 CSS 选择器选择单个元素
const element = document.querySelector(".container");

// 通过 CSS 选择器选择多个元素
const elements = document.querySelectorAll("p.highlight");
  1. 修改内容
javascript
// 修改 HTML 内容
element.innerHTML = "<strong>新内容</strong>";

// 修改文本内容(更安全,不会解析 HTML)
element.textContent = "纯文本内容";

// 获取和设置属性
element.setAttribute("class", "new-class");
const value = element.getAttribute("src");
  1. 修改样式
javascript
// 直接修改样式
element.style.color = "red";
element.style.fontSize = "20px";

// 添加/移除 CSS 类
element.classList.add("active");
element.classList.remove("inactive");
element.classList.toggle("visible");
  1. 创建和添加元素
javascript
// 创建新元素
const newDiv = document.createElement("div");
newDiv.textContent = "我是新创建的 div";

// 添加到文档中
parentElement.appendChild(newDiv);

// 插入到特定位置
parentElement.insertBefore(newDiv, referenceElement);

// 替换元素
parentElement.replaceChild(newDiv, oldElement);

// 移除元素
parentElement.removeChild(elementToRemove);
  1. 事件处理
javascript
// 添加事件监听器
element.addEventListener("click", function(event) {
    console.log("元素被点击了");
});

// 移除事件监听器
element.removeEventListener("click", handlerFunction);

// 常用事件
// click, mouseover, mouseout, keydown, keyup, submit, load, change

实际应用示例

html
<!DOCTYPE html>
<html>
<head>
    <title>DOM 操作示例</title>
    <style>
        .highlight { background-color: yellow; }
        .hidden { display: none; }
    </style>
</head>
<body>
    <div id="container">
        <h1 id="title">DOM 演示</h1>
        <button id="changeBtn">改变标题</button>
        <button id="addBtn">添加项目</button>
        <ul id="list"></ul>
    </div>

    <script>
        // 选择元素
        const title = document.getElementById("title");
        const changeBtn = document.getElementById("changeBtn");
        const addBtn = document.getElementById("addBtn");
        const list = document.getElementById("list");

        // 事件处理
        changeBtn.addEventListener("click", function() {
            // 修改内容和样式
            title.textContent = "标题已改变!";
            title.classList.toggle("highlight");
        });

        addBtn.addEventListener("click", function() {
            // 创建和添加新元素
            const newItem = document.createElement("li");
            newItem.textContent = "项目 " + (list.children.length + 1);
            list.appendChild(newItem);
        });
    </script>
</body>
</html>

关键要点
DOM 是文档的对象表示:将 HTML 转换为可编程的对象结构
选择元素是基础:掌握各种选择方法
内容、样式、结构都可修改:动态更新页面
事件驱动交互:响应用户操作
性能考虑:避免频繁的 DOM 操作,批量更新更高效

css

基本语法

CSS(层叠样式表)由选择器和声明块组成,用于定义HTML元素的显示样式。

基本语法结构

text
选择器 {
    属性: 值;
    属性: 值;
}

示例代码:

css
/* 元素选择器 */
p {
    color: blue;
    font-size: 16px;
}

/* 类选择器 */
.text-red {
    color: red;
}

/* ID选择器 */
#header {
    background: #f0f0f0;
}

/* 群组选择器 */
h1, h2, h3 {
    margin: 10px 0;
}

核心组成部分
选择器 - 指定要样式化的HTML元素
声明块 - 包含一个或多个样式声明
属性:值 - 具体的样式规则

常用选择器类型
元素选择器:元素名
类选择器:.类名
ID选择器:#ID名
通用选择器:*

注释写法

css
/* 这是单行注释 */

/*
  这是
  多行注释
*/

样式

  1. 选择器
css
/* 元素选择器 */
p { color: blue; }

/* 类选择器 */
.class-name { font-size: 16px; }

/* ID选择器 */
#element-id { margin: 10px; }

/* 后代选择器 */
div p { line-height: 1.5; }

/* 伪类选择器 */
a:hover { color: red; }
  1. 盒模型
css
.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 2px solid black;
    margin: 15px;
    box-sizing: border-box; /* 或 content-box */
}
  1. 布局
css
/* Flex布局 */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

/* Grid布局 */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* 定位 */
.element {
    position: relative; /* 或 absolute, fixed, sticky */
    top: 10px;
    left: 20px;
}
  1. 文本样式
css
.text {
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    text-align: center;
    line-height: 1.6;
    text-decoration: none;
}
  1. 背景与边框
css
.element {
    background-color: #f0f0f0;
    background-image: url('image.jpg');
    background-size: cover;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}
  1. 过渡与动画
css
/* 过渡 */
.button {
    transition: all 0.3s ease;
}

/* 动画 */
@keyframes slide {
    from { transform: translateX(0); }
    to { transform: translateX(100px); }
}

.animated {
    animation: slide 2s infinite;
}
  1. 响应式设计
css
/* 媒体查询 */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}

/* 相对单位 */
.responsive {
    width: 100%;
    max-width: 1200px;
    font-size: 1rem;
    padding: 2%;
}
  1. 常用实用样式
css
/* 清除浮动 */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* 垂直居中 */
.vertical-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 隐藏元素 */
.hidden {
    display: none; /* 或 visibility: hidden */
}

/* 文本溢出省略 */
.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

选择器

基础选择器

  1. 元素选择器
css
p {
  color: blue;
}
  1. 类选择器
css
.class-name {
  font-size: 16px;
}
  1. ID选择器
css
#element-id {
  background: red;
}
  1. 通配符选择器
css
* {
  margin: 0;
  padding: 0;
}

组合选择器
5. 后代选择器

css
div p {
  color: green;
}
  1. 子元素选择器
css
div > p {
  font-weight: bold;
}
  1. 相邻兄弟选择器
css
h1 + p {
  margin-top: 0;
}
  1. 通用兄弟选择器
css
h1 ~ p {
  color: gray;
}

属性选择器
9. 存在属性选择器

css
[title] {
  border: 1px solid;
}
  1. 属性值选择器
css
[type="text"] {
  background: yellow;
}
  1. 属性值包含选择器
css
[class*="btn"] {
  padding: 10px;
}

伪类选择器
12. 状态伪类

css
a:hover {
  color: red;
}

input:focus {
  border-color: blue;
}
  1. 结构伪类
css
li:first-child {
  font-weight: bold;
}

li:nth-child(odd) {
  background: #f0f0f0;
}

伪元素选择器
14. 内容伪元素

css
p::before {
  content: "→ ";
}

p::first-line {
  font-variant: small-caps;
}

选择器分组
15. 分组选择器

css
h1, h2, h3 {
  font-family: Arial;
}

选择器优先级
优先级从高到低:
!important
内联样式
ID选择器
类/属性/伪类选择器
元素/伪元素选择器
通配符选择器

基本属性

文本与字体

color
文字颜色

css
selector {
  color: color-value;
}

font-family
字体族

css
selector {
  font-family: font-name, generic-family;
}

font-size
字体大小

css
selector {
  font-size: size-value;
}

font-weight
字体粗细

css
selector {
  font-weight: normal | bold | 100-900;
}

text-align
文本水平对齐

css
selector {
  text-align: left | right | center | justify;
}

line-height
行高

css
selector {
  line-height: normal | number | length;
}

text-decoration
文本装饰

css
selector {
  text-decoration: none | underline | overline | line-through;
}
背景与边框

background
背景属性简写

css
selector {
  background: color image position/size repeat attachment;
}

background-color
背景颜色

css
selector {
  background-color: color-value;
}

border
边框简写

css
selector {
  border: width style color;
}

border-radius
圆角边框

css
selector {
  border-radius: length;
}

box-shadow
盒子阴影

css
selector {
  box-shadow: h-offset v-offset blur spread color inset;
}
弹性布局 (Flexbox)

display: flex
启用弹性布局

css
container {
  display: flex;
}

flex-direction
主轴方向

css
container {
  flex-direction: row | row-reverse | column | column-reverse;
}

justify-content
主轴对齐

css
container {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

align-items
交叉轴对齐

css
container {
  align-items: stretch | flex-start | flex-end | center | baseline;
}

flex
项目伸缩比例

css
item {
  flex: grow shrink basis;
}
其他常用属性

cursor
鼠标指针样式

css
selector {
  cursor: auto | pointer | text | move | not-allowed;
}

overflow
内容溢出处理

css
selector {
  overflow: visible | hidden | scroll | auto;
}

opacity
透明度

css
selector {
  opacity: 0-1;
}

z-index
堆叠顺序

css
selector {
  z-index: auto | number;
}
transition

过渡效果

css
selector {
  transition: property duration timing-function delay;
}

伪类和伪元素

伪类(Pseudo-classes)

伪类用于选择元素的特定状态,以单冒号:表示。

常用伪类
链接状态

css
a:link { color: blue; }     /* 未访问链接 */
a:visited { color: purple; } /* 已访问链接 */
a:hover { color: red; }     /* 鼠标悬停 */
a:active { color: orange; } /* 激活状态 */

表单状态

css
input:focus { border-color: blue; }   /* 获得焦点 */
input:disabled { opacity: 0.5; }      /* 禁用状态 */
input:checked { background: green; }  /* 选中状态 */

结构伪类

css
li:first-child { font-weight: bold; }  /* 第一个子元素 */
li:last-child { color: gray; }         /* 最后一个子元素 */
li:nth-child(odd) { background: #f0f0f0; } /* 奇数子元素 */
tr:nth-child(even) { background: #f9f9f9; } /* 偶数子元素 */

其他常用

css
p:empty { display: none; }    /* 空元素 */
div:not(.special) { border: 1px solid; } /* 非特殊类元素 */
伪元素(Pseudo-elements)

伪元素用于创建不在DOM中的虚拟元素,以双冒号::表示(CSS3规范)。

常用伪元素

css
p::first-line { font-weight: bold; }   /* 首行文本 */
p::first-letter { font-size: 2em; }    /* 首字母 */

/* 前后内容 */
h1::before { 
    content: "★ "; 
    color: gold;
}
h1::after { 
    content: " ★"; 
    color: gold;
}

/* 选中文本样式 */
::selection {
    background: yellow;
    color: black;
}

/* 占位符文本 */
input::placeholder {
    color: #999;
    font-style: italic;
}

核心区别
伪类:选择已存在的元素特定状态
伪元素:创建并样式化虚拟元素

Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐