当前位置：首页 > news >正文

Web前端技术宝典：期末冲刺指南

news 来源：原创 2025/6/23 13:57:41

本文将为大家整理一份 Web 前端期末复习资料，内容涵盖 HTML、CSS、JavaScript 和常用的前端框架等方面的知识，帮助大家高效复习。

Web前端技术宝典：期末冲刺指南

1. HTML基础
2. CSS基础
3. JavaScript基础
4. 前端框架
5. 常见考试题型
结语

1. HTML基础

HTML（超文本标记语言）是构建网页的核心语言，负责网页结构的搭建。了解 HTML 的基本标签和语法，是学习前端的第一步。

常见HTML标签：

标签	说明	示例
<html>	HTML文档的根标签	<html></html>
<head>	文档头部，包含元数据、标题等	</head></title>Page Title<head><title>
<body>	文档的主体部分	</body>Content goes here</body>
<h1>	标题1，6个等级的标题标签	<h1>Main Title</h1>
<a>	超链接	<a href=“https://example.com”>>Click Here</a>
<img>	图片标签	<img src=“image.jpg” alt=“image”>
<div>	块级元素容器	<div class=“container”>Content</div>
<span>	行内元素容器	<span>Text inside span</span>

2. CSS基础

CSS（层叠样式表）用于控制 HTML 元素的样式。掌握 CSS 的基本语法和布局技巧，对于设计美观的网页至关重要。

常见CSS属性：

属性	说明	示例
color	设置文本颜色	color: red;
font-size	设置字体大小	font-size: 16px;
background	设置背景颜色、图片等	background-color: #f0f0f0;
margin	设置外边距	margin: 20px;
padding	设置内边距	padding: 10px;
display	设置元素的显示类型	display: block;
flex	用于实现 Flexbox 布局	display: flex;
position	设置定位方式	position: absolute; top: 10px; left: 20px;
Flexbox布局

Flexbox 是一种用来实现布局的 CSS 技术，特别适合在网页中实现响应式设计。常用的 Flexbox 属性包括：

.container {display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */
}.item {margin: 5px;
}

3. JavaScript基础

JavaScript 是 Web 前端的编程语言，用于实现页面的交互效果和动态功能。掌握基本的语法、数据类型、控制流和函数的使用是很重要的。

// 变量声明
let name = "Alice"; // 变量
const age = 25; // 常量// 函数定义
function greet() {console.log("Hello, " + name);
}greet(); // 输出 Hello, Alice// 条件语句
if (age > 18) {console.log("Adult");
} else {console.log("Not an adult");
}// 数组操作
let numbers = [1, 2, 3, 4];
numbers.push(5); // 添加元素
console.log(numbers); // [1, 2, 3, 4, 5]
// 对象操作
let person = { name: "John", age: 30 };
console.log(person.name); // John
常用的DOM操作
DOM（文档对象模型）用于操作网页中的元素。通过 JavaScript 可以动态修改页面内容。

// 获取元素
let heading = document.getElementById("header");
heading.innerHTML = "Welcome to the Web Page";// 修改元素样式
let box = document.querySelector(".box");
box.style.backgroundColor = "blue";// 添加事件监听器
let button = document.getElementById("myButton");
button.addEventListener("click", function() {alert("Button clicked!");
});

4. 前端框架

前端框架大大简化了开发过程，常见的框架有 React、Vue 和 Angular。它们提供了结构化的方式来构建单页应用（SPA）。

import React, { useState } from 'react';function App() {const [count, setCount] = useState(0);return (<div><h1>Count: {count}</h1><button onClick={() => setCount(count + 1)}>Increase</button></div>);
}export default App;

<template><div><h1>{{ message }}</h1><button @click="changeMessage">Change Message</button></div>
</template><script>
export default {data() {return {message: "Hello, Vue!"};},methods: {changeMessage() {this.message = "Message changed!";}}
};
</script>

5. 常见考试题型

选择题：测试对 HTML、CSS、JavaScript 基本概念的理解。
- 例如：HTML5 中哪个标签是用于嵌入音频的？
  选项：A. <audio>B. </embed>C. </video> D. </iframe>
