bootstrap 栅格系统 HTTP协议 软件架构 B/S C/S 常见的WEB服务器

Day32 bootstrap

Bootstrap就是响应式布局最成功的实现,为了兼容不同的浏览器采用jQuery,为了适配不同的终端采用CSS3 Media Query (媒体查询)

1.1.1 栅格系统

l 帮助手册:全部CSS样式/栅格系统,http://v3.bootcss.com/css/#grid-options

l Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。

l 栅格特点

n “行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中

n “列(column)” 可以作为行(row)”的直接子元素。

n 行使用的样式“.row”,列使用样式“col-*-*” 内容应当放置于“列(column)”内

n 列大于12时,将另起一行排列

n 栅格类适用于与屏幕宽度大于或等于分界点大小的设备,并且针对小屏幕设备覆盖栅格类。

l 栅格参数:“col-*-*

Day33HTTP协议和Tomcat服务器

1.1 什么是HTTP协议

协议概念:为了使数据在网络上从源到达目的,网络通信的参与方必须遵循相同的规则,这套规则称为协议(protocol), 它最终体现为在网络上传输的数据包的格式。

大白话:就是规定交流的时候内容的格式。

超文本传输协议:用于定义WEB浏览器和WEB服务器之间数据交互的过程.

我们在计算机的领域中,最为常用的就是http协议.当我们在地址栏上输入一个地址点击回车的时候,其实就是向某一台电脑发送了请求.然后这台电脑会将我们想要的内容通过网络返回到我们的浏览器上.其实http协议就是一个客户端和服务器端请求和响应的标准

1.2 HTTP请求协议详解(重点)

l 请求行(了解)

例如:POST /day09/01.http/form.html HTTP/1.1

请求行必须在HTTP请求格式的第一行。

请求行格式:请求方式 资源路径 协议/版本

请求方式:协议规定7种,常用两种:GET和POST

GET请求:

将请求参数追加在URL后面,不安全。例如:form.html?username=jack&username=1234

URL长度限制GET请求方式的数据大小。

没有请求体

POST请求

请求参数显示请求体处,较安全。

请求数据大小没有显示。

只有表单设置为method=”post”才是post请求.其他的都是get请求。

常见GET请求:地址栏直接访问、<a href=””>、<img src=””> 等

l 请求头 (掌握)

例如:Host: localhost:8080

请求头从第二行开始,到第一个空行结束。及请求头和请求体之间存在一个空行。

请求头通常以键值对(key:value)方式传递数据。

key为规范规定的固定值

value 为key对应的取值,通常是一个值,可能是一组。


常见请求头


描述 (红色掌握,其他了解)


Referer


浏览器通知服务器,当前请求来自何处。如果是直接访问,则不会有这个头。常用于:防盗链


If-Modified-Since


浏览器通知服务器,本地缓存的最后变更时间。与另一个响应头组合控制浏览器页面的缓存。


Cookie


与会话有关技术,用于存放浏览器缓存的cookie信息。


User-Agent


浏览器通知服务器,客户端浏览器与操作系统相关信息


Connection


保持连接状态。Keep-Alive 连接中,close 已关闭


Host


请求的服务器主机名


Content-Length


请求体的长度


Content-Type


如果是POST请求,会有这个头,默认值为application/x-www-form-urlencoded,表示请求体内容使用url编码


Accept:


浏览器可支持的MIME类型。文件类型的一种描述方式。

MIME格式:大类型/小类型[;参数]

例如:

text/html ,html文件

text/css,css文件

text/javascript,js文件

