1. web概念概述
*JavaWeb  :
*使用Java语言开发基于互联网的项目
* 软件架构
1 . C\S : client\Server 客户端/服务器
*在用户本地有一个客户端,在远程有一个服务器程序
* 优点 :
  缺点:
1 . 开发 , 安装 , 部署 , 维护麻烦
2 . B\S : Browser/Sever 浏览器/服务器
*只需要一个浏览器,用户通过不同的网址(URL) , 客户访问不同的服务器端程序
优点 :
1.  开发. 安装,部署.维护简单
缺点 :       
1.  如果应用过大 , 用户体验可能会打折
              2 . 对硬件要求过高
*B/S 架构详解
        *资源分类
*1  . 静态资源
*使用静态网页开发技术发布得到资源
*特点  :
*所有用户访问, 得到的结果是意义的.
* 如 : 文本 图片 音频 视频 ,HTML , CSS ,JavaScript
* 如果用户请求的是静态资源,那么服务器会将静态资源直接发送给浏览器.浏览器中内置了静态资源的解析引擎.可以展示静态资源
* 2 . 动态资源
*使用动态网页及时发布的资源
*特点
*所有用户访问,得到的结果可能不一样
*如 : jsp/servlet,php.asp..
如果用户请求的是动态资源,那么服务器会执行动态资源,转换为静态资源,在发送给浏览器
* 我们要学习动态资源,必须先学习静态资源 !
* 静态资源
HTML :

2. HTML
< br >  换行
< !DOCTYPE html > html 中定义文档文件
< meta charset = "字符集">
< hr > 显示一条水平线
< width> 宽度
< b > 字体加粗
< i > 字体斜体
< font > 字体标签 属性 face='字体名' size='大小' color='颜色'

*属性定义
*color :
1 . 英文单词 : red ,green .blue
2 .  rgb(值1 ,值2 , 值3 ) : 值的范围 : 0~255
3 . # 值1,值2,值3  值得范围 00~FF之间.
*width
1.数值  :  wdith=;20;  数值的单位,默认是px(像素)
列表标签
<dl><dt> 分级标签
<ol><li> 有序列表        : type :设置排序文本
<ul><li>无序标签
链接标签
<a>:定义一个超链接
*属性   加上self =blank  新建窗口打开
herg : 指定访问资源的URL 路径
target : 指定打开资源的方式  

块标签       
<Span>  :  文本信息在一行展示, 行内标签, 内联标签
<div> : 每一个div 占满一整行 , 块级标签
语义标签 :html 5 中为了提高程序的可读性.提供了一些标签
<header>  头
<footer>  腿
表格标签 :
* table :定义表格 : border :边框 width :宽度 cellpadding : 定义内容单元格之间的距离
cellscing 定义
cell
* tr : 定义行
* td : 定义列
* th : 定义表头
HTML 表单标签
*表单:
*概念 : 用于采集用户输入的数据的.用于和服务器进行交互.
*使用的标签 : form :用于定义表单的,可定一个范围,范围代表采集用户数据的范围
*属性
*action : 指定提交数据的URL
*method : 指定提交方式
*分类 一共有7种类.两种比较常见
1.  Post :1.  请求参数不会在地址栏中显示
2.请求参数大小没有大小限制
3.不太安全
2 . Get ;1.请求参数会在地址栏中显示
2.请求参数大小有限制
3.太不安全.
*表单中的数据想要被提交 . 必须指定其 name 属性
*表单项标签
input :  可以通过type属性值,改变元素展示样式
*type属性 :
*text 文本输入框,默认值
*placeholder : 指定输入框的提示信息,当输入框的内容发生变化,会自动清空提示信息.
*password : 密码输入框
* radio 单选框
*注意       
1.想要多个单选框实现单选的效果.则多个单选框的name属性必须一样
2.一般会给每一个单选框提供value属性,指定被选中后提交的值
3.checked属性,可以指定默认值
*checkbox : 复选框
*注意 :
1. 一般会给每一个单选框提供value属性, 指定其被选中后提交的值
2. checked 属性,可以指定默认值 ,
file :文件选择框
* type = "file"
hidden : 隐藏域 .用于提交一些信息
*按钮
submit : 提交按钮,可以提交表单
button : 普通按钮
image : 图片提交按钮
*src 属性指定图片的路径
* label指定输入项的文字描述信息
*注意 :
*label的for属性一般会和 iput的 id属性对应.如果对应了 ,则点击label区域,会让input输入框获取焦点.
*select : 下拉列表
*子元素 : option ,指定列表项