- 填空题：考察对常用语法和代码片段的记忆。
- 例如：在 JavaScript 中，let 用于声明_____变量。
编程题：编写特定功能的代码。
- 例如：编写一个 JavaScript 函数，接收一个数组并返回其最大值。

结语

Web 前端的学习内容广泛而且丰富，涵盖了从基本的 HTML、CSS 到 JavaScript 编程，再到现代的前端框架。在期末复习时，建议大家通过做题、写代码和实践项目来加深对知识的理解。希望本文的复习资料能够帮助大家更好地准备期末考试，取得好成绩！

Web前端技术宝典：期末冲刺指南

本文将为大家整理一份 Web 前端期末复习资料，内容涵盖 HTML、CSS、JavaScript 和常用的前端框架等方面的知识，帮助大家高效复习。 Web前端技术宝典：期末冲刺指南 1. HTML基础2. CSS基础3. JavaScript基础4. 前端框架5. 常见考试题型结语 1. …...

编程日记 2025/6/23 13:57:41

JVM 双亲委派模型以及垃圾回收机制

目录 1. JVM 内存区域划分 2. JVM 中类加载的过程 1) 类加载的基本流程 2) 双亲委派模型 3. JVM 中垃圾回收机制 1) 找到垃圾 a) 引用计数 b) 可达性分析 2) 释放垃圾 1. JVM 内存区域划分一个运行起来的 Java 进程，其实就是一个 JVM 虚拟机。而进程是…...

编程日记 2025/6/23 1:45:03

Linux编译Kernel时的文件zImage、文件dtb(dtbs)、核心模块分别是什么东西？

zImage文件的介绍在编译Linux内核时，zImage 是一种内核映像文件，它是内核的压缩版本，通常用于引导嵌入式设备或其他资源有限的环境。 zImage 的具体含义 zImage 是 “Compressed Kernel Image” 的缩写。它是通过压缩原始的内核映像&…...

编程日记 2025/6/23 13:31:15

《计算机视觉证书：开启职业发展新航道》

一、引言在当今科技飞速发展的时代，计算机视觉技术正以惊人的速度改变着我们的生活和工作方式。从智能手机的人脸识别解锁到自动驾驶汽车的环境感知，计算机视觉技术的应用无处不在。而计算机视觉证书作为这一领域的专业认证，其作用愈发凸显…...

编程日记 2025/6/23 13:23:26

4.Python 数字类型

Python 数字类型总结文章目录 Python 数字类型总结1. 数字类型概述特点 2. 数字类型的创建与赋值3. 数字类型转换4. 数学运算与函数math 模块cmath 模块 5. 随机数生成6. 三角函数7. 数学常量总结 Python 提供了多种数字类型来存储和操作数值数据。这些类型包括整数、浮点数、…...

编程日记 2025/6/21 23:29:27

火焰传感器与C++编程：精准检测火灾的技术实现

火灾是我们日常生活中一个不可忽视的安全隐患，而火灾报警系统的实现可以大大提高我们的安全保障。通过嵌入式技术和传感器，我们能够在第一时间识别火灾隐患并发出警报。火焰传感器作为一种专门用于火灾监测的传感器，能高效地通过红外线&#…...

编程日记 2025/6/22 1:52:06

纯前端实现一个精致的中英文挖空提示功能

前言这两天给我的学习卡盒小程序新增了一个提示功能，在卡片正面的时候，点击左下角的小灯泡，就会弹出背面内容的提示，这个提示是挖了空的，这种方式可以帮助我们循序渐进的回忆内容，而不是直接看答案。实现…...

编程日记 2025/6/19 20:21:36

秘塔搜索AI多线程批量生成TXT原创文章软件

秘塔AI搜索是秘塔科技旗下的搜索产品，其产品是简单、无广告、直接的搜索答案。秘塔AI搜索写出来的文章无AI味及无AI痕迹，在如今AI文章泛滥时代，搜索引擎喜欢抓取收录这样无AI味原创文章。秘塔搜索AI多线程批量生成TXT原创文章软件介绍&am…...

