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

HTML与CSS

news 2026/5/25 20:34:20

前言

Java 程序员一提起前端知识，心情那是五味杂陈，百感交集。

  • 说不学它吧，说不定进公司以后，就会被抓壮丁去时不时写点前端代码
  • 说学它吧，HTML、CSS、JavaScript 哪个不得下大功夫才能精通？
  • 学一点够不够用呢？如果只学基础的 JavaScript 是不够用的，前端都已经工程化了，Vue、React 这些框架你去看吧，光有点基础根本看不懂，甚至连前端页面路径在哪儿配置，如何跳转都不甚了解，所以得学，而且要学的还不少，请把前端当作 web 不可或缺的一部分来学习。
  • 学习前端好处挺多，我听说过这么一句挺有道理的话：一个程序员至少应该掌握一门静态语言，如 Java，还应该掌握一门动态语言，如 JavaScript。而且，你不觉得学了前端，就如打通了程序员的任督二脉，可以独立接活了嘛
  1. HTML / CSS 这部分对咱们来说，不是重点，但又不能不讲，必学
  2. JavaScript 这部分是重点，尤其是 ES6 以后的一些新语法，不理解这些，前端代码你根本看不懂，必学
  3. Vue2，Vue3，React 这三章是三选一的关系，根据你入职公司的使用的前端技术不同，有针对地学习
    • 后三章会涵盖 TypeScript、VueCli、Vuex、VueRouter、ElementUI、Vite、CreateReactApp、React、Redux、ReactRouter 等库和工具的使用
  4. jquery 经过调研，还有一些学员毕业后确实会用到，所以也作为一个可选章节进行学习

HTML 与 CSS

HTML 是什么：即 HyperText Markup language 超文本标记语言，咱们熟知的网页就是用它编写的，HTML 的作用是定义网页的内容和结构。

  • HyperText 是指用超链接的方式组织网页，把网页联系起来
  • Markup 是指用 <标签> 的方式赋予内容不同的功能和含义

CSS 是什么：即 Cascading Style Sheets 级联（层叠）样式表，它描述了网页的表现与展示效果

1. HTML 元素

HTML 由一系列元素 elements 组成，例如

<p>Hello, world!</p>

  • 整体称之为元素

  • <p> 和 </p> 分别称为起始和结束标签

  • 标签包围起来的 Hello, world 称之为内容

  • p 是预先定义好的 html 标签，作用是将内容作为一个单独的段落

元素还可以有属性，如

<p id="p1">Hello, world!</p>
  • 属性一般是预先定义好的，这里的 id 属性是给元素一个唯一的标识

元素之间可以嵌套，如

<p>HTML 是一门非常<b>强大</b>的语言</p>

错误嵌套写法：

<p>HTML 是一门非常<b>强大的语言</p></b>

不包含内容的元素称之为空元素，如

<img src="1.png">
<img src="1.png"/>
  • img 作用是用来展示图片
  • src 属性用来指明图片路径

2. HTML 页面

前面介绍的只是单独的 HTML 元素，它们可以充当一份完整的 HTML 页面的组成部分

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试页面</title></head><body><p id="p1">Hello, world!</p><img src="1.png"></body>
</html>
  • html 元素囊括了页面中所有其它元素，整个页面只需一个，称为根元素
  • head 元素包含的是那些不用于展现内容的元素，如 title，link，meta 等
  • body 元素包含了对用户展现内容的元素，例如后面会学到的用于展示文本、图片、视频、音频的各种元素

3. 常见元素

1) 文本

Heading
<h1>1号标题</h1>
<h2>2号标题</h2>
<h3>3号标题</h3>
<h4>4号标题</h4>
<h5>5号标题</h5>
<h6>6号标题</h6>
Paragraph
<p>段落</p>
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>
Anchor

锚，超链接

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

2) 多媒体

Image
<img src="文件路径">

src 格式有 3 种

  • 文件地址

  • data URL，格式如下

    data:媒体类型;base64,数据

  • object URL，需要配合 javascript 使用

Video
<video src="文件路径"></video>
Audio
<audio src="文件路径"></audio>

3) 表单

作用与语法

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

表单的语法

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

文本框

<input type="text" name="uesrname">

密码框

<input type="password" name="password">

