黑马HTMLCSS基础

news2025/11/3 19:46:45

黑马的笔记和资料都是提供好了的，这个文档非常适合回顾复习。我在黑马提供的笔记上做了一些微不足道的补充，以便自己复习查阅。该笔记比较重要的部分是 表单，http请求

第一章. 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，格式如下

    <img src="data:媒体类型;base64,数据">
媒体类型：值为 image/png 表示图片

    数据需要自己获取，具体步骤如下：

    1. 通过命令行输入 jshell
    2. 输入 Files.readAllBytes(Path.of(“图片路径”))
    3. 输入 System.out.println(Base64.getEncoder().encodeToString($1)) 得到数据

  • 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（默认）【见下文post请求Content-Type配置项】
    • multipart/form-data 【文件上传时需要指定的格式】
  • 其中表单项提供多种收集数据的方式
    • 有 name 属性的表单项数据，才会被发送给服务器
常见的表单项

文本框

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

像这种单一属性，后端实体类中用单一变量接收即可: String username; // 属性名 要与 框中name属性的值相同

密码框

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

像这种单一属性，后端实体类中用单一变量接收即可: String password;

隐藏框

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

日期框

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

一般来讲，后端java中日期格式和前端提交的日期格式一般是不对应的。

所以要在后端实体类的 LocalDate birthday属性上面添加注解 @DateTimeFormat(pattern=“yyyy-MM-dd”) 或 @JsonFormat(pattern = “YYYY-MM-dd HH:mm:ss”)

单选

<input type="radio" name="sex" value="男" checked>
<input type="radio" name="sex" value="女">

像这种单一属性，后端实体类中用单一变量接收即可: String sex;

多选

<input type="checkbox" name="fav" value="唱歌">
<input type="checkbox" name="fav" value="逛街">
<input type="checkbox" name="fav" value="游戏">

像这种多属性，后端实体类中用集合接收即可：List<String> fav;

文件上传

<input type="file" name="avatar">

文件上传需要指定表单属性：method=“post” enctype=“multipart/form-data”

后端接收需要用spring提供的接口：MultipartFile avatar; // 形参名与name属性值相同，容器自动注入

4. HTTP 请求

1) 请求组成

请求由三部分组成

  1. 请求行：请求方式，uri地址，协议版本
  2. 请求头：格式是 ”头名: 头值“
  3. 请求体：携带数据

可以用 postman 程序测试

2) 请求方式与数据格式

get 请求示例
GET /test2?name=%E5%BC%A0&age=20 HTTP/1.1 # 请求行（get请求在这里传输数据）
# 请求头
Host: localhost
  • %E5%BC%A0 是【张】经过 URL 编码后的结果
post 请求示例
POST /test2 HTTP/1.1  # 请求行
#请求头
Host: localhost  # 指明访问服务器的哪个虚拟主机
Content-Type: application/x-www-form-urlencoded # 请求体格式【表单中的 enenctype可以指定】
Content-Length: 21  # 请求体长度

name=%E5%BC%A0&age=18 # 请求体：携带数据

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

  • 参数分成名字和值，中间用 = 分隔

  • 多个参数使用 & 进行分隔

  • 【张】等特殊字符（汉字）需要用 encodeURIComponent() 编码为 【%E5%BC%A0】后才能发送

    encodeURLComponent("张")
json 请求示例
POST /test3 HTTP/1.1
Host: localhost
Content-Type: application/json # 请求体格式为json
Content-Length: 25

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

json 对象格式

{"属性名":属性值}

其中属性值可以是

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

json 数组格式

[元素1, 元素2, ...]

  • 后端接收前端发送的json格式字符串，需要将其转化为 java对象（javaBean），然后进行处理，所以需要加 @RequestBody注解。代码形如：

    @RequestMapping("/test3")  // 前端发送json字符串
@ResponseBody  	// 将java对象转化为json字符串，并提交给前端
public Req test3(@RequestBody Req req) {  // 接收请求体中的json字符串，并把它转为 java对象
    System.out.println(req);
    return req;
}
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 用来定义分隔符为123
  • 起始分隔符是 --分隔符
  • 结束分隔符是 --分隔符--
数据格式小结

