前端基础学习html+css+js

2025/6/6 18:50:39 来源：https://blog.csdn.net/potential_tender/article/details/147988400 浏览: 次关键词：前端基础学习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
在这里插入图片描述

基本语法

变量与数据类型

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

条件语句

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

循环语句

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

函数

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

箭头函数：

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

数组操作

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);

对象操作

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

事件

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