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

HTML与CSS

news 2025/7/12 9:30:36

前言

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

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

编程新知 2025/7/11 23:23:21

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

编程新知 2025/7/12 6:34:01

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

编程新知 2025/6/27 0:52:23

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...

编程新知 2025/7/9 21:54:35

MySQL 知识小结（一）

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

编程新知 2025/7/9 23:34:29

MySQL JOIN 表过多的优化思路

当 MySQL 查询涉及大量表 JOIN 时&#xff0c;性能会显著下降。以下是优化思路和简易实现方法&#xff1a; 一、核心优化思路 减少 JOIN 数量 数据冗余&#xff1a;添加必要的冗余字段&#xff08;如订单表直接存储用户名&#xff09;合并表&#xff1a;将频繁关联的小表合并成…...

编程新知 2025/7/6 1:12:52

计算机基础知识解析：从应用到架构的全面拆解

目录 前言 1、 计算机的应用领域&#xff1a;无处不在的数字助手 2、 计算机的进化史&#xff1a;从算盘到量子计算 3、计算机的分类&#xff1a;不止 “台式机和笔记本” 4、计算机的组件&#xff1a;硬件与软件的协同 4.1 硬件&#xff1a;五大核心部件 4.2 软件&#…...

编程新知 2025/7/12 0:44:39

WPF八大法则：告别模态窗口卡顿

⚙️ 核心问题&#xff1a;阻塞式模态窗口的缺陷 原始代码中ShowDialog()会阻塞UI线程&#xff0c;导致后续逻辑无法执行&#xff1a; var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题&#xff1a…...

编程新知 2025/7/11 17:33:48

ArcGIS Pro+ArcGIS给你的地图加上北回归线！

今天来看ArcGIS Pro和ArcGIS中如何给制作的中国地图或者其他大范围地图加上北回归线。 我们将在ArcGIS Pro和ArcGIS中一同介绍。 1 ArcGIS Pro中设置北回归线 1、在ArcGIS Pro中初步设置好经纬格网等&#xff0c;设置经线、纬线都以10间隔显示。 2、需要插入背会归线&#xf…...

编程新知 2025/7/4 12:37:57

LangChain【6】之输出解析器：结构化LLM响应的关键工具

文章目录 一 LangChain输出解析器概述1.1 什么是输出解析器&#xff1f;1.2 主要功能与工作原理1.3 常用解析器类型 二 主要输出解析器类型2.1 Pydantic/Json输出解析器2.2 结构化输出解析器2.3 列表解析器2.4 日期解析器2.5 Json输出解析器2.6 xml输出解析器 三 高级使用技巧3…...

编程新知 2025/6/17 10:29:45