javaweb学习笔记（7.28）

老板来条小鱼干

于 2024-07-28 21:19:05 发布

阅读量506

点赞数 10

文章标签：学习笔记

本文链接：https://blog.csdn.net/2301_79690135/article/details/140755941

版权

1 JavaWeb开发概述

1.1 服务器端应用程序

1.2 请求和响应

1.3架构

1.3.1 概念

架构其实就是项目的结构。只不过结构这个词太小了，不适合用来描述项目这么大的东西，所以换了另一个更大的词：架构。所以当我们聊一个项目的架构时，我们聊的是项目是由哪些部分组成的。

1.3.2 发展演变历程

单一架构：
一个项目就是一个工程，这样的结构就是单一架构，也叫all in one。我们现在的JavaWeb阶段、SSM阶段都是学习单一架构开发技术。

分布式架构：
一个项目中包含很多工程，每个工程作为一个模块。模块之间存在调用关系。分布式架构阶段的技术分为两类：

Java框架：SpringBoot、SpringCloud、Dubbo等等；
中间件：Redis、ElasticSearch、FastDFS、Nginx、Zookeeper、RabbitMQ等等；

1.3.3 单一架构技术体系
视图：用户的操作界面+数据的动态显示：
前端技术：HTML/CSS/JavaScript；
服务器端页面模板技术：Thymeleaf；
控制层：处理请求+跳转页面：
服务器：Tomcat；
控制器：Servlet；
域对象：request、session、servletContext；
过滤器：Filter；
监听器：Listener；
异步交互：Ajax；
业务逻辑层：业务逻辑计算；
持久化层：操作数据库；

2 HTML&CSS

2.1单一架构：

从现在的JavaWeb阶段到后面学习SSM框架阶段都是在学习单一架构项目开发的技术。而在JavaWeb阶段由于重点是探讨如何实现Web开发，所以必须学习一部分前端开发的技术。本节就是让大家明确我们现在要学习的内容在整个架构体系中处于什么位置。

2.1.1 视图层

严格来说视图分成两层：

前端技术：HTML/CSS/JavaScript
服务器端页面模板技术：Thymeleaf
其中HTML、CSS、JavaScript都是工作在浏览器上的，所以它们都属于前端技术。而Thymeleaf是在服务器上把动态内容计算出具体数据，所以严格来说Thymeleaf是后端技术。

2.1.2 Web2.0

Web2.0规范主张将网页代码分成下面三个部分：

结构：由HTML实现，负责管理网页的内容。将来网页上不管是静态还是动态的数据都是填写到HTML的标签里；
表现：由CSS实现，负责管理网页内容的表现形式。比如：颜色、尺寸、位置、层级等等。也就是给数据穿上一身漂亮的衣服；
行为：由JavaScript实现，负责实现网页的动态交互效果。比如：轮播图、表单验证、鼠标滑过显示下拉菜单、鼠标滑过改变背景颜色等等；

2.2 HTML简介

2.2.1 超文本语言

超文本标记语言（Hyper Text Markup Language，HTML）文件本质上是文本文件，而普通的文本文件只能显示字符。但是HTML技术则通过HTML标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中，让网页有了非常丰富的呈现方式，这就是超文本的含义——本身是文本，但是呈现出来的最终效果超越了文本。

2.2.2 标记语言

说HTML是一种『标记语言』是因为它不是向Java这样的『编程语言』，因为它是由一系列『标签』组成的，没有常量、变量、流程控制、异常处理、IO等等这些功能。HTML很简单，每个标签都有它固定的含义和确定的页面显示效果。

2.2.3 HTML文件结构

文档类型声明

HTML文件中第一行的内容，用来告诉浏览器当前HTML文档的基本信息，其中最重要的就是当前HTML文档遵循的语法标准。这里我们只需要知道HTML有4和5这两个大的版本

根标签

html标签是整个文档的根标签，所有其他标签都必须放在html标签里面。上面的文档类型不能当做普通标签看待。

头部
head标签用于定义文档的头部，其他头部元素都放在head标签里。头部元素包括title标签、script标签、style标签、link标签、meta标签等等。

主体
body标签定义网页的主体内容，在浏览器窗口内显示的内容都定义到body标签内。

