掌握HTML与CSS：构建网页的基础
在当今数字化的时代，创建一个吸引人的网页已成为个人和企业展示自我的重要方式。而构建网页的基石，便是HTML（超文本标记语言）和CSS（层叠样式表）。无论你是一个刚刚踏入编程世界的初学者，还是希望巩固基础知识的开发者，理解这两者将帮助你打开网页设计的大门。本文将带你深入探索HTML的元素及结构，以及如何运用CSS为你的网页增添魅力。准备好开始你的网页开发之旅了吗？让我们一起揭开这个神秘的面纱吧！
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 片段。