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

java程序员学前端-HTML篇

news 2025/7/13 14:22:43

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 技术实现身份验证

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

4) jwt 原理

jwt 技术实现身份验证

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

生成 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

相关文章：

java程序员学前端-HTML篇

HTML 与 CSS HTML 是什么&#xff1a;即 HyperText Markup language 超文本标记语言&#xff0c;咱们熟知的网页就是用它编写的&#xff0c;HTML 的作用是定义网页的内容和结构。 HyperText 是指用超链接的方式组织网页&#xff0c;把网页联系起来Markup 是指用 <标签>…...

编程日记 2023/3/18 19:43:50

【云原生|Docker】03-docker的基础操作

目录 前言 查询相关 容器相关 1. 容器启动 2. 容器关闭 3. 重启容器 4. 暂停容器 5. 删除容器 6. docker run参数汇总 镜像相关 1. 镜像推送至仓库 2. docker image load使用 3. docker image import使用 4. dokcer image参数汇总 前言 容器的命…...

编程日记 2023/3/18 19:38:47

vue2+高德地图web端开发使用

创建vue2项目我们创建一个vue2项目&#xff0c;创建vue2项目就不用再多说了吧&#xff0c;使用“vue create 项目名 ”创建即可注册高德地图高德地图官网地址&#xff1a;https://lbs.amap.com/如果是第一次使用&#xff0c;点击注册然后进入我们的控制台注册完之后进入控制台&…...

编程日记 2023/3/18 19:33:45

01背包问题c++

问题 问题介绍 有 N 种物品和一个容量是 V 的背包&#xff0c;每种物品都有无限件可用。 第 i 种物品的体积是 vi&#xff0c;价值是 wi。 求解将哪些物品装入背包&#xff0c;可使这些物品的总体积不超过背包容量&#xff0c;且总价值最大。 输出最大价值。 输入格式 第…...

编程日记 2023/3/18 19:28:43

ZYNQ硬件调试-------day2

ZYNQ硬件调试-------day2 1.ILA&#xff08;Integrated Logic Analyzer &#xff09; 监控逻辑内部信号和端口信号;可以理解为输出。可单独使用 2.VIO&#xff08;Virtual Input/Output &#xff09; 实时监控和驱动逻辑内部信号和端口信号&#xff0c;可以理解为触发输入。不可…...

编程日记 2023/3/18 19:23:42

JavaScript中Promise的简单使用及其原理

Promise是ES6最重要的特性之一&#xff0c;今天来系统且细致的研究一下Promise的用法以及原理。 按照我往常的理解&#xff0c;Promise是一个构造函数&#xff0c;有all、resolve、reject、then、catch等几个方法&#xff0c;一般情况下&#xff0c;在涉及到异步操作时才会用到…...

编程日记 2023/3/18 19:18:40

SpringBoot RabbitMQ 延时队列取消订单【SpringBoot系列14】

SpringCloud 大型系列课程正在制作中&#xff0c;欢迎大家关注与提意见。 程序员每天的CV 与 板砖&#xff0c;也要知其所以然&#xff0c;本系列课程可以帮助初学者学习 SpringBooot 项目开发 与 SpringCloud 微服务系列项目开发 1 项目准备 SpringBoot 雪花算法生成商品订单…...

编程日记 2023/3/18 19:13:37

【论文阅读 WWW‘23】Zero-shot Clarifying Question Generation for Conversational Search

文章目录前言MotivationContributionsMethodFacet-constrained Question GenerationMultiform Question Prompting and RankingExperimentsDatasetResultAuto-metric evaluationHuman evaluationKnowledge前言 最近对一些之前的文章进行了重读&#xff0c;因此整理了之前的笔记…...

编程日记 2023/5/16 22:47:24

ouc 网络安全实验 格式化字符串漏洞

