学习总结

Linux是基于Unix的
Linux是一种自由和开放源码的操作系统，存在着许多不同的Linux版本，但它们都使用了Linux内核。Linux可安装在各种计算机硬件设备中，比如手机、平板电脑、路由器、台式计算机

VMware     Linux系统

cat

tac

nl

more

less

tail

rm  删除文件
用法：rm [选项]... 文件...

cp、mv

tar

find

grep

pwd

touch

clear  crtl+L

在Linux下一般使用vi编辑器来编辑文件。vi既可以查看文件也可以编辑文件。
三种模式：命令行、插入、底行模式。
切换到命令行模式：按Esc键；
切换到插入模式：按 i 、o、a键；
    i 在当前位置前插入
    I 在当前行首插入
    a 在当前位置后插入
    A 在当前行尾插入
    o 在当前行之后插入一行
    O 在当前行之前插入一行

cat /etc/passwd > a.txt  将输出定向到a.txt中
cat /etc/passwd >> a.txt  输出并且追加

ifconfig > ifconfig.txt

ps 正在运行的某个进程的状态
ps –ef  查看所有进程
ps –ef | grep ssh 查找某一进程
kill 2868  杀掉2868编号的进程
kill -9 2868  强制杀死进程

管道是Linux命令中重要的一个概念，其作用是将一个命令的输出用作另一个命令的输入。示例
ls --help | more  分页查询帮助信息
ps –ef | grep java  查询名称中包含java的进程

ifconfig | more
cat index.html | more
ps –ef | grep aio

普通文件： 包括文本文件、数据文件、可执行的二进制程序文件等。 
目录文件： Linux系统把目录看成是一种特殊的文件，利用它构成文件系统的树型结构。  
设备文件： Linux系统把每一个设备都看成是一个文件  

普通文件（-）目录（d）符号链接（l）
* 进入etc可以查看，相当于快捷方式字符设备文件（c）块设备文件（s）套接字（s）命名管道（p）

chmod 变更文件或目录的权限。
chmod 755 a.txt 
chmod u=rwx,g=rx,o=rx a.txt

增加账户——useradd

删除账户

修改帐号

用户口令的管理

Linux磁盘管理常用三个命令为 df、du 和 fdisk

1、安装好了Java环境后我们可以测试下Tomcat！准备好Tomcat的安装包！
2、将文件移动到/usr/tomcat/下，并解压
3、运行Tomcat，进入bin目录，和我们以前在Windows下看的都是一样的
4、确保Linux的防火墙端口是开启的，如果是阿里云，需要保证阿里云的安全组策略是开放的

配置主机名

配置IP

重启网络

* 上传JDK
* 卸载open-JDK
 # 查看jdk版本
java –version
# 查看安装的jdk信息
rpm -qa | grep java
# 卸载jdk
rpm -e --nodeps java-1.6.0-openjdk-1.6.0.35-1.13.7.1.el6_6.i686
rpm -e --nodeps java-1.7.0-openjdk-1.7.0.79-2.5.5.4.el6.i686

一款很强大的http命令行工具。它支持文件的上传和下载，是综合传输工具
学习地址：https://www.cnblogs.com/duhuo/p/5695256.html

概述

Git配置

Git项目搭建

案例

概述

下载

常用命令

概念模型

概念

用于快速构建maven项目，一次构建多个项目和模块

=

<!-- 申明此处进行依赖管理--> 
<dependencyManagement>
<!--具体的依赖 --> 
<dependencies>
<!--spring环境 --> 
                 <dependency> 
                    <groupId>org.springframework</groupId> 
                    <artifactId>spring-context</artifactId> 
                    <version>5.1.9.RELEASE</version>
                 </dependency> 
    <dependencies> 
<dependencyManagement>

Java DataBase Connectivity  Java 数据库连接， Java语言操作数据库

* 步骤：
   1. 导入驱动jar包 mysql-connector-java-5.1.37-bin.jar
    1.复制mysql-connector-java-5.1.37-bin.jar到项目的libs目录下
    2.右键-->Add As Library
   2. 注册驱动
   3. 获取数据库连接对象 Connection
   4. 定义sql
   5. 获取执行sql语句的对象 Statement
   6. 执行sql，接受返回结果
   7. 处理结果
   8. 释放资源

代码实现：
     //1. 导入驱动jar包
         //2.注册驱动
         Class.forName("com.mysql.jdbc.Driver");
         //3.获取数据库连接对象
         Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/db3", "root", "root");
         //4.定义sql语句
         String sql = "update account set balance = 500 where id = 1";
         //5.获取执行sql的对象 Statement
         Statement stmt = conn.createStatement();
         //6.执行sql
         int count = stmt.executeUpdate(sql);
         //7.处理结果
         System.out.println(count);
         //8.释放资源
         stmt.close();
         conn.close();

1. DriverManager：驱动管理对象
   * 功能：
    1. 注册驱动：告诉程序该使用哪一个数据库驱动jar
     static void registerDriver(Driver driver) :注册与给定的驱动程序 DriverManager 。 
     写代码使用：  Class.forName("com.mysql.jdbc.Driver");
     通过查看源码发现：在com.mysql.jdbc.Driver类中存在静态代码块
      static {
             try {
                 java.sql.DriverManager.registerDriver(new Driver());
             } catch (SQLException E) {
                 throw new RuntimeException("Can't register driver!");
             }
         }
2. 获取数据库连接：
     * 方法：static Connection getConnection(String url, String user, String password) 
     * 参数：
      * url：指定连接的路径
       * 语法：jdbc:mysql://ip地址(域名):端口号/数据库名称
       * 例子：jdbc:mysql://localhost:3306/db3
       * 细节：如果连接的是本机mysql服务器，并且mysql服务默认端口是3306，则url可以简写为：jdbc:mysql:///数据库名称
      * user：用户名
      * password：密码

2. Connection：数据库连接对象
   1. 功能：
    1. 获取执行sql 的对象
     * Statement createStatement()
     * PreparedStatement prepareStatement(String sql)  
    2. 管理事务：
     * 开启事务：setAutoCommit(boolean autoCommit) ：调用该方法设置参数为false，即开启事务
     * 提交事务：commit() 
     * 回滚事务：rollback()

3. Statement：执行sql的对象
   1. 执行sql
    1. boolean execute(String sql) ：可以执行任意的sql 了解 
    2. int executeUpdate(String sql) ：执行DML（insert、update、delete）语句、DDL(create，alter、drop)语句
     * 返回值：影响的行数，可以通过这个影响的行数判断DML语句是否执行成功 返回值>0的则执行成功，反之，则失败。
    3. ResultSet executeQuery(String sql)  ：执行DQL（select)语句
   2. 练习：
    1. account表 添加一条记录
    2. account表 修改记录
    3. account表 删除一条记录

    代码：
     Statement stmt = null;
           Connection conn = null;
           try {
               //1. 注册驱动
               Class.forName("com.mysql.jdbc.Driver");
               //2. 定义sql
               String sql = "insert into account values(null,'王五',3000)";
               //3.获取Connection对象
               conn = DriverManager.getConnection("jdbc:mysql:///db3", "root", "root");
               //4.获取执行sql的对象 Statement
               stmt = conn.createStatement();
               //5.执行sql
               int count = stmt.executeUpdate(sql);//影响的行数
               //6.处理结果
               System.out.println(count);
               if(count > 0){
                   System.out.println("添加成功！");
               }else{
                   System.out.println("添加失败！");
               }
   
           } catch (ClassNotFoundException e) {
               e.printStackTrace();
           } catch (SQLException e) {
               e.printStackTrace();
           }finally {
               //stmt.close();
               //7. 释放资源
               //避免空指针异常
               if(stmt != null){
                   try {
                       stmt.close();
                   } catch (SQLException e) {
                       e.printStackTrace();
                   }
               }
   
               if(conn != null){
                   try {
                       conn.close();
                   } catch (SQLException e) {
                       e.printStackTrace();
                   }
               }
           }