注释
HTML注释的写法是：

2.2.5 HTML语法规则

根标签有且只能有一个；
无论是双标签还是单标签都必须正确关闭；
标签可以嵌套但不能交叉嵌套；
注释不能嵌套；
属性必须有值，值必须加引号，单引号或双引号均可；
标签名不区分大小写但建议使用小写；

2.3 使用HTML展示文章

以文章的组织形式展示数据是HTML最基本的功能了

TML标签如下表：

标签名称	功能
`h1~h6`	1级标题~6级标题
`p`	段落
`a`	超链接
`ul/li`	无序列表
`img`	图片
`div`	定义一个前后有换行的块
`span`	定义一个前后无换行的块

2.3.1 标签标题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>这是一级标题</h1>
    <h2>这是二级标题</h2>
    <h3>这是三级标题</h3>
    <h4>这是四级标题</h4>
    <h5>这是五级标题</h5>
    <h6>这是六级标题</h6>
</body>
</html>

注意：标题标签前后有换行。

2.3.2 段落标签

<p>There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really.</p>

注意：标题标签前后有换行。

2.3.4 路径

在整个Web开发技术体系中，路径是一个贯穿始终的重要概念。凡是需要获取另外一个资源的时候都需要用到路径。要想理解路径这个概念，我们首先要认识一个概念：『文件系统』。

文件系统：
Windows系统和Linux系统的文件系统有很大差别，为了让我们编写的代码不会因为从Windows系统部署到了Linux系统而出现故障，实际开发时不允许使用物理路径。

相对路径

相对路径都是以『当前位置』为基准 来编写的。

绝对路径
测试绝对路径的前提是通过IDEA的内置服务器访问我们编写的HTML页面——这样访问地址的组成结构才能和我们以后在服务器上运行的Java程序一致。

绝对路径要求必须是以**『正斜线』，测试开头在端口号后面的位置代表的是『服务器根目录』**，从这里开始我们就是在服务器的内部查找一个具体的Web应用。

所以编写绝对路径时就从这个位置开始，按照目录结构找到目标文件即可。

2.3.5 换行

<p>
    We would like to see as much CSS1 as possible. CSS2 should be limited to widely-supported elements only. The css Zen Garden is about functional, practical CSS and not the latest bleeding-edge tricks viewable by 2% of the browsing public.<br/>The only real requirement we have is that your CSS validates.
</p>

2.3.6 无序列表

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Grape</li>
</ul>

2.3.7 图片

src属性用来指定图片文件的路径，这里同样按我们前面说的使用**『绝对路径』**。

<img src="/aaa/pro01-HTML/./images/mi.jpg"/>

2.3.8 块

『块』 并不是为了显示文章内容的，而是为了方便结合CSS对页面进行布局。块有两种，div是前后有换行的块，span是前后没有换行的块。

2.3.9 实体

在HTML文件中，<、>等等这样的符号已经被赋予了特定含义，不会作为符号本身显示到页面上，此时如果我们想使用符号本身怎么办呢？那就是使用HTML实体来转义

2.4 表格标签
table：标签是表格标签

border：设置表格标签；
width：设置表格宽度；
height：设置表格高度；
align：设置表格相对于页面的对齐方式；
cellspacing：设置单元格间距；
tr：是行标签；

th：是表头标签；

td：是单元格标签；

align：设置单元格文本对齐方式；
b：是加粗标签；

2.4.1 普通表格

做一个带表头的，三行，三列的表格，并显示边框:

<table align="center" border="1" width="300" height="300" cellspacing="0">
  <tr>
    <th>1.1</th>
    <th>1.2</th>
    <th>1.3</th>
  </tr>
  <tr>
    <td>2.1</td>
    <td>2.2</td>
    <td>2.3</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
  </tr>
</table>

2.4.2 跨行跨列表格

colspan：属性设置跨列；

rowspan：属性设置跨行；

