前端基础学习html+css+js

HTML

区块

div标签，块级标签
span包装小部分文本，行内元素

表单

CSS

css选择器

css属性

特性	block	inline	inline-block
是否换行	✅ 换行	❌ 不换行	❌ 不换行
可设置宽高	✅ 支持	❌ 不支持	✅ 支持
常见元素	div容器 p段落 h标题	span文本容器 a超链接	img图片
使用场景	容器/分区	文本内局部内容	需排版又可控制大小

盒子模型

属性名	说明
内容（Content）	盒子包含的实际内容，比如文本、图片等。
内边距（Padding）	围绕在内容的内部，是内容与边框之间的空间。可以使用 padding 属性来设置。
边框（Border）	围绕在内边距的外部，是盒子的边界。可以使用 border 属性来设置。
外边距（Margin）	围绕在边框的外部，是盒子与其他元素之间的空间。可以使用 margin 属性来设置。

浮动

定位

属性值	是否脱离文档流	相对参考对象	是否随滚动移动	应用场景
relative	❌ 否	元素原始位置	✅ 会滚动	微调位置，absolute 的父容器
absolute	✅ 是	最近的已定位祖先元素（无则 body）	✅ 会滚动	弹出框、图标、提示层等
fixed	✅ 是	浏览器窗口（视口）	❌ 不滚动	顶部导航、悬浮按钮等

Javascript

导入方式

浏览器中点击F12

基本语法

1. 变量与数据类型

let name = "Alice";        // 字符串
const age = 25;            // 数字（常量）
let isStudent = true;      // 布尔值
let hobbies = ["reading", "coding"];  // 数组
let person = { name: "Bob", age: 30 }; // 对象

2. 条件语句

if (age >= 18) {console.log("成年人");
} else {console.log("未成年");
}

3. 循环语句

for (let i = 0; i < 5; i++) {console.log("第" + i + "次循环");
}let i = 0;
while (i < 3) {console.log("while循环: " + i);i++;
}

4. 函数

function greet(name) {return "你好, " + name;
}console.log(greet("小明"));

箭头函数：

const add = (a, b) => a + b;
console.log(add(3, 5));  // 输出 8

5. 数组操作

let nums = [1, 2, 3];nums.push(4);             // 添加元素
nums.pop();               // 删除末尾元素
nums.forEach(n => console.log(n));  // 遍历let doubled = nums.map(n => n * 2); // 映射
console.log(doubled);

6. 对象操作

let user = {name: "Tom",age: 20
};console.log(user.name);       // 访问属性
user.age = 21;                // 修改属性

事件

事件	描述
onClick	点击事件
onMouseOver	鼠标经过
onMouseOut	鼠标移出
onChange	文本内容改变事件
onSelect	文本框选中
onFocus	光标聚焦
onBlur	移开光标

DOM

常用方法：

1. getElementById(“id”)：通过 id 获取
2. getElementsByClassName(“class”)：通过 class 获取（HTMLCollection）
3. getElementsByTagName(“tag”)：通过标签名获取

常用属性

5. innerText：文字内容
6. innerHTML：包含 HTML 的内容
7. style：CSS 样式

常见触发方式：

1. click：点击
2. input：输入时触发
3. mouseover / mouseout：鼠标移入 / 移出
4. keydown / keyup：键盘按下 / 放开