HTML决定网页的框架
文本 图片 表单 按钮
CSS显示网页中控件的样式外观
颜色 大小 间距 排版
JS表示处理逻辑
点击按钮发生什么 表单怎么校验 数据怎么变化
HTML
HTML 文件基本结构
<!DOCTYPE html> //声明这是 HTML5 文档
<html lang="zh-CN"> //lang="zh-CN" 表示网页主要语言是中文
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>wws网页</title>//网页名
</head>
<body>//网页具体内容
</body>
</html>
！+ Tab 快捷生成
HTML常⻅标签
1.标题标签h1-h6
2.段落标签p
在HTML中,段落,换⾏符,空格都会失效,如果需要分成段落,需要使⽤专⻔的标签
3.换⾏标签br/分割线hr
<br/> 是规范写法.不建议写成<br>
4.图⽚标签img
src表示图片的路径
1.相对路径 ./ ../ 以html文件为基准
2.绝对路径 磁盘D:/rose.jpg 网络https://img2.baidu.com
width / height 用来控制元素（尤其是图片）的宽度和高度
图片通常只改一个（宽或高），另一个会按比例自动缩放。
如果同时强行改宽和高，比例不一致，就会导致图片变形。
5.超链接a
<a href="http://www.baidu.com" target="_blank">百度</a>
href:跳到哪个链接
target:打开方式
_self 当前页面打开（默认）
_blank 新标签页打开
空链接:使⽤#在href中占位
<a href="#">空链接</a>
6.表格标签table
table 表示表格，tr 表示行，td 表示单元格；
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>wws网页</title>
</head>
<body>
<table class="info">//表示整个表格
<thead>//表头区域
<tr>//表示表格中的一行
<td>姓名</td>//表示一个单元格
<td>性别</td>
<td>年龄</td>
</tr>
</thead>
<tbody>//表格主体
<tr>
<td>张三</td>
<td>男</td>
<td>10</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>11</td>
</tr>
</tbody>
</table>
</body>
</html>
7.表单标签from提交
定义：数据往哪提交
action：提交到哪个页面（或接口）
8.表单标签input输入
属性：
1.type 决定 输入框的类型
text 文本框
password 密码框
radio 单选框
checkbox 复选框
button 普通按钮
submit 提交按钮
file 文件上传
2.name 输入框名字
3.value 输入框默认值
4.checked 是否默认选中
eg.
1.单选框
性别：
<input type="radio" name="sex"> 男
<input type="radio" name="sex" checked="checked"> 女
name 相同 → 多选一 checked → 默认选中
2.复选框
爱好：
<input type="checkbox"> 吃饭
<input type="checkbox"> 睡觉
<input type="checkbox"> 打游戏
3.提交按钮
<form action="test.html">
<input type="text" name="username">
<input type="submit" value="提交">
</form>
点击后：
收集表单中所有带 name 的数据
跳转到 action 指定页面
9.select 标签（下拉菜单）
select 用来创建“下拉选择框”，
option 用来定义下拉里的每一项。
<option selected>日本</option>打开页面时：默认选中“日本”
10.textarea 标签（多行文本域）
textarea 用来让用户输入“多行文本”，
比如：留言、评论、简介。
rows：显示几行（高度）
cols：每行大约多少字符（宽度）
textarea 没有 value 属性， 默认内容写在标签中间
10.⽆语义标签div&span
div 和 span 都是无语义标签，用于布局；
div 是块级元素，独占一行；
span 是行内元素，不独占一行。
CSS
CSS基本结构
p { ← 选择器（找谁）
color: red; ← 声明（属性:值）
font-size: 30px; ← 声明
}
选择器：决定针对谁（找谁）
声明：决定改什么（干啥）
属性和值：用 : 分开，用 ; 结束
CSS 引入方式（三种）
CSS 一共有 3 种引入方式：行内、内部、外部
一、行内样式
<div style="color: green;">绿色</div>
特点
CSS 写在 HTML 标签内部
style 的值就是 CSS 属性键值对
二、内部样式
<style>
h1 {
color: red;
}
</style>
使用 <style> 标签
CSS 写在 HTML 文件里
通常放在 <head> 中
三、外部样式
<link rel="stylesheet" href="style.css">
把 style.css 这个样式文件，引入到当前 HTML 页面中使用。
CSS 写在独立的 .css 文件中
HTML 只负责结构
rel="stylesheet" 是什么意思？
rel = relationship（关系）
stylesheet = 样式表
告诉浏览器：我引入的是一个 CSS 样式表
没有这句，浏览器不知道这是 CSS
CSS 选择器主要 5 大类
1.标签选择器 <>
div {
color: green;
}
选中页面中 所有 div 标签 颜色改为绿色
2.类选择器 class .
每个标签中可以定义类名，class="g1 g2 g3" 可以定义多个类名 用空格隔开，起到分组的作用。
.g1{
font-size: 32px;
}
选中所有 class="g1" 的元素
-
一个类可以被 多个标签 使用
-
一个标签可以有 多个类
如果我们想选择g1和g2呢？
| .g1 .g2 | g1 里面的 g2 (中间有空格) |
| .g1.g2 | 同时拥有 g1 和 g2(中间不空格) 取g1 g2交集 |
| .g1, .g2 | g1 或 g2（用，隔开）取g1 g2并集 |
g1里面的g2
<div class="g1">
<p>
<span class="g2">我也会变成 32px</span>
</p>
</div>
3.ID 选择器 id #
<button id="submit">提交</button>
#submit {
color: red;
}
1.页面中元素id唯一
2.用#选择id
4.通配符选择器 *
* {
color: red;
}
选中页面里的“所有元素”
5.复合选择器
ul li a {
color: blue;
}
选择 ul 的后代 li 的后代 a
选择多个用 ，隔开
| 标签 | div | 所有 div |
| 类 | .box | class=box |
| ID | #id | id=id |
| 通配符 | * | 所有元素 |
| 复合 | ul li a | ul 里的 li 里的 a |
CSS 常用属性
1 color —— 文字颜色
.text1 {
color: red;
}
color: red; /* 英文单词 */
color: rgb(255, 0, 0); /* RGB */
color: #ff0000; /* 十六进制 */
2 font-size —— 字体大小
.text1 {
font-size: 32px;
}
设置字体大小
3 border —— 边框
.text1 {
border: 1px solid purple;
}
.text1 {
border-width: 1px;
border-style: solid;
border-color: purple;
}
border 是复合属性，包含 3 个维度：
| 1px | 边框粗细 |
| solid | 边框样式 |
| purple | 边框颜色 |
常见 border-style
-
solid：实线（最常用）
-
dashed：虚线
-
dotted：点状
-
double：双线
4 width / height —— 宽高
.text1 {
width: 200px;
height: 100px;
}
只有块级元素可以设置宽高
常见块级元素
-
div
-
p
-
h1 ~ h6
常见行内元素
-
span
-
a
5 padding —— 内边距
内容和边框之间的距离，没有 padding 时，内容是“贴着边框”的
四个方向可以单独设置，如果一次性写4个方向就按顺时针顺序设置
padding-top
padding-bottom
padding-left
padding-right
6 margin —— 外边距
元素和元素之间的距离
margin-top
margin-bottom
margin-left
margin-right
JS
JavaScript 是一种用来控制网页行为和交互的脚本语言。
三种引入方式
一.行内方式
<input type="button" value="点我一下"
onclick="alert('haha')">
含义
JavaScript 代码直接写在 HTML 标签里
-
onclick：点击事件
-
引号里的内容：JS 代码 （进行弹窗操作）
二.内部方式
在 <script> 标签中写 JavaScript
<script> 告诉浏览器：里面是 JS
浏览器会按顺序执行,所以<script>要写在最后面 要等元素生成后，才能对元素绑定操作
<script>
document.getElementById("btn").onclick = function () {
alert("点到我了");
};
</script>
document：当前网页（整个 HTML 页面）
getElementById：通过 id 查找元素
"btn"：要找的 id 名
三、外部方式
<script src="script.js" defer></script>
defer 的意思是：
让 JavaScript 延后执行，等 HTML 全部解析完成之后再执行。、
如果不加defer 就要这句放在最后面</body>上面
基础语法
变量
1.var/let 定义变量
var name = 'zhangsan';
let name = 'zhangsan';
一般用let
2.const 定义常量
const name = 'zhangsan';
+
let age = 18;
let msg = "我今年" + age + "岁";
msg为字符串 "我今年18岁"
\\n —— 换行符
alert("第一行\\n第二行");
第一行
第二行
数据类型
1.数字 number
let a = 10;
let b = 3.14;
2.string —— 字符串
let s1 = "hello";
let s2 = 'world';
3.boolean —— 布尔值
let flag1 = true;
let flag2 = false;
4.undefined —— 未定义
let d;
变量声明了，但没赋值
只有一个值：undefined
5.null —— 空
let e = null;
let d;
console.log(typeof d); // "undefined"
typeof 查看变量类型
运算符
== vs ===
1.== 只比较“值”，会进行隐式类型转换
20 == "20" // true
2.=== 同时比较“值 + 类型”，不会转换
20 === "20" // false
优先用===
数组
JS 数组中可以放不同类型的数据
var arr = [1, 'abc', true, null];
访问数组越界也不会报错
var arr = [1, 2, 'haha', false];
// 读
console.log(arr[0]); // 1
// 增
arr[4] = "add";
console.log(arr.length); // 5
// 改
arr[4] = "update";
// 删
arr.splice(4, 1);
console.log(arr[4]); // undefined
console.log(arr.length); // 4
arr.splice(4, 1);
第一个参数：从下标几开始
第二个参数：删除几个元素
函数
1.JS函数可以先使用后定义
2.函数传参
1.实参>形参 传多的参数直接忽略
2.实参<形参 缺少的参数值默认为定义 为undefined
function sum(a, b) {
return a + b;
}
sum(10);
a = 10;
b = undefined;
10 + undefined = NaN;
3.函数表达式
let sayHello = function () {
console.log("你好");
};
对象
创建对象
var student = {
name: '蔡徐坤',
height: 175,
weight: 170,
sayHello: function () {
console.log("hello");
}
};
规则总结
-
{} 表示一个对象
-
属性 / 方法都是键值对
-
: 分隔键和值
-
, 分隔多个属性
-
方法本质是一个 匿名函数
构造函数
function Cat(name, type, sound) {
this.name = name;
this.type = type;
this.miao = function () {
console.log(sound);
};
}
var mimi = new Cat('咪咪', '中华田园喵', '喵');
var xiaohei = new Cat('小黑', '波斯喵', '猫呜');
var ciqiu = new Cat('刺球', '金渐层', '咕噜噜');
jQuery
jQuery 是一个 JavaScript 前端库
引入依赖
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
1.JQuery语法
$(selector).action()
选中某些 HTML 元素 → 对它们执行某个操作
-
$()
jQuery 提供的全局函数，用来“选元素” -
selector（选择器）
用来查找 HTML 元素（和 CSS 选择器一样） -
action()（操作）
对选中的元素做事情（改内容、绑定事件、改样式等）
<button id="btn">点我</button>
<script>
$(document).ready(function () {
$("#btn").click(function () {
alert("点击成功");
});
});
</script>
document 表示整个页面
.read()等页面加载出来 （等btn控件加载出来才行，不然绑定失败）
$("#btn") 绑定id=btn的控件
.click()触发点击时 执行该函数
2.选择器
1.$(this) 选择当前元素
$("button").click(function () {
$(this).hide(); // 隐藏当前被点击的按钮
});
2.$(document ) 选择整个网页
3.$("CSS选择器")
eg.$("*")选择页面中的所有元素 $(".class") 选择class组的所有元素 …
| 选中对象 | 所有 HTML 元素 | document 对象 |
| 数量 | 非常多 | 只有 1 个 |
| 是否是标签 | 是 | 否 |
| 常见用途 | 批量操作元素 | 监听页面级事件 |
| 性能 | 很差（慎用） | 很好 |
$("*") 是“全选内容”
$(document) 是“选网页本身”
| * | 所有元素 |
| this | 当前元素 |
| p | 所有 <p> |
| p:first / last | 第一个 / 最后一个 |
| .box | class 为 box |
| #box | id 为 box |
| .a.b | 同时有 a 和 b |
| p.a | class 为 a 的 p |
| ul li:first | ul 中第一个 li |
| :input | 所有表单元素 |
| :text | 文本框 |
| :checkbox | 复选框 |
3.事件
事件 = 用户对页面的操作，被浏览器捕捉到
比如：
-
点击
-
双击
-
输入
-
选择
-
鼠标移入移出
jQuery 事件的基本写法
$(selector).event(function () {
// 事件发生后执行的代码
});
$(selector)：哪个控件
event：什么事件
function(){}：执行什么操作
常见事件
| 页面 | 文档就绪 | $(document).ready(function(){}) | 页面 DOM 加载完成 | 初始化页面、绑定事件 |
| 鼠标 | 点击 | $(selector).click(function(){}) | 单击元素 | 按钮点击 |
| 鼠标 | 双击 | $(selector).dblclick(function(){}) | 双击元素 | 特殊交互 |
| 鼠标 | 鼠标移入 | $(selector).mouseover(function(){}) | 鼠标移入元素 | 提示、下拉菜单 |
| 鼠标 | 鼠标移出 | $(selector).mouseout(function(){}) | 鼠标移出元素 | 隐藏内容 |
| 鼠标 | 鼠标悬停 | $(selector).hover(fn1, fn2) | 移入 / 移出 | 简化悬停效果 |
| 表单 | 内容改变 | $(selector).change(function(){}) | 值改变并失焦 | 表单校验 |
| 表单 | 获取焦点 | $(selector).focus(function(){}) | 获得焦点 | 输入提示 |
| 表单 | 失去焦点 | $(selector).blur(function(){}) | 失去焦点 | 校验输入 |
| 键盘 | 按键按下 | $(selector).keydown(function(){}) | 键按下瞬间 | 快捷键 |
| 键盘 | 按键释放 | $(selector).keyup(function(){}) | 键松开 | 实时输入 |
| 窗口 | 页面滚动 | $(window).scroll(function(){}) | 页面滚动 | 懒加载 |
| 窗口 | 窗口大小改变 | $(window).resize(function(){}) | 窗口尺寸变化 | 响应式 |
4.操作元素
1.获取 / 设置内容
| text() | 获取 / 设置 文本内容 | 普通元素 |
| html() | 获取 / 设置 HTML 内容（含标签） | 普通元素 |
| val() | 获取 / 设置 表单的值 | input / select |
获取元素
设置
html()、text()、val() 在不传参数时用于获取内容
在传参数时用于设置内容，并返回 jQuery 对象
区别重点：
-
html()：标签会生效
-
text()：标签当普通文字
2.获取 / 设置属性（attr）
元素属性和CSS区别
| 属于谁 | HTML 标签 | 样式系统 |
| 决定什么 | 元素本身的信息 / 行为 | 元素的外观 |
| 在哪写 | HTML 标签里 | style / CSS 文件 |
| jQuery 方法 | attr() | css() |
| 会影响布局 | 有时会 | 会 |
| 常见例子 | id、class、href、src、value | color、font-size、width、display |
| attr("属性名") | 获取属性 |
| attr("属性名","值") | 设置属性 |
获取元素
设置元素
元素属性
| id | 元素唯一标识 | 所有元素 |
| class | 类名（用于分组/样式） | 所有元素 |
| name | 表单字段名 | input |
| value | 表单的值 | input / textarea |
| href | 链接地址 | a |
| src | 资源路径 | img / script |
| type | 表单类型 | input |
| placeholder | 输入提示 | input |
| checked | 是否选中 | checkbox |
| disabled | 是否禁用 | 表单元素 |
| readonly | 只读 | input |
| title | 悬浮提示 | 通用 |
| alt | 图片替代文字 | img |
3.获取 / 设置 CSS
| css("属性") | 获取样式 |
| css("属性","值") | 设置样式 |
color、font-size、width、height 都是CSS样式
CSS样式
1.文字相关
| color | 文字颜色 |
| font-size | 字体大小 |
| font-family | 字体 |
| font-weight | 粗细 |
| text-align | 对齐 |
| line-height | 行高 |
2.盒模型
| width / height | 宽高 |
| padding | 内边距 |
| margin | 外边距 |
| border | 边框 |
| box-sizing | 盒模型 |
3.布局/显示
| display | 显示方式 |
| position | 定位方式 |
| top / left | 位置 |
| float | 浮动 |
| overflow | 溢出处理 |
| z-index | 层级 |
4.添加元素
| append() | 元素 内部结尾 |
| prepend() | 元素 内部开头 |
| after() | 元素 外部后面 |
| before() | 元素 外部前面 |
5.删除元素
| remove() | 删除 自身 + 子元素 |
| empty() | 只删 子元素 |
empty()只删除子元素
remove()删除整个元素
练习
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>猜数字</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div>
输入数字：
<input type="text">
<button id="btn2">确定</button>
<br/>
已经猜的次数：
<span id="count">0</span>
<br/>
结果：
<span id="result"></span>
</div>
<button id="btn">重新开始</button>
<script>
$(document).ready(function(){
let target;
let count;
// 初始化
target = Math.floor(Math.random() * 100) + 1;
count = 0;
// 猜数字
$("#btn2").click(function(){
let re = parseInt($("input").val());
if (isNaN(re)) {
$("#result").text("请输入数字");
return;
}
count++;
$("#count").text(count);
if (re > target) {
$("#result").text("大了");
$("#result").css("color","red");
} else if (re < target) {
$("#result").text("小了");
$("#result").css("color","red");
} else {
$("#result").text("对了！");
$("#result").css("color","green");
}
});
// 重新开始
$("#btn").click(function(){
target = Math.floor(Math.random() * 100) + 1;
count = 0;
$("#count").text(0);
$("#result").text("");
$("input").val("");
});
});
</script>
</body>
</html>
