【前端速成】别再说不懂前端了！Java后端开发者30分钟搞定HTML+CSS知识

最新推荐文章于 2025-12-05 20:35:03 发布

原创最新推荐文章于 2025-12-05 20:35:03 发布 · 928 阅读

40 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #java #html

在这里插入图片描述

🎬 博主名称：超级苦力怕
🔥 个人专栏: 《Java漫漫学习路》

🚀每一次思考都是突破的前奏，每一次复盘都是精进的开始！

前言

大家好，我是超级苦力怕，一名Java后端开发者。为了打破技术壁垒、提升协作效率与竞争力，因此学习了前端知识，并以Java后端的知识点，与前端进行结合。

文章目录

概述

HTML：定义网页内容与结构（后端需要理解前端数据结构）
HTTP：前后端通信协议（后端核心）
CSS：了解基础即可（协作时需要）

1. HTML - 后端重点关注

HTML：HyperText Markup language 超文本标记语言，主要作用是定义网页的内容和结构。

在这里插入图片描述

1.1 核心概念

元素 = 开始标签 + 内容 + 结束标签
属性：id、class、name（后端数据绑定关键）
嵌套规则：正确闭合标签

1.2 页面结构

<!DOCTYPE html>
<html>
<head>
    <!-- 字符编码，解决中文乱码 -->
    <meta charset="utf-8"> 
    <title>页面标题</title>
</head>
<body>
    <!-- 所有可见内容 -->
</body>
</html>

html 元素囊括了页面中所有其它元素，整个页面只需一个，称为根元素
head 元素包含的是那些不用于展现内容的元素，如 title，link，meta 等
body 元素包含了对用户展现内容的元素，例如后面会学到的用于展示文本、图片、视频、音频的各种元素

1.3 常见元素

1.3.1 文本

包含了Heading，Paragraph,List，Anchor四部分，他们对应着<h>、<p>、<li>与<ul>与<ol>、<a>

1.3.1.1 Heading

作用：定义内容的层级标题

<h1>1号标题</h1>
<h2>2号标题</h2>
<h3>3号标题</h3>
<h4>4号标题</h4>
<h5>5号标题</h5>
<h6>6号标题</h6>

1.3.1.2 Paragraph

作用：包裹文本内容，按段落自动添加间隔

<p>段落</p>

1.3.1.3 List

作用：以有序、无需的形式组织多条关联内容

无序列表 unordered list

<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>
            <li>朝阳区</li>
            <li>昌平区</li>
        </ul>
    </li>
    <li>
    	河北省
        <ul>
            <li>石家庄</li>
            <li>保定</li>
        </ul>
    </li>
</ul>

1.3.1.4 Anchor

作用：创建页面内、页面间或外部资源的跳转链接

<a href="网页地址">超链接文本</a>

1.3.1.5 代码展示与运行结果

包含了上述所有内容(能看懂即可)

<body>
    <!-- Heading：标题层级 -->
    <h1>我的HTML学习笔记</h1>

    <!-- Paragraph：段落文本 -->
    <p>HTML（超文本标记语言）是构建网页的基础，通过各类元素可以组织不同类型的内容。下面是常见基础元素的用法示例。</p>

    <!-- Heading + List：标题+列表 -->
    <h2>一、常用基础元素</h2>
    <ul>
        <li><strong>标题（Heading）</strong>：用h1~h6表示内容层级，h1是页面核心标题</li>
        <li><strong>段落（Paragraph）</strong>：用p包裹文本，实现自然分段</li>
        <li><strong>列表（List）</strong>：包括无序列表（ul）和有序列表（ol）</li>
        <li><strong>链接（Anchor）</strong>：用a标签实现页面内/外的跳转</li>
    </ul>

    <!-- Heading + Paragraph + Anchor：标题+段落+链接 -->
    <h2>二、学习资源推荐</h2>
    <p>可以通过以下链接获取更多HTML学习资料：</p>
    <ol>
        <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML" target="_blank">MDN Web Docs（HTML官方指南）</a></li>
        <li><a href="https://www.w3school.com.cn/html/index.asp" target="_blank">W3School HTML教程</a></li>
    </ol>

    <!-- Anchor：页面内锚点跳转 -->
    <h2>三、快速导航</h2>
    <p>点击跳转到：
        <a href="#top">回到顶部</a>
    </p>
