黑马HTMLCSS基础

黑马的笔记和资料都是提供好了的，这个文档非常适合回顾复习。我在黑马提供的笔记上做了一些微不足道的补充，以便自己复习查阅。该笔记比较重要的部分是 表单，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 token2. 通过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.mzph.cn/news/786462.shtml

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

相关文章

使用虚拟引擎为AR体验提供动力

使用虚拟引擎为AR体验提供动力

Powering AR Experiences with Unreal Engine ​​​​​​​ 目录 1. 虚拟引擎概述 2. 虚拟引擎如何为AR体验提供动力 3. 虚拟引擎中AR体验的组成部分是什么&#xff1f; 4. 使用虚拟引擎创建AR体验 5. 虚拟引擎中AR的优化提示 6. 将互动性融入AR与虚拟引擎 7. 在AR中…
阅读更多...
5G PLMN相关概念

5G PLMN相关概念

PLMN PLMN&#xff08;Public Land Mobile Network&#xff0c;公用陆地移动网络&#xff09;&#xff0c;是由政府或其批准的经营者为公众提供陆地移动通信业务而建立、经营的网络。PLMN与公众交换电话网&#xff08;PSTN&#xff09;互连&#xff0c;形成整个地区或国家规模…
阅读更多...
AR和VR如何改变客户体验？

AR和VR如何改变客户体验？

How AR and VR are transforming customer experiences&#xff1f; How AR and VR are transforming customer experiences AR和VR如何改变客户体验 AR and VR technology was largely expedited by the past pandemic with at least 93.3 million and 58.9 million users r…
阅读更多...
运筹学经典问题（八）：CVRP和VRP-TW

运筹学经典问题（八）：CVRP和VRP-TW

文章目录 问题描述问题建模决策变量数学建模基于容量的消除子环的约束 &#xff08;load-based SECs&#xff09; CVRP完整的数学模型加上时间窗限制的CVRP 问题描述 给定一个图&#xff0c;图上的点代表客户&#xff0c;边代表客户之间的路线&#xff0c;边的权重代表客户之间…
阅读更多...
Day60：WEB攻防-XMLXXE安全无回显方案OOB盲注DTD外部实体黑白盒挖掘

Day60：WEB攻防-XMLXXE安全无回显方案OOB盲注DTD外部实体黑白盒挖掘

目录 XML&XXE-传输-原理&探针&利用&玩法 XXE 黑盒发现 XXE 白盒发现 XXE修复防御方案 有回显 无回显 XML&XXE-黑盒-JSON&黑盒测试&类型修改 XML&XXE-白盒-CMS&PHPSHE&无回显 知识点&#xff1a; 1、XXE&XML-原理-用途&…
阅读更多...
MATLAB绘制堆叠填充图--巧用句柄

MATLAB绘制堆叠填充图--巧用句柄

MATLAB绘制堆叠填充图–巧用句柄 目录 MATLAB绘制堆叠填充图--巧用句柄1. 主要原理讲解1.1 主要函数1.2 句柄原理 2. 绘图示例2.1 准备数据2.2 绘制堆叠填充图-使用句柄控制图形属性2.3 设置填充颜色和样式2.4 添加标题和标签2.5 绘图效果 3. 结语 堆叠填充图是一种常见的数据可…
阅读更多...
政安晨：【Keras机器学习实践要点】（十三）—— 利用 TensorFlow 进行多 GPU 分布式训练

政安晨：【Keras机器学习实践要点】（十三）—— 利用 TensorFlow 进行多 GPU 分布式训练

目录 前言 设置 单主机、多设备同步培训 工作原理 如何使用 使用回调确保容错 tf.data 性能提示 数据集批处理注意事项 调用 dataset.cache() 调用 dataset.prefetch(buffer_size) 政安晨的个人主页&#xff1a;政安晨 欢迎 &#x1f44d;点赞✍评论⭐收藏 收录专栏:…
阅读更多...
ssm015基于java的健身房管理系统的设计与实现+vue

ssm015基于java的健身房管理系统的设计与实现+vue

健身房管理系统设计与实现 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本健身房管理系统就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间…
阅读更多...
MacBook 访达使用技巧【mac 入门】

MacBook 访达使用技巧【mac 入门】

快捷键 打开访达搜索窗口默认快捷键【⌥ ⌘ 空格键】可以在键盘【系统偏好设置 -> 键盘->快捷键->聚焦】修改 但是我不会去修改它&#xff0c;因为我不常用访达的搜索窗口&#xff0c;更多的是想快速打开访达文件夹窗口&#xff0c;可以通过第三方软件定义访达的快…
阅读更多...
利用Node.js实现拉勾网数据爬取

利用Node.js实现拉勾网数据爬取