4. ResultSet：结果集对象,封装查询结果
   * boolean next(): 游标向下移动一行，判断当前行是否是最后一行末尾(是否有数据)，如果是，则返回false，如果不是则返回true
   * getXxx(参数):获取数据
    * Xxx：代表数据类型   如： int getInt() , String getString()
    * 参数：
     1. int：代表列的编号,从1开始   如： getString(1)
     2. String：代表列名称。 如： getDouble("balance")
   
   * 注意：
    * 使用步骤：
     1. 游标向下移动一行
     2. 判断是否有数据
     3. 获取数据

       //循环判断游标是否是最后一行末尾。
              while(rs.next()){
                  //获取数据
                  //6.2 获取数据
                  int id = rs.getInt(1);
                  String name = rs.getString("name");
                  double balance = rs.getDouble(3);
  
                  System.out.println(id + "---" + name + "---" + balance);
              }

练习

5. PreparedStatement：执行sql的对象
   1. SQL注入问题：在拼接sql时，有一些sql的特殊关键字参与字符串的拼接。会造成安全性问题
    1. 输入用户随便，输入密码：a' or 'a' = 'a
    2. sql：select * from user where username = 'fhdsjkf' and password = 'a' or 'a' = 'a' 

   2. 解决sql注入问题：使用PreparedStatement对象来解决
   3. 预编译的SQL：参数使用?作为占位符
   4. 步骤：
    1. 导入驱动jar包 mysql-connector-java-5.1.37-bin.jar
    2. 注册驱动
    3. 获取数据库连接对象 Connection
    4. 定义sql
     * 注意：sql的参数使用？作为占位符。 如：select * from user where username = ? and password = ?;
    5. 获取执行sql语句的对象 PreparedStatement  Connection.prepareStatement(String sql) 
    6. 给？赋值：
     * 方法： setXxx(参数1,参数2)
      * 参数1：？的位置编号 从1 开始
      * 参数2：？的值
    7. 执行sql，接受返回结果，不需要传递sql语句
    8. 处理结果
    9. 释放资源

   5. 注意：后期都会使用PreparedStatement来完成增删改查的所有操作
    1. 可以防止SQL注入
    2. 效率更高

* 目的：简化书写
 * 分析：
  1. 注册驱动也抽取
  2. 抽取一个方法获取连接对象
   * 需求：不想传递参数（麻烦），还得保证工具类的通用性。
   * 解决：配置文件
    jdbc.properties
     url=
     user=
     password=


  3. 抽取一个方法释放资源

 * 代码实现：
  public class JDBCUtils {
     private static String url;
     private static String user;
     private static String password;
     private static String driver;
     /**
      * 文件的读取，只需要读取一次即可拿到这些值。使用静态代码块
      */
     static{
         //读取资源文件，获取值。
 
         try {
             //1. 创建Properties集合类。
             Properties pro = new Properties();
 
             //获取src路径下的文件的方式--->ClassLoader 类加载器
             ClassLoader classLoader = JDBCUtils.class.getClassLoader();
             URL res  = classLoader.getResource("jdbc.properties");
             String path = res.getPath();
             System.out.println(path);///D:/IdeaProjects/itcast/out/production/day04_jdbc/jdbc.properties
             //2. 加载文件
            // pro.load(new FileReader("D:\\IdeaProjects\\itcast\\day04_jdbc\\src\\jdbc.properties"));
             pro.load(new FileReader(path));
 
             //3. 获取数据，赋值
             url = pro.getProperty("url");
             user = pro.getProperty("user");
             password = pro.getProperty("password");
             driver = pro.getProperty("driver");
             //4. 注册驱动
             Class.forName(driver);
         } catch (IOException e) {
             e.printStackTrace();
         } catch (ClassNotFoundException e) {
             e.printStackTrace();
         }
     }
 
 
     /**
      * 获取连接
      * @return 连接对象
      */
     public static Connection getConnection() throws SQLException {
 
         return DriverManager.getConnection(url, user, password);
     }
 
     /**
      * 释放资源
      * @param stmt
      * @param conn
      */
     public static void close(Statement stmt,Connection conn){
         if( stmt != null){
             try {
                 stmt.close();
             } catch (SQLException e) {
                 e.printStackTrace();
             }
         }
 
         if( conn != null){
             try {
                 conn.close();
             } catch (SQLException e) {
                 e.printStackTrace();
             }
         }
     }
 
 
     /**
      * 释放资源
      * @param stmt
      * @param conn
      */
     public static void close(ResultSet rs,Statement stmt, Connection conn){
         if( rs != null){
             try {
                 rs.close();
             } catch (SQLException e) {
                 e.printStackTrace();
             }
         }
 
         if( stmt != null){
             try {
                 stmt.close();
             } catch (SQLException e) {
                 e.printStackTrace();
             }
         }
 
         if( conn != null){
             try {
                 conn.close();
             } catch (SQLException e) {
                 e.printStackTrace();
             }
         }
     }
 
 }

* 练习：
  * 需求：
   1. 通过键盘录入用户名和密码
   2. 判断用户是否登录成功
    * select * from user where username = "" and password = "";
    * 如果这个sql有查询结果，则成功，反之，则失败

  * 步骤：
   1. 创建数据库表 user
    CREATE TABLE USER(
     id INT PRIMARY KEY AUTO_INCREMENT,
     username VARCHAR(32),
     PASSWORD VARCHAR(32)
    
    );

    INSERT INTO USER VALUES(NULL,'zhangsan','123');
    INSERT INTO USER VALUES(NULL,'lisi','234');

   2. 代码实现：
    public class JDBCDemo9 {

        public static void main(String[] args) {
            //1.键盘录入，接受用户名和密码
            Scanner sc = new Scanner(System.in);
            System.out.println("请输入用户名：");
            String username = sc.nextLine();
            System.out.println("请输入密码：");
            String password = sc.nextLine();
            //2.调用方法
            boolean flag = new JDBCDemo9().login(username, password);
            //3.判断结果，输出不同语句
            if(flag){
                //登录成功
                System.out.println("登录成功！");
            }else{
                System.out.println("用户名或密码错误！");
            }
    
    
        }
    
    
    
        /**
         * 登录方法
         */
        public boolean login(String username ,String password){
            if(username == null || password == null){
                return false;
            }
            //连接数据库判断是否登录成功
            Connection conn = null;
            Statement stmt =  null;
            ResultSet rs = null;
            //1.获取连接
            try {
                conn =  JDBCUtils.getConnection();
                //2.定义sql
                String sql = "select * from user where username = '"+username+"' and password = '"+password+"' ";
                //3.获取执行sql的对象
                stmt = conn.createStatement();
                //4.执行查询
                rs = stmt.executeQuery(sql);
                //5.判断
               /* if(rs.next()){//如果有下一行，则返回true
                    return true;
                }else{
                    return false;
                }*/
               return rs.next();//如果有下一行，则返回true
    
            } catch (SQLException e) {
                e.printStackTrace();
            }finally {
                JDBCUtils.close(rs,stmt,conn);
            }
    
    
            return false;
        }
    }

事务

流程

使用Connection对象来管理事务

代码

概念：其实就是一个容器(集合)，存放数据库连接的容器。

好处

实现

C3P0

Druid

Spring JDBC

练习

. 文件标签：构成html最基本的标签
   * html:html文档的根标签
   * head：头标签。用于指定html文档的一些属性。引入外部的资源
   * title：标题标签。
   * body：体标签
   * <!DOCTYPE html>：html5中定义该文档是html文档

