黑马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 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代码动态显示

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

目标检测——植物病害图像数据集

目标检测——植物病害图像数据集

一、重要性及意义 首先&#xff0c;植物病害图像是了解农业中植物生长和受病害情况的重要信息来源。通过对这些图像的分析&#xff0c;可以直观地观察到植物的生长状况&#xff0c;及时发现病害的存在。这不仅有助于农民和研究人员快速、准确地诊断植物病害&#xff0c;还能为…
阅读更多...
代码随想录第27天 | 39. 组合总和、40.组合总和II、131.分割回文串

代码随想录第27天 | 39. 组合总和、40.组合总和II、131.分割回文串

一、前言 今天的主题还是回溯算法&#xff0c;还是根据那个backtracking模板&#xff0c;但是今天会涉及到去重和一些小细节的问题。 二、组合总和 1、思路&#xff1a; 我一开始的想法就是在for循环转化为&#xff1a; for(int i 0; i < size; i) 但是这个是会陷入一…
阅读更多...
C#实现Word文档转Markdown格式（Doc、Docx、RTF、XML、WPS等）

C#实现Word文档转Markdown格式（Doc、Docx、RTF、XML、WPS等）

文档格式的多样性丰富了我们的信息交流手段&#xff0c;其中Word文档因其强大的功能性而广受欢迎。然而&#xff0c;在网络分享、版本控制、代码阅读及编写等方面&#xff0c;Markdown因其简洁、易于阅读和编辑的特性而展现出独特的优势。将Word文档转换为Markdown格式&#xf…
阅读更多...
智慧安防监控EasyCVR视频调阅和设备录像回看无法自动播放的原因排查与解决

智慧安防监控EasyCVR视频调阅和设备录像回看无法自动播放的原因排查与解决

智慧安防监控EasyCVR视频管理平台能在复杂的网络环境中&#xff0c;将前端设备统一集中接入与汇聚管理。国标GB28181协议视频监控/视频汇聚EasyCVR平台可以提供实时远程视频监控、视频录像、录像回放与存储、告警、语音对讲、云台控制、平台级联、磁盘阵列存储、视频集中存储、…
阅读更多...
JMeter自定义日志与日志分析

JMeter自定义日志与日志分析

1 JMeter日志概览 JMeter与Java程序一样&#xff0c;会记录事件日志&#xff0c;日志文件保存在bin目录中&#xff0c;名称为jmeter.log。当然&#xff0c;我们也可以在面板中直接察看日志&#xff0c;点击右上角黄色标志物可以打开日志面板&#xff0c;再次点击收起。 可见&…
阅读更多...
数据分析之Tebleau可视化：折线图、饼图、环形图

数据分析之Tebleau可视化：折线图、饼图、环形图

1.折线图的绘制 方法一&#xff1a; 拖入订单日期和销售金额&#xff0c;自动生成一个折线图 方法二&#xff1a; 选中订单日期和销售金额&#xff08;摁住ctrl可以选择多个纬度&#xff09; 点击右边的智能推荐&#xff0c;选择折线图 2.双线图的绘制、双轴的设置 方法一&…
阅读更多...
在Python中使用PyPDF2库在PDF文件中插入内容

在Python中使用PyPDF2库在PDF文件中插入内容

目录 一、引言 二、PyPDF2库的安装 三、PyPDF2库的基本使用 四、在PDF文件中插入内容 五、注意事项和扩展 六、总结 一、引言 PDF&#xff08;Portable Document Format&#xff09;文件因其跨平台、不易被篡改的特性&#xff0c;广泛应用于日常办公和文档交流中。在实际…
阅读更多...
MySQL连接查询补充与三表连查

MySQL连接查询补充与三表连查

前言 MySQL多表联查是指在一个查询语句中同时查询多个表&#xff0c;并根据表之间的关联条件进行数据的匹配和筛选。通过多表联查&#xff0c;我们可以获取到更丰富的数据信息&#xff0c;从而满足复杂的查询需求。先前了解了三种简单的连接查询方式&#xff0c;这里将进一步介…
阅读更多...
17.应用负载压力测试

17.应用负载压力测试

早些点&#xff0c;下午题考&#xff0c;最近几年出现的少&#xff1b; 备考较为简单&#xff1b;历年真题相似度高&#xff1b; 主要议题&#xff1a; 1.负载压力测试概述 注意这些测试细微的差别&#xff1b; 负载测试和压力测试的方法比较相似&#xff0c;但是目的不同&a…
阅读更多...
如何使用potplayer在公网环境访问内网群晖NAS中储存在webdav中的影视资源