隐藏框

<input type="hidden" name="id">

日期框

<input type="date" name="birthday">

单选

<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">

4. HTTP 请求

1) 请求组成

请求由三部分组成

  1. 请求行
  2. 请求头
  3. 请求体

可以用 telnet 程序测试

2) 请求方式与数据格式

get 请求示例
GET /test2?name=%E5%BC%A0&age=20 HTTP/1.1
Host: localhost
  • %E5%BC%A0 是【张】经过 URL 编码后的结果
post 请求示例
POST /test2 HTTP/1.1
Host: localhost
Content-Type: application/x-www-form-urlencoded
Content-Length: 21name=%E5%BC%A0&age=18

application/x-www-form-urlencoed 格式细节：

  • 参数分成名字和值，中间用 = 分隔
  • 多个参数使用 & 进行分隔
  • 【张】等特殊字符需要用 encodeURIComponent() 编码为 【%E5%BC%A0】后才能发送
json 请求示例
POST /test3 HTTP/1.1
Host: localhost
Content-Type: application/json
Content-Length: 25{"name":"zhang","age":18}

json 对象格式

{"属性名":属性值}

其中属性值可以是

  • 字符串 “”
  • 数字
  • true, false
  • null
  • 对象
  • 数组

json 数组格式

[元素1, 元素2, ...]
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 用来定义分隔符
  • 起始分隔符是 --分隔符
  • 结束分隔符是 --分隔符--
数据格式小结

客户端发送

  • 编码
    • application/x-www-form-urlencoded ：url 编码
    • application/json：utf-8 编码
    • multipart/form-data：每部分编码可以不同
  • 表单只支持以 application/x-www-form-urlencoded 和 multipart/form-data 格式发送数据
  • 文件上传需要用 multipart/form-data 格式
  • js 代码可以支持任意格式发送数据

服务端接收

  • 对 application/x-www-form-urlencoded 和 multipart/form-data 格式的数据，Spring 接收方式是统一的，只需要用 java bean 的属性名对应请求参数名即可
  • 对于 applicaiton/json 格式的数据，Spring 接收需要使用 @RequestBody 注解 + java bean 的方式

3) session 原理

Http 无状态，有会话

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

服务端使用了 session 技术来暂存数据

存

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

取

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

session 技术实现身份验证

Client LoginController LoginInterceptor Session 登录请求 检查用户名，密码，验证通过 存入用户名 登录成功 其它请求 获取用户名 用户名存在，放行 Client LoginController LoginInterceptor Session

4) jwt 原理

jwt 技术实现身份验证

Client LoginController LoginInterceptor 登录请求 检查用户名，密码，验证通过 登录成功，返回token 其它请求，携带token 校验token，校验无误，放行 Client LoginController LoginInterceptor

生成 token

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

校验 token

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

5. CSS

即 Cascading Style Sheets，它描述了网页的表现与展示效果

1) 选择器

  • type 选择器 - 根据标签名进行匹配（元素选择器）

  • class 选择器 - 根据元素的 class 属性进行匹配

  • id 选择器 - 根据元素的 id 属性进行匹配

2) 属性和值

  • background-color : red;
  • …
  • display

3) 布局

与布局相关的 html 元素

  • div
  • template

相关文章：

HTML与CSS

前言 Java 程序员一提起前端知识&#xff0c;心情那是五味杂陈&#xff0c;百感交集。 说不学它吧&#xff0c;说不定进公司以后&#xff0c;就会被抓壮丁去时不时写点前端代码说学它吧&#xff0c;HTML、CSS、JavaScript 哪个不得下大功夫才能精通&#xff1f;学一点够不够用…...

编程日记 2024/3/18 2:25:47

App推广不再难！Xinstall神器助你快速获客，提升用户留存

在如今的移动互联网时代&#xff0c;App推广已经成为了各大应用商家争夺用户的重要手段。然而&#xff0c;面对竞争激烈的市场环境&#xff0c;如何快速提升推广效率&#xff0c;先人一步获得用户呢&#xff1f;这就需要我们借助专业的App全渠道统计服务商——Xinstall的力量。…...

编程日记 2024/3/18 2:20:43

MySQL建表以及excel内容导入

