1.Web概念概述
1）JavaWeb：使用Java语言开发基于互联网的项目。
2）软件架构：
1.1C/S：Client/Server 客户端/服务器
在用户本地有一个客户端程序，在远程有一个服务器端程序。
优点：用户体验好
缺点：安装部署，开发维护麻烦
1.2B/S Browser/Server 浏览器/服务器
只需要一个浏览器，用户通过不同的网址可以访问不同的服务器程序
优点：安装部署，开发维护简单
缺点：1.如果应用过大，用户的体验可能会受到影响
2.对硬件要求过高
B/S构架详解：
资源分类：
1）静态资源：使用静态网页开发技术发布的资源。
特点：所有用户访问，得到的结果是一样的。
如：文本，图片，视频，音频，HTML，CSS，Javascript
如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源。
2）动态资源：使用动态网页技术发布的资源
特点：所有用户访问，得到的结果可能不一样
如：jsp/Servlet,php,asp...
如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器。
我们要学习动态资源，必须先学习静态资源！
静态资源：
1）HTML：用于搭建基础网页，展示页面的内容
2）CSS：用于美化页面，布局页面
3）Javascript：控制页面的元素，让页面有一些动态的效果。
一.HTML（超文本标记语言）
1.概念：是最基础的网页开发语言
1）超文本：超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。
2）标记语言：由标签构成的语言。<标签名称> 如 html，xml（标记语言不是变成语言）2.快速入门
1）语法：html文档后缀名.html或者.htm
2）标签分为：围堵标签：有开始标签和结束标签，
自闭和标签：开始标签和结束标签在一起，如
3）标签可以嵌套：
需要正确的嵌套，不能你中有我我中有你.
错误：
正确：
4）在开始标签中可以定义属性。属性是由键值对构成，值需要用引号（单双都可以）引起来
5）html的标签不区分大小写，但是建议使用小写3.标签学习：
1）文件标签：构成html最基本的标签
html:html文档的根标签
head:头标签。用于指定html文档的一些属性。引入外部的资源。
title:标题标签
body:体标签
:html5中定义该文档是html文档Title helloWorld2）文本标签：和文本有关的标签
注释： (快捷键 ctrl+/)
to ：标题标签
h1-h6：字体大小逐渐递减
:段落标签
:换行标签
:展示一条水平线
属性：color:颜色
width：宽度
1.数值：width="200",数值的单位默认是px（像素）
2.数值%：占比相对于父元素的比例
size：高度
align：对齐方式
center：居中
left：左对齐
right：右对齐
:字体加粗
:字体斜体
: 字体标签
color：颜色
1.英文单词：red，blue，green
2.rgb(值1，值2，值3）：值的范围0-255 如：rgb（0,0,255）
3.#值1值2值2：值的范围00-FF 如：#FF00FF
size：大小
face：字体
:文本居中 标签 标题标签 标题2标签都和你我爱凡帝罗撒酒疯阿胶浆覅而无法费覅额偶玩
佛二维【请佛诶覅偶恶案件佛为反腐
会为强化的武器的华为
>会场内外
十多万
敦煌舞偶发后尾崎丰
hi菲欧我怕3）图片标签：：展示
4）列表标签：
有序列表：
无序列表：早上起来做什么睁眼 起床
睁眼 起床
5）链接标签：
定义一个超链接
href:指定访问资源的URL（统一资源定位符）
target：指定打开资源的方式
_self：默认值，在当前页面打开
_blank：在空白页面打开这是一个百度超链接 这是自己写的一个页面连接6）div和span
对哦我 对哦啊 蝴蝶 会否为7）语义化标签：html5中为了提高程度的可读性，提供了一些标签
：把头部分出来（页眉）
学生表 姓名 年龄 编号 25 1 易烊千玺 23 9）表单标签：用于采集用户输入的数据的。用于和服务器进行交互
表单：form标签标签 表单项：
input:可以通过type属性值，改变元素展示的样式
type属性：
text：文本输入框，默认值
placeholder：指定输入框的提示信息，当输入框的内容发生变化时，会
自动清除提示信息。
password：密码输入框
radio:单选框
1.1要想实现单选，他们的name属性值要一样
1.2一般会给每个单选框提供value属性，指定其被选中后提交的值
1.3checked属性，可以指定默认值
checkbox:复选框
1.1一般会给每个单选框提供value属性，指定其被选中后提交的值
1.2checked属性，可以指定默认值
file:文件选择框
hidden：隐藏域，用于提交一些隐藏的数据
按钮：
submit：提交按钮，可以提交表单
button：和Javascript一起使用，实现动态效果
image：图片提交按钮 src属性指定图片的路径
lable属性：指定输入项文字描述信息
lable的for属性一般会和input的id属性值对应。如果对应了，则点击lable区
域，会让input输入框获取焦点。标签 select:下拉列表
子元素：option，指定列表项
selected：默认项textarea:文本域
自我描述:
二、CSS页面美化和布局控制
1.概念：层叠样式表
层叠：多个样式可以作用在同一个html的元素上，同时生效
2.好处：
1）功能强大
· 2）将内容展示和样式控制分离
提高耦合度，解耦
让分工协作更容易
提高开发效率
3.CSS的使用：CSS与html结合方式
1）内联样式（当前标签中作用）
2）内部样式（当前页面中作用）标签 div{ color: aqua; } 你好 hello 3）外部样式（连接css文件都可用）
div{ color: aqua; }标签 hello HELLO你好
1.2扩展选择器：
1）选择所有元素：
语法：*{}
2）并集选择器：
语法：选择器1，选择器2{}
3）子选择器：筛选选择器1元素下的选择器2元素
语法：选择器1 选择器2{}
4）父选择器：筛选选择器2的父元素选择器1
语法：选择器1 > 选择器2{}
5）属性选择器：选择元素名称，属性名=属性值的元素
语法：元素名称[属性名=“属性值”]{}
6）伪类选择器：选择一些元素具有的状态
语法：元素：状态{}
如：
状态：
link：初始化的状态
visited：被访问过的状态
active：正在访问的状态
hover：鼠标悬浮状态标签 div p{ color: red; } div > p{ border: 1px solid; } input[type='text']{ border: 5px solid; } a:link{ color: #FF0000; } a:hover{ color: #00FFFF; } a:active{ color: blue; } a:visited{ color: chartreuse; } hello
HELLO
百度点我6.属性
1）字体，文本
font-size：字体大小
color：文本颜色
text-align：对其方式
line-height：行高
2）背景：background
3）边框：border：设置边框，符合属性
4）尺寸
width：宽度
height：高度标签 p{ color: #00FFFF; font-size: 30px; text-align: center; line-height: 200px; border: 1px solid brown; } div{ border: 1px solid #00FFFF; height: 200px; width: 200px; background: url(imag/1.jpg) no repeat center; } 世界你好
你好5）盒子模型：控制布局
margin：外边距
padding：内边距
默认情况下内边距会影响整个盒子的大小
box-sizing:border-box；设置盒子的属性，让width和height就是最终盒子的大小
float：浮动（left和right）标签 div{ border: 1px solid red; width: 100px; } .div1{ width:100px; height: 100px; } .div2{ width:200px; height:200px; padding: 50px; box-sizing: border-box; } .div3{ float: left; } .div4{ float: left; } .div5{ float: right; } aaa bbb ccc
