三天急速通关JavaWeb基础知识：Day 2 前端基础知识（计划有变，前端工程化部分暂时搁置）
三天急速通关JavaWeb基础知识：Day 2 前端基础知识
- 0 文章说明
- 1 HTML
- 1.1 介绍
- 1.2 基本结构及语法
- 1.3 常见标签
- 2 CSS
- 2.1 介绍
- 2.2 引入方式
- 2.3 选择器
- 2.4 浮动 定位 盒子模型
- 3 JavaScript
- 3.1 介绍
- 3.2 组成
- 3.3 基础语法
- 4 Ajax
- 4.1 介绍
- 4.2 示例
- 未完待续，前端工程化部分无法完成速通。
- 5 ES6
- 6 NodeJs
- 7 NPM
- 8 Vite
- 9 Vue3
- 10 Router
- 11 Pinia
- 12 Axios
- 13 Element-Plus
0 文章说明
学习完Java基础知识，有一定前端基础，三天急速通关尚硅谷的JavaWeb教程，整理知识体系框架，并用Kimi，DeepSeek，Copliot辅助学习，第二天整理前端相关概念，需要有一定前端基础，目的是快速整理前端知识体系。本文所提供的信息和内容仅供参考，作者和发布者不保证其准确性和完整性。
1 HTML
1.1 介绍
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言，作用是搭建网页结构，在网页上面展示内容。
- 超文本 HyperText
HTML文件本质上是文本文件，而普通文本文件只能显示字符，通过标签把其他多媒体资源引入到当前网页中，能够呈现超越文本的展示效果。 - 标记语言 Markup Language
通过一系列的标记（也称为标签）来定义网页的结构和内容。
1.2 基本结构及语法
HTML的基本结构主要分为五个部分：<!--Part 1 文档声明，放在开头部分，告诉浏览器当前的HTML版本，下面是HTML5版本的示例--> <!DOCTYPE html> <!--Part 2 根标签，表示整个HTML文档的开始和结束--> <html lang="en"> <!--Part 3 头部标签，包含文档的元数据--> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <!--Part 4 主体标签，包含文档的主要内容--> <body> </body> </html> <!--Part 5 注释，用于在HTML文档中添加注释，浏览器会忽略注释内容-->HTML的语法规则- 根标签只能一个，标签需要正确关闭，不能交叉嵌套
- 属性必须有加双引号的值，不严格区分单双引号，不能交叉混用
- 不严格区分大小写，但不能混用
- 不允许自定义标签
1.3 常见标签
发挥主观能动性，这里就不水内容，重点是表单标签的使用。
2 CSS
2.1 介绍
CSS（层叠样式表，Cascading Style Sheets）是一种用于描述网页样式的语言。它用于设置HTML文档中元素的外观和格式，包括布局、颜色、字体等。
基础语法：
/* 选择器 { 属性: 值; } */
2.2 引入方式
- 行内式
<!-- 通过标签的style属性 -->
<p style="color: red;">This is a paragraph.</p>
- 内嵌式
<!-- 在HTML文档的<head>部分的<style>标签中定义样式。-->
<head>
<style>
/*这里面的注释是这样的*/
body { background-color: #f0f0f0; }
h1 { color: #333; }
</style>
</head>
- 连接式
<head>
<!-- 指定外部CSS文件的路径 -->
<link rel="stylesheet" href="styles.css">
</head>
/* styles.css */
body { background-color: #f0f0f0; }
h1 { color: #333; }
2.3 选择器
列了一些常见选择器，足够用了。
| 选择器类型 | 选择器描述 | 示例 | 结果说明 |
|---|---|---|---|
| 元素选择器 | 根据元素类型选择元素 | p | 选择所有段落元素 |
| 类选择器 | 根据class属性选择元素 | .highlight | 选择所有class为highlight的元素 |
| ID选择器 | 根据id属性选择元素 | #main-header | 选择id为main-header的元素 |
| 属性选择器 | 根据属性选择元素 | a[target="_blank"] | 选择所有target属性为_blank的链接 |
| 伪类选择器 | 根据元素状态选择元素 | a:hover | 鼠标悬停时的链接 |
| 伪元素选择器 | 选择元素的一部分 | p::first-line | 段落的第一行文本 |
| 子选择器 | 选择父元素的直接子元素 | ul > li | 选择ul元素的直接li子元素 |
| 后代选择器 | 选择父元素的所有后代元素 | div p | 选择div元素内的所有段落元素 |
2.4 浮动 定位 盒子模型
- 浮动，通俗理解就是将该元素放到另一个平面和当前平面叠加。
- 定位，相对
relative，绝对absolute，固定fiexed - 边距
Margin，边框Border，填充Padding，实际内容Content
根据关键词学习即可。
3 JavaScript
3.1 介绍
JavaScript是一种运行在浏览器端上的小脚本语言，可以实现网页如文本内容，数据动态变化以及动画等效。
- 特点
- 脚本语言：解释性语言，不会产生编译字节码文件，逐行运行。
- 原型继承：能实现封装，是基于原型的继承，无法实现多态。
- 弱类型：不用显式给出变量类型，变量提升后，在程序运行中自动确定变量类型
- 事件驱动：可以响应用户操作（如点击、输入等事件）。
- 跨平台：不依赖操作系统，仅需要浏览器支持。
3.2 组成
JavaScript由EMCAScript，DOM，BOM三部分组成。
- EMCAScript
ECMAScript（European Computer Manufacturers Association）是JavaScript的规格说明，它定义了JavaScript编程语言的语法和基本结构。 - DOM
DOM（Document Object Model）提供了一种访问和操作网页内容和结构的标准编程接口。 - BOM
BOM（Browser Object Model）提供了一组与浏览器交互的对象和方法，允许JavaScript控制浏览器的功能和行为。
3.3 基础语法
- 数据类型
| 数据类型 | 描述 | 示例 |
|---|---|---|
Undefined | 表示变量已声明但未初始化 | var x; |
Null | 表示一个空值或无值 | var y = null; |
Boolean | 表示逻辑值真或假 | var flag = true; |
Number | 表示数值类型，包括整数和浮点数 | var age = 25; |
String | 表示文本值，由字符组成 | var name = "Kimi"; |
Object | 表示对象类型，可以包含多个键值对 | var obj = { key: "value" }; |
Array | 表示数组类型，用于存储多个值的有序集合 | var arr = [1, 2, 3]; |
Function | 表示函数类型，可以执行代码块 | function greet() {} |
- 变量
若变量类型，可以统一用var声明，可以多次声明相同变量，可以使用不同数据类型多次赋值同一变量，如果只声明没赋值，那么是undefined。 - 运算符与流程控制语句
只提一点，== 运算符会类型强制转换，三等不会。 - 其他
略
4 Ajax
4.1 介绍
Ajax（Asynchronous JavaScript and XML，异步的 JavaScript 和 XML）是一种在无需重新加载整个网页的情况下，能够与服务器交换数据并更新部分网页的技术。
- 工作流程
核心是XMLHttpRequest对象（这只是一种实现方式，还有其他的，例如fetch），它允许在页面已加载后与服务器进行异步通信。- 创建
XMLHttpRequest对象：JavaScript创建该对象负责与服务器的通信。 - 发送请求到服务器：发送请求到服务器的时候不会阻塞页面。
- 服务器处理请求：返回的格式通常为
XML或JSON - 接收响应：接收并处理响应数据。
- 更新页面：只更新响应数据相关的部分。
- 创建
4.2 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax Example with XMLHttpRequest</title>
</head>
<body>
<h1>用户信息</h1>
<div id="userInfo">加载中...</div>
<script>
// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 配置请求类型、URL 以及是否异步处理
xhr.open('GET', 'https://api.example.com/users/1', true);
// 设置请求完成后的回调函数
xhr.onreadystatechange = function() {
// 检查请求状态和响应状态码
if (xhr.readyState === 4 && xhr.status === 200) {
// 处理服务器返回的数据
var response = JSON.parse(xhr.responseText);
document.getElementById('userInfo').innerHTML =
'用户名: ' + response.username + '<br>' +
'邮箱: ' + response.email;
}
};
// 发送请求
xhr.send();
</script>
</body>
</html>