最近自学MySQL的使用&#xff0c;需要将整理好的excel数据导入数据库中&#xff0c;记录一下数据导入流程。 --建立数据库 create table SP_sjk ( --增加列 id NUMBER(20), mc VARCHAR2(300) ) /*表空间储存参数配置。一个数据库从逻辑上来说是由一个或多个表空间所组成&#…...

编程日记 2024/3/18 2:19:42

让el-input与其他组件能够显示在同一行

让el-input与其他组件能够显示在同一行 说明&#xff1a;由于el-input标签使用会默认占满一行&#xff0c;所以在某些需要多个展示一行的时候不适用&#xff0c;因此需要能够跟其他组件显示在同一行。 效果&#xff1a; 1、el-input标签内使用css属性inline 111<el-inp…...

编程日记 2024/3/18 2:17:40

学完Efficient c++ (44-45)

条款 44&#xff1a;将与参数无关的代码抽离模板 模板可以节省时间和避免代码重复&#xff0c;编译器会为填入的每个不同模板参数具现化出一份对应的代码&#xff0c;但长此以外&#xff0c;可能会造成代码膨胀&#xff08;code bloat&#xff09;&#xff0c;生成浮夸的二进制…...

编程日记 2024/3/18 2:14:38

鸿蒙Harmony应用开发—ArkTS声明式开发（容器组件：ColumnSplit）

将子组件纵向布局&#xff0c;并在每个子组件之间插入一根横向的分割线。 说明&#xff1a; 该组件从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 可以包含子组件。 ColumnSplit通过分割线限制子组件的高度。初始…...

编程日记 2024/3/18 2:12:36

jenkins部署go应用 基于docker-compose

丢弃旧的的构建 github 拉取代码 指定go的编译版本 安装插件 拉取代码是排除指定的配置文件 比如 conf/config.yaml 文件 填写配置文件内容 比如测试环境一些主机信息 等 可以配置里面 构建的时候选择此文件替换开发提交的配置文件。。。。 编写docker-compose 文件 docker…...

编程日记 2024/3/18 2:07:32

【晴问算法】入门篇—贪心算法—整数配对

题目描述 有两个正整数集合S、T&#xff0c;其中S中有n个正整数&#xff0c;T中有m个正整数。定义一次配对操作为&#xff1a;从两个集合中各取出一个数a和b&#xff0c;满足a∈S、b∈T、a≤b&#xff0c;配对的数不能再放回集合。问最多可以进行多少次这样的配对操作。 输入描…...

编程日记 2024/3/18 2:05:28

九种背包问题（C++）

0-1背包&#xff0c;背包大小target&#xff0c;占用容积vec[i][0]&#xff0c;可以带来的利益是vec[i][1] 一件物品只能取一次,先遍历物品然后遍历背包更新不同容积下最大的利益 int func(vector<vector<int>>&vec,int target){vector<int>dp(target1,…...

编程日记 2024/3/18 2:04:27

008：安装Docker

安装Docker 如果不太熟悉Linux命令&#xff0c;不想学习Linux命令&#xff0c;可以直接看文末NAS面板章节&#xff0c;通过面板&#xff0c;像使用Window一样操作NAS。 一、安装 Docker 1.安装 Docker wget -qO- https://get.docker.com/ | sh2.启动 Docker 服务 sudo sys…...

编程日记 2024/3/18 2:02:25

STM32第九节（中级篇）：RCC（第一节）——时钟树讲解

目录 前言 STM32第九节&#xff08;中级篇&#xff09;&#xff1a;RCC——时钟树讲解 时钟树主系统时钟讲解 HSE时钟 HSI时钟 锁相环时钟 系统时钟 SW位控制 HCLK时钟 PCLKI时钟 PCLK2时钟 RTC时钟 MCO时钟输出 6.2.7时钟安全系统(CSS&#xff09; 小结 前言 从…...

编程日记 2024/3/18 2:01:24

Web核心，HTTP，tomcat，Servlet

1&#xff0c;JavaWeb技术栈 B/S架构:Browser/Server&#xff0c;浏览器/服务器架构模式&#xff0c;它的特点是&#xff0c;客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务器端。浏览器只需要请求服务器&#xff0c;获取Web资源&#xff0c;服务器把Web资源…...

