Java学习 day 34_HTML

最新推荐文章于 2024-08-20 19:10:21 发布

p-坚持

最新推荐文章于 2024-08-20 19:10:21 发布

阅读量291

点赞数

分类专栏： Java学习文章标签： java 后端

本文链接：https://blog.csdn.net/weixin_43385930/article/details/118945077

版权

Java学习专栏收录该内容

66 篇文章 23 订阅

订阅专栏

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>

p-坚持

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java学习 day 34_HTML

1 概述1.1 学习方式:记核心脉络1.2 目的目的:1, 站在后端程序员的角度了解前端: 知道前端怎么回事, 能看懂一些前端代码,防止工作背锅2, 写一些前端页面2 HTMLsome supplement：浏览器网址前有个加锁，说明使用的是https协议如何做到让多个服务器都能平均工作？hash值取模，然后将请求分布于不同的服务器，做到尽量的平均什么是前端?出现时间很短，因为大概十年前，前后端不分离现在前端指一个网页或者一套网页前端三个基础: HTML CS
复制链接

扫一扫