javaWeb概念概述：

javaWeb：使用java语言开发基于互联网的项目

软件架构：

1.C/S：client/Server 客户端/服务器端

在用户本地有一个客户端程序，在远程有一个服务器端程序
如：QQ，迅雷...
优点：用户体验好
缺点：开发，安装，部署，维护，麻烦

2.B/S :Browser/Server 浏览器/服务器端

只需要一个浏览器，用户通过不同的网址(URL),客户访问不同的服务器端程序
优点：开发，安装，部署，维护，简单
缺点：如果应用过大，用户的体验可能会受到影响
对硬件要求过高

B/S架构详解

*资源分类：

1.静态资源：使用静态网页开发技术发布的资源

特点：所有用户访问，得到的结果是一样的

如：文本，图片，音频，视频，HTML，CSS，JavaScript

如果用户请求的是静态资源，那么服务器直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源

2.动态资源：使用动态网页及时发布的资源

特点：所用用户访问，得到的结果可能不一样。

如：jsp/servlet/ php.asp....

如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器

HTML：超文本标记语言

概念

超文本：超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本

标记语言：由标签构成的语言。<标签名称> 如html xml 标记语言不是编程语言

快速入门

html文档后缀名：.html 或者.htm

标签分为：围堵标签自闭和标签

标签可以嵌套

在开始标签中可以定义属性

HTML的标签不区分大小写

注释：

<h1> to <h6>:标题标签:<h1>-<h6>字体大小逐渐递减

<p>:段落标签

<br>:换行标签

<hr>:展示一条水平线属性：color颜色 width宽度 size高度 align对齐方式（center left right）

<b>:字体加粗

<i>：字体斜体

<font>:字体标签 color颜色 size大小 face字体

<center>:文本居中

注意：

1.color：

英文单词：red,green,blue

rgb(值1，值2，值3)：值得范围0-255 如rgb(0,0,255)

#值1值2值3：值得范围：00-FF之间如 #FF00FF

2.width:

数值：width=‘20’ ，数值的单位默认是px(像素)

数值%：占比相对于父元素的比例

图片标签

img:展示图片属性：src：指定图片的位置

注意：./代表当前目录， ../:代表上一级目录

列表标签

有序列表：

ol:

li: 列表中的内容

无序列表：

ul ：

li：列表中的内容

链接标签

<a></a>

href :链接的地址

target ：链接的打开方式 _self 本身网页 _blank一个空白的网页

div和span

div:每一个div占满一整行。块级标签

span：文本信息在一行展示，行内标签，内联标签

语义化标签：html5中为了提高程序的可读性，提供了一些标签

<header>：页眉

<footer>:页脚

表格标签

table：定义表格

width：宽度 border：边框 cellpadding：定义内容和单元格的距离 cellspacing：定义单元格之间的距离，如果指定为0，则单元格的线会合为一条

bgcolor:背景色 align：对齐方式

tr:定义行

bgcolor:背景色

align：对齐方式

td:定义单元格

colspan：合并列

rowspan：合并行

th:定义表头单元格

<caption>:表示标题

<thead>:表示表格的头部分

<tbody>表示表格的体部分

<tfoot>表示表格的脚部分

表单标签

概念：用于采集用户输入的数据的。用于和服务器进行交互。

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区域

*select：下拉列表

       子元素：option，指定列表项

        selected 默认的项

*texterea：文本域

      cols:指定列数，每一行有多少个字符

    rowa：默认多少行

CSS

概念

1.概念：Cascading Style Sheets 层叠样式表

好处：

功能强大

将内容展示和样式控制分离

降低耦合度。解耦

让分工协作更容易

提高开发效率

CSS使用：CSS与html结合方式

1.内联样式

在标签内使用style属性指定css代码

如<div style="color:red;">hello css</div>

2.内部样式

在head标签内，定义style标签，style标签的标签内容就是css代码使用键值对的方式

如：

<style>div{ color:red; } </style> <div>hello css</div>

3.外部样式

定义css资源文件

在head标签内，定义link标签，引入外部的资源文件

如：

a.css文件：

div{ color:red; }

<link rel="stylesheet" href="css/a.css"> <div>hello css</div> <div>hello css</div>

注意：

1，2，3种方式css作用范围越来越大

1方式不常用，后期常用2,3

3种格式可以写为

如<style> @import "css/a.css"</style>

CSS语法：格式

选择器{

属性名1：属性值1；

属性名2：属性值2；

........

}

选择器：筛选具有相似特征的元素

注意：每一对属性需要使；隔开，最后一对属性可以不加；

CSS语法：选择器

1.基础选择器

id选择器：选择具体的id属性值的元素，建议在一个html页面中id值唯一 #id值

元素选择器：选择具有相同标签名称的元素

      语法：标签名称{   }

      注意：id选择器优先级高于元素选择器

     3.类选择器：选择具有相同的class属性值的元素

    语法：.class属性值{}

    注意：类选择器优先级高于元素选择器

2.扩展选择器

选择所有元素

   语法：*{ }

并集选择器

   语法：选择器1，选择器2{ }

子选择器

语法：选择器选择前期2{ }

父选择器

语法：选择器1 > 选择器2 { }

属性选择器

语法：元素名称[属性名=属性值“”]{ }

伪类选择器

语法：元素：状态{ }

如：<a>

状态：link:初始化的状态

       visited：被访问过的状态

      active：正在访问的状态

     hover：鼠标悬浮的状态

CSS属性

1.字体，文本

    font-size:字体大小

    color：文本颜色

   text—align：对齐方式

   line—height:行高

2.背景：background

3.边框：border：设置边框，符合属性

4.尺寸

   width：宽度

   height：高度

5.盒子模型：控制布局

margin：外边距

padding：内边距

       默认情况下内边距会影响整个盒子的大小

      box—sizing：border—box; 设置盒子的属性，让width和height就是最终盒子的大小

6.浮动：float

   left：

   right

【1】HTML CSS