<table align="center" width="500" height="500" cellspacing="0" border="1">
  <tr>
    <td colspan="2">1.1</td>
    <td>1.3</td>
    <td>1.4</td>
    <td>1.5</td>
  </tr>
  <tr>
    <td rowspan="2">2.1</td>
    <td>2.2</td>
    <td>2.3</td>
    <td>2.4</td>
    <td>2.5</td>
  </tr>
  <tr>
    <td>3.2</td>
    <td>3.3</td>
    <td>3.4</td>
    <td>3.5</td>
  </tr>
  <tr>
    <td>4.1</td>
    <td>4.2</td>
    <td>4.3</td>
    <td colspan="2" rowspan="2">4.4</td>
  </tr>
  <tr>
    <td>5.1</td>
    <td>5.2</td>
    <td>5.3</td>
  </tr>
</table>

2.4.3 `iframe`框架标签

ifarme标签可以在页面上开辟一个小区域显示一个单独的页面ifarme和a标签组合使用的步骤:

在iframe标签中使用name属性定义一个名称；
在a标签的target属性上设置iframe的name的属性值；
```
<iframe src="html_test0.html" width="500" height="400" name="abc"></iframe>
<br/>
<ul>
  <li><a href="html_test0.html" target="abc">Hellow world</a></li>
</ul>
```
2.5 HTML表单收集数据

 2.5.1 什么是表单

在项目开发过程中，凡是需要用户填写的信息都需要用到表单。

2.5.2 form标签

在HTML中我们使用form标签来定义一个表单。而对于form标签来说有两个最重要的属性：action和method。

<form action="/aaa/pro01-HTML/page05-form-target.html" method="post">
    
</form>

action属性
用户在表单里填写的信息需要发送到服务器端，对于Java项目来说就是交给Java代码来处理。那么在页面上我们就必须正确填写服务器端的能够接收表单数据的地址。

这个地址要写在form标签的action属性中。但是现在暂时我们还没有服务器端环境，所以先借用一个HTML页面来当作服务器端地址使用。

method属性
在form标签中method属性用来定义提交表单的『请求方式』。method属性只有两个可选值：get或post，没有极特殊情况的话使用post即可。

『请求方式』可见《计算机网络-自顶向下》HTTP协议中查看。

2.5.3 name和value

在用户使用一个软件系统时，需要一次性提交很多数据是非常正常的现象。我们肯定不能要求用户一个数据一个数据的提交，而肯定是所有数据填好后一起提交。那就带来一个问题，服务器怎么从众多数据中识别出来收货人、所在地区、详细地址、手机号码……？

很简单，给每个数据都起一个『名字』，发送数据时用『名字』携带对应的数据，接收数据时通过『名字』获取对应的数据。

在各个具体的表单标签中，我们通过『name属性』来给数据起『名字』，通过『value属性』来保存要发送给服务器的『值』。

但是名字和值之间既有可能是『一个名字对应一个值』，也有可能是『一个名字对应多个值』。

这么看来这样的关系很像我们Java中的Map，而事实上在服务器端就是使用Map类型来接收请求参数的。具体的是类型是：Map<String,String[]>。

name属性就是Map的键，value属性就是Map的值。

有了上面介绍的基础知识，下面我们就可以来看具体的表单标签了。

2.5.4 单行文本框

<label>
    个性签名：
    <input type="text" name="signal"/>
</label><br/>

2.5.5 密码框

<label>
    密码：
    <input type="password" name="secret"/>
</label><br/>

2.5.6 单选框

<label>
    你最喜欢的季节是：
    <input type="radio" name="season" value="spring"/>春天
    <input type="radio" name="season" value="summer" checked="checked"/>夏天
    <input type="radio" name="season" value="autumn"/>秋天
    <input type="radio" name="season" value="winter"/>冬天
</label>

<br/><br/>
<label>
    你最喜欢的动物是：
    <input type="radio" name="animal" value="tiger"/>路虎
    <input type="radio" name="animal" value="horse" checked="checked"/>宝马
    <input type="radio" name="animal" value="cheetah"/>捷豹
</label>

name属性相同的radio为一组，组内互斥；
当用户选择了一个radio并提交表单，这个radio的name属性和value属性组成一个键值对发送给服务器；
设置checked="checked"属性设置默认被选中的radio；

2.5.7 多选框