编程日记 2024/3/18 1:56:19

空间（Space）概念：元素、集合、空间和数学对象

摘要&#xff1a; 在数学中&#xff0c;一个空间&#xff08;Space&#xff09;是一种特殊类型的数学对象。它通常是一个集合&#xff0c;但不仅仅是一个普通的集合&#xff0c;而是具有某种附加的结构和定义在其上的运算规则。这些额外的结构使得空间能够反映现实世界中的几何…...

编程日记 2024/3/18 1:53:17

【Datawhale组队学习：Sora原理与技术实战】训练一个 sora 模型的准备工作，video caption 和算力评估

训练 Sora 模型 在 Sora 的技术报告中&#xff0c;Sora 使用视频压缩网络将各种大小的视频压缩为潜在空间中的时空 patches sequence&#xff0c;然后使用 Diffusion Transformer 进行去噪&#xff0c;最后解码生成视频。 Open-Sora 在下图中总结了 Sora 可能使用的训练流程。…...

编程日记 2024/3/18 1:52:16

Kafka-生产者报错javax.management.InstanceAlreadyExistsException

生产者发送消息到 kafka 中,然后控制台报错 然后根据日志查看 kafka 的源码发现了问题原因 说的是MBean已经注册了,然后报异常了,这样就会导致生产者的kafka注册失败, 原因是项目上生产者没有配置clientId,默认都是空导致的, 多个生产者(项目)注册到kafka集群中的 id 都相同。 …...

编程日记 2024/3/18 1:51:14

Java常见问题：编辑tomcat运行环境、部署若伊系统

文章目录 引言I Eclipse1.1 编辑tomcat运行环境II JDK2.1 驱动程序无法通过使用安全套接字层(SSL)加密与 SQL Server 建立安全连接2.2 restriction on required library2.3 The type javax.servlet.http.HttpServletRequest cannot be resolved.的解决方法III npm3.1 npm报错：…...

编程日记 2024/3/18 1:50:13

阿里云免费证书改为3个月，应对方法很简单

情商高点的说法是 Google 积极推进90天免费证书&#xff0c;各服务商积极响应。 情商低点的话&#xff0c;就是钱的问题。 现在基本各大服务商都在2024年停止签发1年期的免费SSL证书产品&#xff0c;有效期都缩短至3个月。 目前腾讯云倒还是一年期。 如果是一年期的话&#x…...

编程日记 2024/3/18 1:49:12

安装Pytorch——CPU版本

安装Pytorch——CPU版本 1. 打开pytorch官网2. 选择pip安装pytorch-cpu3.复制安装命令4. 在cmd命令窗口&#xff0c;进入你的虚拟环境4.1 创建虚拟环境4.2 进行安装 5. 安装成功6. 进行测试——如下面步骤&#xff0c;如图6.1 输入 python6.2 输入 import torch6.2 输入 print …...

编程日记 2024/3/18 1:48:11

MySQL中出现‘max_allowed_packet‘ variable.如何解决

默认情况下&#xff0c;MySQL的max_allowed_packet参数可能设置得相对较小&#xff0c;这对于大多数常规操作来说足够了。但是&#xff0c;当你尝试执行包含大量数据的操作&#xff08;如大批量插入或大型查询&#xff09;时&#xff0c;可能会超过这个限制&#xff0c;从而导致…...

编程日记 2024/3/18 1:38:01

PHP 生成图片

1.先确认是否有GD库 echo phpinfo(); // 创建一个真彩色图像 $image imagecreatetruecolor(120, 50);// 分配颜色 $bgColor imagecolorallocate($image, 255, 255, 255); // 白色背景 $textColor imagecolorallocate($image, 230, 230, 230); // 黑色文字// 填充背景 image…...

编程日记 2024/3/18 1:37:00

万星easy-vibe：描述需求即发布 零基础无需学语法

开源Easy-Vibe是一套开源AI编程学习方案&#xff0c;把学习顺序从先学语法再做项目翻转为直接做项目。文章拆解了项目驱动、提示词编写、AI编辑器和多Agent协作的完整流程&#xff0c;解释了为什么想法比语法更重要。 github上datawhalechina/easy-vibe&#xff1a;它在GitHub…...

编程新知 2026/5/25 20:22:06

