前端基础学习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. 变量与数据类型
javascript 复制代码
let name = "Alice";        // 字符串
const age = 25;            // 数字(常量)
let isStudent = true;      // 布尔值
let hobbies = ["reading", "coding"];  // 数组
let person = { name: "Bob", age: 30 }; // 对象
  1. 条件语句
javascript 复制代码
if (age >= 18) {
  console.log("成年人");
} else {
  console.log("未成年");
}
  1. 循环语句
javascript 复制代码
for (let i = 0; i < 5; i++) {
  console.log("第" + i + "次循环");
}

let i = 0;
while (i < 3) {
  console.log("while循环: " + i);
  i++;
}
  1. 函数
javascript 复制代码
function greet(name) {
  return "你好, " + name;
}

console.log(greet("小明"));

箭头函数:

javascript 复制代码
const add = (a, b) => a + b;
console.log(add(3, 5));  // 输出 8
  1. 数组操作
javascript 复制代码
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);
  1. 对象操作
javascript 复制代码
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"):通过标签名获取

常用属性

  1. innerText:文字内容
  2. innerHTML:包含 HTML 的内容
  3. style:CSS 样式

常见触发方式:

  1. click:点击
  2. input:输入时触发
  3. mouseover / mouseout:鼠标移入 / 移出
  4. keydown / keyup:键盘按下 / 放开
相关推荐
摸爬滚打的小李几秒前
SameSite Cookie
前端
小毛驴8504 分钟前
Vue 传统全局引入方式,ES 模块化方式引入 对比
前端·javascript·vue.js
Sobeit5 分钟前
2025 年前端人必学!Tailwind CSS 全面解析与实战
前端
努力的小帅9 分钟前
C++_红黑树树
开发语言·数据结构·c++·学习·算法·红黑树
xianxin_11 分钟前
HTML CSS
前端
hweiyu0013 分钟前
学习Scala语言的最佳实践有哪些?
开发语言·学习·scala
奇怪的知识又增长了16 分钟前
UILabel 字体缩放适应宽度
前端
萱萱的七彩鱼20 分钟前
css3之三维变换详说
前端·javascript·css3
遗憾随她而去.21 分钟前
前端css 的固定布局,流式布局,弹性布局,自适应布局,响应式布局
前端·css
liweisum31 分钟前
AI驱动 WEB UI自动化---前端技术分享
前端·javascript·typescript