<label>
    你最喜欢的球队是：
    <input type="checkbox" name="team" value="Brazil"/>巴西
    <input type="checkbox" name="team" value="German" checked="checked"/>德国
    <input type="checkbox" name="team" value="France"/>法国
    <input type="checkbox" name="team" value="China" checked="checked"/>中国
    <input type="checkbox" name="team" value="Italian"/>意大利
</label>
1
————————————————

                            版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
                        
原文链接：https://blog.csdn.net/weixin_53580595/article/details/130001758

2.5.8 下拉列表

<label>
你喜欢的运动是：
<select name="interesting">
  <option value="swimming">游泳</option>
  <option value="running">跑步</option>
  <option value="shooting" selected="selected">射击</option>
  <option value="skating">溜冰</option>
</select>
</label>

下拉列表用到了两种标签，其中select标签用来定义下拉列表，而option标签设置列表项；
name属性在select标签中设置；
value属性在option标签中设置；
option标签的标签体是显示出来给用户看的，提交到服务器的是value属性的值；
通过在option标签中设置selected="selected"属性实现默认选中的效果；

2.5.9 按钮

<label>
    <button type="button">普通按钮</button>
    <button type="reset">重置按钮</button>
    <button type="submit">提交按钮</button>
</label>

类型	功能
普通按钮	点击后无效果，需要通过JavaScript绑定单击响应函数
重置按钮	点击后将表单内的所有表单项都恢复为默认值
提交按钮	点击后提交表单

2.5.10 表单隐藏域

<label>
    <input type="hidden" name="userId" value="2233"/>
</label>

textarea没有value属性，如果要设置默认值需要写在开始和结束标签之间。

2.6 CSS的简单应用

2.6.1 设置CSS样式的方式

在HTML标签内设置

仅对当前标签有效

<div style="border: 1px solid black;width: 100px; height: 100px;">&nbsp;</div>

在head标签内设置

对当前页面有效

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Test</title>
  <style>
    .one {
      border: 1px solid black;
      width: 100px;
      height: 100px;
      background-color: lightgreen;
      margin-top: 5px;
    }
  </style>
</head>
<body>
<div style="border: 1px solid black;width: 100px; height: 100px;">&nbsp;</div>
    
<div class="one">&nbsp;</div>
<div class="one">&nbsp;</div>
<div class="one">&nbsp;</div>
</body>
</html>

引入外部CSS样式文件

编辑CSS文件

.two {
  border: 1px solid black;
  width: 100px;
  height: 100px;
  background-color: yellow;
  margin-top: 5px;
}

引入外部CSS文件

在需要使用这个CSS文件的HTML页面的head标签内加入：

<link rel="stylesheet" type="text/css" href="/aaa/pro01-HTML/style/example.css" />

2.6.2 CSS代码语法

CSS样式由选择器和声明组成，而声明又由属性和值组成；
属性和值之间用冒号隔开；
多条声明之间用分号隔开；
使用/* ... */声明注释；

2.6.3 CSS选择器

标签选择器

HTML代码：

<p>Hello, this is a p tag.</p>
<p>Hello, this is a p tag.</p>
<p>Hello, this is a p tag.</p>
<p>Hello, this is a p tag.</p>
<p>Hello, this is a p tag.</p>

CSS代码：

p {
    color: blue;
    font-weight: bold;
}

`id`选择器

HTML代码：

<p>Hello, this is a p tag.</p>
<p>Hello, this is a p tag.</p>
<p id="special">Hello, this is a p tag.</p>
<p>Hello, this is a p tag.</p>
<p>Hello, this is a p tag.</p>

CSS代码：

#special {
    font-size: 20px;
    background-color: aqua;
}

老板来条小鱼干

关注

10
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
javaweb学习笔记（7.28）

架构其实就是项目的结构。只不过结构这个词太小了，不适合用来描述项目这么大的东西，所以换了另一个更大的词：架构。所以当我们聊一个项目的架构时，我们聊的是项目是由哪些部分组成的。超文本标记语言（Hyper Text Markup Language，HTML）文件本质上是文本文件，而普通的文本文件只能显示字符。但是HTML技术则通过HTML标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中，让网页有了非常丰富的呈现方式，这就是超文本的含义——本身是文本，但是呈现出来的最终效果超越了文本。
复制链接

扫一扫