当前位置：首页 > news >正文

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

news 来源：原创 2024/9/18 13:55:39

系列文章目录

第一章 JAVA集中学习第一周学习记录(一)
第二章 JAVA集中学习第一周项目实践
第三章 JAVA集中学习第一周学习记录(二)
第四章 JAVA集中学习第一周课后习题
第五章 JAVA集中学习第二周学习记录(一)
第六章 JAVA集中学习第二周项目实践
第七章 JAVA集中学习第二周学习记录(二)
第八章 JAVA集中学习第二周课后习题
第九章 JAVA集中学习第二周学习记录(三)
第十章 JAVA集中学习第二周学习记录(四)
第十一章 JAVA集中学习第三周学习记录(一)
第十二章 JAVA集中学习第三周小组项目开发
第十三章 JAVA集中学习第四周学习记录(一)
第十四章 JAVA集中学习第四周学习记录(二)
第十五章 JAVA集中学习第四周学习记录(三)

文章目录

系列文章目录
前言
一、Java前端
- 1. 网络编程的三大基石
- - 1.1 url网址
  - 1.2 http超文本传输协议
  - 1.3 html超文本标记语言
- 2. 介绍页面
- - 2.1 欢迎页/首页：index.html
  - 2.2 图片标签
  - 2.3 超链接标签
  - 2.4 表单标签
  - 2.5 文本框标签
  - - 2.5.1 文本框
    - 2.5.2 密码框
    - 2.5.3 单选按钮
    - 2.5.4 复选框
    - 2.5.5 下拉列表
    - 2.5.6 文件域
    - 2.5.7 隐藏域：
    - 2.5.8 提交按钮
    - 2.5.9 普通按钮
    - 2.5.9又3/4 普通按钮实现提交按钮功能
    - 2.5.10 图片按钮（点击图片有提交按钮功能）
    - 2.5.11 时间控件
    - 2.5.12 邮箱控件
    - 2.5.13 成果展示
  - 2.6 表格控件
  - - 2.6.1 普通建表
    - 2.6.2 emmet建表
    - 2.6.3 表格合并的个数
二、CSS层叠样式表
- 1. CSS的作用
- 2. 使用CSS
- - 2.1 行内赋值
  - 2.2 内部样式赋值
  - 2.2.1 基本选择器
  - 2.2.1 关系选择器
  - 2.3 外部样式赋值
  - - 2.3.1 方式1
    - 2.3.2 方式2
  - 2.4 不同样式排行
总结

前言

本文开始我们要进行前端的学习，之前的数据库学习是为了存储数据，学习了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标签为文本框
代码演示：

<input name="wd" type="text" maxlength="4" placeholder="enter text"/>

2.5.2 密码框

属性和方法：
type = "password"设置input标签为password
代码演示：

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

2.5.3 单选按钮

属性和方法：
name="school"同名的按钮说明是同一题的按钮，同一题的按钮只能选一个
disabled = "disabled"不可选
checked = "checked"默认值
代码演示：

<input name="school" type="radio" value="smallschool" />smallschool
<input name="school" type="radio" value="MIDdleschool" />middleschool
<input name="school" type="radio" value="bigschool" />bigschool

2.5.4 复选框

属性跟单选框重要属性一样
代码演示：

<input name="city" type="checkbox" value="beijing" />bejing
<input name="city" type="checkbox" value="newyork" />newyoek
<input name="city" type="checkbox" value="dalian" />dalian
<input name="city" type="checkbox" value="shenyang" />sgenyang1

2.5.5 下拉列表

属性和方法：
select内为同一题的选项
option为选项
selected="selected"为默认值，可以简写成selected
代码演示：

<select name="month"><option value="1month">1month</option><option value="2month">2month</option><option value="3month">3month</option><option value="4month">4month</option><option value="5month">5month</option><option value="6month">6month</option><option value="7month">7month</option><option value="8month">8month</option><option value="9month" selected="selected">9month</option><option value="10month">10month</option><option value="11month">11month</option><option value="12month">12month</option>
</select>

2.5.6 文件域

代码演示：

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

2.5.7 隐藏域：

代码演示：

<input type="hidden" name="hname" />

2.5.8 提交按钮

可以把数据打包提交，必须在form内 **代码演示：** ```html ```

2.5.9 普通按钮

		<input type="button" value="点我一下" onclick="JavaScript:alert('再点杀了你')"/>

代码演示：

html<input type="button" name="hitme" onclick="JavaScript:alert('fuckyou')" />

2.5.9又3/4 普通按钮实现提交按钮功能

代码演示：

<input type = "submit" value="提交员工信息" />
<br />
<input type="button" value="点我一下" 
onclick="JavaScript:alert('再点杀了你')"/>
<br />
<input type="button" value="我是提交按钮" onclick="demo1()" />
<script type="text/javascript">function demo1(){document.myform.submit();}
</script>

2.5.10 图片按钮（点击图片有提交按钮功能）

注意与src图片标签的区别

代码演示：

图片标签
<img src = "img/sbsd.jpg" alt ="这是PP酱" title="这是PP酱"/>	
图片按钮
<input type="image" src="img/PP.jpg" />

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）

css作用：样式与表现分离

2. 使用CSS

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

2.1 行内赋值

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

2.2 内部样式赋值

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

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

[class^='cd']{/*以cd开头*/background-color: deeppink;
}
[class$='1']{/*以1结尾*/background-color: peru;
}
div[class="cd1"][id]{color: darkred;
}

2.2.1 基本选择器

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

2.2.1 关系选择器

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

2.3 外部样式赋值

创建一个外部样式文件：
1、将选择器+外观属性粘贴过去
2、在应用的页面里，导入外部样式文件
link和style是并列关系，都在head标签里
外部样式是把一个文件内的内部样式提取出来放到一个css文件里，通过link或者import链接到本文件下。

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>

2.4 不同样式排行

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

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

总结

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