编程日记 2025/6/23 13:24:39

鸿蒙生态的崛起：开发实践、认证路径与激励策略

目录前言鸿蒙生态能力和行业解决方案 1、鸿蒙创新能力 2、鸿蒙行业解决方案中软鸿蒙生态业务布局 1、深度参与鸿蒙生态建设 2、提供一站式鸿蒙生态服务 （1）服务目录 （2）改造过程的关键点 （3）鸿…...

编程日记 2025/6/23 13:23:25

python调用matlab函数（内置 + 自定义） —— 安装matlab.engine

文章目录一、简介二、安装matlab.engine2.1、基于 CMD 安装2.2、基于 MATLAB 安装（不建议） 三、python调用matlab函数（内置自定义） 一、简介 matlab.engine（MATLAB Engine API for Python）：…...

编程日记 2025/6/2 0:50:07

【数据分享】2014-2024年我国POI兴趣点数据（免费获取/来源于OSM地图）

POI是Point of Interest的简称，意为“兴趣点”，是互联网电子地图中用于表示特定位置的地理实体的核心数据类型。POI通常用于标注具体地点，例如餐厅、商场、学校、医院、景点等。这些数据以点的形式呈现，并附带详细属性信息&#x…...

编程日记 2025/6/2 22:17:35

【设计模式】如何用C++实现观察者模式【发布订阅机制】

【设计模式】如何用C实现观察者模式【发布订阅机制】一、问题背景代码质量影响生活质量。最近工作中频繁接触各种设计模式，深刻体会到优秀的设计模式不仅能显著降低后续维护的压力，还能提升开发效率。观察者模式作为一种降低耦合度、提高扩展性的利器…...

编程日记 2025/6/23 13:48:59

Qt编写RK3588视频播放器/支持RKMPP硬解/支持各种视音频文件和视频流/海康大华视频监控

一、前言用ffmpeg做硬解码开发，参考自带的示例hw_decode.c即可，里面提供了通用的dxva2/d3d11va/vaapi这种系统层面封装的硬解码，也就是无需区分用的何种显卡，操作系统自动调度，基本上满足了各种场景的需要&#xff0…...

编程日记 2025/6/23 13:25:58

深入了解IPv6——光猫相关设定：DNS来源、DHCPv6服务、前缀来源等

光猫IPv6设置后的效果对比图： 修改前： 修改后： 一、DNS来源 1. 网络连接来源： 从上游网络（如运营商）获取 IPv6 DNS 信息，通过 PPPoE 或 DHCPv6 下发。特点： DNS 服务器地址直…...

编程日记 2025/6/23 4:13:32

Deepmotion技术浅析（五）：运动追踪

运动追踪是 DeepMotion 动作捕捉和 3D 重建流程中的核心模块之一。该模块的主要任务是在视频序列中跟踪人体的运动轨迹，捕捉人体各部分随时间的变化，并生成连续的 3D 运动数据。DeepMotion 的运动追踪技术结合了计算机视觉、深度学习和物理模拟等方法&am…...

编程日记 2025/6/22 1:12:53

【html网页页面012】html+css制作品牌主题宏宝莱网页含视频、留言表单（7页面附效果及源码）

品牌主题宏宝莱网页制作 🥤1、写在前面🍧2、涉及知识🌳3、网页效果完整效果(7页)：代码目录结构：page1、首页page2、衍生品page3、包装设计page4、视频介绍page5、留言板page6、联系我们page7、详情页（三层页…...

编程日记 2025/6/19 23:27:47

Java的栈与队列以及代码实现

Java栈和队列栈的概念（Stack）栈的实现代码队列（Queue）模拟实现队列(双链表实现)循环队列（循环数组实现）用队列实现栈用栈来实现队列总结栈的概念（Stack） 栈是常见的线性数据结构&…...

编程日记 2025/6/23 11:27:55

华为HarmonyOS NEXT 原生应用开发：鸿蒙中组件的组件状态管理、组件通信组件状态管理小案例（好友录）！