</body>

展示效果

在这里插入图片描述

1.3.2 多媒体

包含了Image、Video、Audio三部分，他们对应着图片、视频、音频

1.3.2.1 Image

<img src="文件路径">

src 格式有 3 种

文件地址
data URL，格式如下

这里base64是编码，数据获取方法如下。

1.在Java中，可以使用Files.readAllBytes();获取字节

2.使用Base64.getEncoder().encodeToString()得到结果
```
data:媒体类型;base64,数据
```
object URL，需要配合 javascript 使用

1.3.2.2 Video

<video src="文件路径"></video>

1.3.2.3 Audio

<audio src="文件路径"></audio>

1.3.2.4 代码展示与运行结果

能看懂即可

  <!-- 新增：Image元素示例 -->
    <h2>三、图片（Image）示例</h2>
    <p>使用img标签嵌入图片，通过src指定资源路径，alt设置替代文本（提升无障碍访问性）：</p>
    <div class="media-container">
        <img src="https://picsum.photos/800/400?random=1" alt="示例风景图片" title="风景图">
        <p>示例说明：图片来自picsum.photos（免费公共图片接口），支持自定义尺寸</p>
    </div>

    <!-- 新增：Video元素示例 -->
    <h2>四、视频（Video）示例</h2>
    <p>使用video标签嵌入视频，controls属性显示播放控件，source标签指定不同格式资源（兼容浏览器）：</p>
    <div class="media-container">
        <video controls preload="metadata">
            <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
            <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
            您的浏览器不支持video标签，请升级浏览器后查看
        </video>
        <p>示例说明：视频为公共演示资源，支持播放、暂停、音量调节等操作</p>
    </div>

    <!-- 新增：Audio元素示例 -->
    <h2>五、音频（Audio）示例</h2>
    <p>使用audio标签嵌入音频，controls属性显示播放控件，支持多格式兼容：</p>
    <div class="media-container">
        <audio controls preload="metadata">
            <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
            <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
            您的浏览器不支持audio标签，请升级浏览器后查看
        </audio>
        <p>示例说明：音频为公共演示资源，可用于音乐、语音解说等场景</p>
    </div>

在这里插入图片描述

1.3.3 表单 (后端交互相关)

1.3.3.1 语法介绍

表单的作用：收集用户填入的数据，并将这些数据 提交给服务器

表单语法（method和enctype不填为默认值）

<form action="服务器地址" method="请求方式" enctype="数据格式">
    <!-- 表单项 -->
    
    <input type="submit" value="提交按钮">
</form>

method 请求方式有
- get （默认）提交时，数据跟在 URL 地址之后
- post 提交时，数据在请求体内
enctype 在 post 请求时，指定请求体的数据格式
- application/x-www-form-urlencoded（默认）
- multipart/form-data
其中表单项提供多种收集数据的方式
- 有 name 属性的表单项数据，才会被发送给服务器

以上内容会通过HTTP请求详细讲解

示例及作用：

<!-- 百度搜索 -->
<form action="https://www.baidu.com/s">
    <input type="text" name="wd">
    <input type="submit" value="搜索">
</form>
<!-- 给后端发送请求 -->
<form action="http://localhost:8080/test">
    <input type="text" name="username">
    <input type="submit" value="提交">
</form>

左侧是发送请求，分别代表后端对应代码、后端控制台、前端接受请求

右侧是百度搜索结果

在这里插入图片描述

1.3.3.2 常见的表单项

