JAVA集中学习第四周学习记录(三)

攸攸太上

已于 2024-08-08 22:13:38 修改

阅读量473

点赞数 22

分类专栏： JAVA集中学习记录--攸攸太上文章标签： java 学习

于 2024-08-08 22:12:57 首次发布

本文链接：https://blog.csdn.net/howwickhappy/article/details/141018140

版权

JAVA集中学习记录--攸攸太上专栏收录该内容

15 篇文章 0 订阅

订阅专栏

系列文章目录

前言

本文开始我们要进行前端的学习，之前的数据库学习是为了存储数据，学习了SQL语句；今天要学习的前端是为了对网页进行设计，要学习HTML语言 a.k.a. 超文本标记语言 a.k.a. HyperTextMarkupLanguage。这个活体木料是什么呢？咱们边学边看吧。在下攸攸太上，话说没跟你们介绍我们星球的景色，我们星球气体是比液体重的，所以你们的大海是我们那里的大气，你们的大气层时我们的大星海，当我们星球遇到危险时，星球会使用速冻喷雾冻住大星海形成厚厚的保护层，同时我们所有ൠ♄§星人和动物会躲到大气里。千万不要率领地球人去我们星球复仇，你们打不过的，呼呼哗哗哗哗哗！！！
顺便一提，我们ൠ♄§星对地球的人类甄别计划已经开始计划20%了。

一、Java前端

1. 网络编程的三大基石

url,http,html

1.1 url网址

统一资源定位符（项目外资源）
通过url 可以唯一锁定一台计算机。
uri：统一资源标识符（当前项目内）

1.2 http超文本传输协议

规定了客户端与服务器端通信的时候：信息的组成，格式，长度等
特性：
长链接： http1版本之后，使用长连接。
一旦客户端与服务器端建立连接，客户端可以一直使用这个资源，直到客户端主动断开链接。这种连接方式叫长连接。短链接是每个请求都要重新排队。
单向性： 只有客户端先发送了请求，服务器端才可以给出响应。
无状态： http协议规定，网络之间只进行数据传输，不进行数据的记录。
（cookie，session可以实现数据记录）

1.3 html超文本标记语言

也叫超文本标签语言
通过各种不同的标签，将服务器端返回的消息，解析后展示给用户。
本文重点介绍： 图片标签；超链接标签；表格标签；表单标签。

2. 介绍页面

2.1 欢迎页/首页：index.html

<!DOCTYPE html>//文档类型声明。过渡类型、严格类型、框架类型
<html>
	<head>//头部标签就是这个页面的名字，一般显示在边栏上
		<meta charset="utf-8" />
		<title></title>//标题标签，有外部赋值的css也会在此处写style
	</head>
	<body>//页面内容
		
	</body>//结束的部分在前面加'/'
</html>

2.2 图片标签

图片标签：单标签，行级标签

属性和方法：
src = "图片的地址"uri的地址
height, width 设置高和宽
alt=“当图片没加载出来时，该属性值在图片的位置进行显示”
title=“鼠标悬浮在图片上方时，显示的文字”

代码演示：

<img src = "img/sbsd.jpg" height="300" width="500" alt ="这是PP酱" title="这是PP酱"/>

2.3 超链接标签

超链接标签：成对标签1，行级标签

属性和方法：
herf = “要跳转的页面地址？变量名=值&变量名=值”（？后的用来搜索，get提交方式）
title = “鼠标悬浮在超链接上方显示的文字”

代码演示：

<a href="https://www.baidu.com/s?wd=蝙蝠侠">点击跳转baidu</a>

2.4 表单标签

表单标签，包裹着表单元素

属性和方法：
action = “表单数据提交的位置”
method = “表单数据提交的方式”
get：限制提交数据的类型（文本类型）提交的参数以？拼接在提交地址后的形式，最后显示在地址栏里。
不安全
地址栏里提交的长度信息有限
post：支持多类型提交
提交参数，打成数据包，以数据包的形式提交到服务器端。
相对安全
提交的长度几乎没有限制
target = “响应信息显示的位置”

代码演示：

<form name="form" action="https://www.ppp.com/s" method="get" target="_self">
</form>

幂等：只要提交的url是同一个，那么看到的都一样
为什么搜索都用get： get可以做数据缓存，post没有

2.5 文本框标签