客户端发送

  • 编码
    • application/x-www-form-urlencoded ：url 编码 【用于传输普通格式：&name=value&name=value】
    • application/json：utf-8 编码【汉字3个字节】 【用于传输json格式字符串】
    • multipart/form-data：每部分编码可以不同 【用于上传文件】
  • 表单只支持以 application/x-www-form-urlencoded 和 multipart/form-data 格式发送数据
  • 文件上传需要用 multipart/form-data 格式
  • json格式字符串需要用 application/json格式发送数据
  • js 代码可以支持任意格式发送数据

服务端接收

  • 对 application/x-www-form-urlencoded 和 multipart/form-data 格式的数据，Spring 接收方式是统一的，只需要用 java bean 的属性名对应请求参数名即可【自动注入】

  • 对于 applicaiton/json 格式的数据，Spring 接收需要使用 @RequestBody 注解 + java bean 的方式。

    spring响应需要使用 @ResponseBody注解

3) session 原理

Http 无状态，有会话

  • 无状态是指，请求之间相互独立，第一次请求的数据，第二次请求不能重用

  • 有会话是指，客户端和服务端都有相应的技术，可以暂存数据，让数据在请求间共享

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

存：HttpSession session.setAttribute(“name”, name); // 通过session存放name数据

GET /s1?name=zhang HTTP/1.1
Host: localhost
Set-Cookie:JSESSIONID=560FA845D02AE09B176E1BC5D9816A5D;.... # [设置jsessionid]

取：HttpSession session.getAttribute(“name”);

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

image-20240325143129348

session 技术实现身份验证

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

4) jwt 原理

jwt 技术实现身份验证

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

生成 token：

  • String token = Jwts.builder().setSubject(name).signWith(key).compact();
GET /j1?name=zhang&pass=123 HTTP/1.1
Host: localhost

校验 token：

  • Jws jws = Jwts.parserBuilder().setSigningKey(key).build().parseClaimsJws(authorization);
  • 验证失败会抛出异常
GET /j2 HTTP/1.1
Host: localhost
Authorization: eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZG1pbiJ9._1-P_TLlzQPb1_lCyGwplMZaKQ8Mcw_plBbYPZ3OX28 # Authorization 的值就是 JWT令牌token
  • 后端获取token：
    1. 自动注入：@RequestHeader(“Authorization”) String token
    2. 通过HttpServletRequest对象获取：String token = request.getHeader(“Authorization”);

5. CSS

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

1) 选择器

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

    • h1{}

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

    • .class{}

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

    • #id{}

  • 优先级：id选择器 > class选择器 > 元素选择器

2) 属性和值

  • background-color : red;
  • …
  • display: none; // 隐藏元素【block：显示元素】

3) 布局

与布局相关的 html 元素

  • div：div和spn常用于页面布局
  • template：template标签中的代码默认不会显示，但可以通过执行 javascript代码动态显示

X28 # Authorization 的值就是 JWT令牌token


- 后端获取token：
  1. 自动注入：@RequestHeader("Authorization") String token
  2. 通过HttpServletRequest对象获取：String token = request.getHeader("Authorization");







## 5. CSS

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



### 1) 选择器

* type 选择器 - 根据标签名进行匹配（元素选择器）
  * h1{}

* class 选择器 - 根据元素的 class 属性进行匹配
  *  .class{}
* id 选择器  - 根据元素的 id 属性进行匹配
  *  #id{}
* 优先级：id选择器 > class选择器  > 元素选择器





### 2) 属性和值

* background-color : red;
* ...
* display: none;  //  隐藏元素【block：显示元素】





### 3) 布局

与布局相关的 html 元素

* div：div和spn常用于页面布局
* template：template标签中的代码默认不会显示，但可以通过执行 javascript代码动态显示

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1562425.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

VScode 集成终端设置默认打开当前文件夹 mac系统

VScode 集成终端设置默认打开当前文件夹 mac系统

一.快捷键设置 搜索 openInIntegratedTerminal 如图&#xff1a; 二.设置cmd 默认打开位置 点击设置 搜索 ntegrated:cwd 如下图&#xff1a; 三.查看ip 快捷指令&#xff1a; ipconfig getifaddr en0
阅读更多...
【御控物联】JSON结构数据转换在物联业务中应用（场景案例二）

【御控物联】JSON结构数据转换在物联业务中应用（场景案例二）

文章目录 一、物联网业务场景现状二、物联网业务场景数据交互格式三、JSON格式数据转换案例四、JSON数据格式转换DEMO五、在线转换工具六、技术资料 一、物联网业务场景现状 目前&#xff0c;市场上多数物联网关与物联平台捆绑售卖&#xff0c;网关采集到设备数据只能按照指定…
阅读更多...
亲测可用,解决matplotlib中文字体乱码问题(使用Windows设置)