<form action="/submit" method="post" enctype="multipart/form-data">
    <!-- 文本输入 -->
    <input type="text" name="username" value="后端接收的参数名">
    
    <!-- 密码 -->
    <input type="password" name="password">
    
    <!-- 隐藏域（传递后端参数） -->
    <input type="hidden" name="id" value="123">
    
    <!-- 单选 -->
    <input type="radio" name="gender" value="male">男
    <input type="radio" name="gender" value="female">女
    
    <!-- 多选 -->
    <input type="checkbox" name="hobbies" value="reading">阅读
    <input type="checkbox" name="hobbies" value="sports">运动
    
    <!-- 文件上传 -->
    <input type="file" name="file">
    
    <!-- 提交 -->
    <button type="submit">提交</button>
</form>

method必须为post，enctype必须为multipart/form-data

1.3.3.3 代码展示与运行结果

HTML关键代码(能看懂即可)

<h2>六、表单（Form）示例</h2>
    <p>使用form标签创建交互表单，收集用户输入信息（提交后会触发后端接口）：</p>
    <div class="form-container">
        <form action="http://localhost:8080/submit-form" method="post" enctype="multipart/form-data">
            <!-- 文本框 -->
            <div class="form-group">
                <label for="username">用户名：</label>
                <input type="text" id="username" name="username" placeholder="请输入用户名" required>
            </div>

            <!-- 密码框 -->
            <div class="form-group">
                <label for="password">密码：</label>
                <input type="password" id="password" name="password" placeholder="请输入密码" required>
            </div>

            <!-- 隐藏框（用户不可见，用于传递隐藏参数） -->
            <input type="hidden" name="formId" value="html-demo-form-001">

            <!-- 日期框 -->
            <div class="form-group">
                <label for="birthday">生日：</label>
                <input type="date" id="birthday" name="birthday">
            </div>

            <!-- 单选按钮 -->
            <div class="form-group">
                <label>性别：</label>
                <div class="radio-group">
                    <label><input type="radio" name="gender" value="male" checked> 男</label>
                    <label><input type="radio" name="gender" value="female"> 女</label>
                </div>
            </div>

            <!-- 多选框 -->
            <div class="form-group">
                <label>兴趣爱好：</label>
                <div class="checkbox-group">
                    <label><input type="checkbox" name="hobbies" value="reading"> 阅读</label>
                    <label><input type="checkbox" name="hobbies" value="coding"> 编程</label>
                    <label><input type="checkbox" name="hobbies" value="sports"> 运动</label>
                </div>
            </div>

            <!-- 文件上传 -->
            <div class="form-group">
                <label for="fileUpload">文件上传（支持图片/文档）：</label>
                <input type="file" id="fileUpload" name="fileUpload" accept=".jpg,.png,.pdf,.doc">
            </div>

            <!-- 提交按钮 -->
            <button type="submit">提交表单</button>
        </form>
    </div>

在这里插入图片描述

Java后端关键代码

public class FormSubmitController {

    // 定义User实体类（用于接收表单非文件字段数据）
    static class User {
        private String username;       // 对应表单用户名
        private String password;       // 对应表单密码
        private String formId;         // 对应表单隐藏框
        private String birthday;       // 对应表单生日
        private String gender;         // 对应表单单选按钮
        private List<String> hobbies;  // 对应表单多选框（多个值用List接收）

        // Getter和Setter 省略
    }

