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>