文本标签：和文本有关的标签
   * 注释：<!-- 注释内容 -->
   * <h1> to <h6>：标题标签
    * h1~h6:字体大小逐渐递减
   * <p>：段落标签
   * <br>：换行标签
   * <hr>：展示一条水平线
    * 属性：
     * color：颜色
     * width：宽度
     * size：高度
     * align：对其方式
      * center：居中
      * left：左对齐
      * right：右对齐
   * <b>：字体加粗
   * <i>：字体斜体
   * <font>:字体标签
   * <center>:文本居中
    * 属性：
     * color：颜色
     * size：大小
     * face：字体

   * 属性定义：
    * color：
     1. 英文单词：red,green,blue
     2. rgb(值1，值2，值3)：值的范围：0~255  如  rgb(0,0,255)
     3. #值1值2值3：值的范围：00~FF之间。如： #FF00FF
    * width：
     1. 数值：width='20' ,数值的单位，默认是 px(像素)
     2. 数值%：占比相对于父元素的比例

图片标签：
   * img：展示图片
    * 属性：
     * src：指定图片的位置

   * 代码：
     <!--展示一张图片 img-->

       <img src="image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="500"/>
   
       <!--
           相对路径
               * 以.开头的路径
                   * ./：代表当前目录  ./image/1.jpg
                   * ../:代表上一级目录
        -->
   
       <img src="./image/jiangwai_1.jpg">
   
       <img src="../image/jiangwai_1.jpg">

列表标签：
   * 有序列表：
    * ol:
    * li:
   * 无序列表：
    * ul:
    * li:

链接标签：
   * a:定义一个超链接
    * 属性：
     * href：指定访问资源的URL(统一资源定位符)
     * target：指定打开资源的方式
      * _self:默认值，在当前页面打开
      * _blank：在空白页面打开

   * 代码：
     <!--超链接  a-->

       <a href="http://www.itcast.cn">点我</a>
       <br>
   
       <a href="http://www.itcast.cn" target="_self">点我</a>
       <br>
       <a href="http://www.itcast.cn" target="_blank">点我</a>
   
       <br>
   
       <a href="./5_列表标签.html">列表标签</a><br>
       <a href="mailto:itcast@itcast.cn">联系我们</a>
   
       <br>
       <a href="http://www.itcast.cn"><img src="image/jiangwai_1.jpg"></a>

div和span：
   * div:每一个div占满一整行。块级标签
         * span：文本信息在一行展示，行内标签 内联标签

语义化标签：html5中为了提高程序的可读性，提供了一些标签。
   1. <header>：页眉
   2. <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：
                            1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
                            2. 请求参数大小是有限制的。
                            3. 不太安全。
                       * post：
                            2. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
                            2. 请求参数的大小没有限制。
                            3. 较为安全。

            * 表单项中的数据要想被提交：必须指定其name属性

Cascading Style Sheets 层叠样式表
  * 层叠：多个样式可以作用在同一个html的元素上，同时生效

1. 功能强大
  2. 将内容展示和样式控制分离
   * 降低耦合度。解耦
   * 让分工协作更容易
   * 提高开发效率

CSS的使用：CSS与html结合方式

* 格式：
   选择器 {
    属性名1:属性值1;
    属性名2:属性值2;
    ...
   }
  * 选择器:筛选具有相似特征的元素
  * 注意：
   * 每一对属性需要使用；隔开，最后一对属性可以不加；

分类

1. 字体、文本
   * font-size：字体大小
   * color：文本颜色
   * text-align：对其方式
   * line-height：行高 
  2. 背景
   * background：
  3. 边框
   * border：设置边框，符合属性
  4. 尺寸
   * width：宽度
   * height：高度
  5. 盒子模型：控制布局
   * margin：外边距
   * padding：内边距
    * 默认情况下内边距会影响整个盒子的大小
    * box-sizing: border-box;  设置盒子的属性，让width和height就是最终盒子的大小

   * float：浮动
    * left
    * right

<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>注册页面</title>
  <style>
      *{
          margin: 0px;
          padding: 0px;
          box-sizing: border-box;
      }
      body{
          background: url("img/register_bg.png") no-repeat center;
          padding-top: 25px;
      }
  
      .rg_layout{
          width: 900px;
          height: 500px;
          border: 8px solid #EEEEEE;
          background-color: white;
          /*让div水平居中*/
          margin: auto;
      }
  
      .rg_left{
          /*border: 1px solid red;*/
          float: left;
          margin: 15px;
      }
      .rg_left > p:first-child{
          color:#FFD026;
          font-size: 20px;
      }
  
      .rg_left > p:last-child{
          color:#A6A6A6;
          font-size: 20px;
  
      }
  
  
      .rg_center{
          float: left;
         /* border: 1px solid red;*/
  
      }
  
      .rg_right{
          /*border: 1px solid red;*/
          float: right;
          margin: 15px;
      }
  
      .rg_right > p:first-child{
          font-size: 15px;
  
      }
      .rg_right p a {
          color:pink;
      }
  
      .td_left{
          width: 100px;
          text-align: right;
          height: 45px;
      }
      .td_right{
          padding-left: 50px ;
      }
  
      #username,#password,#email,#name,#tel,#birthday,#checkcode{
          width: 251px;
          height: 32px;
          border: 1px solid #A6A6A6 ;
          /*设置边框圆角*/
          border-radius: 5px;
          padding-left: 10px;
      }
      #checkcode{
          width: 110px;
      }
  
      #img_check{
          height: 32px;
          vertical-align: middle;
      }
  
      #btn_sub{
          width: 150px;
          height: 40px;
          background-color: #FFD026;
          border: 1px solid #FFD026 ;
      }
  
  </style>
  
  </head>
  <body>
  
  <div class="rg_layout">
      <div class="rg_left">
          <p>新用户注册</p>
          <p>USER REGISTER</p>
  
      </div>
  
      <div class="rg_center">
          <div class="rg_form">
              <!--定义表单 form-->
              <form action="#" method="post">
                  <table>
                      <tr>
                          <td class="td_left"><label for="username">用户名</label></td>
                          <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
                      </tr>
  
                      <tr>
                          <td class="td_left"><label for="password">密码</label></td>
                          <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
                      </tr>
  
                      <tr>
                          <td class="td_left"><label for="email">Email</label></td>
                          <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
                      </tr>
  
                      <tr>
                          <td class="td_left"><label for="name">姓名</label></td>
                          <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
                      </tr>
  
                      <tr>
                          <td class="td_left"><label for="tel">手机号</label></td>
                          <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
                      </tr>
  
                      <tr>
                          <td class="td_left"><label>性别</label></td>
                          <td class="td_right">
                              <input type="radio" name="gender" value="male"> 男
                              <input type="radio" name="gender" value="female"> 女
                          </td>
                      </tr>
  
                      <tr>
                          <td class="td_left"><label for="birthday">出生日期</label></td>
                          <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
                      </tr>
  
                      <tr>
                          <td class="td_left"><label for="checkcode" >验证码</label></td>
                          <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
                              <img id="img_check" src="img/verify_code.jpg">
                          </td>
                      </tr>
  
  
                      <tr>
                          <td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册"></td>
                      </tr>
                  </table>
  
              </form>
  
  
          </div>
  
      </div>
  
      <div class="rg_right">
          <p>已有账号?<a href="#">立即登录</a></p>
      </div>
  
  
  </div>
  
  
  </body>
  </html>

