目录
基本介绍
软件架构
Client/Server 客户端/服务器端 (C/S)
Browser/Server 浏览器/服务器端 (B/S)
静态资源
HTML
语法
标签
特殊字符集
CSS
CSS与html结合方式
语法格式
选择器
属性
案例：注册页面
基本介绍
JavaWeb：使用Java语言开发基于互联网的项目。
软件架构
Client/Server 客户端/服务器端 (C/S)
概述：在用户本地有一个客户端程序，在远程有一个服务器端程序。如：QQ、迅雷...
优点：用户体验好。
缺点：开发、安装，部署，维护 麻烦。
Browser/Server 浏览器/服务器端 (B/S)
概述：只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序。
优点：开发、安装，部署，维护 简单。
缺点：
- 如果应用过大，用户的体验可能会受到影响
- 对硬件要求过高
资源分类：
静态资源 概述：使用静态网页开发技术发布的资源
如：文本，图片，音频、视频，HTML，CSS，Javascript
特点：
1. 所有用户访问，得到的结果是一样的
2. 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器
浏览器中内置了静态资源的解析引擎，可以展示静态资源
HTML：用于搭建基础网页，展示页面的内容
CSS：用于美化页面，布局页面
Javascript：控制页面的元素，让页面有一些动态的效果
动态资源 概述：使用动态网页技术发布的资源
如：jsp/servlet，php，asp...
特点：
1. 所有用户访问，得到的结果可能不一样
2. 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器
Client/Server 客户端/服务器端 (C/S)
概述：在用户本地有一个客户端程序，在远程有一个服务器端程序。如：QQ、迅雷...
优点：用户体验好。
缺点：开发、安装，部署，维护 麻烦。
Browser/Server 浏览器/服务器端 (B/S)
概述：只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序。
优点：开发、安装，部署，维护 简单。
缺点：
- 如果应用过大，用户的体验可能会受到影响
- 对硬件要求过高
资源分类：
| 静态资源 | 概述：使用静态网页开发技术发布的资源 如：文本，图片，音频、视频，HTML，CSS，Javascript |
| 特点： 1. 所有用户访问，得到的结果是一样的 2. 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器 浏览器中内置了静态资源的解析引擎，可以展示静态资源 | |
| HTML：用于搭建基础网页，展示页面的内容 CSS：用于美化页面，布局页面 Javascript：控制页面的元素，让页面有一些动态的效果 | |
| 动态资源 | 概述：使用动态网页技术发布的资源 如：jsp/servlet，php，asp... |
| 特点： 1. 所有用户访问，得到的结果可能不一样 2. 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器 |
静态资源
HTML
概述：是最基础的网页开发语言。
Hyper Text Markup Language 超文本标记语言
超文本：超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。
标记语言：
- 由标签构成的语言 <标签名称>
- 标记语言不是编程语言
语法
标签
文件标签 文档标签 图片标签 列表标签 链接标签 其他标签 语义化标签 表格标签 表单标签 表单项标签
特殊字符集
HTML
概述：是最基础的网页开发语言。
Hyper Text Markup Language 超文本标记语言
超文本：超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。
标记语言：
- 由标签构成的语言 <标签名称>
- 标记语言不是编程语言
语法
标签
| 文件标签 | |
| 文档标签 | |
| 图片标签 | |
| 列表标签 | |
| 链接标签 | |
| 其他标签 | |
| 语义化标签 | |
| 表格标签 | |
| 表单标签 | |
| 表单项标签 |
特殊字符集
CSS
Cascading Style Sheets 层叠样式表
层叠：多个样式可以作用在同一个html的元素上，同时生效。
好处：
- 功能强大
- 将内容展示和样式控制分离
* 降低耦合度。解耦
* 让分工协作更容易
* 提高开发效率CSS与html结合方式
内联样式 概述：在标签内使用style属性指定css代码 如：hello css 内部样式 概述：在head标签内定义style标签，style标签的标签体内容就是css代码 如：
div{
color:blue;
}
hello css外部样式 概述：
1. 定义css资源文件
2. 在head标签内，定义link标签，引入外部的资源文件如：
a.css文件：
div{
color:green;
}
hello css
hello css注意 1、2、3种方式，css作用范围越来越大
1方式不常用，后期常用2、3
外部样式格式可以写为：
@import "css/a.css";
语法格式
选择器 {
属性名1: 属性值1;
属性名2: 属性值2;
...
}注释：
注意：每一对属性需要使用；隔开，最后一对属性可以不加。
选择器
概述：筛选具有相似特征的元素。
基础选择器 扩展选择器 属性
案例：注册页面
注册页面
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: url("../img/register_bg.png") no-repeat center;
}
#d_layout {
width: 65%;
height: 560px;
background-color: white;
border: 8px solid #EEEEEE;
margin: 40px auto;
}
#d_left {
float: left;
margin: 20px;
}
#d_center {
float: left;
width: 55%;
margin: 40px auto 0 55px;
}
#d_right {
float: right;
margin: 20px;
}
#d_left > p:first-child {
color: #FFD026;
font-size: 20px;
}
#d_left > p:last-child {
color: #A6A6A6;
font-size: 20px;
}
#d_right > p:first-child {
font-size: 10px;
}
#d_right p a {
color: pink;
}
.td_left {
width: 100px;
text-align: right;
height: 45px;
}
.td_right {
padding-left: 40px;
}
#username, #password, #email, #name, #tel, #birthday, #checkcode {
width: 251px;
height: 32px;
border: 1px solid #A6A6A6;
border-radius: 5px;
padding-left: 10px;
}
#checkcode {
width: 110px;
}
#img_check {
height: 32px;
margin-left: 10px;
vertical-align: middle;
}
#btn_submit {
width: 150px;
height: 40px;
background-color: #FFD026;
border: 1px solid #FFD026;
margin-top: 20px;
}
新用户注册
USER REGISTER
已有账号？立即登录
新用户注册
USER REGISTER
已有账号？立即登录
实现效果：