文章目录要求lab1lab2lab3lab4结语因为当时自己做实验的时候出现了很多疑问不会解决&#xff0c;在网上看到了一位大佬 王森ouc 的专栏文章解决了很多问题&#xff0c;也学到了很多知识和解决问题的方法&#xff0c;现在把我的实验解决方法也发上来&#xff0c;希望有不会的同…...

编程日记 2023/3/18 19:03:35

PMSM矢量控制笔记（1.1）——电机的机械结构与运行原理

前言&#xff1a;重新整理以前的知识和文章发现&#xff0c;仍然有许多地方没有学得明白&#xff0c;懵懵懂懂含含糊糊的地方多如牛毛&#xff0c;尤其是到了真正实际写东西或者做项目时&#xff0c;如果不是系统的学习了知识&#xff0c;很容易遇到问题就卡壳&#xff0c;也想…...

编程日记 2023/3/18 18:58:32

2022年全国职业院校技能大赛（中职组）网络安全竞赛试题——中间人攻击渗透测试解析（详细）

B-4任务四：中间人攻击渗透测试 *任务说明：仅能获取Server4的IP地址 *任务说明：仅能获取Server11的IP地址 1.通过上题渗透后得到控制权限的服务器场景Server4进行查看本地的arp缓存表的操作，并将该操作所使用的命令作为Flag值提交； 2.通过上题渗透后得到控制权限的服务…...

编程日记 2023/3/18 18:53:30

MySQL必知必会 | 安全、维护、性能

全球化和本地化 关于MySQL处理不同字符集和语言 字符集和校对顺序 数据库被用来存储和检索数据&#xff0c;不同的语言和字符集需要以不同的方式存储和检索&#xff0c;因此&#xff0c;MySQL需要适应不同的字符集&#xff0c;适应不同的排序方式 一些术语&#xff1a; 字符…...

编程日记 2023/3/18 18:48:29

MaaS Model as a Service 模型即服务

大模型是人工智能的发展趋势和未来。大模型是“大算力强算法” 结合的产物。目前&#xff0c;大模型生态已初具规模。大模型能够实现 AI 从“手工作坊”到“工厂模式”的转变&#xff0c;大模型通常是在大规模无标注 数据上进行训练&#xff0c;学习出一种特征和规则&#xf…...

编程日记 2023/3/18 18:43:27

【编程基础】027.C语言中函数在解题中的应用（三）

文章目录C语言中函数的应用1、自定义函数实现二维数组的转置2、自定义函数之整数处理3、自定义函数之数字后移4、自定义函数之字符串拷贝C语言中函数的应用 1、自定义函数实现二维数组的转置 题目描述 写一个函数&#xff0c;使给定的一个二维数组&#xff08;&#xff13;&a…...

编程日记 2023/3/18 18:38:26

echart图表之highcharts

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录前言一、HighCharts是什么&#xff1f;二、使用步骤1.引入库2.前端代码3.展现结果4.后台自动截图总结前言 提示&#xff1a;这里可以添加本文要记录的大概内容&…...

编程日记 2023/3/18 18:33:24

关于.Net和Java的看法——我见过最牛的一个小实习生经历

1、背景 笔者&#xff08;小方同学在学习&#xff09;是一个专科院校的一名普通学生&#xff0c;目前就职于某三线城市的WEB方面.Net开发实习生&#xff0c;在找实习期间和就业期间的一些看法&#xff0c;发表此文&#xff0c;纯个人想法&#xff0c;欢迎讨论&#xff0c;指正…...

编程日记 2023/3/18 18:28:22

基于springboot+vue的“智慧食堂”程序设计实现【毕业论文，源码】

系统登录界面系统架构开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7数据库工具&#xff1a;Navicat开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;Maven浏览器&#xf…...

编程日记 2023/3/18 18:23:21

学计算机选择什么编程语言好一些？

