java web 的基础知识
Java web
List item
javaweb 使用Java开发基于互联网的/软件项目
软件架构
1. C/S:：
Client/Server 客户端/服务器端
- 在用户本地有一个客户端程序，在远程你有一个服务端程序。
- 如：QQ，迅雷…
- 优点：用户体验好
- 缺点：开发，安装，部署，维护很麻烦
2. B/S：
Browser/Server 浏览器/服务器端
- 只需要一个浏览器，用户通过不通风的网址（URL），客户访问不同的服务器端程序
- 优点：开发，安装部署，维护相对简单
- 缺点：
1：如果应用过大，用户的体验可能 会受到影响
2：对硬件的要求过高
资源分类
* B/S架构详解 * 资源分类：
1.静态资源：使用静态网页开发技术发布的资源。
-
特点： * 所有用户访问，得到的结果是一样的。
-
如：文本，图片，音频、视频, HTML,CSS,JavaScript
如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
-
2.动态资源： * 使用动态网页及时发布的资源。
特点： * 所有用户访问，得到的结果可能不一样。
-
如：jsp/servlet,php,asp…
- 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器 * 我们要学习动态资源，必须先学习静态资源！
- 静态资源： * HTML：用于搭建基础网页，展示页面的内容 * CSS：用于美化页面，布局页面 * JavaScript：控制页面的元素，让页面有一些动态的效果
HTML概念介绍
HTML是一种标记语言，不是编程语言，主要作用用于描述超文本内容显示方式。
支持内容
1、新增更多的语义话的标记，使文档结构更加清晰，明确
2、推出了新的文档对象模型（DOM）
3、支持多媒体软件直接播放
4、离线存储
5、文档编辑
6、支持拖放
7、MIME类型和协议注册
<html> <head> <title> title </title> </head> <body> <font> hello world </font> </html>成对出现, 可嵌套
文件标签
-
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c8aaru87-1599572742222)(C:\Users\zxf\AppData\Roaming\Typora\typora-user-images\image-20200816125851077.png)]
| 格式标签及应用 | 功能 | 应用效果 |
|---|---|---|
| 内容一 内容二 | 让文本强制换行 | 内容一 内容二 |
段落一 段落二 | 段落标签 | 段落一段落二 |
| 内容 | 加粗标签 | 内容 |
| 内容 | 加粗标签 | 内容 |
| 设置字体红色 | 设置字体颜色 | 设置字体红色 |
| 设置字体大小 | 设置字体大小等 | 设置字体红色 |
| 设置字体黑体 | 设置字体大小等 | 设置字体黑体 |
| 删除线样式 | 内容 | |
| 内容 | 强调标签，字体被加斜体效果 | 内容 |
| 内容 | 文字斜体格式 | 内容 |
| 欢迎访问DIVCSS5 | 锚文本，超链接 | 欢迎访问DIVCSS5 |
最大标题标签 | 标题标签 | 最大标题标签 |
标题标签 | 标题标签 | 标题标签 |
标题标签 | 标题标签 | 标题标签 |
图片标签
一、语法与结构： - TOP
<img src="图片路径" width="175" height="47" alt="" />
Src 跟图片路径（扩展：css图片;html图片）
Width 设置图片宽度（**扩展：**html 宽度;CSS宽度）
Height 设置图片高度（**扩展：**html高度，CSS高度）
Alt 设置对这张图片文字描述，通常设置描述是为了搜索引擎能读懂你这张图片表达内容（有利于搜索引擎优化因素而使用）
二、Img标签使用说明： - TOP
三、Img图片标签代码案例： - TOP
在HTML中body区内添加内容如下：
四、效果示例图： - TOP
说明：我们使用img标签在html中引入外部的图片
五、Html img图片标签结构说明图 - TOP
标签元素结构分析图
六、DIVCSS5对img标签总结： - TOP
1、Img标签非常常用，作用就是引入外部图片到html中显示出引入图片内容。
2、使用时候注意结构，图片路径正确，宽度、高度根据实际需要而设置。
3、通常我们会使用CSS样式对图片img标签的width、height、css border边框进行设置，我们在DIVCSS5其他地方也有针对CSS img标签样式设置教程介绍。
| 属性名称 | 属性值 | 描述 |
|---|---|---|
| src | url | 图像的路径 |
| alt | 文本 | 图像不能显示时的替换文本 |
| title | 文本 | 鼠标悬停显示的内容 |
| width | 像素（XHTML不支持%页面百分比） | 设置图像的宽度 |
| height | 像素（XHTML不支持%页面百分比） | 设置图像的高度 |
| border | 数字 | 设置图像边框的宽度 |
**
练习示范：**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签</title>
</head>
<body>
<!-- 展示一张图片 img -->
<img src="微图.jpg" align="right" alt="刚好遇见你" width="500" height="700"/>
<!--
相对路径
以.开头的路径
./：代表当前目录 ./微图.jpg
../：代表上一级目录
-->
<img src="./微图.jpg" width="300" height="400" align="left" >
<img src="../绝对路径图.jpg" height="90" width="100" align="middle">
</body>
</html
*tr :定义行
- bacolor: 背景色
- align:对齐方式
*td :定义单元格
*:表格标题
*: 表格的头部分
*:表格的体部分
*：表格的脚部分
列表标签
ul：无序列表
<li>列表项<\li>
属性：type
disc：默认的
circle：空心圆点
sqare：小正方形（实心的）
eg:<ul type=“circle”>
<li>列表项<\li>
<\ul>
ol：有序列表
<li>列表项<\li>
属性：type
1：1,2,3,......
a：a,b,c,......
A：A,B,C,......
列表标签的使用
<html>
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
<!--有序列表和无序列表-->
喜欢的水果：
<!--ul标签：无序列表标签
属性type：无序列表的类型：
disc：默认的
circle：空心原点
square：小正方形（实习的）
-->
<ul type="square">
<!--li标签:列表项-->
<li>苹果</li>
<li>桃子</li>
<li>香蕉</li>
<li>火龙果</li>
<li>桔子</li>
</ul>
<hr />
<!--ol:有序列表
type属性：指定当前有序列表的类型（l、a、A）
-->
您喜欢的音乐类型？
<ol type="1" >
<li>流行</li>
<li>民谣</li>
<li>摇滚</li>
</ol>
</body>
</html>
效果展示：
表格标签
table：表格标签
属性：
border：边框线大小
width：表格的宽度
height：表格的高度
align：对齐方式
bgcolor：背景色
tr：行标签
td：单元格标签
单元格的合并：
colspan：合并列
rowspan：合并行
thead：表头
tbody：正文
tfoot：脚注
thead、tfoot 以及 tbody 元素解决用户有效性体验,使有能力对表格中的行进行分组。
当创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。
这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。
当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。
1234567891011121314151617181920212223
表格标签的使用
<html>
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<!--table：表格标签
th：表头标签（自动加粗 居中显示）
tr：行标签
td：单元格标签
属性：
border：边框线大小
width：表格的宽度
height：表格的高度
alight：对齐方式
bgcolor：背景色
-->
<table border="2"
width="200"
height="50"
bgcolor="aquamarine">
表1：
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
<tr align="middle">
<td>(1,1)</td>
<td>(1,2)</td>
<td>(1,3)</td>
</tr>
<tr align="middle">
<td>(2,1)</td>
<td>(2,2)</td>
<td>(2,3)</td>
</tr>
</table>
<br />
<table border="2" bgcolor="antiquewhite">
表2（单元格的合并）：
<!--单元格的合并：
colspan：合并列
rowspan：合并行
-->
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
<tr align="left">
<td colspan="2">(1,1)</td>
<td rowspan="2">(1,3)</td>
</tr>
<tr align="left">
<td>(2,1)</td>
<td>(2,2)</td>
</tr>
</table>
<br />
<table border="3" bgcolor="cadetblue">
表3：thead,thead,tfoot
<!--对表格中的行进行分组:
thead：表头
thead：正文
tfoot：脚注
-->
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
</body>
</html>
结果展示：
表格的嵌套
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格的嵌套</title>
</head>
<body>
<table border="1"
width="300px"
height="100px"
alidn="center"
bgcolor="antiquewhite">
<caption>成绩单</caption>
<th>班级</th>
<th>成绩</th>
<th>平均分</th>
<tr>
<td>计161</td>
<td>
<table border="1"
width="100%"
height="100%"
alidn="center"
bgcolor="beige">
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
</table>
</td>
<td>15</td>
</tr>
<tr>
<td>计162</td>
<td>
<table border="1"
width="100%"
height="100%"
alidn="center"
bgcolor="azure">
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
</table>
</td>
<td>21</td>
</tr>
</table>
</body>
</html>
结果展示：
链接标签
链接分为两种：
第一种：链接到本网页其他位置 例如：从网页顶部链接到底部
<a href="#somewhere">link</a>
…
…
第二种：链接到其他网页 例如：从百度链接到搜狐
<a href="adv.html">adv</a>
<a href="http://souhu.com">souhu</a>
一、html a语法 - TOP
html a锚文本超链接结构图
同时锚文本_锚链接又被大家称为超链接。
**Href值：
**网址，网址一定加上http://+域名
相对路径，如htef="/abc/",代表本站内锚文本
target目标值如下：
_blank – 在新窗口中打开链接 _parent – 在父窗体中打开链接 _self – 在当前窗体打开链接,此为默认值 _top – 在当前窗体打开链接，并替换当前的整个窗体(框架页)
如果target不带值，代表在本页父窗体中打开链接
A标签内常用属性：
1）、href：打开目标地址（网址），一般填写将要转到目标地址。如href="http://www.divcss5.com/"这样浏览者在网页中鼠标点击对应此锚文本将打开到网页http://www.divcss5.com/
2）、target：打开目标方式
如果a标签内没有此元素，默认是在浏览网页中重新载入对应链接网页
_blank ：新建标签窗口页，设置此属性，点击锚文本后对应新建标签网页窗口卡打开对应地址
_parent：父级打开网页，此属性可以理解为本页网页从新载入锚文本的网页，针对html框架iframe网页中，整个网页将重新载入打开目标网址地址
常用就此两种打开目标方式，一个是新建窗口、一个不设置target将本页重新载入锚文本地址指向URL、一个是整个网页父级重新载入（类似于没有设置target）相同效果。
二、html a作用 - TOP
使用a锚链接可以从A页面转到B页面，也就是常常见到和使用的，如新闻网站，我们看到标题觉得感兴趣，鼠标点击然后进入另外页面了解详情。这个就是html a超链接运用。
三、html a应用实例 - TOP
四、html a实例截图 - TOP
html a锚文本_HTML超链接截图
五、html a适用范围 - TOP
使用html a可以对图片进行锚文本超链接
exp：
可以对文字内容进行锚文本超链接
DIVCSS5
html超链接截图
六、html a应用扩展 - TOP
同页面锚文本-同页面内上下转到指定位置
常常看见我们页面底部点击 “回到顶部”链接就会转到网页顶部实现。
Exp：
1、首先我们在网页body内最上面添加一个
2、我们再到body内，需要出现点击后转到顶部位置添加，回到顶部
这样就可实现点击“回到顶部”即可本页内快速浏览到网页顶部位置。
使用语法：
1、需要转到地方添加，文字，注意href值是#开头+英文字母命名
2、需要在被转到位置添加，，注意id和name值相同并且与a命名相同
表单标签
Html 表单标签元素
Html form 表单区域标签元素
一、Form表单区域标签语法与结构： - TOP
或
Method的值为get时，是通过URL传内容与参数,这个时候我们通过网址URL能看见自己填写内容提交处理
Method的值为post时，是通过类似缓存传填写内容与参数，而URL是不能看到form表单填写内容提交内容。
对于html 表单form标签，有了form表单及提交方式（get post）(了解 get post区别)，才能将数据进行传输给程序处理，否则程序不能接收到将要处理的数据。
二、Form表单区域标签使用说明 - TOP
常常我们使用在一个网页中数据提交标签，比如我们留言板、评论等可以填写数据，提交处理地方都需要表单标签，而form表单标签内放输入框input、单选、多选、select下拉列表菜单与跳转菜单、提交按钮等标签内容。扩展知识：html input、input type、form input
使用form声明该对象内是表单区域。
三、Form使用的地方演示对比图： - TOP
form表单截图
四、Form使用案例html代码 - TOP
<form action="" method="get"> <input name="" type="text" size="22" /> <input name="" type="submit" value="提交" /> </form>
五、DW软件里截图 与浏览器下表单效果 - TOP
html form表单截图
六、DIVCSS5对html form表单区域标签提示说明 - TOP
1、html form是表单区域标签，通常此标签内放输入框、单选、多选、多行文本框、下拉选项菜单等表单内容
2、form的action的值填写为将表单提交内容送往的页面地址。
3、form表单标签可以通过DW直接插入
1.表单标签
*可以提交数据到服务器
*定义一个表单的范围
-属性
**action 提交到地址，默认提交到当前页面
**method 表单的提交方式
-常用的有两种：get和post，默认是get请求
-get请求栏会携带提交的数据，而post不会；
-get请求安全性低，post较高
-get请求有数据大小的限制，而post没有限制
**encype：一般请求下不需要这个属性，做文件上传需要这个属性
**输入项：可以输入内容或选择内容的部分
-大部分的输入项，使用
***普通输入项:
<body>
登录：<input type="text"/>
</body>
***密码输入项:
<body>
登录：<input type="text"/><br/>
密码：<input type="password"/>
</body>
***单选输入项
-这里需要一个属性才能选择，name
-name的属性值相同才能保证单选
-必须有一个value值
--实现默认选中的
添加属性：checked=“checked”
性别：<input type="radio" name="sex" value="男"/>男<input type="radio" name="sex" value="女"/>女
***复选输入项
-这里需要一个属性才能选择，name
-name的属性值相同
-必须有一个value值
兴趣：<input type="checkbox" name="birth" value="羽毛球"/>羽毛球
<input type="checkbox" name="birth" value="足球"/>足球
<input type="checkbox" name="birth" value="篮球球"/>篮球
***文件输入项（文件上传）
文件：<input type="file"/>
***下拉输入项
实现默认选择
selected=“selected”
生日：<select name="birth">
<option value="0">请选择</option>
<option value="1998">1991</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
</select>
***文本域
自我描述：<textarea ></textarea>
***隐藏项（不会显示在页面上，但是存在在html代码中）
***提交项
<input type="submit" value="立即注册"/>
***使用图片提交
**重置按钮 回到输入项的初始状态
<input type="reset" value="重新输入"/>
**普通按钮 和js一起使用
我将此次的源码及编译结果发出来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单练习</title>
</head>
<body>
<form action="text.html" method="get">
登录：<input type="text" name="username"/><br/>
密码：<input type="password" name="password"><br/>
性别：<input type="radio" name="sex" value="男"/>男<input type="radio" name="sex" value="女"/>女<br/>
兴趣：<input type="checkbox" name="birth" value="羽毛球"/>羽毛球
<input type="checkbox" name="birth" value="足球"/>足球
<input type="checkbox" name="birth" value="篮球球"/>篮球<br/>
文件：<input type="file"/><br/>
生日：<select name="birth">
<option value="0">请选择</option>
<option value="1998">1991</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
</select><br/>
自我描述：<textarea name="text"></textarea><br/>
<input type="submit" value="立即注册"/>
<input type="reset" value="重新输入"/>
</form>
</body>
</html>
css 页面美化和布局控制
-
CSS 指层叠样式表 (Cascading Style Sheets)
-
样式定义如何显示 HTML 元素
-
样式通常存储在样式表中
-
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
-
外部样式表可以极大提高工作效率
-
外部样式表通常存储在 CSS 文件中
-
多个样式定义可层叠为一个
CSS声明总是以分号(;)结束，声明总以大括号({})括起来:
p {color:red;text-align:center;}
CSS 注释
注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
CSS注释以 “/" 开始, 以 "/” 结束, 实例如下:
/*这是个注释*/
p
{
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}
插入样式表的方法有三种:
- 外部样式表(External style sheet)
- 内部样式表(Internal style sheet)
- 内联样式(Inline style)
-
1. <html> 2. <head> 3. <title>HTML和CSS结合方式</title> 4. 5. ** 6. <style type="text/css"> 7. div{width:400px;*/\*div容器的宽度\*/* 8. height:400px;*/\*div容器的高度\*/* 9. background-color:black;*/\*背景样式可以用于任何标签，背景颜色：黑色\*/* 10. background-image:url("1.jpg");*/\*背景图片\*/* 11. background-repeat:no-repeat;*/\*背景图片是否重复\*/* 12. background-attachment:fixed;*/\*背景图像固定\*/* 13. background-position-x:10%;*/\*背景图像水平方向的位置\*/* 14. background-position-y:50%;*/\*背景图像竖直方向的位置\*/* 15. } 16. </style> 17. 18. ** 19. ** 20. ** 21. <link href="divstyle.css" rel="stylesheet" type="text/css"> 22. 23. ** 24. ** 25. <style type="text/css"> 26. @import url(borderstyle.css); 27. </style> 28. 29. </head> 30. <body> 31. <p><img src="libai.jpg" alt="李白" width="140" height="170" align="left"></p> 32. <h2>将进酒</h2> 33. ** 34. <p style="color:red; font-size:20; font-family:微软雅黑; border-bottom-style:solid"> 35. 36. 人生得意须尽欢，<br> 37. 莫使金樽空对月。<br> 38. 天生我材必有用，<br> 39. 千金散尽还复来。</p> 40. 41. <br><br><br><br> 42. <div><font color="white">我是猫咪！</font></div> 43. 44. <br><br><br><br> 45. <border>知耻而后勇！</border> 46. </body> 47. </html>注：
css不能独立使用，必须结合html使用。css与html共有四种结合方式。
注意：第三种结合方式，在某些浏览器下不起作用，一般使用第四种方式。
(1)结合方式一：在每个html标签上面都有一个属性“style”,通过这个属性把css和html结合在一起。
例：
//css与html的结合方式一.html
<html> <head> <title>CSS与HTML结合方式一</title> </head> <body> <div style="background-color:red;color:green;">可是大家发开始打飞机卡和手机</div> </body> </html>注：
1.background-color //背景色
color //字体颜色
2.属性与属性值用“:”隔开。
3.属性与属性之间用“;”隔开。
(2)结合方式二：使用html的标签实现。
<style>标签要写在头标签里面。 <style type="text/css"> // “text/css”表示写的是CSS的文本。这个写法是固定的，记住就行。 css代码 </style>例：
//css与html的结合方式二.html
<html> <head> <title>CSS与HTML结合方式二</title> <style type="text/css"> //这句话表示是写的CSS的代码。固定写法，记住就行。 div { //在“div{}”中写CSS代码，表示要对div标签里面的内容做样式的变化 background-color:blue; //css代码 color:red; } </style> </head> <body> <div>可是大家发开始打飞机卡和手机</div> </body> </html>(3)结合方式三：在style标签里面 使用语句 @import url(css文件路径); //一般不用这种方式。
这样的好处就是，修改html和修改css分离。
步骤一：创建一个css文件 ##
//div.css/* div */div{ background-color:blue; color:black;}
步骤二：引用 //css与html的结合方式三.htmlCSS与HTML结合方式三 可是大家发开始打飞机卡和手机```*(4)结合方式四： 使用头标签link,引入外部css文件*
<link rel="stylesheet" type="text/css" href="css_3.css">stylesheet:样式表
例：
步骤一：创建一个css文件//div.css /* div */ div{ background-color:blue; color:black;}步骤二：引用
//css与html的结合方式四.html
<html> <head> <title>CSS与HTML结合方式四</title> <link rel="stylesheet" type="text/css" href="div.css"> </head> <body> <div>可是大家发开始打飞机卡和手机</div> </body> </html>
1142
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