亲测可用,解决matplotlib中文字体乱码问题(使用Windows设置)

SimHei字体下载 https://pan.baidu.com/s/14BzhntzSeEjE4FmlVENwUw?pwd1111 用我自己的,看了好几个其他博主的帖子,所用的下载链接都失效了,太TM不靠谱了 import matplotlib.pyplot as plt import random x range(60) x_ticks_label ["11点{}分".format(i) for …
阅读更多...
HashMap 集合源码分析

HashMap 集合源码分析

系列文章目录 文章目录 系列文章目录前言谈一谈HashMap的红黑树节点类 TreeNode 设计一、字段分析二、构造方法分析三、内部类分析四、方法分析五、扩容分析六、总结 前言 HashMap 底层是使用了 哈希表&#xff08;数组实现的哈希表&#xff09; 链表 红黑树 实现的&#xff…
阅读更多...
Spring框架之WebFlux

Spring框架之WebFlux

Spring WebFlux高级实战 1、WebFlux作为核心响应式服务器基础 Spring 框架的整个基础设施都是围绕Servlet API 构建的&#xff0c;它们之间紧密耦合。 因此在开始深入响应式Web 之前&#xff0c;先回顾一下Web 模块的设计&#xff0c;看看它做了什么。 底层Servlet 容器负责…
阅读更多...
mysql 数据库的MHA高可用

mysql 数据库的MHA高可用

目录 一、MHA概述&#xff1a; 1.认识MHA&#xff1a; 2.MHA 的组成&#xff1a; 3.MHA 的特点&#xff1a; 4.MHA 工作原理&#xff1a; 5.数据流向&#xff1a; 6.数据同步方式&#xff1a; 7. mysql 的高可用 &#xff1a; 二. MySQL MHA 的搭建: 1. 修改 Master、…
阅读更多...
LeetCode刷题：无重复字符的最长子串 详解 【3/1000 第三题】

LeetCode刷题：无重复字符的最长子串 详解 【3/1000 第三题】

&#x1f464;作者介绍&#xff1a;10年大厂数据\经营分析经验&#xff0c;现任大厂数据部门负责人。 会一些的技术&#xff1a;数据分析、算法、SQL、大数据相关、python 作者专栏每日更新&#xff1a; LeetCode解锁1000题: 打怪升级之旅 LeetCode解锁1000题: 打怪升级之旅htt…
阅读更多...
单片机简介（一）

单片机简介（一）

51单片机 一台能够运行的计算机需要CPU做运算和控制&#xff0c;RAM做数据存储&#xff0c;ROM做程序存储&#xff0c;还有输入/输出设备&#xff08;串行口、并行输出口等&#xff09;&#xff0c;这些被分为若干块芯片&#xff0c;安装在主板&#xff08;印刷线路板&#xf…
阅读更多...
文本直接生成2分钟视频，即将开源模型StreamingT2V

文本直接生成2分钟视频，即将开源模型StreamingT2V

Picsart人工智能研究所、德克萨斯大学和SHI实验室的研究人员联合推出了StreamingT2V视频模型。通过文本就能直接生成2分钟、1分钟等不同时间&#xff0c;动作一致、连贯、没有卡顿的高质量视频。 虽然StreamingT2V在视频质量、多元化等还无法与Sora媲美&#xff0c;但在高速运…
阅读更多...
记一次 pdfplumber 内存泄漏导致的服务器宕机

记一次 pdfplumber 内存泄漏导致的服务器宕机

有一个项目需求&#xff0c;要在每天凌晨5点的时候执行一个任务&#xff0c;获取一系列的PDF文件并解析。 后端是Django框架&#xff0c;定时任务用Celery来实现的。 本地跑没什么问题&#xff0c;但是一放到服务器上跑就会宕机&#xff0c;而且是毫无征兆的宕机&#xff0c;…
阅读更多...
css- 4

css- 4

1.浮动 1. 浮动最初用于实现文字环绕效果 2. 现在&#xff0c;浮动是主流的布局方式之一 1.1元素浮动之后的特点 元素浮动之后&#xff0c;称为浮动元素&#xff0c;具有如下特点&#xff1a; 1. 浮动元素脱离文档流 2. 多个浮动的元素会水平排列&#xff0c;一行放不下自动换…
阅读更多...
【STM32嵌入式系统设计与开发】——14PWM(pwm脉宽输入应用)

