• HTML&CSS&HTTP

    文章目录

    HTML&CSS&HTTP

    HTML 是什么：即 HyperText Markup language 超文本标记语言，咱们熟知的网页就是用它编写的，HTML 的作用是定义网页的内容和结构。

    • HyperText 是指用超链接的方式组织网页，把网页联系起来
    • Markup 是指用 <标签> 的方式赋予内容不同的功能和含义

    CSS 是什么：即 Cascading Style Sheets 级联（层叠）样式表，它描述了网页的表现与展示效果

    1. HTML 元素

    HTML 由一系列元素 elements 组成，例如

    <p>Hello, world!p>

    • 1

    • 整体称之为元素

    • 和

      分别称为起始和结束标签

    • 标签包围起来的 Hello, world 称之为内容

    • p 是预先定义好的 html 标签，作用是将内容作为一个单独的段落

    元素还可以有属性，如

    <p id="p1">Hello, world!p>

    • 1
    • 属性一般是预先定义好的，这里的 id 属性是给元素一个唯一的标识

    元素之间可以嵌套，如

    <p>HTML 是一门非常<b>强大b>的语言p>

    • 1

    错误嵌套写法：

    <p>HTML 是一门非常<b>强大的语言p>b>

    • 1

    不包含内容的元素称之为空元素，如

    <img src="1.png">
<img src="1.png"/>

    • 1
    • 2
    • 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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    Paragraph

    <p>段落p>

    • 1

    List

    无序列表 unordered list

    <ul>
    <li>列表项1li>
    <li>列表项2li>
    <li>列表项3li>
ul>

    • 1
    • 2
    • 3
    • 4
    • 5

    有序列表

    <ol>
    <li>列表项1li>
    <li>列表项2li>
    <li>列表项3li>
ol>

    • 1
    • 2
    • 3
    • 4
    • 5

    多级列表

    <ul>
    <li>
    	北京市
        <ul>
            <li>海淀区li>
            <li>朝阳区li>
            <li>昌平区li>
        ul>
    li>
    <li>
    	河北省
        <ul>
            <li>石家庄li>
            <li>保定li>
        ul>
    li>
ul>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    Anchor

    锚，超链接

    <a href="网页地址">超链接文本a>

    • 1

    2) 多媒体

    Image

    <img src="文件路径">

    • 1

    src 格式有 3 种

    • 文件地址

    • data URL，格式如下

      data:媒体类型;base64,数据

      • 1

    • object URL，需要配合 javascript 使用

    Video

    <video src="文件路径">video>

    • 1

    Audio

    <audio src="文件路径">audio>

    • 1

    3) 表单

    作用与语法

    表单的作用：收集用户填入的数据，并将这些数据提交给服务器

    表单的语法

    <form action="服务器地址" method="请求方式" enctype="数据格式">
    
    
    <input type="submit" value="提交按钮">
form>

    • 1
    • 2
    • 3
    • 4
    • 5
    • method 请求方式有
      • get （默认）提交时，数据跟在 URL 地址之后
      • post 提交时，数据在请求体内
    • enctype 在 post 请求时，指定请求体的数据格式
      • application/x-www-form-urlencoded（默认）
      • multipart/form-data
    • 其中表单项提供多种收集数据的方式
      • 有 name 属性的表单项数据，才会被发送给服务器
    常见的表单项

    文本框

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

    • 1

    密码框

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

    • 1

    隐藏框

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

    • 1

    日期框

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

    • 1

    单选

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

    • 1
    • 2

    多选

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

    • 1
    • 2
    • 3

    文件上传

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

    • 1

    4. HTTP 请求

    1) 请求组成

    请求由三部分组成

    1. 请求行
    2. 请求头
    3. 请求体

    可以用 telnet 程序测试

    2) 请求方式与数据格式

    get 请求示例
    GET /test2?name=%E5%BC%A0&age=20 HTTP/1.1
Host: localhost

    • 1
    • 2
    • %E5%BC%A0 是【张】经过 URL 编码后的结果
    post 请求示例
    POST /test2 HTTP/1.1
Host: localhost
Content-Type: application/x-www-form-urlencoded
Content-Length: 21

name=%E5%BC%A0&age=18

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    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}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    json 对象格式

    {"属性名":属性值}

    • 1

    其中属性值可以是

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

    json 数组格式

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

    • 1
    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--

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 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

    • 1
    • 2

    取

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

    • 1
    • 2
    • 3

    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

    • 1
    • 2

    校验 token

    GET /j2 HTTP/1.1
Host: localhost
Authorization: eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZG1pbiJ9._1-P_TLlzQPb1_lCyGwplMZaKQ8Mcw_plBbYPZ3OX28

    • 1
    • 2
    • 3

    5. CSS

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

    1) 选择器

    • type 选择器 - 根据标签名进行匹配（元素选择器）
    • class 选择器 - 根据元素的 class 属性进行匹配
    • id 选择器 - 根据元素的 id 属性进行匹配
    • 优先级：id>class>type选择器

    2) 属性和值

    • background-color : red;
    • …
    • display

    3) 布局

    与布局相关的 html 元素

    • div
    • template
  • 相关阅读:
    【Ray】ray.remote和option
    IDEA配置tomcat运行环境
    基于SSM框架的人力资源管理系统毕业设计源码060936
    LeetCode讲解篇之113. 路径总和 II
    Qt 关于QT_BEGIN_NAMESPACE宏的作用
    快速部署 MySQL InnoDB Cluster
    vue3+ts实现幻灯片效果
    （附源码）spring boot校园管理系统 毕业设计 021104
    Spring 源码：深度解析AOP源码配置解析
    【漏洞复现】大华DSS视频管理系统信息泄露漏洞
  • 原文地址：https://blog.csdn.net/qq_54699828/article/details/126911854