文本框不仅仅包括文本框，还可以放图片，放按钮等 #### 2.5.1 文本框 **属性和方法：** name = "用来保存用户输入的信息"（存值，分组） maxlength="限制用户输入的最大长度" placeholder = "提示信息" readonly = "readonly"表示只读，可以简写成readonly，不能获得光标（可以传走默认值） value = "为文本框赋值" disabled="disabled"禁用，可以简写成disabled，提交表单时，数据不进行传递（默认值不会被传走） type = "text"设置input标签为文本框 **代码演示：** ```html ``` #### 2.5.2 密码框 **属性和方法：** type = "password"设置input标签为password **代码演示：** ```html ``` #### 2.5.3 单选按钮 **属性和方法：** name="school"同名的按钮说明是同一题的按钮，同一题的按钮只能选一个 disabled = "disabled"不可选 checked = "checked"默认值 **代码演示：** ```html smallschool middleschool bigschool ``` #### 2.5.4 复选框属性跟单选框重要属性一样 **代码演示：** ```html bejing newyoek dalian sgenyang1 ``` #### 2.5.5 下拉列表 **属性和方法：** select内为同一题的选项 option为选项 selected="selected"为默认值，可以简写成selected **代码演示：** ```html 1month 2month 3month 4month 5month 6month 7month 8month 9month 10month 11month 12month ``` #### 2.5.6 文件域 **代码演示：** ```html ``` #### 2.5.7 隐藏域： **代码演示：** ```html ``` #### 2.5.8 提交按钮可以把数据打包提交，必须在form内 **代码演示：** ```html ``` #### 2.5.9 普通按钮 **代码演示：** ``` html ``` #### 2.5.9又3/4 普通按钮实现提交按钮功能 **代码演示：** ```html

``` #### 2.5.10 图片按钮（点击图片有提交按钮功能）注意与src图片标签的区别 **代码演示：** ```html 图片标签这是PP酱

图片按钮 ```

2.5.11 时间控件

代码演示：

<input type="date" name="date" />
<input type="week" name ="week" />
<input type="datetime-local" name="time" />

2.5.12 邮箱控件

代码演示：

<input type="email" name="email" />

2.5.13 成果展示

在这里插入图片描述

2.6 表格控件

表格是由行组成的：
行是由单元格组成的

2.6.1 普通建表

直接写出下面语句

<table border="1px">
	<tr>
		<td>00</td>
		<td>00</td>
	</tr>
	<tr>
		<td>00</td>
		<td>00</td>
	</tr>
</table>

2.6.2 emmet建表

执行以下语句后
table[border = “1px”]>tr*2>td{250}*3
会形成一下表格

<table border="">
	<tr>
		<td>250</td>
		<td>250</td>
		<td>250</td>
	</tr>
	<tr>
		<td>250</td>
		<td>250</td>
		<td>250</td>
	</tr>
</table>

2.6.3 表格合并的个数

1、确定每行单元格的个数
2、确定每个单元格的特性（跨行、跨列、跨行又跨列、不跨行不跨列）

<table border="1px">
	<tr>
		<td>00</td>
		<td rowspan="2">00</td>
		<td>00</td>
	</tr>
	<tr>	
		<td colspan="3">00</td>
	</tr>
</table>

二、CSS层叠样式表

1. CSS的作用

1、美化页面，让他变得好好看
2、页面布局，让他变得好好看（原用table，现用div + css）

2. 使用CSS

CSS样式需要搭配外观属性，来对页面做美化
属性：自身属性和外观属性
自身属性属性名 = “值”（html赋值方式）
外观属性行内赋值、行外复制（css样式赋值方式）

2.1 行内赋值

style = "属性: 属性值; 属性: 属性值; "
缺点：
外观属性直接写在标签里，样式与标签没有分离，代码不能重用，修改、扩展效率低

2.2 内部样式赋值

使用选择器将提取出来的外观样式，作用到对应的标签上

基本选择器：id，类，标签，交集，并集，全集
关系选择器：后代，子代，同辈（后代是爷爷及以上，子代是父亲）
属性选择器：就是直接给一类对象全部赋值，简单暴力，直接上代码

[class^='cd']{
	background-color: deeppink;
}
[class$='1']{
	background-color: peru;
}
div[class="cd1"][id]{
	color: darkred;
}

2.2.1 基本选择器

类选择器：*.类名
id选择器
多个选择器同时符合时，id>类>标签

作用范围：外部>内部>行内
修改、扩展效率：外部>内部>行内
分离程度：外部>内部>行内

2.2.1 关系选择器

全局选择器：*{}
并集选择器：div,div1{}(标签紧挨id，标签紧挨类)
交集选择器：div#div1{}(标签紧挨id，标签紧挨类)
子代选择器：table>tbody{}
后代选择器：table tr{}
同辈选择器：tr~其他同级{}
table和tr之间默认有一代tbody
在这里插入图片描述

2.3 外部样式赋值

创建一个外部样式文件：
1、将选择器+外观属性粘贴过去
2、在应用的页面里，导入外部样式文件

2.3.1 方式1

<link rel="stylesheet"href="css/csd.css"/>

2.3.2 方式2

<style type="text/css">
		@import url("css/csd.css");
</style>

推荐使用外部样式，因为这种方式做到了元素页面和样式分离
推荐使用外部样式，因为这种方式做到了元素页面和样式分离
推荐使用外部样式，因为这种方式做到了元素页面和样式分离

总结

本文介绍了前端html语言的学习，重点是报表部分，请将所有本文列出的重点种类的报表熟记于心，前端可能我们以后不会涉及到，但是知道的越多总没错，前端也要作为学习的一个阶段，不要认为’哇，写前端的都是美术生，我才不搞嘞’会限制自己的成长。
我写了好长时间，人类甄别计划已经到50%了！做好灭亡的准备吧，渺小的人类，哇哈哈哈哈哈哈哈哈哈！！！