练习：99乘法表
   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>99乘法表</title>
       <style>
           td{
               border: 1px solid;
           }
   
       </style>
   
       <script>
   
           document.write("<table  align='center'>");
   
   
           //1.完成基本的for循环嵌套，展示乘法表
           for (var i = 1; i <= 9 ; i++) {
               document.write("<tr>");
               for (var j = 1; j <=i ; j++) {
                   document.write("<td>");
   
                   //输出  1 * 1 = 1
                   document.write(i + " * " + j + " = " + ( i*j) +"&nbsp;&nbsp;&nbsp;");
   
                   document.write("</td>");
               }
               /*//输出换行
               document.write("<br>");*/
   
               document.write("</tr>");
           }
   
           //2.完成表格嵌套
           document.write("</table>");
   
       </script>
   </head>
   <body>
   
   </body>
   </html>

<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>电灯开关</title>
  
  </head>
  <body>
  
  <img id="light" src="img/off.gif">
  
  <script>
      /*
          分析：
              1.获取图片对象
              2.绑定单击事件
              3.每次点击切换图片
                  * 规则：
                      * 如果灯是开的 on,切换图片为 off
                      * 如果灯是关的 off,切换图片为 on
                  * 使用标记flag来完成
  
       */
  
      //1.获取图片对象
      var light = document.getElementById("light");
  
      var flag = false;//代表灯是灭的。 off图片
  
      //2.绑定单击事件
      light.onclick = function(){
          if(flag){//判断如果灯是开的，则灭掉
              light.src = "img/off.gif";
              flag = false;
  
          }else{
              //如果灯是灭的，则打开
  
              light.src = "img/on.gif";
              flag = true;
          }
  
  
      }
      
  </script>
  </body>
  </html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
</head>
<body>

    <img id="img" src="img/banner_1.jpg" width="100%">

    <script>
        /*
            分析：
                1.在页面上使用img标签展示图片
                2.定义一个方法，修改图片对象的src属性
                3.定义一个定时器，每隔3秒调用方法一次。
         */
        //修改图片src属性
        var number = 1;
        function fun(){
            number ++ ;
            //判断number是否大于3
            if(number > 3){
                number = 1;
            }
            //获取img对象
            var img = document.getElementById("img");
            img.src = "img/banner_"+number+".jpg";
        }
        //2.定义定时器
        setInterval(fun,3000);
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动跳转</title>
    <style>
        p{
            text-align: center;
        }
        span{
            color:red;
        }

    </style>


</head>
<body>
    <p>
        <span id="time">5</span>秒之后，自动跳转到首页...
    </p>


    <script>
        /*
            分析：
               1.显示页面效果  <p>
               2.倒计时读秒效果实现
                   2.1 定义一个方法，获取span标签，修改span标签体内容，时间--
                   2.2 定义一个定时器，1秒执行一次该方法
               3.在方法中判断时间如果<= 0 ，则跳转到首页

         */
       // 2.倒计时读秒效果实现

        var second = 5;
        var time = document.getElementById("time");

        //定义一个方法，获取span标签，修改span标签体内容，时间--
        function showTime(){
            second -- ;
            //判断时间如果<= 0 ，则跳转到首页
            if(second <= 0){
                //跳转到首页
                location.href = "https://www.baidu.com";
            }

            time.innerHTML = second +"";
        }


        //设置定时器，1秒执行一次该方法
        setInterval(showTime,1000);



    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>

    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>

</head>
<body>

<div>
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name"  placeholder="请输入姓名">
    <input type="text" id="gender"  placeholder="请输入性别">
    <input type="button" value="添加" id="btn_add">

</div>


<table>
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>

    <tr>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>

    <tr>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);" >删除</a></td>
    </tr>


</table>


<script>
    /*
        分析：
            1.添加：
                1. 给添加按钮绑定单击事件
                2. 获取文本框的内容
                3. 创建td，设置td的文本为文本框的内容。
                4. 创建tr
                5. 将td添加到tr中
                6. 获取table，将tr添加到table中
            2.删除：
                1.确定点击的是哪一个超链接
                    <a href="javascript:void(0);" onclick="delTr(this);" >删除</a>
                2.怎么删除？
                    removeChild():通过父节点删除子节点

     */

    //1.获取按钮
   /* document.getElementById("btn_add").onclick = function(){
        //2.获取文本框的内容
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;

        //3.创建td，赋值td的标签体
        //id 的 td
        var td_id = document.createElement("td");
        var text_id = document.createTextNode(id);
        td_id.appendChild(text_id);
        //name 的 td
        var td_name = document.createElement("td");
        var text_name = document.createTextNode(name);
        td_name.appendChild(text_name);
        //gender 的 td
        var td_gender = document.createElement("td");
        var text_gender = document.createTextNode(gender);
        td_gender.appendChild(text_gender);
        //a标签的td
        var td_a = document.createElement("td");
        var ele_a = document.createElement("a");
        ele_a.setAttribute("href","javascript:void(0);");
        ele_a.setAttribute("onclick","delTr(this);");
        var text_a = document.createTextNode("删除");
        ele_a.appendChild(text_a);
        td_a.appendChild(ele_a);

        //4.创建tr
        var tr = document.createElement("tr");
        //5.添加td到tr中
        tr.appendChild(td_id);
        tr.appendChild(td_name);
        tr.appendChild(td_gender);
        tr.appendChild(td_a);
        //6.获取table
        var table = document.getElementsByTagName("table")[0];
        table.appendChild(tr);
    }*/

   //使用innerHTML添加
    document.getElementById("btn_add").onclick = function() {
        //2.获取文本框的内容
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;

        //获取table
        var table = document.getElementsByTagName("table")[0];

        //追加一行
        table.innerHTML += "<tr>\n" +
            "        <td>"+id+"</td>\n" +
            "        <td>"+name+"</td>\n" +
            "        <td>"+gender+"</td>\n" +
            "        <td><a href=\"javascript:void(0);\" onclick=\"delTr(this);\" >删除</a></td>\n" +
            "    </tr>";
    }


    //删除方法
    function delTr(obj){
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;

        table.removeChild(tr);
    }


</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格全选</title>
    <style>
        table{
            border: 1px solid;
            width: 500px;
            margin-left: 30%;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            margin-top: 10px;
            margin-left: 30%;
        }

        .out{
            background-color: white;
        }
        .over{
            background-color: pink;
        }
    </style>

  <script>
      /*
        分析：
            1.全选：
                * 获取所有的checkbox
                * 遍历cb，设置每一个cb的状态为选中  checked

       */


      //1.在页面加载完后绑定事件
      window.onload = function(){
          //2.给全选按钮绑定单击事件
          document.getElementById("selectAll").onclick = function(){
                //全选
                //1.获取所有的checkbox
                var cbs = document.getElementsByName("cb");
                //2.遍历
                  for (var i = 0; i < cbs.length; i++) {
                      //3.设置每一个cb的状态为选中  checked
                      cbs[i].checked = true;
                  }
          }

          document.getElementById("unSelectAll").onclick = function(){
              //全不选
              //1.获取所有的checkbox
              var cbs = document.getElementsByName("cb");
              //2.遍历
              for (var i = 0; i < cbs.length; i++) {
                  //3.设置每一个cb的状态为未选中  checked
                  cbs[i].checked = false;
              }
          }

          document.getElementById("selectRev").onclick = function(){
              //反选
              //1.获取所有的checkbox
              var cbs = document.getElementsByName("cb");
              //2.遍历
              for (var i = 0; i < cbs.length; i++) {
                  //3.设置每一个cb的状态为相反
                  cbs[i].checked = !cbs[i].checked;
              }
          }

          document.getElementById("firstCb").onclick = function(){
              //第一个cb点击
              //1.获取所有的checkbox
              var cbs = document.getElementsByName("cb");
              //获取第一个cb

              //2.遍历
              for (var i = 0; i < cbs.length; i++) {
                  //3.设置每一个cb的状态和第一个cb的状态一样
                  cbs[i].checked =  this.checked;
              }
          }

          //给所有tr绑定鼠标移到元素之上和移出元素事件
          var trs = document.getElementsByTagName("tr");
          //2.遍历
          for (var i = 0; i < trs.length; i++) {
              //移到元素之上
              trs[i].onmouseover = function(){
                    this.className = "over";
              }

              //移出元素
              trs[i].onmouseout = function(){
                     this.className = "out";
              }

          }

      }



  </script>