文章目录组件状态管理一、State装饰器1. State装饰器的特点2. State装饰器的使用二、Prop装饰器（父子单向通信）1. Prop装饰器的特点2. Prop装饰器的使用示例三、Link装饰器（父子双向通信）1. Link装饰器的特点3. Link使用示例四…...

编程日记 2025/6/23 13:36:19

LeetCode：150. 逆波兰表达式求值

跟着carl学算法，本系列博客仅做个人记录，建议大家都去看carl本人的博客，写的真的很好的！ 代码随想录 LeetCode：150. 逆波兰表达式求值给你一个字符串数组 tokens ，表示一个根据逆波兰表示法表示的算术表…...

编程日记 2025/6/20 2:04:16

LLM模型的generate和chat函数区别

在 Hugging Face 的 transformers 库中，GPT（Generative Pre-trained Transformer）类的模型有两个常用的生成文本的方法：generate 和 chat。这两个方法在使用上有一些区别。通常公司发布的 LLM 模型会有一个基础版本，还…...

编程日记 2025/6/23 13:53:54

Vulhub：Fastjson[漏洞复现]

1.2.24-rce(CVE-2017-18349-Fastjson反序列化) 对于 Fastjson 来说，该漏洞的主要问题在于其1.2.24版本中autotype特性允许任意类的反序列化，因此攻击者通过type指定自定义类并实例化，在特定条件下调用这些类的公共方法。如果一个不受信任的 J…...

编程日记 2025/6/4 10:08:31

C++学习日记---第19天

笔记复习 1.继承在C中，我们通过函数来实现代码的复用，防止重复造轮子，但是使用函数也有一个缺点1，就是当函数被定义完成之后，它的功能也就确定了，无法被修改，这时候我们引入继承。 C中的继承…...

编程日记 2025/6/23 13:38:52

题目1.读取一张彩色图像并将其转换为灰度图。 import cv2 # 读取图片文件 img cv2.imread(./1.png)# 将原图灰度化 img_gray cv2.cvtColor(img,cv2.COLOR_BGR2GRAY)# 输出图片 cv2.imshow(img,img) cv2.imshow(img_g,img_gray) # 进行阻塞 cv2.waitKey(0) 题目2：…...

编程日记 2025/6/23 13:36:18

生活小妙招之UE CaptureRT改

需求，四个不同的相机拍摄结果同屏分屏显示一般的想法是四个Capture拍四张RT，然后最后在面片/UI上组合。这样的开销是创建4张RT，材质中采样4次RT。以更省的角度，想要对以上流程做优化，4个相机拍摄是必须的&#xff…...

编程日记 2025/6/4 1:52:50

源码编译jdk11 超详细教程 openjdk11

关于源代码当前的openJDK的源代码已经被发布到了github上了，所以我们可以直接从github上下载到。 OpenJDK11u源码托管地址：https://github.com/openjdk/jdk11u 带后缀U的地址，或者发行的jdk包，表示当前版本下的持续跟新版。而…...

编程日记 2025/6/2 10:59:52

lightRAG 论文阅读笔记

论文原文 https://arxiv.org/pdf/2410.05779v1 这里我先说一下自己的感受，这篇论文整体看下来，没有太多惊艳的地方。核心就是利用知识图谱，通过模型对文档抽取实体和关系。然后基于此来构建查询。核心问题还是在解决知识之间的连接问题。论…...

编程日记 2025/6/23 13:37:39

计算机网络-数据链路层

以太⽹的帧格式源地址和⽬的地址是指⽹卡的硬件地址(也叫MAC地址), ⻓度是48位,是在⽹卡出⼚时固化的; • IP地址描述的是路途总体的起点和终点; • MAC地址描述的是路途上的每⼀个区间的起点和终点;、举个例子： 帧协议类型字段有三种值,分别对应IP、ARP、RARP...

编程日记 2025/6/23 13:40:03

ES6 混合 ES5学习记录

基础数组 let arr [数据1，数据2，...数组n] 使用数组数组名[索引] 数组长度 arr.length 操作数组 arr.push() 尾部添加一个,返回新长度 arr.unshift() 头部添加一个,返回新长度 arr.pop() 删除最后一个,并返回该元素的值 shift 删除第一个单元…...

