当前位置：首页 > news >正文

HTML、CSS 和 JavaScript 基础知识点

news 来源：原创 2025/5/14 8:12:13

HTML、CSS 和 JavaScript 基础知识点

一、HTML 基础

1. 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><!-- 页面内容 -->
</body>
</html>

2. 常用 HTML 标签

文本标签：

<h1>到<h6>标题、<p>段落、<span>行内元素、<br>换行、<hr>水平线

列表：

<ul>无序列表、<ol>有序列表、<li>列表项、<dl>定义列表

表格：

<table>、<tr>行、<td>单元格、<th>表头、<thead>、<tbody>、<tfoot>

表单：

<form>、<input>、<textarea>、<select>、<option>、<button>、<label>

多媒体：
```
<img>、<audio>、<video>、<iframe>
```

3. HTML5 新特性

语义化标签：<header>, <footer>, <nav>, <article>, <section>, <aside>
表单增强：<input type="date">, <input type="email">, <input type="range">
多媒体支持：<video>, <audio>, <canvas>
Web存储：localStorage, sessionStorage
Web Workers
地理定位 API

二、CSS 基础

1. CSS 引入方式

<!-- 内联样式 -->
<div style="color: red;"></div><!-- 内部样式表 -->
<style>div { color: red; }
</style><!-- 外部样式表 -->
<link rel="stylesheet" href="styles.css">

2. CSS 选择器

基础选择器：

/* 元素选择器 */
p { color: blue; }/* 类选择器 */
.class-name { color: red; }/* ID选择器 */
#id-name { color: green; }/* 通配符选择器 */
* { margin: 0; padding: 0; }

组合选择器：

/* 后代选择器 */
div p { color: red; }/* 子元素选择器 */
div > p { color: blue; }/* 相邻兄弟选择器 */
h1 + p { color: green; }/* 通用兄弟选择器 */
h1 ~ p { color: yellow; }

属性选择器：

/* 存在属性 */
[title] { color: red; }/* 属性值等于 */
[type="text"] { color: blue; }/* 属性值包含 */
[class*="btn"] { color: green; }

伪类和伪元素：