image/*,所有图片文件


Accept-Encoding


浏览器通知服务器,浏览器支持的数据压缩格式。如:GZIP压缩


Accept-Language


浏览器通知服务器,浏览器支持的语言。各国语言(国际化i18n)

l 请求体(重点)

通常情况下,只有post请求方式才会使用到请求体,请求体中都是用户表单提交的数据,每一项数据都使用键值对(k=v),多组值使用&相连。

例如;username=jack&password=1234

1.3 HTTP响应协议详解(重点)

l 响应行(重点)

例如:HTTP/1.1 200 OK

格式:协议/版本 状态码  状态码描述

状态码:服务器与浏览器用于确定状态的固定数字号码

1xx : 代表请求已被接受,需要继续处理(一般不用)

200 :请求成功。

302 :请求重定向。

304 :请求资源没有改变,访问本地缓存。

404 :请求资源不存在。通常是用户路径编写错误,也可能是服务器资源已删除。

500 :服务器内部错误。通常程序抛异常。

l 响应头(重点)

响应头也是用的键值对k:v

服务器通过响应头来控制浏览器的行为,不同的头浏览器操作不同。


常见请求头


描述


Location


指定响应的路径,需要与状态码302配合使用,完成跳转。


Content-Type


响应正文的类型(MIME类型)

取值:text/html;charset=UTF-8   处理响应中文乱码问题


Content-Disposition


通过浏览器以下载方式解析正文

取值:attachment;filename=xx.zip


Set-Cookie


与会话相关技术。服务器向浏览器写入cookie


Content-Encoding


服务器使用的压缩格式

取值:gzip


Content-length


响应正文的长度


Refresh


定时刷新,格式:秒数;url=路径。url可省略,默认值为当前页。

取值:3;url=www.itcast.cn    //三秒刷新页面到www.itcast.cn


Server


指的是服务器名称,默认值:Apache-Coyote/1.1。可以通过conf/server.xml配置进行修改。<Connector port="8080" ... server="itcast"/>


Last-Modified


服务器通知浏览器,文件的最后修改时间。与If-Modified-Since一起使用。

l 响应体

响应体,就是服务器发送给浏览器的正文。HTML文本、图片、文件等

1.4 软件架构

l C/S架构:Client/Server 客户端/服务器。要求客户端电脑安装一个客户端程序。

n 常见应用:QQ,迅雷,360,旺旺 等2

n 优点:

  1. 用户体验好,效果炫
  2. 对信息安全的控制较强
  3. 应用服务器运行数据负荷较轻,部分计算功能在客户端完成。

n 缺点:

  1. 占用硬盘空间
  2. 维护麻烦
  3. 安装使用依赖其他条件

l B/S架构:Browser/Server 浏览器/服务器 。通过浏览器与服务器交互,不需要安装其他程序

n 常见应用:网银系统,淘宝,京东 12306 等

n 优点:

  1. 维护和升级简单,无缝升级。
  2. 不用必须安装程序,操作系统内置了浏览器。

n 缺点:

  1. 动画效果受浏览器限制.
  2. 对信息安装控制较差。例如:网银就需要使用U盾,在浏览器端加密。
  3. 应用服务器运行数据负荷较重。大部分计算都在服务器端,增加服务器压力。使用Ajax可以改善部分用户体验。

静态资源:指web页面中供人们浏览的数据始终是不变。比如:HTML、CSS、JS、图片、多媒体。

动态资源:指web页面中供人们浏览的数据是由程序产生的,不同时间点访问web页面看到的内容各不相同。比如:JSP/Servlet、ASP、PHP

应用场景:

静态资源:网站首页

动态资源:登录页面、购物车

WEB服务器对JavaEE规范部分或全部支持(实现),也就是WEB服务器实现部分或全部接口。

221常见的WEB服务器:

  1. Tomcat:Apache组织提供一个免费的小型的服务器软件。支持Servlet和JSP规范。
  2. WebLogic:Bea公司的一个收费的大型的服务器软件,后被Oracle收购。支持EE的所有的规范
  3. WebSphere:IBM公司的一个收费的大型的服务器软件,支持EE的所有的规范。
  4. JBoss:是一个基于J2EE的开放源代码的应用服务器。JBoss是一个管理EJB的容器和服务器,JBoss核心服务不包括支持servlet/JSP的WEB容器,一般与Tomcat或JBoss绑定使用。

原文地址:https://www.cnblogs.com/shan1393/p/8945293.html

时间: 2024-10-30 03:59:16

bootstrap 栅格系统 HTTP协议 软件架构 B/S C/S 常见的WEB服务器的相关文章

巧用 BootStrap --- 栅格系统(布局)轻松搞定网页响应式布局!

摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Bootstrap的中文官网首页为模板进行展示其栅格布局的使用方法以及相关知识点.相信在看完这篇文章之后,你完全可以轻松使用栅格布局. 网站效果图如下所示: PC版: 移动版: 1.栅格系统(布局) Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加

Bootstrap 栅格系统(布局)

1.栅格系统(布局)Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系统叫做布局.它就是通过一系列的行(row)与列(column)的组合创建页面布局,然后你的内容就可以放入到你创建好的布局当中.下面就简单介绍一下Bootstrap栅格系统的工作原理: 网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再

Bootstrap栅格系统用法介绍

 1.栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系统叫做布局.它就是通过一系列的行(row)与列(column)的组合创建页面布局,然后你的内容就可以放入到你创建好的布局当中.下面就简单介绍一下Bootstrap栅格系统的工作原理: 网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的)

【9】了解Bootstrap栅格系统基础案例(4)

这次我们来说下嵌套列: 为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内.被嵌套的行(row)所包含的列(column)的个数不能超过12(其实,没有要求你必须占满12列). <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <!--

【8】了解Bootstrap栅格系统基础案例(3)

这次我们来说下列偏移: 列偏移就是使用 .col-md-offset-* 类可以将列向右侧偏移.这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin).例如,.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列(column)的宽度. 废话不多说,直接上代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8&

【10】了解Bootstrap栅格系统基础案例(5)

这次我们来说下列排序: 通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序. <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <!-- Bootstrap不支持IE的兼容模式,加入此标签以确保在每个被支持的IE浏览器中保持最好的页面展现效果 --> <

第二百三十五节,Bootstrap栅格系统

Bootstrap栅格系统 学习要点: 1.移动设备优先 2.布局容器 3.栅格系统 本节课我们主要学习一下 Bootstrap 的栅格系统,提供了一套响应式.移动设备优先的流 式栅格系统. 一.移动设备优先 在 HTML5 的项目中,我们做了移动端的项目.它有一份非常重要的 meta,用于设置屏 幕和设备等宽以及是否运行用户缩放,及缩放比例的问题.

Bootstrap 栅格系统 理解与总结

Bootstrap 栅格系统 学习总结 Bootstrap框架是如今最流行的前端框架之一,Bootstrap功能强大,简单易学,很符合实际应用场景. 只是Bootstrap的内容较多,新手往往不能很快的熟练运用Bootstrap. 这里,我就对Bootstrap中非常重要好用的栅格系统做一个以实例为向导的总结: (1)第一步:创建栅格系统的容器 <div class="container-fluid"> <div class="row"> .

bootstrap栅格系统详解

在百度前端学院做任务的时候,看到有关于bootstrap的栅格系统的知识于是就在网上百度了一番,下边的网址是关于bootstrap栅格系统的详细解析,https://segmentfault.com/a/1190000000743553. http://www.cnblogs.com/JerryTao/p/5476027.html. http://blog.csdn.net/z742182637/article/details/50466674. 了解之后栅格系统就可以相互嵌套了.这里有我写的d