编程日记 2025/6/2 7:16:59

Electron electron-builder.yml 配置 (自定义包名，用户自定义安装目录...)

electron-builder.yml 配置 # 唯一的应用程序标识符，用于操作系统级别的识别 appId: com.electron.app# 应用程序的名称，显示在用户界面上 productName: 我的应用# 定义构建资源目录，放置图标、证书等资源文件 directories:buildResources: …...

编程日记 2025/6/4 8:23:31

Python运维自动化之字典Dict

字典Dict(哈希表) Dict即Dictionary，也称为mapping。 Python中，字典由任意个元素构成的集合，每一个元素称为Item，也称为Entry。这个Item是由(key, value)组成的二元组。字典是可变的、无序的、key不重复的key-value键值对集合。…...

编程日记 2025/6/21 1:44:05

开展新闻营销分为策划期、实施期、优化期三个重要阶段

也许有人会问：什么是新闻营销呢？这是一个在当今商业营销领域备受关注的概念。在信息爆炸的时代，企业都在绞尽脑汁寻找各种有效的营销方式来提升自己的品牌知名度、产品销量等，新闻营销便是其中一种重要的手段。我们可以将“新闻营…...

编程日记 2025/6/23 7:06:23

解决 Git 默认不区分文件名大小写的问题

不得不说 Git 默认不区分文件名大小写真是一个大坑，由于之前的项目目录比较乱，项目下的文件夹命名都不规范，这两天一直在整理，然后今天从服务器将项目重新 clone 下来后发现，之前将所有文件名首字母改成大写的改动全部…...

编程日记 2025/6/20 17:50:14

Qt网络通信、线程之间通信详解

一、网络通信协议主要包括TCP和UDP，但更常用和可靠的是TCP协议。TCP是一种面向连接的、可靠的、面向流的传输协议，特别适合用于连续数据传输。在Qt中，网络通信主要通过QTcpSocket类和QTcpServer类来实现。 QTcpSocket类用于建立TCP客户端和…...

编程日记 2025/6/23 13:53:54

java泛型

定义类、接口、方法时，同时声明了一个或者多个类型变量（如：<E>） 称为泛型类、泛型接口，泛型方法、它们统称为泛型。作用：泛型提供了在编译阶段约束所能操作的数据类型，并自动进行检…...

编程日记 2025/6/23 13:47:47

C++入门（1）

一、第一个C程序 #include <iostream> using namespace std; int main() {cout << "hello world" << endl; return 0; } 1. main函数 main 函数是程序的入口，C 的程序不管有多少行代码，都是从 main 函数开始执行的&am…...

编程日记 2025/6/20 9:21:16

在Linux的嵌入式开发中,如何确定要操作的帧缓冲设备是第几个实例?即是fb0还是fb1还是fb2...

方法汇总在实际编写程序时，要确定操作的帧缓冲设备（如 /dev/fb0、/dev/fb1 等），通常需要结合系统环境和硬件配置。以下是一些常见的方法，帮助你确定需要打开的帧缓冲设备实例： 1. 检查系统设备文件查看…...

编程日记 2025/6/23 13:35:02

JS 中请求队列与锁的巧妙结合

一、引言在 JavaScript 开发中，尤其是在涉及到异步操作和对共享资源的并发访问时，有效地控制请求顺序和资源访问权限至关重要。例如，在多个网络请求同时针对一个有限制访问频率的 API 或者多个异步任务竞争同一个文件写入权限的场景下&#…...

编程日记 2025/6/23 9:38:36

注意力机制+时空特征融合！组合模型集成学习预测！LSTM-Attention-Adaboost多变量时序预测

注意力机制时空特征融合！组合模型集成学习预测！LSTM-Attention-Adaboost多变量时序预测目录注意力机制时空特征融合！组合模型集成学习预测！LSTM-Attention-Adaboost多变量时序预测效果一览基本介绍程序设计参考资料效果一览基…...

编程日记 2025/6/1 10:46:32