/* 伪类 */
a:hover { color: red; }
li:nth-child(odd) { background: #eee; }/* 伪元素 */
p::first-letter { font-size: 2em; }
p::after { content: "★"; }

3. CSS 盒模型

组成：content(内容) + padding(内边距) + border(边框) + margin(外边距)

box-sizing：

/* 标准盒模型 */
box-sizing: content-box; /* 默认值 *//* 怪异盒模型 */
box-sizing: border-box; /* 宽度包含padding和border */

4. 布局技术

浮动布局：

.float-left { float: left; }
.clearfix::after {content: "";display: block;clear: both;
}

Flex 布局：

.container {display: flex;justify-content: center; /* 主轴对齐 */align-items: center;    /* 交叉轴对齐 */flex-wrap: wrap;       /* 换行 */
}
.item {flex: 1;               /* 弹性比例 */
}

Grid 布局：

.container {display: grid;grid-template-columns: 1fr 2fr 1fr; /* 列定义 */grid-template-rows: 100px auto;     /* 行定义 */gap: 10px;                          /* 间距 */
}
.item {grid-column: 1 / 3;                 /* 跨列 */grid-row: 1;                        /* 行位置 */
}

5. 响应式设计

媒体查询：

@media (max-width: 768px) {body { font-size: 14px; }
}

视口单位：

.box {width: 50vw;    /* 视口宽度的50% */height: 100vh;  /* 视口高度的100% */font-size: 2vmin; /* 视口较小尺寸的2% */
}

三、JavaScript 基础

1. 基础语法

变量声明：

// ES5
var name = "张三";// ES6+
let age = 25;       // 块级作用域变量
const PI = 3.14;    // 常量

数据类型：

// 原始类型
typeof "hello"      // "string"
typeof 42           // "number"
typeof true         // "boolean"
typeof undefined    // "undefined"
typeof null         // "object" (历史遗留问题)
typeof Symbol()     // "symbol"
typeof BigInt(10)   // "bigint"// 引用类型
typeof {}           // "object"
typeof []           // "object"
typeof function(){} // "function"

2. 运算符

// 算术运算符
let sum = 10 + 5;    // 15// 比较运算符
10 == "10"           // true (值相等)
10 === "10"          // false (值和类型都相等)// 逻辑运算符
true && false        // false
true || false       // true
!true               // false// 三元运算符
let result = age > 18 ? '成年' : '未成年';

3. 流程控制

条件语句：

if (score >= 90) {console.log('优秀');
} else if (score >= 60) {console.log('及格');
} else {console.log('不及格');
}// switch语句
switch(day) {case 1: console.log('周一'); break;case 2: console.log('周二'); break;default: console.log('周末');
}

循环语句：

// for循环
for (let i = 0; i < 5; i++) {console.log(i);
}// while循环
let j = 0;
while (j < 5) {console.log(j);j++;
}// for...of (ES6)
for (let item of array) {console.log(item);
}// for...in (遍历对象属性)
for (let key in obj) {console.log(key, obj[key]);
}

4. 函数

函数定义：

// 函数声明
function add(a, b) {return a + b;
}// 函数表达式
const multiply = function(a, b) {return a * b;
};// 箭头函数 (ES6)
const divide = (a, b) => a / b;// 默认参数 (ES6)
function greet(name = 'Guest') {console.log(`Hello, ${name}`);
}// 剩余参数 (ES6)
function sum(...numbers) {return numbers.reduce((acc, num) => acc + num, 0);
}

高阶函数：

// 函数作为参数
function operate(a, b, operation) {return operation(a, b);
}operate(5, 3, (x, y) => x * y); // 15// 函数返回函数
function multiplier(factor) {return function(number) {return number * factor;};
}const double = multiplier(2);
double(5); // 10

5. 对象和数组

对象：

// 对象字面量
const person = {name: '张三',age: 25,greet() {console.log(`我是${this.name}`);}
};// 访问属性
person.name;        // "张三"
person['age'];      // 25
person.greet();     // "我是张三"// ES6增强
const { name, age } = person; // 解构赋值
const newPerson = { ...person, age: 26 }; // 扩展运算符

数组：

// 数组方法
const numbers = [1, 2, 3, 4, 5];numbers.map(x => x * 2);      // [2, 4, 6, 8, 10]
numbers.filter(x => x > 2);   // [3, 4, 5]
numbers.reduce((a, b) => a + b); // 15// ES6数组操作
const newArr = [...numbers, 6, 7]; // [1, 2, 3, 4, 5, 6, 7]
const [first, second, ...rest] = numbers; // 解构赋值

6. DOM 操作

// 获取元素
const btn = document.getElementById('myButton');
const items = document.querySelectorAll('.item');// 事件监听
btn.addEventListener('click', function(event) {console.log('按钮被点击了');
});// 修改内容
const heading = document.querySelector('h1');
heading.textContent = '新标题';
heading.style.color = 'red';// 创建元素
const newDiv = document.createElement('div');
newDiv.className = 'box';
document.body.appendChild(newDiv);// 表单处理
const form = document.querySelector('form');
form.addEventListener('submit', function(e) {e.preventDefault();const input = this.querySelector('input');console.log(input.value);
});

7. 异步编程

回调函数：

function fetchData(callback) {setTimeout(() => {callback('数据加载完成');}, 1000);
}fetchData(function(data) {console.log(data);
});

Promise：

function fetchData() {return new Promise((resolve, reject) => {setTimeout(() => {resolve('数据加载完成');// 或 reject('加载失败');}, 1000);});
}fetchData().then(data => console.log(data)).catch(error => console.error(error));

async/await：

async function loadData() {try {const data = await fetchData();console.log(data);} catch (error) {console.error(error);}
}loadData();

四、综合案例

1. 简单的待办事项应用

<!DOCTYPE html>
<html>
<head><title>待办事项</title><style>body { font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; }#todo-form { display: flex; margin-bottom: 20px; }#todo-input { flex: 1; padding: 8px; }button { padding: 8px 16px; background: #4CAF50; color: white; border: none; }ul { list-style: none; padding: 0; }li { padding: 10px; border-bottom: 1px solid #ddd; display: flex; }li.completed { text-decoration: line-through; color: #888; }.delete-btn { margin-left: auto; color: red; cursor: pointer; }</style>
</head>
<body><h1>待办事项</h1><form id="todo-form"><input type="text" id="todo-input" placeholder="输入待办事项..." required><button type="submit">添加</button></form><ul id="todo-list"></ul><script>document.addEventListener('DOMContentLoaded', function() {const form = document.getElementById('todo-form');const input = document.getElementById('todo-input');const list = document.getElementById('todo-list');// 从本地存储加载待办事项let todos = JSON.parse(localStorage.getItem('todos')) || [];// 渲染待办事项列表function renderTodos() {list.innerHTML = '';todos.forEach((todo, index) => {const li = document.createElement('li');if (todo.completed) {li.classList.add('completed');}li.innerHTML = `<span>${todo.text}</span><span class="delete-btn" data-index="${index}">×</span>`;li.addEventListener('click', function() {toggleTodo(index);});list.appendChild(li);});// 保存到本地存储localStorage.setItem('todos', JSON.stringify(todos));}// 添加新待办事项form.addEventListener('submit', function(e) {e.preventDefault();const text = input.value.trim();if (text) {todos.push({ text, completed: false });input.value = '';renderTodos();}});// 切换完成状态function toggleTodo(index) {todos[index].completed = !todos[index].completed;renderTodos();}// 删除待办事项list.addEventListener('click', function(e) {if (e.target.classList.contains('delete-btn')) {const index = e.target.dataset.index;todos.splice(index, 1);renderTodos();}});// 初始渲染renderTodos();});</script>
</body>
</html>