*textarea : 文本域
* cols  : 指定列数, 每一行有多少个字符
* rows  : 默认多少行

Css 使用



CSS 基本语法 :
*格式 :
选择器 {
属性名1 :属性值1
属性名2 :属性值2
...
}
*选择器 :  筛选具有相似特征的元素 .
*注意  :
*每一对属性, 需要是使用 ; 隔开
最后一对可以不加分号
选择器 ;  筛选具有相似特征的元素
*分类 :
1 . 基本选择器
1.  id选择器 :  选择具体的id属性值的元素
# 语法 : #id属性值{ }
2.  元素选择器
*语法  : 标签名称{ }
* 注意 : id选择器优先级高于元素选择器
3. 类选择器
* 语法 : .class属性{ }
2 . 扩展选择器
1 .   *  表示选择所有元素 .
2 .  并集选择器 :
*选择器1,选择器2
3 . 子选择器
         筛选选择器1下的选择器2
* 语法  : 选择器1 空格 选择器2{
}
4 . 父选择器  筛选选择器 2 的父元素选择器1
*语法  :  选择器1 > 选择器2 {  }
5 . 属性选择器   : 选择元素名称 , 属性名 = 属性值的元素
* 语法 : 元素名称 [属性名='属性值']  {  }
6. 伪类选择器 : 选择一些元素具有的状态
*语法 : 元素 : 状态 { }
*如 : < a >
*状态 :
*link ; 初始化的状态
*visited : 被访问的状态
*active :正在访问的状态
*hover: 鼠标悬浮的状态
Css属性 :
1.字体, 文本
* font -size : 字体大小
*  color  : 颜色
*text - aligh : 对其方式
*line-hight :  行度
2.背景
backgroud;
3.边框
border : 设置边框 , 符合属性
4 . 尺寸
*width : 宽度
* height : 高度
5.盒子模型 控制布局
*margin : 外边距
*padding : 内边距
*默认情况下内边距会影响整个盒子的大小
* box_suzing : border - box ; 设置盒子属性, 让width 和 hright 就是最终盒子的大小
*float  : 浮动
* left
* right

1. web概念概述
*JavaWeb  :
*使用Java语言开发基于互联网的项目
* 软件架构
1 . C\S : client\Server 客户端/服务器
*在用户本地有一个客户端,在远程有一个服务器程序
* 优点 :
  缺点:
1 . 开发 , 安装 , 部署 , 维护麻烦
2 . B\S : Browser/Sever 浏览器/服务器
*只需要一个浏览器,用户通过不同的网址(URL) , 客户访问不同的服务器端程序
优点 :
1.  开发. 安装,部署.维护简单
缺点 :       
1.  如果应用过大 , 用户体验可能会打折
              2 . 对硬件要求过高
*B/S 架构详解
        *资源分类
*1  . 静态资源
*使用静态网页开发技术发布得到资源
*特点  :
*所有用户访问, 得到的结果是意义的.
* 如 : 文本 图片 音频 视频 ,HTML , CSS ,JavaScript
* 如果用户请求的是静态资源,那么服务器会将静态资源直接发送给浏览器.浏览器中内置了静态资源的解析引擎.可以展示静态资源
* 2 . 动态资源
*使用动态网页及时发布的资源
*特点
*所有用户访问,得到的结果可能不一样
*如 : jsp/servlet,php.asp..
如果用户请求的是动态资源,那么服务器会执行动态资源,转换为静态资源,在发送给浏览器
* 我们要学习动态资源,必须先学习静态资源 !
* 静态资源
HTML :

2. HTML
< br >  换行
< !DOCTYPE html > html 中定义文档文件
< meta charset = "字符集">
< hr > 显示一条水平线
< width> 宽度
< b > 字体加粗
< i > 字体斜体
< font > 字体标签 属性 face='字体名' size='大小' color='颜色'

*属性定义
*color :
1 . 英文单词 : red ,green .blue
2 .  rgb(值1 ,值2 , 值3 ) : 值的范围 : 0~255
3 . # 值1,值2,值3  值得范围 00~FF之间.
*width
1.数值  :  wdith=;20;  数值的单位,默认是px(像素)
列表标签
<dl><dt> 分级标签
<ol><li> 有序列表        : type :设置排序文本
<ul><li>无序标签
链接标签
<a>:定义一个超链接
*属性   加上self =blank  新建窗口打开
herg : 指定访问资源的URL 路径
target : 指定打开资源的方式  

