Javaweb概念概述
软件架构:
- C/S: Client/Server 客户端/服务器端
- 在用户本地有一个客户端程序,在远程有一个服务器端程序,如:QQ,迅雷…
- 优点:用户体验好
- 缺点:开发、安装,部署,维护 麻烦
- B/S: Browser/Server 浏览器/服务器端
- 只需要一个浏览器,用户通过不同的网址(URL),客户访问不同的服务器端程序
- 优点: 开发、安装,部署,维护 简单
- 缺点: 如果应用过大,用户的体验可能会受到影响,对硬件要求过高
B/S架构详解
- 资源分类:
- 静态资源:
- 使用静态网页开发技术发布的资源。
- 特点:
- 所有用户访问,得到的结果是一样的。
- 如:文本,图片,音频、视频, HTML,CSS,JavaScript
- 如果用户请求的是静态资源,那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎,可以展示静态资源
- 动态资源:
- 使用动态网页及时发布的资源。
- 特点:
- 所有用户访问,得到的结果可能不一样。
- 如:jsp/servlet,php,asp…
- 如果用户请求的是动态资源,那么服务器会执行动态资源,转换为静态资源,再发送给浏览器
- 静态资源:
静态资源:
- HTML:用于搭建基础网页,展示页面的内容
- CSS:用于美化页面,布局页面
- JavaScript:控制页面的元素,让页面有一些动态的效果
HTML
1. 概念:是最基础的网页开发语言
- Hyper Text Markup Language 超文本标记语言
超文本:超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本.
标记语言: 由标签构成的语言。<标签名称> 如 html,xml.(标记语言不是编程语言)
2. 快速入门:
-
html文档后缀名 .html 或者 .htm
-
标签分为
- 围堵标签:有开始标签和结束标签。如
<html> </html>
- 自闭和标签:开始标签和结束标签在一起。如
<br/>
- 围堵标签:有开始标签和结束标签。如
-
标签可以嵌套:
需要正确嵌套,不能你中有我,我中有你
错误:<a><b></a></b>
正确:<a><b></b></a>
-
在开始标签中可以定义属性。属性是由键值对构成,值需要用引号(单双都可)引起来
-
html的标签不区分大小写,但是建议使用小写。
代码案例:
<html>
<head>
<title>title</title>
</head>
<body>
<FONT color='red'>Hello World</font><br/>
<font color='green'>Hello World</font>
</body>
</html>
3. 标签学习:
1. 文件标签:构成html最基本的标签
<html>
: html文档的根标签<head>
:头标签。用于指定html文档的一些属性。引入外部的资源<title>
:标题标签。<body>
:体标签<!DOCTYPE html>
:html5中定义该文档是html文档
2. 文本标签:和文本有关的标签
- 注释:
<!-- 注释内容 -->
<h1>
to<h6>
:标题标签, h1->h6字体大小逐渐递减<p>
:段落标签<br>
:换行标签<hr>
:展示一条水平线- 属性:
- color:颜色
- width:宽度
- size:高度
- align:对其方式:center、left、right
- 属性:
<b>
:字体加粗<i>
:字体斜体<font>
:字体标签<center>
:文本居中-
属性:(可以用CSS改写,已不常用)
- color:颜色
- size:大小
- face:字体
-
属性定义:
- color:
- 英文单词:red,green,blue
- rgb(值1,值2,值3):值的范围:0~255 如 rgb(0,0,255)
- #值1值2值3:值的范围:00~FF之间。如: #FF00FF
- width:
- 数值:width=‘20’ ,数值的单位,默认是 px(像素)
- 数值%:占比相对于父元素的比例
- color:
-
代码案例
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>念奴娇·赤壁怀古</title>
</head>
<body>
<h1 align='center'>
念奴娇·赤壁怀古
</h1>
<hr color="#ffd700">
<p align='center'>
<font color="#FF0000">"【作者】<b></i>苏轼<b></i> 【朝代】宋"</font>
</p>
<p align='center'>
大江东去,浪淘尽,千古风流人物。<br>
故垒西边,人道是,三国周郎赤壁。<br>
乱石穿空,惊涛拍岸,卷起千堆雪。<br>
江山如画,一时多少豪杰。<br>
</p>
<p align='center'>
遥想公瑾当年,小乔初嫁了,雄姿英发。<br>
羽扇纶巾,谈笑间,樯橹灰飞烟灭。<br>
故国神游,多情应笑我,早生华发。<br>
人生如梦,一尊还酹江月。<br>
</p>
<hr color="#ffd700">
<font color="gray" size="2">
<center>
宋词<br>
</center>
</font>
</body>
</html>
3.图片标签:
-
<img>
:展示图片,src:指定图片的位置,alt 图片加载不出时显示的文字 -
代码:
<img src="image.jpg" align="right" alt="古镇" width="500" height="500"/>
- 相对路径
./
: 代表当前目录 ./image/1.jpg,第一个./可以省略
../
: 代表上一级目录
4. 列表标签:
- 有序列表:
<ol>
、<li>
- 无序列表:
<ul>
、<li>
<!--有序列表 ol-->
早上起床干的事情
<ol type="A" start="5"><!--序号形式为大写字母 起始为E -->
<li>睁眼</li>
<li> 看手机</li>
<li> 穿衣服</li>
<li> 洗漱</li>
</ol>
<!-- 无序列表 ul-->
早上起床干的事情
<ul type="circle"><!--序号形式均为原点 -->
<li>睁眼</li>
<li> 看手机</li>
<li> 穿衣服</li>
<li> 洗漱</li>
</ul>
5. 链接标签:
<a>
: 定义一个超链接
- href:指定访问资源的URL(统一资源定位符)
- target:指定打开资源的方式
- _self:默认值,在当前页面打开
- _blank:在空白页面打开
代码案例:
<a href="http://www.github.cn" target="_blank">github网址</a><br>
<a href="./5_列表标签.html"><img src="image/html.jpg"></a>
6. <div>
和 <span>
:
用于标记一块代码方便css操作
<div>
: 句尾自动换行。块级标签<span>
:不会自动换行,行内标签 内联标签
7. 语义化标签:
html5中为了提高程序的可读性,提供了一些标签。
<header>
: 与<div>
同样效果,但header会直接显示网页的页眉<footer>
: 与<div>
同样效果,但footer会直接显示网页的页脚
8. 表格标签:
<table>
:定义表格- width:宽度
- border:边框
- cellpadding:定义内容和单元格的距离
- cellspacing:定义单元格之间的距离。如果指定为0,则单元格的线会合为一条、
- bgcolor:背景色
- align:对齐方式
<tr>
:定义行- bgcolor:背景色
- align:对齐方式
<td>
:定义单元格- colspan:合并列
- rowspan:合并行
<th>
:定义表头单元格<caption>
:表格标题<thead>
:表示表格的头部分<tbody>
:表示表格的体部分<tfoot>
:表示表格的脚部分
如果某一行只有一个单元格,则使用
<tr><td></td></tr>
如果某一行有多个单元格,则使用表格的嵌套模式><tr><td><table> 内容 </table></td></tr>
代码案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
<thead>
<caption>学生信息表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>成绩</th>
</tr>
</thead>
<tfoot><!--tfoot一定会显示在表格尾部-->
<tr>
<td>3</td>
<td colspan="2">老三</td><!--合并后两列-->
</tr>
</tfoot>
<tbody>
<tr bgcolor="#7fffd4" align="center">
<td>1</td>
<td>老大</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>老二</td>
<td>50</td>
</tr>
</tbody>
</table>
</body>
</html>
9.表单标签:
表单:用于采集用户输入的数据的。用于和服务器进行交互。
<form>
:用于定义表单的。可以定义一个范围,范围代表采集用户数据的范围- action:指定提交数据的URL
- method:指定提交方式(一共7种,2种比较常用)
get方法 | post方法 |
---|---|
参数会在地址栏中显示,封装在请求行中。 | 参数不会再地址栏中显示,封装在请求体中 |
请求参数大小是有限制的 | 请求参数的大小没有限制 |
不太安全 | 较为安全 |
- 表单项中的数据要想被提交:必须指定其name属性
表单项标签:
<input>
:可以通过type属性值,改变元素展示的样式- type属性:
属性 | 功能 |
---|---|
text | 文本输入框,默认值 |
placeholder | 指定输入框的提示信息,当输入框的内容发生变化,会自动清空提示信息 |
password | 密码输入框 |
radio | 单选框(多个单选框的name值必须一样,value指定其被选中后提交的值,checked可以指定默认值) |
checkbox | 复选框( value指定其被选中后提交的值,checked可以指定默认值) |
file | 文件选择框(可用于提交本地文件) |
hidden | 隐藏域,用于提交一些信息。 |
submit | 提交按钮。可以提交表单 |
button | 普通按钮 |
image | 图片提交按钮(src属性指定图片的路径 ) |
label | 当label的for属性和 input 的 id属性值 对应,点击label区域,会让input输入框获取焦点。 |
select | 下拉列表(option,指定列表项) |
textarea | 文本域 ( cols:指定列数 rows:默认多少行。) |
代码案例
<!--定义表单 form-->
<form action="#" method="post">
<table border="1" align="center" width="500">
<tr>
<td><label for="username">用户名</label></td>
<td><input type="text" name="username" id="username"></td>
</tr>
<tr>
<td><label for="password">密码</label></td>
<td><input type="password" name="password" id="password"></td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="email" name="email" id="email"></td>
</tr>
<tr>
<td><label for="name">姓名</label></td>
<td><input type="text" name="name" id="name"></td>
</tr>
<tr>
<td><label for="tel">手机号</label></td>
<td><input type="text" name="tel" id="tel"></td>
</tr>
<tr>
<td><label>性别</label></td>
<td><input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
</td>
</tr>
<tr>
<td><label for="birthday">出生日期</label></td>
<td><input type="date" name="birthday" id="birthday"></td>
</tr>
<tr>
<td><label for="checkcode">验证码</label></td>
<td><input type="text" name="checkcode" id="checkcode">
<img src="img/verify_code.jpg">
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="注册"></td>
</tr>
</table>
</form>