前端 HTML + CSS + JavaScript

23级二本计科2026-01-09 11:04

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组的所有元素 ...

对比点 $("*") $(document)
选中对象 所有 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区别

对比点 元素属性（attribute） CSS 样式（style）
属于谁 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>
相关推荐
踩着两条虫16 小时前
VTJ.PRO「AI + 低代码」应用开发平台的后端模块系统
前端·人工智能·低代码
pany16 小时前
程序员近十年新年愿望，都有哪些变化？
前端·后端·程序员
朱昆鹏16 小时前
IDEA Claude Code or Codex GUI 插件【开源自荐】
前端·后端·github
HashTang16 小时前
买了专业屏只当普通屏用？解锁 BenQ RD280U 的“隐藏”开发者模式
前端·javascript·后端
双向3316 小时前
Agent智能体：2026年AI开发者必须掌握的自主系统革命
前端
布列瑟农的星空16 小时前
通用语法校验器tree-sitter——C++语法校验实践
前端
用户812748281512017 小时前
libgui中的BufferQueueProducer加入堆栈CallStack编译报错问题-大厂企业实战项目难题
前端
明月_清风17 小时前
从"请求地狱"到"请求天堂"：alovajs 如何用 20+ 高级特性拯救前端开发者
前端·后端
xuedaobian17 小时前
Markdown 宽表格突破容器边界滚动方案
前端·css
热门推荐
01GitHub 镜像站点02安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）03Linux下V2Ray安装配置指南04Labelme从安装到标注：零基础完整指南05jdk21下载、安装（Windows、Linux、macOS）06【踩坑笔记】50系显卡适配的 PyTorch 安装07手把手教你通过Gemini3 pro 学生认证，白用一年，手慢无！08Opencode CLI 安装成功,但是启动失败09GitLab 零基础入门指南：从安装到项目管理全流程10Claude Code Plan 模式完全指南：从入门到精通