</head>
<body>

<table>
    <caption>学生信息表</caption>
    <tr>
        <th><input type="checkbox" name="cb" id="firstCb"></th>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td><input type="checkbox"  name="cb" ></td>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox"  name="cb" ></td>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox"  name="cb" ></td>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

</table>
<div>
    <input type="button" id="selectAll" value="全选">
    <input type="button" id="unSelectAll" value="全不选">
    <input type="button" id="selectRev" value="反选">
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
<style>
    *{
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }
    body{
        background: url("img/register_bg.png") no-repeat center;
        padding-top: 25px;
    }

    .rg_layout{
        width: 900px;
        height: 500px;
        border: 8px solid #EEEEEE;
        background-color: white;
        /*让div水平居中*/
        margin: auto;
    }

    .rg_left{
        /*border: 1px solid red;*/
        float: left;
        margin: 15px;
    }
    .rg_left > p:first-child{
        color:#FFD026;
        font-size: 20px;
    }

    .rg_left > p:last-child{
        color:#A6A6A6;
        font-size: 20px;

    }


    .rg_center{
        float: left;
       /* border: 1px solid red;*/

    }

    .rg_right{
        /*border: 1px solid red;*/
        float: right;
        margin: 15px;
    }

    .rg_right > p:first-child{
        font-size: 15px;

    }
    .rg_right p a {
        color:pink;
    }

    .td_left{
        width: 100px;
        text-align: right;
        height: 45px;
    }
    .td_right{
        padding-left: 50px ;
    }

    #username,#password,#email,#name,#tel,#birthday,#checkcode{
        width: 251px;
        height: 32px;
        border: 1px solid #A6A6A6 ;
        /*设置边框圆角*/
        border-radius: 5px;
        padding-left: 10px;
    }
    #checkcode{
        width: 110px;
    }

    #img_check{
        height: 32px;
        vertical-align: middle;
    }

    #btn_sub{
        width: 150px;
        height: 40px;
        background-color: #FFD026;
        border: 1px solid #FFD026 ;
    }
    .error{
        color:red;
    }
    #td_sub{
        padding-left: 150px;
    }

</style>
<script>

    /*
        分析：
            1.给表单绑定onsubmit事件。监听器中判断每一个方法校验的结果。
                如果都为true，则监听器方法返回true
                如果有一个为false，则监听器方法返回false

            2.定义一些方法分别校验各个表单项。
            3.给各个表单项绑定onblur事件。



     */

    window.onload = function(){
        //1.给表单绑定onsubmit事件
        document.getElementById("form").onsubmit = function(){
            //调用用户校验方法   chekUsername();
            //调用密码校验方法   chekPassword();
            //return checkUsername() && checkPassword();

            return checkUsername() && checkPassword();
        }

        //给用户名和密码框分别绑定离焦事件
        document.getElementById("username").onblur = checkUsername;
        document.getElementById("password").onblur = checkPassword;
    }

    //校验用户名
    function checkUsername(){
        //1.获取用户名的值
        var username = document.getElementById("username").value;
        //2.定义正则表达式
        var reg_username = /^\w{6,12}$/;
        //3.判断值是否符合正则的规则
        var flag = reg_username.test(username);
        //4.提示信息
        var s_username = document.getElementById("s_username");

        if(flag){
            //提示绿色对勾
            s_username.innerHTML = "<img width='35' height='25' src='img/gou.png'/>";
        }else{
            //提示红色用户名有误
            s_username.innerHTML = "用户名格式有误";
        }
        return flag;
    }

    //校验密码
    function checkPassword(){
        //1.获取用户名的值
        var password = document.getElementById("password").value;
        //2.定义正则表达式
        var reg_password = /^\w{6,12}$/;
        //3.判断值是否符合正则的规则
        var flag = reg_password.test(password);
        //4.提示信息
        var s_password = document.getElementById("s_password");

        if(flag){
            //提示绿色对勾
            s_password.innerHTML = "<img width='35' height='25' src='img/gou.png'/>";
        }else{
            //提示红色用户名有误
            s_password.innerHTML = "密码格式有误";
        }
        return flag;
    }



</script>
</head>
<body>

<div class="rg_layout">
    <div class="rg_left">
        <p>新用户注册</p>
        <p>USER REGISTER</p>

    </div>

    <div class="rg_center">
        <div class="rg_form">
            <!--定义表单 form-->
            <form action="#" id="form" method="get">
                <table>
                    <tr>
                        <td class="td_left"><label for="username">用户名</label></td>
                        <td class="td_right">
                            <input type="text" name="username" id="username" placeholder="请输入用户名">
                            <span id="s_username" class="error"></span>
                        </td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="password">密码</label></td>
                        <td class="td_right">
                            <input type="password" name="password" id="password" placeholder="请输入密码">
                            <span id="s_password" class="error"></span>
                        </td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="email">Email</label></td>
                        <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="name">姓名</label></td>
                        <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="tel">手机号</label></td>
                        <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label>性别</label></td>
                        <td class="td_right">
                            <input type="radio" name="gender" value="male" checked> 男
                            <input type="radio" name="gender" value="female"> 女
                        </td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="birthday">出生日期</label></td>
                        <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="checkcode" >验证码</label></td>
                        <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
                            <img id="img_check" src="img/verify_code.jpg">
                        </td>
                    </tr>


                    <tr>
                        <td colspan="2" id="td_sub"><input type="submit" id="btn_sub" value="注册"></td>
                    </tr>
                </table>

            </form>


        </div>

    </div>

    <div class="rg_right">
        <p>已有账号?<a href="#">立即登录</a></p>
    </div>


</div>


</body>
</html>

常见的事件：
  1. 点击事件：
   1. onclick：单击事件
   2. ondblclick：双击事件
  2. 焦点事件
   1. onblur：失去焦点
   2. onfocus:元素获得焦点。

  3. 加载事件：
   1. onload：一张页面或一幅图像完成加载。

  4. 鼠标事件：
   1. onmousedown 鼠标按钮被按下。
   2. onmouseup 鼠标按键被松开。
   3. onmousemove 鼠标被移动。
   4. onmouseover 鼠标移到某元素之上。
   5. onmouseout 鼠标从某元素移开。
   
   
  5. 键盘事件：
   1. onkeydown 某个键盘按键被按下。 
   2. onkeyup  某个键盘按键被松开。
   3. onkeypress 某个键盘按键被按下并松开。

  6. 选择和改变
   1. onchange 域的内容被改变。
   2. onselect 文本被选中。

  7. 表单事件：
   1. onsubmit 确认按钮被点击。
   2. onreset 重置按钮被点击。

一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。
Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。

* 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。
  * 好处：
   1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
   2. 响应式布局。
    * 同一套页面可以兼容不同分辨率的设备。

步骤

示例

实现

步骤

全局CSS样式

组件

插件