Prefix Decoder /Causal Decoder/Encoder-Decoder的区别

Prefix Decoder 定义：Prefix Decoder，也称为非因果解码器，属于Decoder only结构。输入部分使用双向注意力，输出部分使用单向注意力。在生成新的输出时，会考虑到所有之前生成的输出。特点：Prefix Decoder在…...

编程日记 2025/6/3 16:02:24

《智能体开发实战（高阶）》四、系统化的日志周报智能体开发计划

智能体扩展与完善规划为了将前几个章节的智能体逐步扩展为支持整个公司团队使用的高效工具，以下是分阶段的完善与扩写规划。每个阶段旨在提升功能覆盖范围、处理能力和用户体验，并为企业提供实际价值。阶段一：基础功能完善目标：巩固现有功能，提升健壮性和适用性。支…...

编程日记 2025/6/2 11:16:43

多线程编程杂谈(上)

问题线程执行的过程中可以强制退出吗？ 主动退出？被动退出？ 问题抽象示例需要解决的问题 g_run 全局变量需要保护吗？ 如何编码使得线程中每行代码的执行可被 g_run 控制？ 线程代码在被 g_run 控制并 "强制退…...

编程日记 2025/6/2 16:11:16

二五(Vue2-01)、创建实例、插值表达式、响应式、Vue指令、

1. Vue 概念及创建实例 <body><div id"app"><h1>{{msg}}</h1><a href&…...

编程日记 2025/5/31 6:34:41

P8772 求和 P8716 回文日期

文章目录 [蓝桥杯 2022 省 A] 求和[蓝桥杯 2020 省 AB2] 回文日期 [蓝桥杯 2022 省 A] 求和题目描述给定 n n n 个整数 a 1 , a 2 , ⋯ , a n a_{1}, a_{2}, \cdots, a_{n} a1,a2,⋯,an, 求它们两两相乘再相加的和，即 S a 1 ⋅ a 2 a 1 ⋅ a 3 ⋯ a…...

编程日记 2025/6/4 14:43:21

Burp Suite(2)2024.1.1Burp Suite专业版激活（保姆级教程）

声明： 本文所使用的专业版BP在我的博客资源里面，需要的师傅可以自行下载。学习视频来自B站up主泷羽sec 有兴趣的师傅可以关注一下，如涉及侵权马上删除文章，笔记只是方便各位师傅的学习和探讨，文章所提到的网站以及内…...

编程日记 2025/6/20 10:24:49

基于注意力的几何感知的深度学习对接模型 GAABind - 评测

GAABind 作者是苏州大学的生物基础与医学院，期刊是 Briefings in Bioinformatics, 2024， 25(1)， 1–14。GAABind 是一个基于注意力的几何感知蛋白-小分子结合模式与亲和力预测模型，可以捕捉小分子和蛋白的几何、拓扑结构特征以及相互作用。使用 PDBBind2020 和 CASF2016 作…...

编程日记 2025/6/20 15:46:53

Python中的优化函数2：cvxpy包

文章目录介绍使用步骤示例1示例2官方文档介绍它是一个基于 Python 的凸优化建模工具，专门用于定义和求解凸优化问题（Convex Optimization Problems）。CVXPY 提供了一种直观的方式来表达优化问题，并通过高效的求解器来解决这些…...

编程日记 2025/6/22 7:02:27

【Linux】结构化命令

结构化命令structured command：允许脚本根据条件跳过部分命令，改变执行流程。 1、if-then语句格式1： if command then commands fi 格式2： if command; then commands fi 运行if之后的command命令，如果它的退出状态码…...

编程日记 2025/6/20 5:31:25

3-机器人视觉-机器人抓取与操作

文章目录 3机器人视觉目录 1. 传感器和标定摄像头模型Intrinsic MatrixExtrinsic Matrix 标定内参标定手眼标定和外参标定力传感器&其它传感器其它传感器 2. 神经网络和图像处理2D特征处理常见架构训练流程推理流程部署流程2D 图像任务3D Point Cloud FeaturePointNet Ap…...

编程日记 2025/5/29 13:53:02