HTML
HTML，即 HyperText Markup Language（超文本标记语言），是构建网页的基础语言。HTML 的作用是定义网页的内容和结构。
元素
元素：由标签和内容组成。例如，<p>hello</p> 其中：
-
标签：
<p> -
内容：
hello
属性：元素还可以包含属性，例如 <p id="p1" title="标题1">hello</p>。
元素之间可以嵌套，但对应的标签不能交叉。还有一种特殊的元素称为 空元素，例如 <br> 和 <hr>，它们没有内容。
HTML 页面结构
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>完整页面</title>
</head>
<body><p>Hello, world!</p><img src="C:\Users\OLDERHARD\Pictures\星空.jpg" width="500" height="500" alt="未找到">
</body>
</html>
-
<html>元素包含页面中所有其他元素，称为根元素。 -
<head>元素包含不用于展现内容的元素，如<title>、<link>、<meta>等。 -
<body>元素包含对用户展现的内容，例如文本、图片、视频和音频等元素。
常见元素
文本元素
-
<hr>：分割线 -
<br>：换行
标题
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
段落
<p>段落</p>
列表
无序列表：
<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li>
</ul>
有序列表：
<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li>
</ol>
嵌套列表：
<ul><li>北京市<ul><li>房山区</li></ul></li><li>河北省<ul><li>石家庄</li></ul></li>
</ul>
超链接
<a href="https://www.baidu.com/">百度</a>
<a href="#pt">跳转到文末</a>
<p id="pt">文末</p>
多媒体元素
-
图片：
<img src="C:\Users\OLDERHARD\Pictures\星空.jpg" width="500" height="500" alt="未找到">
-
视频：
<video src="D:\Other\Date\信息\其他\自我介绍.mp4" width="500" height="500" controls></video>
-
音频：
<audio src="bgm.mp3" controls></audio>
表单元素
表单的作用是收集用户填入的数据，并将这些数据提交给服务器。
<form action="服务器地址" method="请求方式" enctype="数据格式"><!-- 表单项 --><input type="text" name="username"><input type="submit" value="提交按钮">
</form>
常见的表单项
-
文本框：
<input type="text" name="username">
-
密码框：
<input type="password" name="password">
-
隐藏框：
<input type="hidden" name="id" value="1">
-
日期框：
<input type="date" name="birthday">
-
提交框：
<input type="submit" value="提交按钮">
-
单选：
<input type="radio" name="sex" value="男" checked>
<input type="radio" name="sex" value="女">
-
多选：
<input type="checkbox" name="fav" value="唱歌">
<input type="checkbox" name="fav" value="逛街">
<input type="checkbox" name="fav" value="游戏">
-
文件上传：
<input type="file" name="avatar">
注：使用文件上传时，需要指定格式
method="post"和enctype="multipart/form-data"。
-
完整网页：
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>完整页面</title>
</head>
<body><p>Hello,world!</p><hr><img src="C:\Users\OLDERHARD\Pictures\星空.jpg" width="500" height="500" alt="未找到"><hr><h1>标题</h1><video src="D:\Other\Date\信息\其他\自我介绍.mp4" width="500" height="500" controls></video><hr><h2>标题</h2><audio src="bgm.mp3" controls></audio><hr><h3>标题</h3><a href="#pt">跳转到文末</a><hr><ul><li>列表项1</li><li>列表项2</li><li>列表项3</li></ul><hr><ol><li>列表项1</li><li>列表项2</li><li>列表项3</li></ol><hr><ul><li>北京市<ul><li>房山区</li></ul></li><li>河北省<ul><li>石家庄</li></ul></li></ul><hr><a href="https://www.baidu.com/">baidu</a><hr><form action="https://www.baidu.com/s" method="请求方式" enctype="数据格式"><!-- 表单项 --><input type="text" name="username"><br><input type="password" name="password"><br><input type="hidden" name="id" value="1"><br><input type="date" name="birthday"><br><input type="submit" value="提交按钮"><br>男<input type="radio" name="sex" value="男" checked>女<input type="radio" name="sex" value="女"><br>唱歌<input type="checkbox" name="fav" value="唱歌">逛街<input type="checkbox" name="fav" value="逛街">游戏<input type="checkbox" name="fav" value="游戏"><br><input type="file" name="avatar"></form><hr><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><p id="pt">文末</p>
</body>
</html>
网络请求
请求方式
-
GET（默认）：提交时，数据跟在 URL 地址之后。
-
POST：提交时，数据在请求体内。
数据格式
客户端发送的编码方式（3种）：
-
application/x-www-form-urlencoded：URL 编码。 -
application/json：UTF-8 编码。 -
multipart/form-data：每部分编码可以不同。
表单仅支持以
application/x-www-form-urlencoded和multipart/form-data格式发送数据，文件上传需要用multipart/form-data格式。JavaScript 代码可以支持任意格式发送数据。
服务端接收
-
对于
application/x-www-form-urlencoded和multipart/form-data格式的数据，Spring 接收方式是统一的，只需用 Java Bean 的属性名对应请求参数名即可。 -
对于
application/json格式的数据，Spring 接收需要使用@RequestBody注解与 Java Bean 的方式。
Session 原理
HTTP 是无状态的，但通过会话机制可以暂存数据，实现客户端与服务器之间的数据共享。
Session 实现身份验证流程：
-
客户端进行登录请求。
-
服务器的 LoginController 控制器检查用户名和密码，验证通过后：
-
将验证通过的标记存入 Session。
-
向客户端返回登录成功的响应。
-
-
当客户端进行其他请求访问受限资源时：
-
经过服务器的 LoginInterceptor 拦截器，拦截器去 Session 检查用户名，若存在则放行，客户端可以继续访问。
-
JWT 实现身份验证流程：
-
客户端进行登录请求。
-
服务器的 LoginController 控制器检查用户名和密码，验证通过后：
-
向客户端返回登录成功和一个 token（令牌）。
-
-
当客户端进行其他请求访问受限资源时：
-
经过服务器的 LoginInterceptor 拦截器，拦截器校验 token，校验无误则放行，客户端可以继续访问。 当然可以！以下是整理过的 CSS 相关内容，修正了语言的缺失并进行了结构化：
-
CSS
CSS，Cascading Style Sheets，是用于描述网页表现与展示效果的样式表语言。
通过选择器定位页面上的元素，并为这些元素添加样式。每种样式由属性和对应的值组成。
1. 选择器
选择器用于选中 HTML 元素并应用样式。选择器的优先级从高到低依次为：id > class > type。
-
Type 选择器（元素选择器）：根据标签名进行匹配。
p {background-color: purple; /* 将所有 <p> 标签的背景颜色设置为紫色 */ } -
Class 选择器：根据 class 的名称进行匹配。
.c1 {background-color: yellow; /* 将所有 class 为 c1 的元素背景颜色设置为黄色 */ } -
ID 选择器：根据元素的 id 属性进行匹配。
#p3 {background-color: green; /* 将 id 为 p3 的元素背景颜色设置为绿色 */ }
2. 属性和值
在 CSS 中，可以使用不同的属性为元素设置样式。以下是一些常见的属性和值：
-
背景颜色：
background-color: red; /* 设置背景颜色为红色 */ -
显示属性：
display: none; /* 将元素设置为不显示 */
3. 布局
与布局相关的 HTML 元素包括：
-
**
<div>**：容器标签，用于划分页面的布局。 -
**
<template>**：模板标签，用于定义可重用的 HTML 片段。