<!DOCTYPE html>
 <html lang="zh-CN">
 <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
     <title>Bootstrap HelloWorld</title>
 
     <!-- Bootstrap -->
     <link href="css/bootstrap.min.css" rel="stylesheet">
 
 
     <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
     <script src="js/jquery-3.2.1.min.js"></script>
     <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
     <script src="js/bootstrap.min.js"></script>
     <style>
         .paddtop{
             padding-top: 10px;
         }
         .search-btn{
             float: left;
             border:1px solid #ffc900;
             width: 90px;
             height: 35px;
             background-color:#ffc900 ;
             text-align: center;
             line-height: 35px;
             margin-top: 15px;
         }
 
         .search-input{
             float: left;
             border:2px solid #ffc900;
             width: 400px;
             height: 35px;
             padding-left: 5px;
             margin-top: 15px;
         }
         .jx{
             border-bottom: 2px solid #ffc900;
             padding: 5px;
         }
         .company{
             height: 40px;
             background-color: #ffc900;
             text-align: center;
             line-height:40px ;
             font-size: 8px;
         }
     </style>
 </head>
 <body>
 
    <!-- 1.页眉部分-->
    <header class="container-fluid">
        <div class="row">
            <img src="img/top_banner.jpg" class="img-responsive">
        </div>
        <div class="row paddtop">
            <div class="col-md-3">
                <img src="img/logo.jpg" class="img-responsive">
            </div>
            <div class="col-md-5">
                <input class="search-input" placeholder="请输入线路名称">
                <a class="search-btn" href="#">搜索</a>
            </div>
            <div class="col-md-4">
                <img src="img/hotel_tel.png" class="img-responsive">
            </div>
 
        </div>
        <!--导航栏-->
        <div class="row">
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <!-- 定义汉堡按钮 -->
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">首页</a>
                    </div>
 
                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
 
                        </ul>
                    </div><!-- /.navbar-collapse -->
                </div><!-- /.container-fluid -->
            </nav>
 
        </div>
 
        <!--轮播图-->
        <div class="row">
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                </ol>
 
                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img src="img/banner_1.jpg" alt="...">
                    </div>
                    <div class="item">
                        <img src="img/banner_2.jpg" alt="...">
                    </div>
                    <div class="item">
                        <img src="img/banner_3.jpg" alt="...">
                    </div>
 
                </div>
 
                <!-- Controls -->
                <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
 
 
 
        </div>
 
    </header>
    <!-- 2.主体部分-->
    <div class="container">
         <div class="row jx">
             <img src="img/icon_5.jpg">
             <span>黑马精选</span>
         </div>
 
        <div class="row paddtop">
            <div class="col-md-3">
                 <div class="thumbnail">
                     <img src="img/jiangxuan_3.jpg" alt="">
                     <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                     <font color="red">&yen; 699</font>
                 </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="img/jiangxuan_3.jpg" alt="">
                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                    <font color="red">&yen; 699</font>
                </div>
 
            </div>
            <div class="col-md-3">
 
                <div class="thumbnail">
                    <img src="img/jiangxuan_3.jpg" alt="">
                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                    <font color="red">&yen; 699</font>
                </div>
            </div>
            <div class="col-md-3">
 
                <div class="thumbnail">
                    <img src="img/jiangxuan_3.jpg" alt="">
                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                    <font color="red">&yen; 699</font>
                </div>
            </div>
 
 
        </div>
        <div class="row jx">
            <img src="img/icon_6.jpg">
            <span>国内游</span>
        </div>
        <div class="row paddtop">
            <div class="col-md-4">
                <img src="img/guonei_1.jpg">
            </div>
            <div class="col-md-8">
                <div class="row">
                    <div class="col-md-4">
                        <div class="thumbnail">
                            <img src="img/jiangxuan_3.jpg" alt="">
                            <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                            <font color="red">&yen; 699</font>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="thumbnail">
                            <img src="img/jiangxuan_3.jpg" alt="">
                            <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                            <font color="red">&yen; 699</font>
                        </div>
 
                    </div>
                    <div class="col-md-4">
 
                        <div class="thumbnail">
                            <img src="img/jiangxuan_3.jpg" alt="">
                            <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                            <font color="red">&yen; 699</font>
                        </div>
                    </div>
 
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="thumbnail">
                            <img src="img/jiangxuan_3.jpg" alt="">
                            <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                            <font color="red">&yen; 699</font>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="thumbnail">
                            <img src="img/jiangxuan_3.jpg" alt="">
                            <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                            <font color="red">&yen; 699</font>
                        </div>
 
                    </div>
                    <div class="col-md-4">
 
                        <div class="thumbnail">
                            <img src="img/jiangxuan_3.jpg" alt="">
                            <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                            <font color="red">&yen; 699</font>
                        </div>
                    </div>
 
 
                </div>
 
            </div>
 
        </div>
    </div>
    <!-- 3.页脚部分-->
    <footer class="container-fluid">
        <div class="row">
            <img src="img/footer_service.png" class="img-responsive">
        </div>
        <div class="row company">
            江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2018, All Rights Reserved 苏ICP备16007882
        </div>
 
    </footer>
 
 
 </body>
 </html>

黑马旅游网

Extensible Markup Language 可扩展标记语言

* 可扩展：标签都是自定义的。 <user>  <student>

基本语法

快速入门

组成部分

约束

操作xml文档

解析xml方式

xml的常见解析器

Jsoup

对象的使用

快捷查询方式

软件架构

资源分类

网络传输的三要素

web服务器软件

常见Java服务器相关的web服务器软件

概述

下载

安装

卸载

启动

关闭

配置

概念：运行在服务器端的小程序

快速入门

执行原理

servlet中的生命周期方法

Servlet3.0

idea与Tomcat的相关配置

servlet相关配置

概念

传输协议

历史版本

请求消息数据格式
  1. 请求行
   请求方式 请求url 请求协议/版本
   GET /login.html HTTP/1.1

   * 请求方式：
    * HTTP协议有7中请求方式，常用的有2种
     * GET：
      1. 请求参数在请求行中，在url后。
      2. 请求的url长度有限制的
      3. 不太安全
     * POST：
      1. 请求参数在请求体中
      2. 请求的url长度没有限制的
      3. 相对安全

request对象和response对象的原理

request对象的继承体系架构

request功能

其它功能

案例

BeanUtils

服务器端发送给客户端的数据

1. 响应行
    1. 组成：协议/版本 响应状态码 状态码描述
    2. 响应状态码：服务器告诉客户端浏览器本次请求和响应的一个状态。
     1. 状态码都是3位数字 
     2. 分类：
      1. 1xx：服务器就收客户端消息，但没有接受完成，等待一段时间后，发送1xx多状态码
      2. 2xx：成功。代表：200
      3. 3xx：重定向。代表：302(重定向)，304(访问缓存)
      4. 4xx：客户端错误。
       * 代表：
        * 404（请求路径没有对应的资源） 
        * 405：请求方式没有对应的doXxx方法
      5. 5xx：服务器端错误。代表：500(服务器内部出现异常)

2. 响应头：
    1. 格式：头名称： 值
    2. 常见的响应头：
     1. Content-Type：服务器告诉客户端本次响应体数据格式以及编码格式
     2. Content-disposition：服务器告诉客户端以什么格式打开响应体数据
      * 值：
       * in-line:默认值,在当前页面内打开
       * attachment;filename=xxx：以附件形式打开响应体。文件下载
   3. 响应空行
   4. 响应体:传输的数据

* 响应字符串格式
   HTTP/1.1 200 OK
   Content-Type: text/html;charset=UTF-8
   Content-Length: 101
   Date: Wed, 06 Jun 2018 07:08:42 GMT
 
   <html>
     <head>
       <title>$Title$</title>
     </head>
     <body>
     hello , response
     </body>
   </html>

* 功能：设置响应消息
  1. 设置响应行
   1. 格式：HTTP/1.1 200 ok
   2. 设置状态码：setStatus(int sc) 
  2. 设置响应头：setHeader(String name, String value) 
   
  3. 设置响应体：
   * 使用步骤：
    1. 获取输出流
     * 字符输出流：PrintWriter getWriter()

     * 字节输出流：ServletOutputStream getOutputStream()

    2. 使用输出流，将数据输出到客户端浏览器

案例

