2.前端三剑客入门笔记：HTML + CSS + JavaScript

目录前言第一部分HTML —— 网页的骨架1.1 HTML是什么1.2 基本结构1.3 常用标签速览第二部分CSS —— 网页的妆容2.1 CSS是什么2.2 三种引入方式2.3 选择器 —— 核心中的核心2.4 常用CSS属性第三部分JavaScript —— 网页的灵魂3.1 JavaScript是什么3.2 三种引入方式3.3 基础语法变量声明数据类型运算符3.4 数组与函数3.5 对象第四部分jQuery —— 让操作变简单4.1 为什么要用jQuery4.2 引入方式4.3 核心语法4.4 文档就绪函数4.5 常用操作 实战案例案例1猜数字游戏案例2表白墙总结 2026年7月29日 | 大二升大三的暑假学习记录前言大二即将结束九月就要迈入大三了。这个暑假决定系统补一补前端基础知识——毕竟作为一个计算机专业的学生只会后端不会前端就像只会炒菜不会摆盘。这篇博客是我根据一份教学PDF整理的学习笔记涵盖了HTML、CSS、JavaScript​ 三大基础技术以及一个非常好用的库——jQuery。第一部分HTML —— 网页的骨架1.1 HTML是什么HTML Hyper Text Markup Language超文本标记语言通俗理解就像你在Word里选中一段文字点击标题1——那个标题1就是一个标签。HTML就是用各种预定义的标签来告诉浏览器这段是标题那段是段落这张是图片。1.2 基本结构!DOCTYPE html html langen head meta charsetUTF-8 title我的第一个页面/title /head body Hello World /body /html关键点html是根标签head放页面属性标题、编码等body放页面显示的内容标签之间有父子关系和兄弟关系构成一棵DOM 树1.3 常用标签速览标签作用h1~h6标题数字越大字越小p段落br换行单标签img图片必须带src属性a超链接必须带href属性table/tr/td表格form/input表单div/span无语义标签用于布局小技巧在 VS Code 中输入!再按 Tab可以直接生成 HTML 骨架第二部分CSS —— 网页的妆容2.1 CSS是什么CSS Cascading Style Sheet层叠样式表如果说HTML是素颜的你那CSS就是化妆师——决定你穿什么衣服、涂什么口红、发型怎么弄。2.2 三种引入方式方式写法适用场景行内样式stylecolor:red极简样式内部样式style.../style学习/小项目外部样式link relstylesheet hrefstyle.css✅企业开发推荐​2.3 选择器 —— 核心中的核心/* 标签选择器 */ p { color: blue; } /* 类选择器最常用 */ .font32 { font-size: 32px; } /* ID选择器唯一 */ #submit { color: red; } /* 通配符选择器 */ * { margin: 0; padding: 0; } /* 复合选择器 */ ul li a { color: green; }2.4 常用CSS属性属性作用color字体颜色font-size字体大小border边框粗细、样式、颜色width/height宽高仅块级元素有效padding内边距内容与边框的距离margin外边距元素与元素的距离第三部分JavaScript —— 网页的灵魂3.1 JavaScript是什么HTML是骨CSS是皮JavaScript是魂。JavaScript 最初只是为了做表单验证结果一不小心成了全球最流行的编程语言之一。它的设计者 Brendan Eich 只用了10天​ 就把它设计出来了——这也是为什么JS有些地方看起来不太严谨的原因 3.2 三种引入方式和CSS类似也有行内、内部、外部三种方式企业开发推荐外部引入。3.3 基础语法变量声明var name 张三; // 旧式函数作用域 let age 20; // 新式块作用域 ✅ 推荐 const PI 3.14; // 常量JS是动态弱类型语言——同一个变量可以存数字下一秒存字符串。数据类型number、string、boolean、undefined、null运算符和Java基本一样但要注意会做隐式类型转换5 5为 true不做类型转换5 5为 false✅ 推荐使用3.4 数组与函数// 数组元素类型可以不一样 let arr [1, hello, true]; // 函数 function sum(a, b) { return a b; } // 函数表达式 let add function(a, b) { return a b; };3.5 对象三种创建方式// 1. 字面量最常用 let student { name: 张三, age: 20, sayHello: function() { console.log(大家好); } }; // 2. new Object() let car new Object(); car.brand BMW; // 3. 构造函数 function Cat(name, type) { this.name name; this.type type; this.miao function() { console.log(喵~); }; } let mimi new Cat(咪咪, 橘猫);第四部分jQuery —— 让操作变简单4.1 为什么要用jQuery原生JavaScript操作DOM网页元素很繁琐jQuery封装了常用功能让你用更少的代码做更多的事。4.2 引入方式script srchttps://code.jquery.com/jquery-3.7.1.min.js/script建议下载到本地使用避免CDN挂了访问不了。4.3 核心语法$(selector).action()$()是jQuery的全局函数selector是选择器和CSS选择器很像action是要执行的操作4.4 文档就绪函数$(document).ready(function() { // 页面加载完成后执行 }); // 简写 $(function() { // ... });4.5 常用操作方法作用text()获取/设置文本内容html()获取/设置HTML内容val()获取/设置表单值attr()获取/设置属性css()获取/设置样式append()/prepend()内部插入after()/before()外部插入remove()/empty()删除元素 实战案例案例1猜数字游戏$(function() { let guessNumber Math.floor(Math.random() * 100) 1; let count 0; $(#button).click(function() { count; $(#count).text(count); let userGuess parseInt($(#number).val()); if (userGuess guessNumber) { $(#result).text(猜对了).css(color, green); } else if (userGuess guessNumber) { $(#result).text(小了).css(color, red); } else { $(#result).text(大了).css(color, red); } }); });案例2表白墙核心逻辑获取三个输入框的内容构造HTML字符串追加到容器中清空输入框总结技术比喻作用HTML骨架定义结构和内容CSS妆容控制样式和布局JavaScript灵魂实现交互和动态效果jQuery工具箱简化DOM操作前端对于后端开发来说不需要精通但至少要能看懂、能改、能照着例子写出来。这个暑假先把这三板斧练熟大三做项目的时候就不会一头雾水