    /**
     * 接收表单提交的User数据和文件
     * 接口路径与HTML表单的action属性一致（/submit-form）
     */
    @PostMapping("/submit-form")
    public String submitForm(User user, MultipartFile fileUpload) {
        System.out.println("接收的用户名：" + user.getUsername());
        System.out.println("接收的性别：" + user.getGender());
        System.out.println("接收的兴趣爱好：" + user.getHobbies());
        System.out.println("接收的文件名称：" + (fileUpload.isEmpty() ? "无" : fileUpload.getOriginalFilename()));
 
        return "接收到了";
    }

运行结果显示

在这里插入图片描述

2. HTTP请求 - 后端核心知识

在这里插入图片描述

2.1 请求组成

请求由请求行、请求头、请求体组成

请求行分为请求方式(POST)、URI(/api/users)、协议版本(HTTP/1.1)

POST /api/users HTTP/1.1          ← 请求行
Host: localhost:8080              ← 请求头
Content-Type: application/json
Content-Length: 45

{"name":"张三","age":25}           ← 请求体

2.2 关键数据格式

2.2.1 application/x-www-form-urlencoded（默认）

name=%E5%BC%A0%E4%B8%89&age=25

表单默认提交方式
Spring直接映射到方法参数(javabean属性名 +请求参数名)
使用格式
- 适用URL编码格式
- 参数分成名字和值，中间用 = 分隔
- 多个参数使用 & 进行分隔

示例：GET请求

GET /test2?name=%E5%BC%A0&age=20 HTTP/1.1
Host: localhost

示例：POST请求

POST /test2 HTTP/1.1
Host: localhost
//请求体的数据类型
Content-Type: application/x-www-form-urlencoded
Content-Length: 21

name=%E5%BC%A0&age=18

拓：以java代码实现url编码

public static void main(String[] args) {
    byte[] bytes="张".getBytes(StandardCharsets.UTF_8);
    System.out.println(bytes);
}

打印出的结果，转换为十六进制，为0xE5、0xBC、0xA0,对应着%E5%BC%A0

在这里插入图片描述

2.2.2 application/json

json请求示例：

POST /test3 HTTP/1.1
Host: localhost
//请求体的数据类型(必加)
Content-Type: application/json		
Content-Length: 25

{"name":"zhang","age":18}

json对象示例{“属性名”:属性值}：

{
  "name": "张三",
  "age": 25,
  "hobbies": ["阅读", "运动"]
}

现代API常用格式
Spring中使用@RequestBody + javaBean 接收
utf-8编码
属性值可以包含以下
- 字符串 “”
- 数字
- true, false
- null
- 对象
- 数组

2.2.3 multipart/form-data

multipart请求示例

POST /test2 HTTP/1.1
Host: localhost
Content-Type: multipart/form-data; boundary=123
Content-Length: 125

--123
Content-Disposition: form-data; name="name"

lisi
--123
Content-Disposition: form-data; name="age"

30
--123--

boundary=123 用来定义分隔符
Spring直接映射到方法参数(javabean属性名 +请求参数名)
起始分隔符是 --分隔符
结束分隔符是 --分隔符--

核心请求：

--boundary
Content-Disposition: form-data; name="name"

张三
--boundary
Content-Disposition: form-data; name="file"; filename="test.jpg"
Content-Type: image/jpeg

[文件二进制数据]
--boundary--

文件上传专用
Spring中使用MultipartFile接收

2.3 会话管理

2.3.1 HTTP特点

Http 特点：无状态，有会话

无状态是指，请求之间相互独立，第一次请求的数据，第二次请求不能重用
有会话是指，客户端和服务端都有相应的技术，可以暂存数据，让数据在请求间共享

2.3.2 Session（单体应用）

在单体项目中，一般在服务端使用了session技术来暂存数据

HTTP请求：存数据

GET /s1?name=zhang HTTP/1.1
Host: localhost

HTTP请求：取数据

GET /s2 HTTP/1.1
Host: localhost
Cookie: JSESSIONID=560FA845D02AE09B176E1BC5D9816A5D

在取数据的时候，会生成session对象的id(jsessionid)，并带回值，之后继续请求的时候，会携带对应的jsessionid标识，因此不会获取到其他session对象的值了。

session 技术实现身份验证(适合单体项目)

java代码实现：

// 存
@RequestMapping("/login")
public String login(String username, HttpSession session) {
    session.setAttribute("user", username);
    return "success";
}

// 取
@RequestMapping("/profile")
public String profile(HttpSession session) {
    String user = (String) session.getAttribute("user");
    return "user: " + user;
}

服务端存储
通过JSESSIONID识别

2.3.3 JWT（分布式应用）

在分布式应用中，多用于jwt实现身份验证，与Session不同的是，他会生成Token值，存入客户端，而非服务端。

HTTP请求：生成token

GET /j1?name=zhang&pass=123 HTTP/1.1
Host: localhost

HTTP请求：校验token

GET /j2 HTTP/1.1
Host: localhost
Authorization: eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZG1pbiJ9._1-P_TLlzQPb1_lCyGwplMZaKQ8Mcw_plBbYPZ3OX28

java代码实现：

// 生成token
public String generateToken(String username) {
    return Jwts.builder()
        .setSubject(username)
        .signWith(key)
        .compact();
}

// 验证token
public boolean validateToken(String token) {
    try {
        Jwts.parserBuilder().setSigningKey(key).build().parseClaimsJws(token);
        return true;
    } catch (Exception e) {
        return false;
    }
}

无状态，适合微服务
Token包含用户信息(由于可以通过解码，因此用户信息不能包含密码等敏感数据)

拓：解析Token

上述Token 由 header、payload、Signature构成，这三部分由.作为分隔

String token = "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZG1pbiJ9._1-P_TLlzQPb1_lCyGwplMZaKQ8Mcw_plBbYPZ3OX28";

//解码过程
//签名算法(签名算法)
System.out.println(new String(Base64.getDecoder().decode("eyJhbGciOiJIUzI1NiJ9")));
//数据(payload)
System.out.println(new String(Base64.getDecoder().decode("eyJzdWIiOiJhZG1pbiJ9")));
//签名：通过签名算法和数据+密钥进行生成

签名的作用：由于可以通过加密，改变payload，因此为了防止这种情况，签名由签名算法和数据+密钥进行生成，而密钥是随机的，杜绝了修改payload的方法。

3. CSS - 基础了解即可

在这里插入图片描述

3.1 基本概念

CSS：Cascading Style Sheets 级联（层叠）样式表，主要作用是描述网页的表现与展示效果

3.2 选择器（理解前端代码用）

type 选择器 - 根据标签名进行匹配（元素选择器）
class 选择器 - 根据元素的 class 属性进行匹配
id 选择器 - 根据元素的 id 属性进行匹配

优先级：id 选择器>class 选择器> type 选择器

/* 元素选择器 */
p { color: blue; }

/* class选择器（常用） */
.button { background: red; }

/* ID选择器 */
#header { height: 60px; }

3.3 样式引入方式

<!-- 行内样式（不推荐） -->
<div style="color: red;">内容</div>

<!-- 内部样式 -->
<style>
    body { margin: 0; }
</style>

<!-- 外部样式（推荐） -->
<link rel="stylesheet" href="style.css">

3.4 代码展示与运行结果

这里主要展示外部样式，其他了解即可

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <!-- 外部样式 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>测试CSS1</p>
    <p class="c1">测试CSS2</p>
    <p id="p1">测试CSS3</p>
</body>
</html>

CSS代码(外部)

/* type选择器:根据标签名匹配(元素选择器) */
/* 使用方式：标签名{属性} */
p{
 background-color: rgb(94, 157, 94);
}
/* class选择器：根据元素的class属性进行匹配 */
/* 使用方式： .class{属性} */
.c1{
    background-color: brown;
}

/* id选择器：根据元素的id属性进行匹配 */
/* 使用方式 #id{属性}*/

#p1{
    background-color:blueviolet;
}

3.5 后端需要知道的布局概念

div：划分页面区块
盒模型：内容+内边距+边框+外边距
常用布局名：header、main、aside、footer

header（顶部区块）

是网页的头部区域，通常用于展示网站标题、logo、导航栏、搜索框等核心信息，承担 “标识网站 + 引导用户” 的作用。

#aside（左侧区块）

属于侧边栏区域，常用于放置辅助功能（如分类菜单、热门推荐、用户信息栏等），帮助用户快速访问网站的次要内容。

#main（中间主区块）

是网页的核心内容区域，用于展示页面的主要信息（如文章内容、商品列表、数据展示等），是用户访问页面的核心目标区域。

#footer（底部区块）

是网页的底部区域，通常包含版权信息、联系方式、网站地图、备案号等辅助信息，承担 “补充说明 + 合规展示” 的作用。

在这里插入图片描述

核心代码

<div class="container">
    <div id="header">#header</div>
    <div id="aside">#aside</div>
    <div id="main">#main</div>
    <div style="clear: both;"></div>
    <div id="footer">#footer</div>
</div>