第一章. 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) 请求组成

请求由三部分组成

请求行
请求头
请求体

可以用 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: 21

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

sequenceDiagram
participant Client
participant L as LoginController
participant i as LoginInterceptor
participant Session
rect rgb(200, 223, 255)
Client ->> +L : 登录请求
L ->> L : 检查用户名，密码，验证通过
L ->> +Session : 存入用户名
Session -->> -L:
L -->> -Client: 登录成功
end
rect rgb(200, 190, 255)
Client ->> +i : 其它请求
i ->> +Session : 获取用户名
Session -->> -i :
i ->> i: 用户名存在，放行
i -->> -Client :
end

4) jwt 原理

jwt 技术实现身份验证

sequenceDiagram
participant Client
participant L as LoginController
participant i as LoginInterceptor

rect rgb(200, 223, 255)
Client ->> +L : 登录请求
L ->> L : 检查用户名，密码，验证通过
L -->> -Client : 登录成功，返回token
end

rect rgb(150, 190, 155)
Client ->> +i : 其它请求，携带token
i ->> i : 校验token，校验无误，放行
i -->> -Client :
end

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

后端程序员必会的前端知识-01：html、css的更多相关文章

后端程序员必备的 Linux 基础知识
1. 从认识操作系统开始正式开始 Linux 之前,简单花一点点篇幅科普一下操作系统相关的内容. 1.1. 操作系统简介我通过以下四点介绍什么是操作系统: 操作系统(Operating Syste ...
后端程序员必备的 Linux 基础知识+常见命令（近万字总结）
大家好!我是 Guide 哥,Java 后端开发.一个会一点前端,喜欢烹饪的自由少年. 今天这篇文章中简单介绍一下一个 Java 程序员必知的 Linux 的一些概念以及常见命令. 如果文章有任何需要 ...
前端&后端程序员必备的Linux基础知识
一从认识操作系统开始 1.1 操作系统简介我通过以下四点介绍什么操作系统: 操作系统(Operation System,简称OS)是管理计算机硬件与软件资源的程序,是计算机系统的内核与基石: 操作 ...
后端程序员必会常用Linux命令总结
1. 调整终端窗口大小: ctrl + '-' 缩小, ctrl + shift + '=' 放大. 2. command --help 查询命令详细或者 man command 3.ls命令, ...
后端程序员必备的Linux基础知识
我自己总结的Java学习的系统知识点以及面试问题,目前已经开源,会一直完善下去,欢迎建议和指导欢迎Star: https://github.com/Snailclimb/Java-Guide > ...
科普，想成为厉害的 Java 后端程序员，你需要懂这 13 个知识点
老读者就请肆无忌惮地点赞吧,微信搜索[沉默王二]关注这个在九朝古都洛阳苟且偷生的程序员.本文 GitHub github.com/itwanger 已收录,里面还有我精心为你准备的一线大厂面试题. 站 ...
科普，想成为厉害的 Java 后端程序员，你需要懂这些
站在运筹帷幄的角度来看,一名厉害的 Java 后端程序员都需要懂得哪些知识呢?我想,这也是很多读者迫切想知道的一个问题,因为如果不站在一个宏观的角度的话,所有学过的知识点都是零散的,就感觉像一只迷路的 ...
Android程序员必知必会的网络通信传输层协议——UDP和TCP
1.点评互联网发展至今已经高度发达,而对于互联网应用(尤其即时通讯技术这一块)的开发者来说,网络编程是基础中的基础,只有更好地理解相关基础知识,对于应用层的开发才能做到游刃有余. 对于Android ...
迈向高阶：优秀Android程序员必知必会的网络基础
1.前言网络通信一直是Android项目里比较重要的一个模块,Android开源项目上出现过很多优秀的网络框架,从一开始只是一些对HttpClient和HttpUrlConnection简易封装使用 ...
后端程序员实现一个IP归属地的小程序
在日常开发中,后端主要提供数据以及处理业务逻辑,前端主要提供页面布局以及数据展示.后端程序员对于页面布局接触比较少,但是小程序有完善的文档说明.页面布局也相对简单,实现起来相对简单一些.而且小程序相对 ...

随机推荐

《Kali渗透基础》10. 提权、后渗透
@ 目录 1:提权 2:Admin 提权为 System 2.1:at 2.2:sc 2.3:SysInternal Suite 2.4:进程注入提权 3:抓包嗅探 4:键盘记录 5:本地缓存密码 5 ...
.NET Core WebAPI 基础文件上传
昨天分享了一个在WebApi中如何接收参数的文章 .NET API 中的 FromRoute.FromQuery.FromBody 用法 - 一事冇诚 - 博客园 (cnblogs.com),然后有新 ...
[译]2023年 Web Coponent 现状
本文为翻译原文地址:2023 State of Web Components: Today's standards and a glimpse into the future. 最近,我写了关于如何 ...
Jitpack发布Android库带文档和源码
原文地址: Jitpack发布Android库带文档和源码 - Stars-One的杂货小窝忽然发现自己发布的xAndroidUtil库写代码的时候看方法注释都看不到,研究了下如何让Jitpack ...
tomcat配置域名绑定项目
有时候我们需要根据访问的不同域名,对应tomcat中不同的项目例如:一个网站同时做了两套,pc版和手机版.手机版对应的域名是m.we-going.com,就需要在tomcat配置文件中加入以下代码:& ...
开源社区赋能，Walrus 用户体验再升级
基于平台工程理念的应用管理平台 Walrus 已于上月正式开源,目前在 GitHub 已收获 177 颗星 Walrus 希望打造简洁清爽的应用部署与管理体验,帮助研发与运维团队减少"内耗& ...
【krpano】 ASP点赞插件
简述这是一个Asp版krpano点赞案例,运用asp+xml读写.存储数据,结合krpano代码实现的功能:现将案例上传网站供大家学习研究,希望对大家有所帮助. 功能用户在网页可点赞后显示已点赞数 ...
文心一言 VS 讯飞星火 VS chatgpt （98）-- 算法导论9.3 4题
四.用go语言,对一个包含n个元素的集合,假设一个算法只使用比较来确定第i小的元素,证明:无需额外的比较操作,它也能找到第 i-1 小的元素和第 n-i大的元素. 文心一言: 在这个问题中,我们要使用 ...
CH59X/CH58X/CH57X PWM使用
以CH582M为例: CH582M有4+8组PWM这里的4路26位PWM(定时器提供),8路系统PWM(8位) 先看系统提供的PWM: 下列截图根据例程进行测试的注:如需要使用PWM11则需要通过i ...
Llama2-Chinese项目：3.2-LoRA微调和模型量化
提供LoRA微调和全量参数微调代码,训练数据为data/train_sft.csv,验证数据为data/dev_sft.csv,数据格式为"<s>Human: "+ ...

后端程序员必会的前端知识-01：html、css