引言 拉勾网作为中国领先的互联网招聘平台&#xff0c;汇集了丰富的职位信息&#xff0c;对于求职者和人力资源专业人士来说是一个宝贵的数据源。通过编写网络爬虫程序&#xff0c;我们可以自动化地收集这些信息&#xff0c;为求职决策和市场研究提供数据支持。Node.js以其非阻…
阅读更多...
Qt 实现简易的视频播放器，功能选择视频，播放，暂停，前进，后退，进度条拖拉，视频时长显示

Qt 实现简易的视频播放器，功能选择视频，播放，暂停，前进，后退，进度条拖拉，视频时长显示

1.效果图 2.代码实现 2.1 .pro文件 QT core gui multimedia multimediawidgets 2.2 .h文件 #ifndef VIDEOPLAYING_H #define VIDEOPLAYING_H#include <QWidget> #include<QFileDialog>#include<QMediaPlayer> #include<QMediaRecorder> #in…
阅读更多...
vue3中播放flv流视频，以及组件封装超全

vue3中播放flv流视频，以及组件封装超全

实现以上功能的播放&#xff0c;只需要传入一个流的地址即可&#xff0c;当然组件也只有简单的实时播放功能 下面直接上组件 里面的flvjs通过npm i flv.js直接下载 <template><div class"player" style"position: relative;"><p style&…
阅读更多...
深入了解 Vue 3 中的 Keyframes 动画

深入了解 Vue 3 中的 Keyframes 动画

在本文中&#xff0c;我们将探讨如何在 Vue 3 中实现 Keyframes 动画。Keyframes 动画允许我们通过定义关键帧来创建复杂的动画效果&#xff0c;从而为用户提供更吸引人的界面体验。 transition动画适合用来创建简单的过渡效果。CSS3中支持使用animation属性来配置更加复杂的动…
阅读更多...
Day5-

Day5-

Hive 窗口函数 案例 需求&#xff1a;连续三天登陆的用户数据 步骤&#xff1a; -- 建表 create table logins (username string,log_date string ) row format delimited fields terminated by ; -- 加载数据 load data local inpath /opt/hive_data/login into table log…
阅读更多...
蓝桥杯刷题day13——乘飞机【算法赛】

蓝桥杯刷题day13——乘飞机【算法赛】

一、问题描述 等待登机的你看着眼前有老有小长长的队伍十分无聊&#xff0c;你突然想要知道&#xff0c;是否存在两个年龄相仿的乘客。每个乘客的年龄用一个 0 到 36500 的整数表示&#xff0c;两个乘客的年龄相差 365 以内就认为是相仿的。 具体来说&#xff0c;你有一个长度…
阅读更多...
测开——Java、python、SQL、数据结构面试题整理

测开——Java、python、SQL、数据结构面试题整理

一、Java 1.Java中finally、final、finalize的区别 1.性质不同 &#xff08;1&#xff09;final为关键字; &#xff08;2&#xff09;finalize()为方法; &#xff08;3&#xff09;finally为为区块标志,用于try语句中; 2. 作用 &#xff08;1&#xff09;final为用于标识…
阅读更多...
农业信息管理（源码+文档）

农业信息管理（源码+文档）

农业信息管理系统&#xff08;小程序、ios、安卓都可部署&#xff09; 文件包含内容程序简要说明功能项目截图客户端首页我的今日动态动态详情登录修改资料今日价格今日报价注册页 后端管理文章管理用户管理分类管理 文件包含内容 1、搭建视频 2、流程图 3、开题报告 4、数据库…
阅读更多...
Python请求示例京东、淘宝商品数据（属性详情，sku价格页面上的数据抓取）

Python请求示例京东、淘宝商品数据（属性详情，sku价格页面上的数据抓取）

抓取京东、淘宝等电商平台的商品数据是一个复杂且需要谨慎处理的任务&#xff0c;因为这些平台通常会有反爬虫机制&#xff0c;并且页面结构也可能经常变化。以下是一个简化的Python请求示例&#xff0c;展示如何发起HTTP请求来获取页面内容&#xff0c;但这仅作为起点&#xf…
阅读更多...
vue2+elementUi的两个el-date-picker日期组件进行联动

vue2+elementUi的两个el-date-picker日期组件进行联动

vue2elementUi的两个el-date-picker日期组件进行联动 <template><el-form><el-form-item label"起始日期"><el-date-picker v-model"form.startTime" change"startTimeChange" :picker-options"startTimePickerOption…
阅读更多...
提升LLM效果的几种简单方法

提升LLM效果的几种简单方法

其实这个文章想写很久了&#xff0c;最近一直在做大模型相关的产品&#xff0c;经过和团队成员一段时间的摸索&#xff0c;对大模型知识库做一下相关的认知和总结。希望最终形成一个系列。 对于知识库问答&#xff0c;现在有两种方案&#xff0c;一种基于llamaindex&#xff0…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023