块标签       
<Span>  :  文本信息在一行展示, 行内标签, 内联标签
<div> : 每一个div 占满一整行 , 块级标签
语义标签 :html 5 中为了提高程序的可读性.提供了一些标签
<header>  头
<footer>  腿
表格标签 :
* table :定义表格 : border :边框 width :宽度 cellpadding : 定义内容单元格之间的距离
cellscing 定义
cell
* tr : 定义行
* td : 定义列
* th : 定义表头
HTML 表单标签
*表单:
*概念 : 用于采集用户输入的数据的.用于和服务器进行交互.
*使用的标签 : form :用于定义表单的,可定一个范围,范围代表采集用户数据的范围
*属性
*action : 指定提交数据的URL
*method : 指定提交方式
*分类 一共有7种类.两种比较常见
1.  Post :1.  请求参数不会在地址栏中显示
2.请求参数大小没有大小限制
3.不太安全
2 . Get ;1.请求参数会在地址栏中显示
2.请求参数大小有限制
3.太不安全.
*表单中的数据想要被提交 . 必须指定其 name 属性
*表单项标签
input :  可以通过type属性值,改变元素展示样式
*type属性 :
*text 文本输入框,默认值
*placeholder : 指定输入框的提示信息,当输入框的内容发生变化,会自动清空提示信息.
*password : 密码输入框
* radio 单选框
*注意       
1.想要多个单选框实现单选的效果.则多个单选框的name属性必须一样
2.一般会给每一个单选框提供value属性,指定被选中后提交的值
3.checked属性,可以指定默认值
*checkbox : 复选框
*注意 :
1. 一般会给每一个单选框提供value属性, 指定其被选中后提交的值
2. checked 属性,可以指定默认值 ,
file :文件选择框
* type = "file"
hidden : 隐藏域 .用于提交一些信息
*按钮
submit : 提交按钮,可以提交表单
button : 普通按钮
image : 图片提交按钮
*src 属性指定图片的路径
* label指定输入项的文字描述信息
*注意 :
*label的for属性一般会和 iput的 id属性对应.如果对应了 ,则点击label区域,会让input输入框获取焦点.
*select : 下拉列表
*子元素 : option ,指定列表项

*textarea : 文本域
* cols  : 指定列数, 每一行有多少个字符
* rows  : 默认多少行

Css 使用



CSS 基本语法 :
*格式 :
选择器 {
属性名1 :属性值1
属性名2 :属性值2
...
}
*选择器 :  筛选具有相似特征的元素 .
*注意  :
*每一对属性, 需要是使用 ; 隔开
最后一对可以不加分号
选择器 ;  筛选具有相似特征的元素
*分类 :
1 . 基本选择器
1.  id选择器 :  选择具体的id属性值的元素
# 语法 : #id属性值{ }
2.  元素选择器
*语法  : 标签名称{ }
* 注意 : id选择器优先级高于元素选择器
3. 类选择器
* 语法 : .class属性{ }
2 . 扩展选择器
1 .   *  表示选择所有元素 .
2 .  并集选择器 :
*选择器1,选择器2
3 . 子选择器
         筛选选择器1下的选择器2
* 语法  : 选择器1 空格 选择器2{
}
4 . 父选择器  筛选选择器 2 的父元素选择器1
*语法  :  选择器1 > 选择器2 {  }
5 . 属性选择器   : 选择元素名称 , 属性名 = 属性值的元素
* 语法 : 元素名称 [属性名='属性值']  {  }
6. 伪类选择器 : 选择一些元素具有的状态
*语法 : 元素 : 状态 { }
*如 : < a >
*状态 :
*link ; 初始化的状态
*visited : 被访问的状态
*active :正在访问的状态
*hover: 鼠标悬浮的状态
Css属性 :
1.字体, 文本
* font -size : 字体大小
*  color  : 颜色
*text - aligh : 对其方式
*line-hight :  行度
2.背景
backgroud;
3.边框
border : 设置边框 , 符合属性
4 . 尺寸
*width : 宽度
* height : 高度
5.盒子模型 控制布局
*margin : 外边距
*padding : 内边距
*默认情况下内边距会影响整个盒子的大小
* box_suzing : border - box ; 设置盒子属性, 让width 和 hright 就是最终盒子的大小
*float  : 浮动
* left
* right