【STM32嵌入式系统设计与开发】——14PWM(pwm脉宽输入应用)

这里写目录标题 一、任务描述二、任务实施1、WWDG工程文件夹创建2、函数编辑&#xff08;1&#xff09;主函数编辑&#xff08;2&#xff09;USART1初始化函数(usart1_init())&#xff08;3&#xff09;USART数据发送函数&#xff08; USART1_Send_Data&#xff08;&#xff09…
阅读更多...
浅聊什么是Redis？

浅聊什么是Redis？

需求&#xff1a;MySQL面临大量的查询&#xff0c;即读写操作&#xff0c;因此类比CPU&#xff0c;给数据加缓存&#xff0c;Redis诞生。应用程序从MySQL查询的数据&#xff0c;在Redis设置缓存&#xff08;记录在内存中&#xff0c;无需IO操作&#xff09;&#xff0c;后再需要…
阅读更多...
记录Xshell使用ed25519公钥免密链接SSH

记录Xshell使用ed25519公钥免密链接SSH

试了半天&#xff0c;Xshell好像没办法导入linux生成的ssh公钥,因此需要以下步骤实现免密登录 结论&#xff0c;在linux公钥文件中&#xff0c;将客户端生成的ed25519公钥加上去即可(一个公钥单独一行) 1.使用Linux生成秘钥文件(不需要输入私钥密码passphrase)或者直接创建一…
阅读更多...
FFmpeg 详解

FFmpeg 详解

FFmpeg 详解 FFmpeg 详解整体结构不同下载版本的区别常用库常用函数初始化封装格式解码器 版本对比组件注册方式对比FFmpeg 3.x 组件注册方式FFmpeg 4.x 组件注册方式 结构体比对函数对比avcodec_decode_video2()vcodec_encode_video2() 数据结构结构体分析AVFormatContextAVIn…
阅读更多...
上位机图像处理和嵌入式模块部署（qmacvisual获取边界点）

上位机图像处理和嵌入式模块部署（qmacvisual获取边界点）

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 在图像处理中&#xff0c;解决了分割的问题之后&#xff0c;下面就是属性信息的提取。在这其中&#xff0c;有一种属性是非常重要的 &#xff0c;那…
阅读更多...
蓝桥杯-单片机基础12——基于2023年IIC代码实现开机次数记录（串行EEPROM存储器AT24C02）

蓝桥杯-单片机基础12——基于2023年IIC代码实现开机次数记录（串行EEPROM存储器AT24C02）

蓝桥杯单片机组备赛指南请查看这篇文章&#xff1a;戳此跳转蓝桥杯备赛指南文章 本文章针对蓝桥杯-单片机组比赛开发板所写&#xff0c;代码可直接在比赛开发板上使用。 型号&#xff1a;国信天长4T开发板&#xff08;绿板&#xff09;&#xff0c;芯片&#xff1a;IAP15F2K6…
阅读更多...
libusb Qt使用记录

libusb Qt使用记录

1.libusb 下载 &#xff0c;选择编译好的二进制文件&#xff0c;libusb-1.0.26-binaries.7z libusb Activity 2. 解压 3. 在 Qt Widgets Application 或者 Qt Console Application 工程中导入库&#xff0c;Qt 使用的是 minggw 64编译器&#xff0c;所以选择libusb-MinGW-x64。…
阅读更多...
在岸上是永远学不会游泳的

在岸上是永远学不会游泳的

为了让各位技术宅的师傅们了解如何追女孩&#xff0c;花无缺表哥来投稿啦&#xff01;&#xff01;&#xff01; 在岸上是永远也学不会游泳的&#xff0c;就算是最好的教练来教你也没用&#xff0c;因为你没有去实践。实践是快速学习的最佳手段&#xff0c;将这些方法运用到工…
阅读更多...
深度学习理论基础（三）封装数据集及手写数字识别

深度学习理论基础（三）封装数据集及手写数字识别

目录 前期准备一、制作数据集1. excel表格数据2. 代码 二、手写数字识别1. 下载数据集2. 搭建模型3. 训练网络4. 测试网络5. 保存训练模型6. 导入已经训练好的模型文件7. 完整代码 前期准备 必须使用 3 个 PyTorch 内置的实用工具&#xff08;utils&#xff09;&#xff1a; ⚫…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023