前端基础学习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:键盘按下 / 放开
相关推荐
xjt_0901几秒前
浅析Web存储系统
前端
foxhuli22938 分钟前
禁止ifrmare标签上的文件,实现自动下载功能,并且隐藏工具栏
前端
青皮桔1 小时前
CSS实现百分比水柱图
前端·css
失落的多巴胺1 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
影子信息1 小时前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月1 小时前
1.vue权衡的艺术
前端·vue.js·开源
样子20181 小时前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿1 小时前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
孤水寒月2 小时前
给自己网站增加一个免费的AI助手,纯HTML
前端·人工智能·html
CoderLiu2 小时前
用这个MCP,只给大模型一个figma链接就能直接导出图片,还能自动压缩上传?
前端·llm·mcp