https://www.lagou.com/lgeduarticle/40789.html

    概述:
    Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。
    作用:
    开发响应式的页面
    响应式:就是一个网站能够兼容多个终端
    节约开发成本,提高开发效率
    入门:
    下载BootStrap
    www.bootcss.com 官网地址
    模版
    1.导入BootStrap的css
    2.导入jquery的js(1.8+)
    3.导入BootStrap的js
    4.设置视口(支持移动设备)

    5.添加一个布局容器
    通过div设置一个 class
    方式1:class=”container”
    方式2:class=”container-fluid”
    核心:
    全局CSS
    设置全局 CSS 样式;基本的 HTML 元素均可以通过 class 设置样式并得到增强效果;还有先进的栅格系统。
    媒体查询(了解)
    默认有一些分辨率临界点的阀值
    分辨率 屏幕大小
    分辨率>=1200px 超大屏幕
    992<=分辨率<1200 中等屏幕
    768<=分辨率<992 小屏幕
    分辨率<768 超小屏幕
    栅格系统★
    在不同分辨率的屏幕下展示不同的效果,根据不同的上网设备,栅格系统将屏幕分成一系列的行(row)和列(column),由行和列来创建页面布局,注意栅格系统必须放在布局容器内使用
    行:
    通过class = “row”来设置一行
    列(最多将视口分为12列)
    通过class属性来设置在不同屏幕是所占的列 n表示每格占的份数
    col-lg-n 大屏 分辨率>=1200
    col-md-n 中屏 992<=分辨率<1200
    col-sm-n 小屏 768<=分辨率<992px
    col-xs-n 超小屏 分辨率<768px

    案例:



    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12



    响应式工具:
    显示:
    .visible-xs 超小屏可见
    .visible-sm 小屏可见
    .visible-md 中等屏幕可见
    .visible-lg 大屏可见
    隐藏:
    .hidden-xs 超小屏时隐藏
    .hidden-sm 小屏幕时隐藏
    .hidden-md 中等屏幕时隐藏
    .hidden-lg 大屏幕时隐藏
    标题:
    .h1 — .h6
    对齐方式:(文本)
    .text-left 左对齐
    .text-center居中
    .text-right 右对齐
    列表:
    .list-unstyled 移除默认的列表样式
    .list-inline 将所有列表项放置同一行
    表格:bootstrap给表格添加了默认样式
    .table 普通表格
    .table-striped 条纹表格(IE8不支持)
    .table-bordered 边框表格
    .table-hover 带有鼠标悬停的表格
    .table-condensed 紧缩表格
    表单:
    垂直表单:
    内联表单:(将所有内容放在同一行)
    水平表单:
    按钮:★
    .btn 为按钮添加基本样式
    .btn-default 默认/标准按钮
    .btn-primary 原始按钮样式(未被操作)
    .btn-success 表示成功的动作
    .btn-info 该样式可用于要弹出信息的按钮
    图片:
    .img-rounded 为图片添加圆角 (IE8 不支持)
    .img-circle 将图片变为圆形 (IE8 不支持)
    .img-responsive 图片响应式
    组件
    无数可复用的组件,包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。
    下拉选:
    导航条:
    javaScript插件
    jQuery 插件为 Bootstrap 的组件赋予了“生命”。可以简单地一次性引入所有插件,或者逐个引入到你的页面中。
    图片轮播

    综合案例:

    <!DOCTYPE html>

    1. <head><br /> <meta charset="UTF-8"><br /> <meta name="viewport" content="width=device-width,initial-scale=1" /><br /> <title></title><br /> <link rel="stylesheet" href="css/bootstrap.css" /><br /> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script><br /> <script type="text/javascript" src="js/bootstrap.min.js"></script><br /> <script><br /> $(function() {<br /> $('.carousel').carousel({<br /> interval: 1000<br /> })<br /> });<br /> </script><br /> </head>
    2. <body><br /> <div class="container"><br /> <!--1.topbar--><br /> <div class="row text-center"><br /> <!--img1:中等屏幕时占4份,在小屏时占6份,在超小屏时占12份<br /> img2:中等屏幕时占4份,在小屏时隐藏,在超小屏时占12份<br /> 超链接:中等屏幕时占4份,在小屏时占6份,在超小屏时占12份--><br /> <div class="col-md-4 col-sm-6"><br /> <img src="img/logo2.png" /><br /> </div><br /> <div class="col-md-4 hidden-sm"><br /> <img src="img/header.jpg" /><br /> </div><br /> <div class="col-md-4 col-sm-6 text-center" style="padding-top: 20px;"><br /> <a href="#" class="btn btn-default">登录</a>&nbsp;&nbsp;<br /> <a href="#" class="btn btn-default">登录</a>&nbsp;&nbsp;<br /> <a href="#" class="btn btn-default">登录</a><br /> </div><br /> </div><br /> <!--2.导航条--><br /> <div class="row"><br /> <nav class="navbar navbar-inverse"><br /> <div class="container-fluid"><br /> <!-- Brand and toggle get grouped for better mobile display --><br /> <div class="navbar-header"><br /> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><br /> <span class="sr-only">Toggle navigation</span><br /> <span class="icon-bar"></span><br /> <span class="icon-bar"></span><br /> <span class="icon-bar"></span><br /> </button><br /> <a class="navbar-brand" href="#">首页</a><br /> </div><br /> <!-- Collect the nav links, forms, and other content for toggling --><br /> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><br /> <ul class="nav navbar-nav"><br /> <li class="active"><br /> <a href="#">手机数码 <span class="sr-only">(current)</span></a><br /> </li><br /> <li><br /> <a href="#">电脑办公</a><br /> </li><br /> <li class="dropdown"><br /> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a><br /> <ul class="dropdown-menu"><br /> <li><br /> <a href="#">Action</a><br /> </li><br /> <li><br /> <a href="#">Another action</a><br /> </li><br /> <li><br /> <a href="#">Something else here</a><br /> </li><br /> <li role="separator" class="divider"></li><br /> <li><br /> <a href="#">Separated link</a><br /> </li><br /> <li role="separator" class="divider"></li><br /> <li><br /> <a href="#">One more separated link</a><br /> </li><br /> </ul><br /> </li><br /> </ul><br /> <form class="navbar-form navbar-right"><br /> <div class="form-group"><br /> <input type="text" class="form-control" placeholder="Search"><br /> </div><br /> <button type="submit" class="btn btn-default">Submit</button><br /> </form><br /> </div><br /> <!-- /.navbar-collapse --><br /> </div><br /> <!-- /.container-fluid --><br /> </nav>
    3. </div><br /> <!--3.轮播图--><br /> <div class="row"><br /> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><br /> <!-- Indicators --><br /> <ol class="carousel-indicators"><br /> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><br /> <li data-target="#carousel-example-generic" data-slide-to="1"></li><br /> <li data-target="#carousel-example-generic" data-slide-to="2"></li><br /> </ol>
    4. <!-- Wrapper for slides --><br /> <div class="carousel-inner" role="listbox"><br /> <div class="item active"><br /> <img src="./img/1.jpg" alt="..."><br /> <div class="carousel-caption"><br /> 欢迎你...<br /> </div><br /> </div><br /> <div class="item"><br /> <img src="./img/2.jpg" alt="..."><br /> <div class="carousel-caption"><br /> </div><br /> </div><br /> <div class="item"><br /> <img src="./img/3.jpg" alt="..."><br /> <div class="carousel-caption"><br /> </div><br /> </div><br /> </div>
    5. <!-- Controls --><br /> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><br /> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><br /> <span class="sr-only">Previous</span><br /> </a><br /> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><br /> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><br /> <span class="sr-only">Next</span><br /> </a><br /> </div><br /> </div><br /> <!--4.热门商品--><br /> <div class="row"><br /> <div><br /> <span class="h2">热门商品</span><img src="img/title2.jpg" /><br /> </div><br /> <!--下div:<br /> 左div:中等屏幕时占2份,小屏和超小屏隐藏<br /> 图片<br /> 右div:中等屏幕时占10份,小屏和超小屏占12份<br /> middle div:中等屏幕时占6份,小屏和超小屏隐藏<br /> 图片<br /> 商品div:中等屏幕时占2份,小屏占4份,超小屏时占6份<br /> 图片 2个p标签--><br /> <div class="row"><br /> <!--左div:中等屏幕时占2份,小屏和超小屏隐藏<br /> 图片--><br /> <div class="col-md-2 hidden-sm hidden-xs"><br /> <img src="img/big01.jpg" width="100%" height="100%" /><br /> </div><br /> <!--右div:中等屏幕时占10份,小屏和超小屏占12份<br /> --><br /> <div class="col-md-10"><br /> <!--middle div:中等屏幕时占6份,小屏和超小屏隐藏<br /> 图片--><br /> <div class="col-md-6 hidden-sm hidden-xs"><br /> <img src="img/middle01.jpg" width="100%" height="180px" /><br /> </div><br /> <!--商品div:中等屏幕时占2份,小屏占4份,超小屏时占6份<br /> 图片 2个p标签--><br /> <div class="col-md-2 col-sm-4 col-xs-6 text-center"><br /> <img src="img/small08.jpg" /><br /> <p>妹子</p><br /> <p>288</p><br /> </div><br /> <div class="col-md-2 col-sm-4 col-xs-6 text-center"><br /> <img src="img/small08.jpg" /><br /> <p>妹子</p><br /> <p>288</p><br /> </div><br /> <div class="col-md-2 col-sm-4 col-xs-6 text-center"><br /> <img src="img/small08.jpg" /><br /> <p>妹子</p><br /> <p>288</p><br /> </div><br /> <div class="col-md-2 col-sm-4 col-xs-6 text-center"><br /> <img src="img/small08.jpg" /><br /> <p>妹子</p><br /> <p>288</p><br /> </div><br /> <div class="col-md-2 col-sm-4 col-xs-6 text-center"><br /> <img src="img/small08.jpg" /><br /> <p>妹子</p><br /> <p>288</p><br /> </div><br /> <div class="col-md-2 col-sm-4 col-xs-6 text-center"><br /> <img src="img/small08.jpg" /><br /> <p>妹子</p><br /> <p>288</p><br /> </div><br /> <div class="col-md-2 col-sm-4 col-xs-6 text-center"><br /> <img src="img/small08.jpg" /><br /> <p>妹子</p><br /> <p>288</p><br /> </div><br /> <div class="col-md-2 col-sm-4 col-xs-6 text-center"><br /> <img src="img/small08.jpg" /><br /> <p>妹子</p><br /> <p>288</p><br /> </div><br /> <div class="col-md-2 col-sm-4 col-xs-6 text-center"><br /> <img src="img/small08.jpg" /><br /> <p>妹子</p><br /> <p>288</p><br /> </div><br /> </div><br /> </div><br /> </div><br /> <!--5.图片--><br /> <div class="row"><br /> <img src="img/ad.jpg" width="100%" /><br /> </div><br /> <!--6.热门商品--><br /> <div class="row"><br /> <div><br /> <span class="h2">热门商品</span><img src="img/title2.jpg" /><br /> </div><br /> <!--下div:<br /> 左div:中等屏幕时占2份,小屏和超小屏隐藏<br /> 图片<br /> 右div:中等屏幕时占10份,小屏和超小屏占12份<br /> middle div:中等屏幕时占6份,小屏和超小屏隐藏<br /> 图片<br /> 商品div:中等屏幕时占2份,小屏占4份,超小屏时占6份<br /> 图片 2个p标签--><br /> <div class="row"><br /> <!--左div:中等屏幕时占2份,小屏和超小屏隐藏<br /> 图片--><br /> <div class="col-md-2 hidden-sm hidden-xs"><br /> <img src="img/big01.jpg" width="100%" height="100%" /><br /> </div><br /> <!--右div:中等屏幕时占10份,小屏和超小屏占12份<br /> --><br /> <div class="col-md-10"><br /> <!--middle div:中等屏幕时占6份,小屏和超小屏隐藏<br /> 图片--><br /> <div class="col-md-6 hidden-sm hidden-xs"><br /> <img src="img/middle01.jpg" width="100%" height="180px" /><br /> </div><br /> <!--商品div:中等屏幕时占2份,小屏占4份,超小屏时占6份<br /> 图片 2个p标签--><br /> <div class="col-md-2 col-sm-4 col-xs-6 text-center"><br /> <img src="img/small08.jpg" /><br /> <p>妹子</p><br /> <p>288</p><br /> </div><br /> <div class="col-md-2 col-sm-4 col-xs-6 text-center"><br /> <img src="img/small08.jpg" /><br /> <p>妹子</p><br /> <p>288</p><br /> </div><br /> <div class="col-md-2 col-sm-4 col-xs-6 text-center"><br /> <img src="img/small08.jpg" /><br /> <p>妹子</p><br /> <p>288</p><br /> </div><br /> <div class="col-md-2 col-sm-4 col-xs-6 text-center"><br /> <img src="img/small08.jpg" /><br /> <p>妹子</p><br /> <p>288</p><br /> </div><br /> <div class="col-md-2 col-sm-4 col-xs-6 text-center"><br /> <img src="img/small08.jpg" /><br /> <p>妹子</p><br /> <p>288</p><br /> </div><br /> <div class="col-md-2 col-sm-4 col-xs-6 text-center"><br /> <img src="img/small08.jpg" /><br /> <p>妹子</p><br /> <p>288</p><br /> </div><br /> <div class="col-md-2 col-sm-4 col-xs-6 text-center"><br /> <img src="img/small08.jpg" /><br /> <p>妹子</p><br /> <p>288</p><br /> </div><br /> <div class="col-md-2 col-sm-4 col-xs-6 text-center"><br /> <img src="img/small08.jpg" /><br /> <p>妹子</p><br /> <p>288</p><br /> </div><br /> <div class="col-md-2 col-sm-4 col-xs-6 text-center"><br /> <img src="img/small08.jpg" /><br /> <p>妹子</p><br /> <p>288</p><br /> </div><br /> </div><br /> </div><br /> </div><br /> <!--7.图片--><br /> <div class="row"><br /> <img src="img/footer.jpg" width="100%" /><br /> </div><br /> <!--8--><br /> <div class="row text-center"><br /> <p><br /> <ol class="list-unstyled list-inline"><br /> <li><a href="#">联系我们</a></li><br /> <li><a href="#">联系我们</a></li><br /> <li><a href="#">联系我们</a></li><br /> <li><a href="#">联系我们</a></li><br /> <li><a href="#">联系我们</a></li><br /> <li><a href="#">联系我们</a></li><br /> </ol><br /> </p><br /> <p>Copyright &copy; 2005-2016 版权所有</p><br /> </div><br /> </div><br /> </body>

    案例-将我们的项目发布出去
    需求分析:
    将我们编写好的(web项目)项目放到服务器上,这样以来用户就可以通过网络访问到我们的(web项目)项目了
    技术分析:
    web服务器
    web项目
    Http协议
    //////////////////////////
    http://localhost/webDemo/html/hello.html get

    ///////////////////
    day33HTTP&Tomcat

    • Web服务器
      - 概念:
      - web资源:
      “英文直译”网”的意思
      资源:一切数据文件
      web资源:通过网络可以访问到的资源,通常指的是一切放在服务器上的文件”
      - web资源的分类:
      - 静态的web资源:
      “ 内容是一成不变的”
      - 动态的web资源:
      “ 内容有可能在不同的时间或者不同的人访问的时候会发生改变的”
      - web技术分类
      - 静态的web技术
      “ 例如: html css js …..”
      - 动态的web技术
      “ 例如:servlet jsp”
      - 软件的架构
      - c/s架构(Client/Server 客户端/服务器)
      “ 例如:qq 迅雷 lol”
      - b/s架构(Browser/Server 浏览器/服务器)
      “ 例如:京东 淘宝 “
      - 区别
      - c/s:需要客户下载客户端,页面比较炫,和服务器交互少,可以在客户端处理部分业务逻辑,可降低服务器的压力.需要维护客户端和服务器端
      - b/s:只需要客户有一个浏览器,一切页面从服务器加载,和服务器交互频繁,由服务器处理业务逻辑,服务器压力较大.只需要维护服务器端.
      - 通讯机制
      - 基于http协议
      - 浏览器发送给服务器的内容:请求(request)
      - 服务器返回给浏览器的内容:响应(response)
      - 注意:先有请求,后有响应,一次请求对应一次响应
      - web服务器
      - 作用:将我们编写好的网页发布出去,别人就可以通过网络访问
      - 常见的web服务器
      “名称 厂商 特点
      Weblogic oracle 大型的收费的支持javaEE所有规范的web服务器(servlet和jsp)
      websphere ibm 大型的收费的支持javaEE所有规范的web服务器(servlet和jsp)
      tomcat apache 小型的免费的支持servlet和jsp规范的”web服务器””
      - Tomcat服务器★

      Tomcat如何优化?
      1: 优化连接配置.修改连接数,关闭客户端的dns查询(DNS查询需要占用网络,再获取对方ip的时候会消耗一定的时间)
      2: 优化jdk,扩大tomcat使用的内存,默认为128M
      - 下载
      - http://tomcat.apache.org/download-70.cgi
      - core:
      - zip:可以在window上运行的(我们今天使用)
      - tar.gz:运行在linux上的
      - 安装
      - 解压缩即可
      - 目录结构
      - bin:存放可执行的文件
      - ★conf:存放配置文件
      - lib:存放的是tomcat运行时和项目运行时必须的jar包
      - logs:存放的是日志文件(catalina.out)
      - temp:存放临时文件(不用管)
      - ★★webapps:存放要发布的web项目
      - ★work:存放项目运行时产生的java文件和class文件
      - 启动
      “ 双击 tomcat目录下/bin/startup.bat”
      - 关闭
      “ 方式1:点 x
      方式2:ctrl + c
      (记住)方式3:双击 tomcat目录下/bin/shutdown.bat”
      - 配置
      - 常见问题
      - 一闪而过
      “查看JAVA_HOME是否配置正确”
      - 端口占用: 可以修改Tomcat的端口号
      “修改 tomcat目录下/conf/server.xml 大约70行
      connectionTimeout=”20000”
      redirectPort=”8443” />
      需要将 8080 修改成其他的端口号
      端口号:0~65535
      0~1024:系统预留的端口号 一般不要使用 但是可以使用80端口
      80端口是http协议的默认端口号,访问的时候可以不写端口号”
      - 访问格式
      - tomcat的访问路径(8080是tomcat的默认的端口号)
      http://localhost:8080
      - 格式:http://ip地址:端口号/项目名/资源?参数名称=值&参数名称=值
      - web项目
      - 目录结构:★
      “myweb(目录名:项目名)
      |
      |—-资源文件 html img css js
      |—-WEB-INF(目录:特点,通过浏览器直接访问不到)
      | |
      | |—-lib(目录:项目运行的jar包)
      | |—-classes(目录:存放的class文件)
      | |—-web.xml(核心配置文件,在servlet2.5版本中必须有,serlvet3.0版本不是必须的)”
      - 项目访问路径:
      http://localhost:80/myweb/1.html
      协议://ip地址:端口/项目名称/资源”
      - Tomcat和Eclipse整合
      - Http协议:
      - 协议:规定内容的传输的格式
      - http协议:
      “用来制定互联网上数据的传输格式”
      - 包含:
      - 浏览器发送给服务器的内容 请求
      “规定请求数据的格式”
      - 服务器返回给浏览器的内容 响应
      “规定响应数据的格式”
      - 请求的格式:
      “请求行 请求头 请求体”
      - 请求行:请求的第一行
      - 格式:请求方式 请求资源 协议/版本
      “例如: GET /day33/1.html HTTP/1.1”
      - 请求方式:
      “常见的两种 get和post
      get请求:请求参数会在地址栏上显示,参数大小有限制,不安全
      http://ip地址:端口号/项目名/资源?参数名称=值&参数名称=值
      post请求:请求参数不在地址栏上显示,参数大小不受限制.较为安全
      格式:
      参数名称=值&参数名称=值”
      - 请求头
      - 格式: key/value的格式 (value可以为多个值的)
      - 常见的请求头
      - Accept: text/html,image/* —支持数据类型
      - Accept-Charset: ISO-8859-1 —字符集
      - Accept-Encoding: gzip —支持压缩
      - Accept-Language:zh-cn —语言环境
      - Host: www.baidu.cn:80 —访问主机
      - If-Modified-Since: Tue, 11 Jul 2000 18:23:51 GMT —缓存文件的最后修改时间
      - Referer: http://www.baidu.com/index.jsp —来自哪个页面、防盗链
      - User-Agent: Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0)
      “扩展知识:
      Trident内核代表产品Internet Explorer,又称其为IE内核
      Gecko内核代表作品Mozilla FirefoxGecko,火狐
      Chrome内核代表作品Chrome,谷歌”
      - Cookie
      - Connection: close/Keep-Alive —链接状态
      - 重要的头:
      - Referer User-Agent Cookie If-Modified-Since
      - 请求体
      “和请求头之间有一个空行
      post请求的参数:只有表单提交的时候明确了method=”post”这时候是post请求,其他的都是get请求
      参数名称=值&参数名称=值
      username=jack&password=1234”
      - 响应的格式:
      “响应行 响应头 响应体”
      - 响应行:响应信息的第一行
      - 格式:
      - 协议/版本 响应的状态码 状态码说明
      - 例如:
      - HTTP/1.1 200 OK
      - 状态码:
      - 1xx :请求已发送
      - 2xx :响应已完成
      - 200:响应成功(请求成功)
      - 3xx :需要浏览器进一步操作才可以完成
      - 302:重定向(配合location头使用)
      - 304:读缓存(Not Modified表示没有改变)
      - 4xx :用户访问错误(Not Found 表示:路径写错了,你访问的路径不存在)
      - 404:用户访问的资源不存在
      - 5xx :服务器内部错误(其实就是代码有问题,改代码)
      - 500:服务器内部异常
      - 响应头
      - 格式: key/value的格式 (value可以为多个值的)
      - 常见的响应头
      - Location: http://www.it315.org/index.jsp —跳转方向
      - Server:apache tomcat —服务器型号
      - Content-Encoding: gzip —数据压缩
      - Content-Length: 80 —数据长度
      - Content-Language: zh-cn —语言环境
      - Content-Type: text/html; charset=GB2312 —数据类型(MIME类型) 大类型/小类型 text/css text/javascript image/jpeg image/bmp
      - Last-Modified: Tue, 11 Jul 2000 18:23:51 GMT —最后修改时间
      - Refresh: 1;url=http://www.it315.org —定时刷新
      - Content-Disposition: attachment; filename=aaa.zip —下载
      - Set-Cookie:SS=Q0=5Lb_nQ; path=/search
      - Expires: -1 —缓存
      - Cache-Control: no-cache —缓存
      - Pragma: no-cache —缓存
      - Connection:Keep-Alive —连接
      - 重点的头:
      - Set-Cookie Location Content-Type Refresh Content-Disposition Last-Modified
      - 响应体
      “和响应头之间有一个空行,
      浏览器解析的内容”
      - servlet入门:
      “本质上就是一个运行在服务器上的类”
      - 作用:1.接受请求 2.调用Service 处理业务逻辑 3.生成响应结果
      - 入门步骤:
      - 1.编写一个类
      - 必须实现Servlet接口
      - 重写里面的方法
      - 2.编写配置文件(项目下 web-inf/web.xml)
      “注册servlet 绑定路径


      helloservlet
      cn.baidu.demo.HelloServlet




      helloservlet
      /hello

      - 3.测试
      “ localhost/项目名/绑定的路径
      localhost/day33/hello”

    在服务器中,为什么需要项目部署? 为了让网络通过服务器访问到项目

    回顾:
    tomcat服务器和Http协议:
    web服务器:
    概念:
    web资源:
    web资源分类:
    静态的web资源:内容一层不变
    动态的web资源:根据不同的人和不同的时间,可能会发生变化
    web技术:
    静态的web技术:html css js…
    动态的web技术:Servlet jsp
    结构:
    B/S(浏览器/服务器):
    C/S(客户端/服务器):
    通讯机制:
    基于HTTP协议
    一次请求一次响应,先有请求后有响应
    web服务器:
    Tomcat:
    下载:
    安装:
    目录结构:
    bin:
    conf:
    webapps:
    work:
    启动:
    bin/startup.bat
    关闭:
    X
    ctrl + c
    ★ bin/shutdown.bat
    访问:
    协议://地址:端口/资源
    web项目:
    项目名称:
    |———-html
    |———-css
    |———-js
    |———-img
    |———-WEB-INF
    |—————-lib
    |—————-classes
    |—————-web.xml
    http:
    请求:浏览器发送给服务器的内容(request)
    请求行
    请求信息的第一行
    请求方式 请求的资源 协议/版本 http/1.0 http/1.1
    请求头
    格式:
    key/value (value可以为多个值)
    请求体
    当请求是post的时候,存放post请求所携带的参数
    响应:服务器返回给浏览器的内容(response)
    响应行
    响应信息的第一行
    协议/版本 状态码 说明
    响应头
    格式:
    key/value (value可以为多个值)
    响应体
    浏览器解析的内容
    ////////////////////////////////////////////
    servlet:

    案例-使用servlet完成用户登录功能
    需求分析:
    用户在表单中填写完用户名和密码后,点击登录的时候,向服务器发送登录的请求,
    在服务器上处理请求,处理完毕后将处理信息响应到页面
    处理结果:
    登录成功:欢迎…登录…
    登录失败:用户名或密码错误
    异常:当前功能正在维护….
    技术分析:
    html:表单
    form
    action:提交路径
    method:提交方式
    get
    post
    servlet:
    request
    response
    ////////////////
    项目:
    com.baidu.web
    com.baidu.service
    com.baidu.dao
    com.baidu.domain
    com.baidu.utils

    导入jar包
    导入工具类