1 Hash
用哈希函数将键转换为数组中的一个索引。理想情况下不同的键都能转换成不同的索引值。
当然这只是理想情况下,
Hash算法 不是加密算法
Hash算法用来散列
Hash算法存在的意义, 不是为了解密
加密意味着解密
文件 -> hash算法 -> 数
一个hash算法/函数, 应该具有的特点:
- 正向快速:给定明文和 hash 算法,在有限时间和有限资源内能计算出 hash 值。
- 逆向困难:给定(若干) hash 值,在有限时间内很难(基本不可能)找出明文。碰撞
- 输入敏感:原始输入信息修改一点信息,产生的 hash 值看起来应该都有很大不同.
- 冲突避免:很难找到两段内容不同的明文,使得它们的 hash 值一致(发生冲突)。即对于任意两个不同的数据块,其hash值相同的可能性极小;对于一个给定的数据块,找到和它hash值相同的数据块极为困难。
密码: 1234 -> hash: 10101010111
MD4: 128位,MD4已被证明不够安全。
MD5: 128位 MD5 已被证明不具备"强抗碰撞性"。
SHA1:SHA-1 已被证明不具"强抗碰撞性"。
SHA2:
SHA3: 相关算法已经被提出。
MD5 SHA1 因为不具有强抗碰撞性, 所以不安全.
我们可以通过”加盐”进一步保证数据安全
Zs
111111 本身的密码
111111zs – 56c7ade62d312e5bccbb710b400043a8 加盐后
111111zszs — 02a04d05c900dae62db13d31b9c40159 你破解了hash,然后想用这个密码进入,但是提交的是带有加盐的密码,之后还会再加盐
1234
处理碰撞冲突。
a. 开放地址法
线性探测法, 平方探测法, 再散列法…
b. 拉链法
1 概述
1.1 学习方式:
记核心脉络
1.2 目的
目的:
1, 站在后端程序员的角度了解前端: 知道前端怎么回事, 能看懂一些前端代码,
防止工作背锅
2, 写一些前端页面
2 HTML
some supplement:
- 浏览器网址前有个加锁,说明使用的是https协议
- 如何做到让多个服务器都能平均工作?hash值取模,然后将请求分布于不同的服务器,做到尽量的平均
什么是前端?
出现时间很短,因为大概十年前,前后端不分离
现在前端指一个网页 或者 一套网页
- 前端三个基础: HTML CSS JS
- HTML : 骨架
- css : 血肉和皮肤
- js:思想逻辑
2.1 HTML概念
Html: 最开始是用来描述论文格式的
HTML(hyper text markup language)超文本标记语言
HTML 是一个使用’标签’来描述网页的文本 (标签在HTML文本中有实际意义)
2.2 HTML页面的标准结构
1, 整个HTml文档都是用标签表述的
2, 标签成对出现(不是绝对的), 有开始有结束
3, 整个HTML文档由标签包裹
4, 这个HTML文档又分为两部分,
2.3 HTML重要的Body标签
html有很多标签, 90%没啥用
1,原因, 很多标签并不是为了做显示的
2, 这是个历史遗留问题, css产生
2.3.1 hr
< hr>
横线标签, 单标签
属性:
noshade:颜色是否有阴影(纯色)
size:高度( 厚度,不同于height,不带单位时–默认px )
width:宽度(不带单位时–默认px)
align:对其方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<hr width="800" size="10" noshade="noshade" align="left">
<hr width="800" size="200" align="left">
</body>
</html>
2.3.2 Hn: 标题标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>h1</h1>
<h2>h2</h2>
<h3 align="right">h3</h3>
<h4 align="center">h4</h4>
<h5>h5</h5>
<h6>h6</h6>
</body>
</html>
< span>标签是html定义的文本标签, 没有特殊效果
2.3.3 Div: 对页面进行区/节的划分
2.3.4 P: 段落标签
< p>: 可以描述一个段落, 是一个成对标签 (极类似于div)
注意: p标签自带上下间距
2.3.5 a: 超链接标签
超链接: 通过一个连接打开一个新的页面
<a href="https://www.taobao.com">taobao</a>
属性:
Href: 表示链接的地址, 是一个url
Target: 打开页面的位置, 超链接属性target的value值时默认是_self
_self: 在当前页面打开
_blank:在新窗口打开
_parent:在父窗口打开 _top:在顶级窗口打开
同组值:通过单击一个窗口中的不同链接控制另一窗口内容变化 ; 浏览器会找与target值相符的框架或者窗口中的文档,有则在其中显示文档。如果不存在,浏览器打开一个新窗口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.a1{
text-decoration: cadetblue;
font-size: 100px;
color: cornflowerblue;
}
</style>
</head>
<body>
<a href="https://www.baidu.com" class="a1">百度</a>
<a href="https://www.taobao.com" target="_blank">taobao</a>
<a href="https://www.jd.com">jd</a>
<a href="https://www.maoyan.com">猫眼</a>
</body>
</html>
2.3.6 Iframe:
在一个页面中引入一个内联框架
就是在一个页面中导入另外一个页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<iframe src="https://www.taobao.com" height="1500" width="900"></iframe>
</body>
</html>
2.3.7 Img: 图片标签
< img> : 是一个图片标签
java中
相对路径: ./ …/ …/…/ …
绝对路径: 盘符开头的路径
浏览器要求所有的资源必须是通过网络请求获取的
前端中也有相对路径和绝对路径
相对的: ./ …/ …/…/ …
绝对路径; 就是一个url
注意: 前端中的相对路径, 在被浏览器解析的时候, 也依旧要转化为绝对路径, 去访问资源
不可以使用本地路径,因为客户肯定不可以去访问主机,只能等着服务器返回给客户东西
属性:
alt=“加载错误”,如果图片加载失败,就显示“加载错误”
2.3.8 Ol 和Ul : 有序和无序列表
< ol>: 有序列表
< ul>: 无序列表
他们都是成套标签, 和< li>标签一起使用
<ol type="1" start="10" >
<li>zs</li>
<li>ls</li>
<li>wu</li>
<li>zl</li>
</ol>
<!--Type:-->
<!--disc:默认值。实心圆。-->
<!--circle :空心圆。-->
<!--square :实心方块。-->
<ul type="square">
<li>zs</li>
<li>ls</li>
<li>wu</li>
<li>zl</li>
</ul>
2.3.9 Table: 表格
< table> : 表示整个表格
< tr>: 表格的一行
< td>: 一行中的一个单元格
table属性:
Bgcolor
Border
Cellpadding:规定单元边沿与其内容之间的空白。
Cellspacing:规定单元格之间的空白。
tr的属性:
Bgcolor
Valign:规定表格行中内容的垂直对齐方式。
top
middle
bottom
td属性:
Colspan:横跨列数
Rowspan:横跨行数
2.3.10 Input : 输入框
: 输入框
属性:
Type text:默认文本
password:密码
button:按钮
hidden:隐藏输入框
radio:单选框
reset:定义重置按钮。
submit:提交
它是一个表单元素
<input type="radio" name="gender">男
<input type="radio" name="gender">女
2.3.11 Select: 下拉选
< Select> 和 < option> 是一套标签
option:selected(selected="selected"选中状态)
select :multiple(multiple =“multiple“ 允许多选)
select :size(size =“4”下拉可见数4)
它是一个表单元素
2.3.12 Textarea: 多行文本
< textarea>: 多行的文本, 是一个表单元素
Cols:列
Rows:行
Maxlength:最大
Placeholder:提示
readonly :只读
2.3.13 Form : 表单
它的作用就是,在一个页面内部, 发起一个请求(调用浏览器发起)
比如你在百度首页的搜索框输入:
1,按回车,就会跳转到另一个页面。百度首页就是一个form表单
三种方式可以在浏览器生成url:1.手动输入 2. 超链接 3. form表单
url: 三大部分: 协议 域名or ip+端口, 服务器内部路径(虚拟的)
服务器内部路径: 虚拟路径 + 参数
从浏览器服务器的角度理解:要有浏览器发起请求, 要有服务器接收请求(分析)
借助百度的服务器: url
https://www.baidu.com/s?wd=1&rsv_spt=1&rsv_iqid=0x92542d7c00471a4b&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=0&rsv_dl=tb&rsv_btype=i&inputT=938&rsv_sug4=1484
url第一部分: 协议
url第二部分: 域名或者ip+端口
url: 第三部分: 服务器内部路径(给服务器上服务’看’(解析)的)
/s?wd=1&rsv_spt=1&rsv_iqid=0xab135bd20047dce0&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_dl=tb&rsv_enter=0&rsv_btype=i&inputT=2297&rsv_sug4=3980
url第三部分: 服务器内部路径+参数, 以?为分割 参数可以携带多个(以&符号分割),参数是key-value形式的参数
<!--https://www.baidu.com/s ?wd=zs-->
<!-- action 是form表单中, 用来标记url中非参数的部分 -->
<!-- 参数是由表单元素产生的, input, select, textarea -->
<!-- 表单元素的特点: 表单元素, 有value值 value对应输入, 对应选中-->
<!-- 在form 表达中, 当我们点击提交的时候,
表单元素会根据它的name属性和value自动拼接出一份key-value数据
把这个数据贴到 url之后, 以? 分割 -->
<!-- 多个参数之间以 &符号分割-->
<form action="https://www.baidu.com/s" method="get">
<input name="wd">
<input type="submit">
</form>
<!-- value是你真正提交了的东西
不要在option的value上加中文, 尽量不要加英文-->
<!-- 1, 不希望这个参数被别人直接知道作用 -->
<!-- 2, html只是用来显示的, 它不应该用来存储数据(不是可不可以的问题),
这是个语言作用的问题
3,(只有下面的方式可以真正查找睡觉学习,上面的方式只能查1,2,3)具体实现通过value值实现下面的查找功能,是前后端要协商的问题
-->
<form action="https://s.taobao.com/search" method="get">
<select name="q">
<option value="taylor swift">taylor swift</option>
<option value="Oppo Reno">Oppo Reno</option>
<option value="耳机">耳机</option>
</select>
<input type="submit">
</form>
补充get和post的区别
- 单纯获取资源的请求就规定为 GET
- 修改服务器资源的请求就规定为 POST
- 并且也对它们的请求报文的格式做出了相应的要求(例如请求参数 GET 位于 URL 而 POST 则位于请求数据中)如果你去分享一个post链接,不可以被打开
- get请求不安全,会被浏览器缓存,post更安全,不会被浏览器缓存
<!--淘宝可以接受我们发出的post的请求来进行搜索,百度不行-->
<form action="https://s.taobao.com/search" method="post">
<input name="q" type="password">
<input type="submit">
</form>
<form action="https://www.baidu.com/s" method="post">
<input name="wd" type="password">
<input type="submit">
</form>
作业
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sign in</title>
</head>
<body>
<!-- cellspacing : 单元格之间的空隙
cellpadding:到边框到空隙-->
<table cellspacing="10">
<tr>
<td>注册邮箱: </td>
<td><input></td>
</tr>
<tr>
<td></td>
<td>你还可以手机注册</td>
</tr>
<tr>
<td>创建密码: </td>
<td><input type="password"></td>
</tr>
<tr>
<td>真实姓名: </td>
<td><input></td>
</tr>
<tr>
<td align="right">性别: </td>
<td>
<input type="radio" name="gender">男
<input type="radio" name="gender">女
</td>
</tr>
<tr>
<td align="right">生日: </td>
<td>
<select>
<option >2000</option>
<option >1999</option>
<option >1998</option>
<option >1997</option>
<option >1996</option>
<option >1995</option>
</select>年
<select>
<option >1</option>
<option >2</option>
<option >3</option>
<option >4</option>
<option >5</option>
<option >6</option>
<option >7</option>
<option >8</option>
<option >9</option>
<option >10</option>
<option >11</option>
<option >12</option>
</select>月
<select>
<option >1</option>
<option >2</option>
<option >3</option>
<option >4</option>
<option >5</option>
<option >6</option>
<option >7</option>
<option >8</option>
<option >9</option>
<option >10</option>
<option >11</option>
<option >12</option>
<option >13</option>
<option >14</option>
<option >15</option>
<option >16</option>
<option >17</option>
<option >18</option>
<option >19</option>
<option >20</option>
<option >21</option>
<option >22</option>
<option >23</option>
<option >24</option>
<option >25</option>
<option >26</option>
<option >27</option>
<option >28</option>
<option >29</option>
<option >30</option>
<option >31</option>
</select>日
</td>
</tr>
<tr>
<td align="right">我正在: </td>
<td>
<select>
<option>睡觉</option>
<option>学习</option>
<option>打游戏</option>
<option>拯救世界</option>
<option>变成光</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td>
<img src="verycode.gif" width="150px" height="60px">
看不清楚,换一张
</td>
</tr>
<tr>
<td>验证码: </td>
<td><input></td>
</tr>
<tr>
<td></td>
<td>
<img src="btn_reg.gif" width="180px" height="40px">
</td>
</tr>
</table>
</body>
</html>
![在这里插入图片描述](https://img-blog.csdnimg.cn/img_convert/9160e37563e0f172c7d6e142fd0d9170.png#pic_center)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.table{
width: 700px;
}
.cell1{
text-align: center;
}
.div1{
margin-left: 300px;
margin-bottom: 3px;
}
.div2{
margin-left: 300px;
}
td{
text-align: center;
height: 30px;
}
select{
height: 30px;
}
button{
height: 30px;
}
</style>
</head>
<body>
<div class="div1">
<select>
<option>123</option>
<option>456</option>
<option>789</option>
</select>
<button>互换</button>
<select>
<option>123</option>
<option>456</option>
<option>789</option>
</select>
数额:
<input width="170px">
<button>汇率转换</button>
</div>
<div class="div2">
<table class="table" border="1px">
<tr>
<td class="cell1" bgcolor="red" colspan="3">
按当前汇率兑换结果
</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
</div>
</body>
</html>