JavaWeb概述
JavaWeb是 使用Java语言开发基于互联网的项目，使用的是B/S架构
软件架构
C/S架构
-
Client/Server 客户端/服务器端，android开发使用
-
在用户本地有一个客户端程序，在远程有一个服务器端程序
优点：因为客户端事先准备的有一些数据，这些数据不需要临时许多传输数据，所以用户体验好
缺点：客户端和服务器端都需要去开发，安装，部署，维护都比较麻烦
B/S架构
- Browser/Server 浏览器/服务器端
- 通过浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序
优点：1. 相对于C/S，只需要在服务器端开发、不需要安装，只需要部署在一台服务器上，维护也只需要修改服务器端，所以都较C/S架构简单
缺点：1.如果应用过大，用户的体验可能会受到影响；2.对硬件要求较高
- B/S架构如何访问资源
| 资源分类 | 定义 | 特点 | 例如 |
|---|---|---|---|
| 静态资源 | 使用静态网页开发技术发布的资源 | 所有用户访问，得到的结果是一样的 | 文本，图片，音频、视频, HTML,CSS,JavaScript |
| 动态资源 | 使用动态网页及时发布的资源 | 所有用户访问，得到的结果可能不一样 | jsp/servlet,php,asp… |
-
如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
-
如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器，因为浏览器只能解析静态资源
- 静态资源：
- HTML：用于搭建基础网页，展示页面的内容
- CSS：用于美化页面，布局页面
- JavaScript：控制页面的元素，让页面有一些动态的效果
HTML
概念：Hyper Text Markup Language 超文本标记语言，最基础的网页开发语言
超文本：用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本(即一个联系另一个)。
标记语言：由标签构成的语言，但是不是编程语言。如xml、html
编程语言：有逻辑性，例如java
html5设计处理，大部分用于移动Web开发
- 属性：
- color：三种表现形式
- 1.英文单词：black、red、green…
- 2.rgb(值1,值2,值3)：值范围为：0~255，如rgb(125,65,96)，现在不太经常使用了
- 3.#值1值2值3：值的范围：00~FF(16进制)，如：#FF00FF
- width:两种方式
- 数值：数值的单位默认是px(像素)
- 数值%：占比相对于父元素的比例
- color：三种表现形式
标签
都需要：<> </>
但是不严格
基础标签
在文件创建时会自动创建这些标签，构成html的基本标签
-
html
html的根标签
-
head
头标签，指定html文档的一些属性，引入外部的资源
-
title
标题标签
-
body
体标签
-
html5中定义该文档是html文档：
文本标签
和文本相关的标签：
-
注释：
-
h1 —> h6：标题标签，自动加粗和换行，字体大小依次减小
-
p：段落标签，br换行也可以，但是并不是非常好看，使用段落标签有另外的格式，会有间距
-
br：换行，因为在html里面的换行，他会自动转换为一个空字符
-
hr：显示一条水平线，里面有一些属性，H5不支持，但是可以使用，因为浏览器需要兼容
-
b：字体加粗
-
i：字体斜体
-
font：H5不在支持(被淘汰的标签)，字体标签
-
center：被淘汰的标签，文本居中
图片标签
img：标签
src：里面是文件目录(指定图片位置)
align：不支持了
alt：文字信息，图片加载失败显示
width：
height：
列表标签
-
有序列表：会用1234这样的标识，可以通过属性去修改显示字符，但是不建议通过属性去修改
- ol ：
- li :
<ol> <li></li> <li></li> </ol> -
无序列表：有实心圆点标识，可以通过属性去修改显示图形，但是不建议通过属性去修改
- ul ：
- li ：
<ul> <li></li> <li></li> </ul>
链接标签
-
a ：定义一个超链接
//href：指定访问资源的URL，也可以指定当前项目的地址， //也可以指定邮箱，如果有客户端，会打开这个软件 href="mailto:yy@qq.com" <a href="路径" target="_self">点</a>//默认，在本页面打开 <a href="路径" target="_blank">点</a>//在新的页面(选项卡)打开 <a href=""><img src=""></a>
锚链接
-
从A页面的甲位置跳转到本页中的乙位置(同一页面)
-
从A页面的甲位置跳转到B页面中的乙位置(两个页面)
-
创建步骤
- 创建跳转标记
<a name="marker">乙位置</a>- 创建跳转链接
<a href="#marker">甲位置</a>
div和span
与css一起集合使用的标签
span：起包裹的效果，文本信息默认是在一行展示，行内标签，内联标签
div：结合css运用，每一个div沾满一行，块级标签
语义化标签
使用html5中，为了提高查询的可读性，提供了一些标签
head：
footer：
表格标签
<table border="1" width="50%" cellsoacing="0" cellpading="0">//定义表格
<thead>//表示表格的头部分
<caption>表格标题</caption>
/*
border:边框，width：宽度，cellpadding：定义内容与单元格的距离，
cellspacing：定义单元格之间的距离，如果指定为0，则单元格的线会合为一条
cellpadding：border、cellspacing、cellpadding这三个是专门设置单元格的空隙
bgcolor：背景色
align：对齐方式
*/
<tr>//定义行
<th></th>//定义表头单元格，默认居中加粗
<th></th>
<th></th>
</tr>
</thead>
<tbody>//表示表格的头体部分
<tr>//定义行
<td></td>//定义列
/*
colspan：合并列,值为数字，代表合并几行
rowspan：合并行
*/
<td></td>
<td></td>
</tr>
<tr>//定义行
<td></td>//定义列
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>//表示表格的脚部分
<tr>//定义行
<td></td>//定义列
<td></td>
<td></td>
</tr>
</tfoot>
</table>
表单标签
表单：用于收集或采集用户输入的数据的。比如用户名密码等，用于和服务器进行交互
-
form：用于定义表单，定义一个范围，这个范围代表采集用户数据的范围
属性：
- action：指定提交数据的URL
- method：指定提交方式
- 一共有7种，其中有两种比较常用
- post：
- 1.请求参数不会在地址栏中显示，但是会将内容封装到请求实体中
- 2.URL（请求参数）的长度是没有限制的
- 3.较为安全
- get：
- 1.请求参数会在地址栏中显示
- 2.URL（请求参数）的长度是有限制的
- 3.不太安全
- post：
- 一共有7种，其中有两种比较常用
表单项中的数据要想被提交，则必须指定其name属性，这个必须是在表单的范围里面
-
表单项标签
-
input：可以通过其type属性值，改变元素展示的样式，默认是text
-
type属性：
-
text：文本标签，默认值
placeholder=“内容”，属性实现提示信息，当选中时其内容消失
-
password：密码输入框
-
radio：单选框
1.要想多个单选框实现单选功能，则多个单选框的name属性值必须一样1
2.一般会给每一个单选框提供value属性，指定其被选中后提交的值
3.默认选中checked，指定默认值
-
checkbox：复选框
1…一般会给每一个复选框提供value属性，指定其被选中后提交的值
2.默认选中checked，指定默认值
-
file：文件选中框
-
hidden：隐藏域，用于提交一些信息
-
reset：重置表单数据
-
按钮：
- submit：提交按钮，可以添加表单
- button：普通按钮
- img：图片提交按钮，可以通过src属性指定图片的路径
-
color：取色器
-
date：年月日
-
datelocal：可以选小时和分钟
-
email：邮箱，会做一个正则校验
-
number：数字，只能输入数字，可以使用箭头加减
-
-
-
label：指定输入项的文字描述信息
label属性的for属性一般会合input的id属性对应，如果对应了，则点击label区域，会让input输入框获取焦点
-
select：下拉列表
-
textarea：文本域
-
readonly: 只读属性，希望某个框内的内容只允许用户看，不能修改
-
disabled：禁用属性，因没达到使用的条件，限制用户使用
-
hidden：隐藏
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面Html实现</title>
</head>
<body>
<!-- 定义表单-->
<form action="#" method="post" >
<table border="1" align="center" width="500px">
<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="username">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="password" 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>
</body>
</html>
补充
//html的模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
1.<body></body>等成对的标签，分别叫开放标签和闭合标签
2.单独呈现的标签(空元素),如<hr/>;意为用/来关闭空标签
3.<head></head>：设置网页的一些属性
4.<body></body>：网页内容的编辑器
5.DOCTYPE声明：告诉浏览器使用什么规范(使用的是什么规范)
6.<meta>标签：用于定义文本信息，给标签设置不同的属性，具备不同的功能
gb2312包含全部的中文字符，UTF-8则包含全部国家使用的字符
标签
<em>//体标签
//空格，特殊符号
<p>：段落标签
<br>：换行标签
<hr>：水平线标签
<strong>：粗体标签
<h1>：标题标签
> ：大于号>
< ：小于号<
" ：引号"
@copy; ：版权符号@
图片格式
| 图形类型 | 优点 | 缺点 |
|---|---|---|
| *.jpg | 体积小，较清晰.适合色彩丰富的图像 | 有损压缩，画面失真 |
| *.gif | 体积小、支持动画图片，较为常用的网页图片类型 | 支持有限的透明度,效果不如其他PNG图片 |
| *.bmp | 支持24位颜色深度，兼容性好 | 不支持压缩，容量大 |
| *.png | 最新的图片格式，兼有GIF和JPG的优势 | 部分浏览器（IE.6）不支持透明 |
iframe标签
<iframe>标签
作用：创建文档的内联框架，相对于动态面板
属性
src ( 需引入的文档路径 )
width/height ( 设定框架的宽与高)
scrolling (是否显示滚动条，auto | yes | no)
frameborder( 是否要边框，1 显示，0 不显示)
name ( 内联框架的名称)
CSS
页面美化和布局控制
-
概念：Cascading style Sheets 层叠样式表
层叠：多个样式可以作用在同一个html的元素上，同时生效
-
好处：
1.功能强大
2.将内容展示和样式控制分离
- 降低耦合度
- 让分工协作更容易
- 提高开发效率
-
CSS使用：CSS与html的结合方式
-
内联样式：
在标签里面使用style属性，进行修饰，不推荐使用
-
内部样式：
在当前页面有用，在head标签内，定义style标签，style标签的标签体内容就是css代码
-
外部样式
定义css资源文件，在head标签内容，定义css文件路径，通过link标签去引入css文件
也可以通过style标签里面的@import "地址"来引入
-
作用范围，越来越大，内联样式不推荐使用
-
语法
-
格式：
选择器 { 属性名:属性值1; 属性名:属性值2; ...... 属性名:属性值 } //每一行属性需要使用;隔开，最后一对属性可以不加;
选择器
-
分类：
-
基本选择器：
1.id选择器：选择具体的id属性值的元素，建议在一个html页面中id值唯一
- 语法：#id属性值{ }
2.元素选择器：选择具有相同标签名称的元素，
- 语法：标签名称{ }
- id选择器优先级高于元素选择器
3.类选择器：选择具有相同的class属性值的元素
- 语法：.class属性值{ }
- 类选择器优先级高于元素选择器，id选择器优先级最高
-
扩展选择器：
1.* ：选择所有元素
- 语法：*{ }
2.并集选择器：
- 语法：选择器1,选择器2
3.子选择器：筛选选择器1元素下的选择器2的元素
- 语法：选择器1 选择器2{ }
4.父选择器：选择选择器2父元素下的选择器1
- 语法：选择器1 > 选择器2 { }
5.属性选择器：选择元素名称，属性名=属性值的元素
- 语法：元素名称[属性名=“属性值”] { }
6.伪类选择器：选择一些元素具有的状态
-
元素:状态{ }
-
如：
-
状态：
link：初始化的状态
visited：被访问过的状态
active：正在访问状态
hover：鼠标悬浮状态
-
-
属性
-
字体、文本
1.font-size：字体大小
2.color：文本颜色
3.text-align：对其方式
4.line-height：行高
-
背景
background：复合属性
background：url( ) norepeat center;//url里面为图片路径，背景图片 -
边框
1.border：复合属性
-
尺寸
1.width：宽度
2.height：高度
-
盒子模型：控制布局
1.margin：外边距
2.padding：内边距
-
这两个是相对概念，默认情况下修改内边距会影响盒子大小，
-
设置width和height就是最终盒子的大小，使用box-sizing:border-box；
3.浮动：float
- 右浮动：float : right;
- 左浮动：float : left
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Css实现注册</title>
<style>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
background: url("../img/register_bg.png") no-repeat center;
}
.rg_layout{
width: 900px;
height: 500px;
border: 8px solid #EEEEEE;
background-color: white;
/*让div水平居中*/
margin: auto;
margin-top: 15px;
}
.rg_left{
/*border: 1px solid red;*/
float: left;
margin: 15px;
}
#regis{
color: yellow;
font-size: 20px;
}
#regisP{
color: #A6A6A6;
font-size: 20px;
}
.rf_center{
/*border: 1px solid red;*/
float: left;
width: 450px;
}
.td_left{
width: 100px;
text-align: right;
height: 45px;
}
.td_right{
padding-left: 50px;
}
#username,#password,#email,#birthday,#name,#checkCode,#tel{
width: 251px;
height: 32px;
border: 1px solid #A6A6A6;
border-radius: 5px;
padding-left: 10px;
}
#checkCode{
width: 110px;
}
#img_checkCode{
height: 32px;
vertical-align: middle;
}
#btn_sub{
width: 150px;
height: 40px;
background-color: yellow;
border: 1px solid yellow;
}
.rg_right{
/*border: 1px solid red;*/
float: right;
margin: 15px;
}
.rg_right > p:first-child{
font-size: 10px;
}
.rg_right p a{
color: pink;
}
</style>
</head>
<body>
<div class="rg_layout">
<div class="rg_left">
<p id="regis">新用户注册</p>
<p id="regisP">USER REGISTER</p>
</div>
<div class="rf_center">
<div class="rg_form">
<!-- 定义表单-->
<form action="#" method="post" >
<table>
<tr>
<td class="td_left"><label for="username">用户名</label></td>
<td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
</tr>
<tr>
<td class="td_left"><label for="password">密码</label></td>
<td class="td_right"><input placeholder="请输入密码" type="password" name="password" id="password"></td>
</tr>
<tr>
<td class="td_left"><label for="username">Email</label></td>
<td class="td_right"><input placeholder="请输入用户名" type="email" name="email" id="email"></td>
</tr>
<tr>
<td class="td_left"><label for="name">姓名</label></td>
<td class="td_right"><input placeholder="请输入姓名" type="text" name="name" id="name"></td>
</tr>
<tr>
<td class="td_left"><label for="tel">手机号</label></td>
<td class="td_right"><input placeholder="请输入手机号" type="text" name="password" id="tel"></td>
</tr>
<tr>
<td class="td_left"><label>性别</label></td>
<td class="td_right">
<input type="radio" name="gender" value="male" >男
<input type="radio" name="gender" value="female">女
</td>
</tr>
<tr>
<td class="td_left"><label for="birthday">出生日期</label></td>
<td class="td_right"><input type="date" name="birthday" id="birthday"></td>
</tr>
<tr>
<td class="td_left"><label for="checkCode">验证码</label></td>
<td class="td_right">
<input placeholder="请输入验证码" type="text" name="checkCode" id="checkCode">
<img id="img_checkCode" src="../img/verify_code.jpg">
</td>
</tr>
<tr>
<td colspan="2" align="center"><input id="btn_sub" type="submit" value="注册"></td>
</tr>
</table>
</form>
</div>
</div>
<div class="rg_right">
<p>已有账号?<a href="#">立即登录</a></p>
</div>
</div>
</body>
</html>
补充
块元素与内联元素
块元素：独占一行，可以定义宽度和高度，块元素：div,p,ul,li
内联元素：一行排列显示，不能定义宽和高度，常用内联元素：span(存放文字的)、a、lable
内联元素会单独分行，内联元素会在一行里面显示
div和span：结构化HTML元素，DIV+CSS网页布局，最大优点：没有任何的默认样式渲染
span不能内联div，div里面能够内联span
<div>和<span>标签可以相互转换（display属性）
属性
字体属性
文本属性
设置页面元素的背景样式
列表属性
超链接伪类
a:link {color: red}/* 未访问的链接 */
a:visited {color: blue} /* 已访问的链接 */
a:hover {color: green}/* 当有鼠标悬停在链接上 */
a:active {color: yellow} /* 被选择的链接 */
1、在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的
2、在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的
鼠标形状控制：cursor属性其值
- html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="./css/demo2.css"/>
</head>
<body>
<h1 class="test1">全部商品分类</h1>
<ul class="test2">
<li><a href="#">收到1</a></li>
<li><a href="#">收到2</a></li>
<li><a href="#">收到3</a></li>
<li><a href="#">收到4</a></li>
</ul>
</body>
</html>
.test1{
background-color: red;
font-size: ;
}
.test2{
background-color: gray;
list-style-type: none;
}
body{
background-image: url(../img/fj.jpg);
}
a{
text-decoration: none;
}
a:hover{
color: #FF0000;
text-decoration: underline;
cursor: move;
}
盒子模型
margin外边距
| 属性 | 内容 |
|---|---|
| margin-top | |
| margin-right | |
| margin-bottom | |
| margin-left | |
| margin |
margin: 上 右 下 左; （顺时针方向）
border边框
padding内边距
基本用法与margin差不多
padding: 上 右 下 左; （顺时针方向）
总结
盒子模型总尺度 = border + padding +margin + 内容尺寸（宽/高）
- 外边距可用于网页居中显示
- margin-left: auto;
- margin-right:auto;
- 块元素才能完全适用于盒子模型
- 使用display属性来相互转化
- none（元素隐藏，不可见）
- block（转为块元素，独占一行）
- inline（转为内联元素，不换行）
float属性
- 取值
- left 左浮动
- right 右浮动
- none 不浮动
使用浮动后要及时清除，以免影响其后的网页元素
清除浮动必要性：1.浮动后，脱离了文档流不占网页空间；2.浮动后的网页元素会影响同级元素
clear属性
-
取值
- left
- right
- both
- none
-
表明容器框的哪边不挨着浮动框
overflow属性
- 作用：
- 定义溢出元素内容区的内容会如何处理
- 取值
- visible （默认）
- auto
- hidden
- scroll
position属性
-
relative（相对定位）
- 相对它原来的位置，通过指定偏移，到达新的位置。
- 仍在标准流中，它对父级盒子和相邻的盒子都没有任何影响
-
absolute（绝对定位）
- 相对已设定非static定位属性的父元素计算偏移量
-
fixed（相对浏览器固定定位，IE6不支持）
- static（默认）
-
偏移量设置
- X轴(left、right 属性)与Y轴（top、bottom属性）
- 可取值：像素或百分比
460
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