1. 会话：一次会话中包含多次请求和响应。
  * 一次会话：浏览器第一次给服务器资源发送请求，会话建立，直到有一方断开为止
 2. 功能：在一次会话的范围内的多次请求间，共享数据
 3. 方式：
  1. 客户端会话技术：Cookie
  2. 服务器端会话技术：Session

概念

快速入门

实现原理

cookie细节

Cookie的特点和作用

案例

概念

快速入门

原理

细节

特点

案例

指令

注释

内置对象

概念

作用

注意

语法

使用

概念

作用

使用步骤

常用JSTL标签

练习

1. M：Model，模型。JavaBean
   * 完成具体的业务操作，如：查询数据库，封装对象
  2. V：View，视图。JSP
   * 展示数据
  3. C：Controller，控制器。Servlet
   * 获取用户的输入
   * 调用模型
   * 将数据交给视图进行展示


  * 优缺点：
   1. 优点：
    1. 耦合性低，方便维护，可以利于分工协作
    2. 重用性高

   2. 缺点：
    1. 使得项目架构变得复杂，对开发人员要求高

概念

快速入门

过滤器细节

案例

* 概念：web的三大组件之一。
  * 事件监听机制
   * 事件 ：一件事情
   * 事件源 ：事件发生的地方
   * 监听器 ：一个对象
   * 注册监听：将事件、事件源、监听器绑定在一起。 当事件源上发生某个事件后，执行监听器代码


 * ServletContextListener:监听ServletContext对象的创建和销毁
  * 方法：
   * void contextDestroyed(ServletContextEvent sce) ：ServletContext对象被销毁之前会调用该方法
   * void contextInitialized(ServletContextEvent sce) ：ServletContext对象创建后会调用该方法
  * 步骤：
   1. 定义一个类，实现ServletContextListener接口
   2. 复写方法
   3. 配置
    1. web.xml
      <listener>
           <listener-class>cn.itcast.web.listener.ContextLoaderListener</listener-class>
         </listener>

      * 指定初始化参数<context-param>
    2. 注解：
     * @WebListener

概念

快速入门

JQuery和js对象区别与转换

选择器

Dom操作

案例

动画

遍历

数据绑定

案例

插件

概念

实现方式

概念

语法

转换

案例

Nginx 是一款高性能的 http 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。由俄罗斯的程序设计师伊戈尔·西索夫（Igor Sysoev）所开发，官方测试 nginx 能够支支撑 5 万并发链接，并且 cpu、内存等资源消耗却非常低，运行非常稳定。

1、http 服务器。Nginx 是一个 http 服务可以独立提供 http 服务。可以做网页静态服务器。
2、虚拟主机。可以实现在一台服务器虚拟出多个网站。例如个人网站使用的虚拟主机。
3、反向代理，负载均衡。当网站的访问量达到一定程度后，单台服务器不能满足用户的请求时，需要用多台服务器集群可以使用 nginx 做反向代理。并且多台服务器可以平均分担负载，不会因为某台服务器负载高宕机而某台服务器闲置的情况。

环境准备

下载

安装步骤

进入到Nginx目录下的sbin目录
cd /usr/local/ngiux/sbin
输入命令启动Nginx
./nginx
启动后查看进程
ps aux|grep nginx

关闭

将/资料/静态页面/index目录下的所有内容 上传到服务器的/usr/local/nginx/html下即可访问

配置虚拟主机

端口绑定

什么是域名

域名和IP绑定

反向代理

负载均衡

什么是正则表达式？

基本匹配

元字符

整数或者小数

只能输入数字

只能输入n位的数字

只能输入至少n位的数字

只能输入m~n位的数字

只能输入零和非零开头的数字

只能输入有两位小数的正实数

只能输入有1~3位小数的正实数

只能输入非零的正整数

只能输入非零的负整数

只能输入长度为3的字符

只能输入由26个英文字母组成的字符串

只能输入由26个大写英文字母组成的字符串

只能输入由26个小写英文字母组成的字符串

只能输入由数字和26个英文字母组成的字符串

只能输入由数字、26个英文字母或者下划线组成的字符串

验证用户密码：

注：正确格式为：以字母开头，长度在6~18之间，只能包含字符、数字和下划线。

验证是否含有^%&',;=?$\等字符

只能输入汉字

验证Email地址

验证Internet URL

验证电话号码

验证身份证号（15位或18位数字）

验证一年的12个月

验证一个月的31天

匹配中文字符的正则表达式

匹配双字节字符(包括汉字在内)

匹配空行的正则表达式

匹配html标签的正则表达式

匹配首尾空格的正则表达式

匹配Email地址的正则表达式

匹配HTML标记的正则表达式

匹配首尾空白字符的正则表达式

匹配Email地址的正则表达式

匹配网址URL的正则表达式

匹配帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)

匹配国内电话号码

匹配腾讯QQ号

匹配中国邮政编码

匹配身份证

匹配ip地址

匹配特定数字

匹配特定字符串

校验密码强度
包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间。

校验字符串

时间正则案例

https://www.pppet.net/

Cron表达式是一个字符串，字符串以5或6个空格隔开，分为6或7个域，每一个域代表一个含义，Cron有如下两种语法格式： 
Seconds Minutes Hours DayofMonth Month DayofWeek Year或
Seconds Minutes Hours DayofMonth Month DayofWeek

每一个域可出现的字符如下：
Seconds:可出现", - * /"四个字符，有效范围为0-59的整数
Minutes:可出现", - * /"四个字符，有效范围为0-59的整数
Hours:可出现", - * /"四个字符，有效范围为0-23的整数
DayofMonth:可出现", - * / ? L W C"八个字符，有效范围为0-31的整数
Month:可出现", - * /"四个字符，有效范围为1-12的整数或JAN-DEc
DayofWeek:可出现", - * / ? L C #"四个字符，有效范围为1-7的整数或SUN-SAT两个范围。1表示星期天，2表示星期一， 依次类推
Year:可出现", - * /"四个字符，有效范围为1970-2099年

每一个域都使用数字，但还可以出现如下特殊字符，它们的含义是：
(1)*：表示匹配该域的任意值，假如在Minutes域使用*, 即表示每分钟都会触发事件。
(2)?:只能用在DayofMonth和DayofWeek两个域。它也匹配域的任意值，但实际不会。因为DayofMonth和 DayofWeek会相互影响。例如想在每月的20日触发调度，不管20日到底是星期几，则只能使用如下写法： 13 13 15 20 * ?, 其中最后一位只能用？，而不能使用*，如果使用*表示不管星期几都会触发，实际上并不是这样。
(3)-:表示范围，例如在Minutes域使用5-20，表示从5分到20分钟每分钟触发一次
(4)/：表示起始时间开始触发，然后每隔固定时间触发一次，例如在Minutes域使用5/20,则意味着5分钟触发一次，而25，45等分别触发一次.
(5),:表示列出枚举值值。例如：在Minutes域使用5,20，则意味着在5和20分每分钟触发一次。
(6)L:表示最后，只能出现在DayofWeek和DayofMonth域，如果在DayofWeek域使用5L,意味着在最后的一个星期四触发。
(7)W: 表示有效工作日(周一到周五),只能出现在DayofMonth域，系统将在离指定日期的最近的有效工作日触发事件。例如：在 DayofMonth使用5W，如果5日是星期六，则将在最近的工作日：星期五，即4日触发。如果5日是星期天，则在6日(周一)触发；如果5日在星期一 到星期五中的一天，则就在5日触发。另外一点，W的最近寻找不会跨过月份
(8)LW:这两个字符可以连用，表示在某个月最后一个工作日，即最后一个星期五。
(9)#:用于确定每个月第几个星期几，只能出现在DayofMonth域。例如在4#2，表示某月的第二个星期三。