工资水平的话&#xff0c;目前人工智能、大数据和云计算等领域的工资相对较高&#xff0c;但是要求也高&#xff0c;学历&#xff0c;学习能力什么的。然后是后端开发&#xff0c;Python、Java、C等编程语言的工资普遍较高。 不用开发语言的优势 ​Java&#xff1a;Java是一种…...

编程日记 2023/3/18 18:18:19

持续集成 在 Linux 上搭建 Jenkins，自动构建接口测试

本篇把从 0 开始搭建 Jenkins 的过程分享给大家&#xff0c;希望对小伙伴们有所帮助。 文章目录 在 Linux 上安装 Jenkins在 Linux 上安装 Git在 Linux 上安装 Python在 Linux 上安装 Allure配置 Jenkinsjenkins 赋能 - 使用邮箱发送测试报告jenkins 赋能 - 优化测试报告内容…...

编程日记 2023/3/18 18:13:18

MySQL学习笔记（总结）

1. 数据库服务器操作命令 启动数据库&#xff1a;net start mysql80 &#xff08;注释&#xff1a;windows命令&#xff09; 停止数据库&#xff1a;net stop mysql80 &#xff08;注释&#xff1a;windows命令&#xff09; 重启数据库&#xff1a;systemctl restart mysql;…...

编程日记 2023/3/18 18:08:15

屋顶变身“发电站” ，中天合创屋面分布式光伏发电项目顺利并网！

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

编程新知 2025/7/12 10:13:03

智能仓储的未来：自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

编程新知 2025/7/13 2:55:13

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

编程新知 2025/7/8 0:38:36

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

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

编程新知 2025/7/13 12:02:14

Rust 开发环境搭建

环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行&#xff1a; rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu ​ 2、Hello World fn main() { println…...

编程新知 2025/7/9 16:02:16

区块链技术概述

区块链技术是一种去中心化、分布式账本技术&#xff0c;通过密码学、共识机制和智能合约等核心组件&#xff0c;实现数据不可篡改、透明可追溯的系统。 一、核心技术 1. 去中心化 特点&#xff1a;数据存储在网络中的多个节点&#xff08;计算机&#xff09;&#xff0c;而非…...

编程新知 2025/7/8 3:17:13

Python实现简单音频数据压缩与解压算法

Python实现简单音频数据压缩与解压算法 引言 在音频数据处理中&#xff0c;压缩算法是降低存储成本和传输效率的关键技术。Python作为一门灵活且功能强大的编程语言&#xff0c;提供了丰富的库和工具来实现音频数据的压缩与解压。本文将通过一个简单的音频数据压缩与解压算法…...

编程新知 2025/7/8 19:38:21

人工智能 - 在Dify、Coze、n8n、FastGPT和RAGFlow之间做出技术选型

在Dify、Coze、n8n、FastGPT和RAGFlow之间做出技术选型。这些平台各有侧重&#xff0c;适用场景差异显著。下面我将从核心功能定位、典型应用场景、真实体验痛点、选型决策关键点进行拆解&#xff0c;并提供具体场景下的推荐方案。 一、核心功能定位速览 平台核心定位技术栈亮…...

编程新知 2025/7/5 16:32:16

Canal环境搭建并实现和ES数据同步

作者&#xff1a;田超凡 日期&#xff1a;2025年6月7日 Canal安装&#xff0c;启动端口11111、8082&#xff1a; 安装canal-deployer服务端&#xff1a; https://github.com/alibaba/canal/releases/1.1.7/canal.deployer-1.1.7.tar.gz cd /opt/homebrew/etc mkdir canal…...

编程新知 2025/7/11 9:02:56

Redis上篇--知识点总结

Redis上篇–解析 本文大部分知识整理自网上&#xff0c;在正文结束后都会附上参考地址。如果想要深入或者详细学习可以通过文末链接跳转学习。 1. 基本介绍 Redis 是一个开源的、高性能的 内存键值数据库&#xff0c;Redis 的键值对中的 key 就是字符串对象&#xff0c;而 val…...

编程新知 2025/7/11 4:33:27