如何使用potplayer在公网环境访问内网群晖NAS中储存在webdav中的影视资源

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-D7WJh3JaNVrLcj2b {font-family:"trebuchet ms",verdana,arial,sans-serif;font-siz…
阅读更多...
臻奶惠无人售货机：新零售时代的便捷消费革命

臻奶惠无人售货机：新零售时代的便捷消费革命

臻奶惠无人售货机&#xff1a;新零售时代的便捷消费革命 在新零售的浪潮中&#xff0c;智能无人售货机作为一个创新的消费模式&#xff0c;已经成为距离消费者最近的便捷购物点之一。这种模式不仅能够满足居民对消费升级的需求&#xff0c;还能通过建立多样化和多层次的消费体…
阅读更多...
2024年04月编程语言流行度排名

2024年04月编程语言流行度排名

点击查看最新编程语言流行度排名&#xff08;每月更新&#xff09; 2024年04月编程语言流行度排名 编程语言流行度排名是通过分析在谷歌上搜索语言教程的频率而创建的 一门语言教程被搜索的次数越多&#xff0c;大家就会认为该语言越受欢迎。这是一个领先指标。原始数据来自…
阅读更多...
MotionBuilder 脚本执行

MotionBuilder 脚本执行

目录 MediaPipe_Pose_in_MotionBuilder 你可以用以下几种方式执行你的脚本&#xff1a; MediaPipe_Pose_in_MotionBuilder https://github.com/Ndgt/MediaPipe_Pose_in_MotionBuilder/blob/main/PoseLandmark.py tcp通信 https://github.com/nils-soderman/motionbuilder-s…
阅读更多...
银行业架构网络BIAN (Banking IndustryArchitecture Network)详细介绍

银行业架构网络BIAN (Banking IndustryArchitecture Network)详细介绍

BIAN ( The Banking Industry Architecture Network) 是一个业界多方协作的非营利性组织&#xff0c;由全球领先银行、技术提供商、顾问和学者组成&#xff0c;定义了一个用以简化和标准化核心银行体系结构的银行技术框架。这一框架基于面向服务的架构 (SOA) 原则&#xff0c;银…
阅读更多...
RabbitMQ安装及Springboot 集成RabbitMQ实现消息过期发送到死信队列

RabbitMQ安装及Springboot 集成RabbitMQ实现消息过期发送到死信队列

死信队列 RabbitMQ 的死信队列&#xff08;Dead-Letter-Exchanges&#xff0c;简称 DLX&#xff09;是一个强大的特性&#xff0c;它允许在消息在队列中无法被正常消费&#xff08;例如&#xff0c;消息被拒绝并且没有设置重新入队&#xff0c;或者消息过期&#xff09;时&…
阅读更多...
微服务管理（完整）

微服务管理（完整）

前言&#xff1a; 分享一篇学微服务管理的过程 一&#xff0c;etcd入门 1&#xff0c;简介 1.1&#xff0c;etcd是什么 etcd是CoreOS团队于2013年6月发起的开源项目&#xff0c;它的目标是构建一个高可用的分布式键值(key-value)数据库。 官网上的一段描述&#xff1a; A…
阅读更多...
Mac 怎么提高音频播放速度？

Mac 怎么提高音频播放速度？

mac 怎么提高音频播放速度&#xff1f;在Mac上&#xff0c;有时我们可能需要加快音频文件的播放速度&#xff0c;比如加快听力材料的播放速度以提高效率&#xff0c;或者快速浏览录音文件等。幸运的是&#xff0c;Mac系统自带的音频播放器iTunes和QuickTime都提供了简单的方法来…
阅读更多...
中科驭数DPU技术开放日秀“肌肉”：云原生网络、RDMA、安全加速、低延时网络等方案组团亮相

中科驭数DPU技术开放日秀“肌肉”：云原生网络、RDMA、安全加速、低延时网络等方案组团亮相

2024年3月29日&#xff0c;中科驭数以“DPU构建高性能云算力底座”为主题的线上技术开放日活动成功举办。在开放日上&#xff0c;中科驭数集中展现了其在低时延网络、云原生网络及智算中心网络三大关键场景下的技术成果与五大核心DPU解决方案&#xff0c;凸显了中科驭数在高性能…
阅读更多...
HUAWEI 华为交换机 配置 Eth-Trunk 接口流量本地优先转发示例（堆叠）

HUAWEI 华为交换机 配置 Eth-Trunk 接口流量本地优先转发示例（堆叠）

组网需求 说明 S5720I-10X-PWH-SI-AC 和 S5720I-6X-PWH-SI-AC 不支持此配置。 如 图 3-23 所示&#xff0c;为了增加设备的容量采用设备堆叠技术&#xff0c;将 Switch3 和 Switch4通过专用的堆叠电缆链接起来&#xff0c;对外呈现为一台逻辑交换机。为了实现设备间的备份、…
阅读更多...
C# WPF编程-Application类（生命周期、程序集资源、本地化）

C# WPF编程-Application类（生命周期、程序集资源、本地化）

C# WPF编程-Application类 应用程序的生命周期创建Application对象应用程序的关闭方式应用程序事件 Application类的任务显示初始界面处理命令行参数访问当前Application对象在窗口之间进行交互 程序集资源添加资源检索资源pack URI内容文件 本地化构建能够本地化的用户界面 每…
阅读更多...
最新文章

Copyright @ 2022~2023