举几个例子:
0 0 2 1 * ? * 表示在每月的1日的凌晨2点调度任务
0 15 10 ? * MON-FRI 表示周一到周五每天上午10：15执行作业
0 15 10 ? 6L 2002-2006 表示2002-2006年的每个月的最后一个星期五上午10:15执行作
一个cron表达式有至少6个（也可能7个）有空格分隔的时间元素。
按顺序依次为
秒（0~59）
分钟（0~59）
小时（0~23）
天（月）（0~31，但是你需要考虑你月的天数）
月（0~11）
天（星期）（1~7 1=SUN 或 SUN，MON，TUE，WED，THU，FRI，SAT）
年份（1970－2099）

其中每个元素可以是一个值(如6),一个连续区间(9-12),一个间隔时间(8-18/4)(/表示每隔4小时),一个列表(1,3,5),通配符。由于"月份中的日期"和"星期中的日期"这两个元素互斥的,必须要对其中一个设置?

0 0 10,14,16 * * ? 每天上午10点，下午2点，4点
0 0/30 9-17 * * ? 朝九晚五工作时间内每半小时
0 0 12 ? * WED 表示每个星期三中午12点
"0 0 12 * * ?" 每天中午12点触发
"0 15 10 ? * *" 每天上午10:15触发
"0 15 10 * * ?" 每天上午10:15触发
"0 15 10 * * ? *" 每天上午10:15触发
"0 15 10 * * ? 2005" 2005年的每天上午10:15触发
"0 * 14 * * ?" 在每天下午2点到下午2:59期间的每1分钟触发
"0 0/5 14 * * ?" 在每天下午2点到下午2:55期间的每5分钟触发
"0 0/5 14,18 * * ?" 在每天下午2点到2:55期间和下午6点到6:55期间的每5分钟触发
"0 0-5 14 * * ?" 在每天下午2点到下午2:05期间的每1分钟触发
"0 10,44 14 ? 3 WED" 每年三月的星期三的下午2:10和2:44触发
"0 15 10 ? * MON-FRI" 周一至周五的上午10:15触发
"0 15 10 15 * ?" 每月15日上午10:15触发
"0 15 10 L * ?" 每月最后一日的上午10:15触发
"0 15 10 ? * 6L" 每月的最后一个星期五上午10:15触发
"0 15 10 ? * 6L 2002-2005" 2002年至2005年的每月的最后一个星期五上午10:15触发
"0 15 10 ? * 6#3" 每月的第三个星期五上午10:15触发

有些子表达式能包含一些范围或列表
例如：子表达式（天（星期））可以为 “MON-FRI”，“MON，WED，FRI”，“MON-WED,SAT”
“*”字符代表所有可能的值
因此，“*”在子表达式（月）里表示每个月的含义，“*”在子表达式（天（星期））表示星期的每一天
“/”字符用来指定数值的增量
例如：在子表达式（分钟）里的“0/15”表示从第0分钟开始，每15分钟
在子表达式（分钟）里的“3/20”表示从第3分钟开始，每20分钟（它和“3，23，43”）的含义一样
“？”字符仅被用于天（月）和天（星期）两个子表达式，表示不指定值
当2个子表达式其中之一被指定了值以后，为了避免冲突，需要将另一个子表达式的值设为“？”
“L” 字符仅被用于天（月）和天（星期）两个子表达式，它是单词“last”的缩写
但是它在两个子表达式里的含义是不同的。
在天（月）子表达式中，“L”表示一个月的最后一天
在天（星期）自表达式中，“L”表示一个星期的最后一天，也就是SAT
如果在“L”前有具体的内容，它就具有其他的含义了
例如：“6L”表示这个月的倒数第６天，“FRIL”表示这个月的最一个星期五
注意：在使用“L”参数时，不要指定列表或范围，因为这会导致问题

字段 允许值 允许的特殊字符
秒 0-59 , - * /
分 0-59 , - * /
小时 0-23 , - * /
日期 1-31 , - * ? / L W C
月份 1-12 或者 JAN-DEC , - * /
星期 1-7 或者 SUN-SAT , - * ? / L C #
年（可选） 留空, 1970-2099 , - * /

Cron表达式范例：

                 每隔5秒执行一次：*/5 * * * * ?

                 每隔1分钟执行一次：0 */1 * * * ?

                 每天23点执行一次：0 0 23 * * ?

                 每天凌晨1点执行一次：0 0 1 * * ?

                 每月1号凌晨1点执行一次：0 0 1 1 * ?

                 每月最后一天23点执行一次：0 0 23 L * ?

                 每周星期天凌晨1点实行一次：0 0 1 ? * L

                 在26分、29分、33分执行一次：0 26,29,33 * * * ?

                 每天的0点、13点、18点、21点都执行一次：0 0 0,13,18,21 * * ?

单机模式

伪分布模式

全分布式

数据模型

服务端常用命令

客户端常用命令

Curator

Apache POI是用Java编写的免费开源的跨平台的Java API，
Apache POI提供API给Java程序对Microsoft Office格式档
案读和写的功能，其中使用最多的就是使用POI操作Excel文件。

jxl：专门操作Excel

<dependency>
  <groupId>org.apache.poi</groupId>
  <artifactId>poi</artifactId>
  <version>3.14</version>
</dependency>
<dependency>
  <groupId>org.apache.poi</groupId>
  <artifactId>poi-ooxml</artifactId>
  <version>3.14</version>
</dependency>

HSSF － 提供读写Microsoft Excel XLS格式档案的功能

XSSF － 提供读写Microsoft Excel OOXML XLSX格式档案的功能

HWPF － 提供读写Microsoft Word DOC格式档案的功能

HSLF － 提供读写Microsoft PowerPoint格式档案的功能

HDGF － 提供读Microsoft Visio格式档案的功能

HPBF － 提供读Microsoft Publisher格式档案的功能

HSMF － 提供读Microsoft Outlook格式档案的功能

一个Excel文件对应于一个workbook(HSSFWorkbook)，
一个workbook可以有多个sheet（HSSFSheet）组成，
一个sheet是由多个row（HSSFRow）组成，
一个row是由多个cell（HSSFCell）组成

<dependency>
  <groupId>com.lowagie</groupId>
  <artifactId>itext</artifactId>
  <version>2.1.7</version>
</dependency>

import com.lowagie.text.Document;
import com.lowagie.text.DocumentException;
import com.lowagie.text.Paragraph;
import com.lowagie.text.pdf.PdfWriter;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;

public class ItextDemo {
    public static void main(String[] args) {
        try {
            Document document = new Document();
            PdfWriter.getInstance(document, new FileOutputStream("D:\\test.pdf"));
            document.open();
            document.add(new Paragraph("hello itext"));
            document.close();
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        } catch (DocumentException e) {
            e.printStackTrace();
        }
    }
}

iText是著名的开放源码的站点sourceforge一个项目，是用于生成PDF文档的一个java类库。通过iText不仅可以生成PDF或rtf的文档，而且可以将XML、Html文件转化为PDF文件。 iText的安装非常方便，下载iText.jar文件后，只需要在系统的CLASSPATH中加入iText.jar的路径，在程序中就可以使用iText类库了。

JasperReports是一个强大、灵活的报表生成工具，能够展示丰富的页面内容，并将之转换成PDF，HTML，或者XML格式。该库完全由Java写成，可以用于在各种Java应用程序，包括J2EE，Web应用程序中生成动态内容。一般情况下，JasperReports会结合Jaspersoft Studio(模板设计器)使用导出PDF报表。

<dependency>
  <groupId>net.sf.jasperreports</groupId>
  <artifactId>jasperreports</artifactId>
  <version>6.8.0</version>
</dependency>

原理

概念

优劣势分析

简介

RabbitMQ 基础架构如下图

RabbitMQ 中的相关概念

六种工作模式

JMS

code

工作队列模式

Pub/Sub 订阅模式

Routing 路由模式