PS5 NOR Modifier深度解析：如何通过Windows工具修复PS5硬件故障与实现光驱版转数字版

PS5 NOR Modifier深度解析&#xff1a;如何通过Windows工具修复PS5硬件故障与实现光驱版转数字版 【免费下载链接】PS5NorModifier The PS5 Nor Modifier is an easy to use Windows based application to rewrite your PS5 NOR file. This can be useful if your NOR is corru…...

编程新知 2026/5/25 18:32:45

如何深度定制索尼相机：Sony-PMCA-RE逆向工程工具完整指南

如何深度定制索尼相机&#xff1a;Sony-PMCA-RE逆向工程工具完整指南 【免费下载链接】Sony-PMCA-RE Reverse Engineering Sony Digital Cameras 项目地址: https://gitcode.com/gh_mirrors/so/Sony-PMCA-RE 索尼相机逆向工程工具Sony-PMCA-RE是一款专业的开源工具&…...

编程新知 2026/5/25 18:12:25

Xia Sql插件：可调试的SQL注入决策引擎

1. 这不是又一个“自动扫SQL”的插件&#xff0c;而是把渗透工程师的判断逻辑塞进了Burp里你有没有过这种经历&#xff1a;在Burp Proxy里看着一堆GET参数、POST JSON、Cookie字段&#xff0c;心里清楚“这里大概率能注入”&#xff0c;但手动拼payload试了七八轮&#xff0c;还…...

编程新知 2026/5/25 17:38:37

Fiddler手机断网真相：TLS握手与证书固定的协议级拦截

1. 为什么Fiddler一开&#xff0c;手机就断网&#xff1f;这不是配置问题&#xff0c;是协议层的“信任危机”Fiddler抓包手机流量&#xff0c;本该是移动开发、测试、安全分析中最基础的操作之一。但几乎每个刚上手的人&#xff0c;都会在第二天早上发现&#xff1a;手机Wi-Fi…...

编程新知 2026/5/25 16:19:43

抖音下载器深度解析：零基础轻松批量下载无水印视频

抖音下载器深度解析&#xff1a;零基础轻松批量下载无水印视频 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback support.…...

编程新知 2026/5/25 13:46:20

终极空洞骑士模组管理器 Lumafly：跨平台一键安装与智能依赖管理指南

终极空洞骑士模组管理器 Lumafly&#xff1a;跨平台一键安装与智能依赖管理指南 【免费下载链接】Lumafly A cross platform mod manager for Hollow Knight written in Avalonia. 项目地址: https://gitcode.com/gh_mirrors/lu/Lumafly Lumafly 是一款基于 Avalonia 框…...

编程新知 2026/5/25 13:12:33

024、NPU指令集架构（ISA）概述：从CISC到VLIW

024、NPU指令集架构（ISA）概述：从CISC到VLIW 去年冬天调试一块国产NPU芯片的卷积算子，跑ResNet-50前向推理，死活比理论算力低了一个数量级。抓了三天波形，最后发现是指令发射槽的冲突——两条MAC指令争同一个数据总线，硬件自动插入三个空泡周期。那一刻我盯着逻辑分析仪…...

编程新知 2026/5/25 13:03:44

终极鼠标连点器MouseClick：5分钟免费获取完整使用指南

终极鼠标连点器MouseClick&#xff1a;5分钟免费获取完整使用指南 【免费下载链接】MouseClick &#x1f5b1;️ MouseClick &#x1f5b1;️ 是一款功能强大的鼠标连点器和管理工具&#xff0c;采用 QT Widget 开发 &#xff0c;具备跨平台兼容性 。软件界面美观 &#xff0c;…...

编程新知 2026/5/25 12:42:35

别再手动调相机了！用Cinemachine插件5分钟搞定Unity第三人称跟随镜头（含FreeLook Camera配置）

别再手动调相机了&#xff01;用Cinemachine插件5分钟搞定Unity第三人称跟随镜头当你在Unity中开发角色扮演游戏时&#xff0c;是否经常被这些问题困扰&#xff1a;角色移动时镜头抖动、转向时视角卡顿、不同地形下镜头穿模&#xff1f;传统的手动编写相机跟随脚本不仅耗时耗力…...

编程新知 2026/5/25 12:40:33