HTML-JavaScript-css基础
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>
主要元素详解
- 元数据标签
<title>:定义浏览器标签页标题
<meta>:提供文档元数据
charset:字符编码
viewport:移动端适配
description:搜索引擎描述
keywords:搜索引擎关键词
- 资源链接
<link>:链接外部资源
rel="stylesheet":CSS 样式表
rel="icon":网站图标
- 脚本
<script>:JavaScript 代码
src 属性:引用外部脚本
defer 属性:延迟执行
- 样式
<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>© 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 标签和语法冲突,确保内容正确显示。
主要转义字符
- 基础转义字符
html
<!-- 小于号 -->
< <!-- < -->
<!-- 大于号 -->
> <!-- > -->
<!-- 引号 -->
" <!-- " -->
<!-- 单引号 -->
' <!-- ' (HTML5新增) -->
<!-- 与符号 -->
& <!-- & -->
- 常用特殊符号
html
<!-- 空格 -->
<!-- 不换行空格 -->
<!-- 版权符号 -->
© <!-- © -->
<!-- 注册商标 -->
® <!-- ® -->
<!-- 商标符号 -->
™ <!-- ™ -->
- 数学符号
html
<!-- 乘号 -->
× <!-- × -->
<!-- 除号 -->
÷ <!-- ÷ -->
<!-- 不等于 -->
≠ <!-- ≠ -->
<!-- 约等于 -->
≈ <!-- ≈ -->
使用场景
显示 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
特点总结:
原始类型:不可变,值比较
引用类型:可变,引用比较
原始类型存储在栈,引用类型存储在堆
运算符
- 算术运算符
用于数学计算。
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 - 后置递减
- 赋值运算符
将值赋给变量。
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
- 比较运算符
比较值并返回布尔值。
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 - 大于等于
- 逻辑运算符
组合或操作布尔值。
javascript
let isTrue = true, isFalse = false;
console.log(isTrue && isFalse); // false - 与
console.log(isTrue || isFalse); // true - 或
console.log(!isTrue); // false - 非
- 位运算符
在二进制位级别操作。
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)
- 三元运算符
条件表达式。
javascript
let age = 18;
let canVote = age >= 18 ? "可以投票" : "不能投票";
console.log(canVote); // "可以投票"
- 类型运算符
检查类型或实例。
javascript
console.log(typeof "hello"); // "string"
console.log("hello" instanceof String); // false (原始类型)
- 其他运算符
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]
流程结构
- 顺序结构
代码默认按从上到下的顺序执行。
javascript
let a = 1;
let b = 2;
let sum = a + b; // 按顺序执行
- 条件分支结构
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;
- 循环结构
for循环
javascript
for (let i = 0; i < 5; i++) {
console.log(i);
}
while循环
javascript
while (condition) {
// 循环体
}
do-while循环
javascript
do {
// 循环体(至少执行一次)
} while (condition);
- 循环控制语句
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); // 只输出奇数
}
- 异常处理
try-catch-finally
javascript
try {
// 可能出错的代码
riskyOperation();
} catch (error) {
// 错误处理
console.log("出错:", error.message);
} finally {
// 无论是否出错都会执行
cleanup();
}
throw
javascript
throw new Error("自定义错误信息");
- 特殊循环
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
事件处理方式
- HTML事件处理程序
html
<button onclick="handleClick()">点击我</button>
<script>
function handleClick() {
console.log('按钮被点击了');
}
</script>
- DOM0级事件处理
javascript
const btn = document.getElementById('myButton');
btn.onclick = function() {
console.log('按钮被点击了');
};
- 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 操作
- 选择元素
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");
- 修改内容
javascript
// 修改 HTML 内容
element.innerHTML = "<strong>新内容</strong>";
// 修改文本内容(更安全,不会解析 HTML)
element.textContent = "纯文本内容";
// 获取和设置属性
element.setAttribute("class", "new-class");
const value = element.getAttribute("src");
- 修改样式
javascript
// 直接修改样式
element.style.color = "red";
element.style.fontSize = "20px";
// 添加/移除 CSS 类
element.classList.add("active");
element.classList.remove("inactive");
element.classList.toggle("visible");
- 创建和添加元素
javascript
// 创建新元素
const newDiv = document.createElement("div");
newDiv.textContent = "我是新创建的 div";
// 添加到文档中
parentElement.appendChild(newDiv);
// 插入到特定位置
parentElement.insertBefore(newDiv, referenceElement);
// 替换元素
parentElement.replaceChild(newDiv, oldElement);
// 移除元素
parentElement.removeChild(elementToRemove);
- 事件处理
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
/* 这是单行注释 */
/*
这是
多行注释
*/
样式
- 选择器
css
/* 元素选择器 */
p { color: blue; }
/* 类选择器 */
.class-name { font-size: 16px; }
/* ID选择器 */
#element-id { margin: 10px; }
/* 后代选择器 */
div p { line-height: 1.5; }
/* 伪类选择器 */
a:hover { color: red; }
- 盒模型
css
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 2px solid black;
margin: 15px;
box-sizing: border-box; /* 或 content-box */
}
- 布局
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;
}
- 文本样式
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;
}
- 背景与边框
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);
}
- 过渡与动画
css
/* 过渡 */
.button {
transition: all 0.3s ease;
}
/* 动画 */
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
.animated {
animation: slide 2s infinite;
}
- 响应式设计
css
/* 媒体查询 */
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
/* 相对单位 */
.responsive {
width: 100%;
max-width: 1200px;
font-size: 1rem;
padding: 2%;
}
- 常用实用样式
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;
}
选择器
基础选择器
- 元素选择器
css
p {
color: blue;
}
- 类选择器
css
.class-name {
font-size: 16px;
}
- ID选择器
css
#element-id {
background: red;
}
- 通配符选择器
css
* {
margin: 0;
padding: 0;
}
组合选择器
5. 后代选择器
css
div p {
color: green;
}
- 子元素选择器
css
div > p {
font-weight: bold;
}
- 相邻兄弟选择器
css
h1 + p {
margin-top: 0;
}
- 通用兄弟选择器
css
h1 ~ p {
color: gray;
}
属性选择器
9. 存在属性选择器
css
[title] {
border: 1px solid;
}
- 属性值选择器
css
[type="text"] {
background: yellow;
}
- 属性值包含选择器
css
[class*="btn"] {
padding: 10px;
}
伪类选择器
12. 状态伪类
css
a:hover {
color: red;
}
input:focus {
border-color: blue;
}
- 结构伪类
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;
}
核心区别
伪类:选择已存在的元素特定状态
伪元素:创建并样式化虚拟元素
更多推荐

所有评论(0)