JavaWeb核心技术：HTML/CSS/JS/Servlet/JSP-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_46351409/article/details/120751358

第一章：HTML与CSS

1.1 JavaSE与web中的绝对路径和相对路径区别

	javaSE	web
绝对路径	盘符：/目录/文件名	http://ip:port/工程名、资源路径
相对路径	从工程名开始算	.	表示当前文件所在目录
		..	表示当前文件所在的上一级目录
		文件名	表示当前文件所在目录的文件，相当于“./文件名”，“./”可以省略

1.2 表格标签

格式标签	table	表头标签
	tr	行标签
	th	表头标签
	td	单元格标签
属性标签	border	设置表格宽度
	width	设置宽度
	height	设置高度
	align	设置对齐方式
	b	加粗
	cellspacing	设置为0表示单元格边线之间的间隙为0，并不表示重合


<table align="center" border="2" width="300" height="300" cellspacing="0">
    <tr>
        <th>1.1</th>
        <th>1.2</th>
        <th>1.3</th>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.3</td>
        <td>2.3</td>
    </tr>
    <tr>
        <td>3.1</td>
        <td>3.2</td>
        <td>3.3</td>
    </tr>
</table>

1.2.1 表格跨行跨列

colspan	属性设置跨列
rowspan	属性设置跨行


<!--表格跨行跨列-->
<table  align="center" border="2" width="300" height="300" cellspacing="0">
    <tr>
        <td colspan="3">1.1</td><!--colspan跨列，相当于把1.2、1.2占掉-->
        <td>1.4</td>
        <td>1.5</td>
    </tr>
    <tr>
        <td rowspan="3">2.1</td><!--rowspan跨行，相当于把3.1、4.1占掉-->
        <td>2.2</td>
        <td>2.3</td>
        <td>2.4</td>
        <td>2.5</td>
    </tr>
    <tr>
        <td>3.2</td>
        <td>3.3</td>
        <td>3.4</td>
        <td>3.5</td>
    </tr>
    <tr>
        <td>4.2</td>
        <td>4.3</td>
        <td>4.4</td>
        <td>4.5</td>
    </tr>
    <tr>
        <td>5.1</td>
        <td>5.2</td>
        <td>5.3</td>
        <td>5.4</td>
        <td>5.5</td>
    </tr>
</table>

1.2.2 iframe标签

<!--iframe标签可以在页面上开辟一个小区域显示一个单独的页面
     iframe和a标签中使用的步骤：
     1  在iframe标签中使用name属性定义一个名称
     2  在a标签的target属性上设置iframe的name的属性值
-->
    <iframe src="iframe中原始展示的网页.html" width="500" height="500" name="abc"></iframe>
    <br/>
    <ul>
        <li><a href="0.标签语法.html" target="abc"></a></li>
        <li><a href="1.标签语法.html" target="abc"></a></li>
        <li><a href="2.标签语法.html" target="abc"></a></li>
    </ul>

1.3 表单标签

1.3.1 什么是表单？

表单就是html页面中，用来收集用户信息的所有元素集合，然后把这些信息发送给服务器。

<!DOCTYPE html>
<html lang="ZH_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    form标签就是表单
        表单提交的细节：
            action属性设置提交的服务器地址
            method属性设置提交的方式GET(默认值)或POST

        1.表单提交的时候，数据没有发送给服务器的三种情况：
        （1）表单上没有name属性
        （2）单选、复选（下拉列表的option标签）都需要添加value属性，以便发送给服务器
        （3）表单项不在提交的form标签中

        GER请求的特点是：
        1.浏览器地址栏中的地址是：action属性【+？+请求参数】
            请求参数的格式是：name=value&name=value
        2.不安全
        3.有数据长度的限制

        POSE请求的特点：
        1.浏览器地址中只有action属性值
        2.相对于GET请求更安全
        3.理论上没有数据长度的限制

        input type="text"       文本形式输入
        input type="password"   密码形式展示输入
        input type="radio"      单选框
        input type="checkbox"   多选框
        input type="reset"      重置
        input type="button"     简单的按钮
        input type="file"       文件上传域
        input type="hidden"     隐藏域【当我们要发送某些信息，而这些信息。不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器）】
        input type="submit"     提交，结合form属性使用。<form action="https://www.baidu.com" method="get">

        select
        option
        textarea
-->
<form action="https://www.baidu.com" method="get"><!--这里的method可以为get或pose-->
    <input type="hidden" name="action" value="login">
    <h1 align="center">注册登录</h1>
    <table align="center">
        <tr>
            <td>用户名称：</td>
            <td><input type="text" name="username" value="默认值"/></td>
        </tr>
        <td>用户密码：</td>
        <td><input type="password" name="password" value="abc"/></td>
        </tr>
        <td>性别：</td>
        <td>
            <input type="radio" name="sex"value="boy"/>男
            <input type="radio" name="sex" checked="checked"value="girl"/>女
        </td>
        </tr>
        <td>兴趣爱好：</td>
        <td><input type="checkbox" name="hobby" checked="checked"value="java"/>Java
            <input type="checkbox" name="hobby" checked="checked" value="cpp"/>C++
            <input type="checkbox" name="hobby" checked="checked"value="js"/>JavaScripe
        </td>
        </tr>
        <td>国籍：</td>
        <td><select name="country">
            <option value="none">--请选择国籍--</option>
            <option value="cn" selected="selected">中国</option><!--selected="selected",此处设置默认值，若无设置，则是第一个option-->
            <option value="usa">美国</option>
            <option value="jp">日本</option>
            <option value="other">其他</option>
        </select></td>
        </tr>
        <td>自我评价：</td>
        <td><textarea name="desc" row="10" cols="20">我才是默认值</textarea></td>
        </tr>
        <td><input type="reset" value="重置"/>
            <input type="file" value="选择文件">
            <input type="submit" value="提交" align="right">
            <input type="hidden" name="abc" value="abcValue"/></td><!--这行代码要注意！！！与表单提交正确信息相关的！！！-->
        </tr>
    </table>
</form>
</body>
</html>

执行效果：

1.3.2 div/span/p标签演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <!--
        1.div标签     独占一行
        2.span标签    它的长度是封装数据的长度
        3.p段落       默认会在段落的上方或下方各空出一行（如果已有就不再空）
    -->
    <body>
        <div>div标签1</div>
        <div>div标签2</div>
        <span>span标签1</span>
        <span>span标签2</span>
        <p>p段落1</p>
        <p>p段落2</p>
    </body>
</html>

执行效果：

1.4 CSS样式

1.4.1 CSS样式语法规则

选择器：浏览器根据“选择器”决定受CSS样式影响的HTML元素（标签）。

属性（property）：要改变的样式名。

多个声明：最后一条声明可以不加分号。一般每行只描述一个属性（增加可读性）。

CSS样式使用的第一种方法：

<div style="border: forestgreen 2px solid">div标签1</div>
<div style="border:2px aqua solid; height:50px;width:800px;background-color:lightgreen">div标签2</div>
<span style="border: 4px forestgreen solid">span标签1</span>
<span style="border: 5px aqua solid">span标签2</span>
<p style="border: 8px forestgreen solid">p段落1</p>
<p style="border: 1px forestgreen solid">p段落2</p>

CSS样式使用的第二种方法：

在head标签中，使用style标签来定义各种自己需要的CSS样式。

格式如下（即css语法格式）：

xxx {

key:value value;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <!--    style标签专门用来定义css样式代码-->
    <style type="text/css">
        /*注意此处css样式的注释*/
        div {
            border: lightgreen 3px solid;
            text-align: center;
        }

        span {
            border: aqua 3px solid;
            text-align: center;
        }
        p{
            border: aquamarine 3px solid;
        }
    </style>
</head>
<body>
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
<p>p段落1</p>
<p>p段落2</p>
</body>
</html>

运行效果：

CSS样式使用的第三种方法：

把css样式写成一个单独的css文件，再通过link标签引入即可复用。

需要创建一个“.css”文件

方便维护与复用

1.4.2 CSS选择器

标签名选择器的格式是：

标签名{

属性：值；

}

id选择器的格式是：【id选择器可以让我们通过id属性选择性的去使用这个样式，一个id对应一个标签】

#id属性值{

属性：值；

}

常见错误！！

class类型选择器的格式是：【注意class前面的点！！！一个class可以对应多个属性】

.class属性值{

属性：值；

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ID选择器</title>
    <style type="text/css">
        .class01{
            color: chartreuse;
            font-size: 20px;
            border: 5px forestgreen dotted;
        }
    </style>
</head>
<body>
<div class="class01">div标签1</div>
<div class="class02">div标签2</div>
<span class="class01">span标签1</span>
<span class="class02">span标签2</span>
</body>
</html>

组合选择器

选择器1，选择器2，......选择器n{

属性：值；

}

第二章：JavaScript

2.1 JavaScript的介绍

JavaScript语言诞生主要是完成页面的数据验证。因此它运行再客户端，需要运行浏览器来解析执行JavaScript代码。JS是netscape网景公司的产品，最早取名为LiveScript；为了吸引印更多Java程序员，更名为JavaScript。JS是弱类型，Java是强类型。

特点：

1.交互性（它可以做的就是信息的动态交互）

2.安全性（不允许直接访问本地硬盘）

3.跨平台性（只要是可以解释JS的浏览器都可以执行，和平台无关）

eg:

java

JavaScript

int i=1;

var i;

i=1;

i="abc";

2.2 JavaScript与HTML代码的结合方式

2.2.1 第一种方式：

只需要在head标签中，或者在body标签中，使用script标签来书写JavaScript代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //alert是JavaScript语言提供的一个警告框函数
        //它可以接收任意类型的参数，这个参数就是警告框的提示信息
        alert("hello javaScript!")
    </script>
</head>
<body>
</body>
</html>

2.2.2 第二种方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
        现在需要使用script引入外部的js文件来执行
            src标签可以用来定义js代码，也可以用来引入js文件
            但是，两种功能二选一使用，不能同时使用两个功能，要么再写一个
    -->
    <script type="text/javascript" src="1.js"></script>
    <script>
        alert("小仙女！")
    </script><!--    此处写了两个，按顺序执行-->

</head>
<body>
</body>
</html>

2.3 变量

什么是变量？变量是可以存放某些值的内容的命名。

2.3.1 JavaScript的变量类型：

JavaScript的变量类型：	数值类型：	number
	字符串类型：	string
	对象类型：	object
	布尔类型：	boolean
	函数类型：	function
JavaScript里的特殊的值：	undefined	未定义
	null	空值
	NAN	（Not a Number）非数字，非数值

2.3.2 关系运算符

等于：==	等于是简单的做字面值得比较
全等于：===	除了做字面值的比较之外，还会比较两个变量的数据类型

2.3.4 逻辑运算符

且运算：	&&
或运算：	\|\|
取反运算：	！

在JavaScript中，所有的变量，都可以作为一个Boolean类型的变量去使用。

0、null、undefined、""(空串)都认为是false；

2.4 数组（重点*****）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var arr = [true,1];//定义一个初始值，对后面的操作无影响
        // var arr = [];//定义一个空数组
        //alert(arr.length);//o
        arr[0] = 12;
        alert(arr[0]);
        arr[5] = "abc";
        //alert(arr.length);//1
        alert(arr[5]);
        //JavaScript语言中的数组，只要我们通过数组下标赋值，最大的下标值就会自动的给数组做扩容操作。
        //alert(arr.length);//6
        // alert(arr[1]);//undefined
        //数组的遍历
        for (var i = 0; i < arr.length; i++) {
            alert(arr[i]);
        }
    </script>
</head>
<body>
</body>
</html>

2.5 函数

2.5.1 函数的第一种定义方式

使用function关键字来定义函数：

function 函数名（形参列表）{

函数体；

}

在JavaScript语言中如何定义带有返回值的函数？

在函数体内直接使用return语句返回值即可！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">//注意JavaScript语法里面有分号“;”
    //定义一个无参函数
    function fun() {
        alert("无参函数fun()被调用");
    }

    //函数调用才会执行
    fun();

    function fun2(a, b) {//这里直接告诉几个就行，不需要写参数的变量类型，写了会报错
        alert("有参函数fun2()被调用，a=" + a + ",b=" + b);
    }

    fun2(12, "abc");

    //定义带有返回值的函数
    function sum(num1, num2) {
        var result = num1 + num2;
        return result;
    }

    alert(sum(100, 50));
    </script>
</head>
<body>

</body>
</html>

2.5.2 函数的第二种定义方式

var 函数名 = function（形参列表）{函数体}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var fun = function () {
            alert("无参函数");
        }
        fun();//函数记得调用才能使用！！！
        var fun2 = function (a, b) {
            alert("有参函数：a=" + a + ",b=" + b);
        }
        fun2(1, 3);
        var fun3 = function (num1, num2) {
            return num1 + num2;
        }
        alert(fun3(100, 200));
    </script>
</head>
<body>

</body>
</html>

2.5.3 js中函数不允许重载

    <script type="text/javascript">
        //1
        function fun(a, b) {
            alert("有参函数fun(a,b)" + a + "," + b);
        }

        //2
        function fun() {
            alert("无参函数fun()");
        }

        fun();//无论1,2是否调换，此程序运行时都会运行有参函数部分代码，无参函数代码是否运行有待解决
    </script>

2.5.4 函数的arguments隐形函数（只有在function函数内）

在function函数中不需要定义，但是却可以直接用来获取所有的变量。我们管它叫隐形参数。隐形参数像JAVA基础的可变长参数那样。

public void fun(Object ... args);

可变长参数其他是一个数组。

js中隐藏参数也跟JAVA的可变长参数一样，操作类似数组。


    <script type="text/javascript">

        function fun() {
            alert("参数的个数为" + arguments.length);//可看参数个数
            alert("arguments[0]:" + arguments[0]);
            alert("arguments[1]:" + arguments[1]);
            alert("arguments[2]:" + arguments[2]);

            for (var i = 0; i < arguments.length; i++) {
                alert(arguments[i]);
            }
        }

        // fun(1,"as",true);//别忘了写这条语句，不然函数不会被调用

        //需求，要求编写一个函数，用于计算所有参数相加的和并返回
        function sum(num1, num2) {
            var result = 0;
            for (var i = 0; i < arguments.length; i++) {
                if (typeof (arguments[i]) == "number") {
                    result += arguments[i];
                }
            }
            return result;
        }

        alert(sum(1, 2, 3, 4, "abc", 6, 7, 8, 9));
    </script>

2.6 JS中的自定义对象

2.6.1 object形式的自定义对象

对象的定义：

var 变量名 = new Object(); //对象实例（空对象）

变量名.属性=值； //定义一个属性

变量名.函数名=function(){}； //定义一个函数

对象的访问：

变量名.属性/函数名();

    <script type="text/javascript">

        //        对象的定义：
        //            var 变量名 = new Object();//对象实例（空对象）
        //            变量名.属性=值；//定义一个属性
        //            变量名.函数名=function(){}； //定义一个函数
        var obj = new Object();
        obj.name = "旺仔";
        obj.age = 18;
        obj.fun = function () {
            alert("姓名：" + this.name + ",年龄：" + this.age);
        }
        //        对象的访问：
        //            变量名.属性/函数名();
        obj.fun();
    </script>

2.6.2 {}花括号形式的自定义对象

对象的定义：

第一种：var 变量名={}；//空对象

第二种：var 变量名 ={//空对象

属性名：值，//定义一个属性

函数名：function(){}//定义一个函数

注意加逗号！！！

}

对象的访问：

变量名.属性/函数名();

    <script type="text/javascript">
        //     对象的定义：
        //     var 变量名 ={//空对象
        //          属性名：值，//定义一个属性
        //          属性名：值，//定义一个属性
        //          函数名：function(){}//定义一个函数
        //     注意加逗号！！！
        //     }
        var obj = {
            name:"qianqian",
            age:18,
            fun:function () {
                alert("姓名："+this.name +"年龄："+this.age);
            }
        };
        //     对象的访问：
        //          变量名.属性/函数名();
        alert(obj.name);
        obj.fun();
    </script>

2.6.3 常用的事件

onload	加载完成事件	页面加载完成后，常用于做页面JS代码初始化操作
onclick	单机事件	常用于按钮点击响应
onblur	失去焦点事件	常用于输入框失去焦点后验证其输入内容是否合法。
onchange	内容发生改变事件	常用于下拉列表和输入框内容发生改变后操作
onsubmit	表单提交事件	常用于表单提交前，验证所有表单是否合法。

事件的注册又分为静态注册和动态注册两种

2.6.4 onload事件

静态注册：通过HTML标签的事件属性直接赋予事件响应后的代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript">
        //onload 事件的方法
        function onloadFun(){
            alert("静态注册onload事件，所有代码");
        }
    </script>
</head>
<!--静态注册onload事件：
    onload浏览解释完页面之后就会自动触发的事件-->
<body onload="onloadFun();">
<!--<body>-->
</body>
</html>

动态注册：先通过JS代码得到标签的dom对象，然后再通过dom对象.事件名=function(){}这种形式赋予事件响应后的代码，叫动态注册。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //onload 事件的方法
        function onloadFun() {
            alert("静态注册onload事件，所有代码");
        }

        //onload事件动态注册，是固定写法
        window.onload = function () {
            alert("动态注册的onload事件");
        }
    </script>
</head>
<body>

</body>
</html>

动态注册基本步骤：

1、获取标签对象

2、标签对象.事件名=function(){}

2.6.5 onclick事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onclickFun() {
            alert("静态注册onclick事件");
        }

        //动态注册onclick事件
        window.onload = function () {
            // 1.获取标签对象
            /*
            document 是JavaScript语言提供的一个对象【整个页面的所有内容】（文档）
            getElementById 通过id属性获取标签对象
             */
            var btnObj = document.getElementById("btn01");
            // 2.通过标签对象.事件名 = function(){}
            btnObj.onclick = function () {
                alert("动态注册的onclick事件");
            }
        }
    </script>
</head>
<body>
<!--静态注册onclick事件-->
<button onclick="onclickFun();">按钮1</button>
<button id = "btn01">按钮2</button>
</body>
</html>

2.6.6 onblur事件

<!DOCTYPE html>
<html lang="en">
<!--此程序可利用-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //静态注册失去焦点事件
        function onblurFun() {
            //console是控制台对象，是由JavaScript语言提供，专门用来向浏览器的控制台打印输出，用于测试使用
            //log()是打印的方法
            console.log("静态注册失去焦点事件");
        }

        //动态注册onblur事件
        window.onload = function () {
            // 1.获取标签对象
            var passwordObj = document.getElementById("password");
            // alert(passwordObj);
            //2.通过标签对象.事件名 = function(){};
            passwordObj.onblur = function () {
                console.log("动态注册失去焦点事件");

            }
        }

    </script>
</head>
<body>
用户名：<input type="text" onblur="onblurFun()"><br>
密码：<input id="password " type="password"><br>


</body>
</html>

2.6.7 onChange事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onchangeFun() {
            alert("男神已经改变了！！")
        }
        // 动态注册
        window.onload = function () {
            //1.获取标签对象
            var selObj = document.getElementById("sel01");
            //2.通过标签对象.事件名 = function（）{}
            selObj.onchange = function () {
                alert("女神已经改变了！！")
            }
        }
    </script>
</head>
<body>
请选择你心中的男神：
<!--静态注册onChange事件-->
<select onchange="onchangeFun()">
    <option>--男神--</option>
    <option>朱一龙</option>
    <option>王一博</option>
    <option>肖战</option>
</select>
请选择你心中的女神：
<select id="sel01">
    <option>-女神--</option>
    <option>王冰冰</option>
    <option>杨幂</option>
    <option>小冰</option>
</select>
</body>
</html>

2.6.8 onSubmit事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onSubmit</title>
    <script type="text/javascript">//注意JavaScript的分号！！！
        //静态注册表单提交事务
        function onSubmitFun() {
            //要验证所有表单是否合法，如果有一个不合法就组阻止表单提交
            alert("静态注册表单提交事件——发现不合法");
            return false;
        }
        window.onload = function () {
            //1.获取标签对象
            var formObj = document.getElementById("form01");
            // alert(formObj);
            alert("动态注册表单提交事件——发现不合法");
            return false;
        }
    </script>
</head>
<body>
<!--return false 可以阻止表单提交-->
<form action="http://localhost:8080" method="get" onsubmit="return onSubmitFun();"><!--静态注册的return不能少-->
<!--    注意JavaScript的分号！！！-->
<input type="submit" value="静态注册"/>
</form>
<form action="http://localhost:8080" id="form01">
    <input type="submit" value="动态注册"/>
</form>
</body>
</html>

2.7 DOM模型

2.7.1 Document对象

DOM全称是Document Object Model文档对象模型，即把文档中的标签、属性、文本，转换成对象来管理。

Document对象的理解：
第一点：Document它管理了所有的HTML文档内容。
第二点：document是一种树结构的文档。有层级关系。
第三点：它让我们把所有的标签都对象化。
第四点：我们可以通过document访问所有的标签对象。

2.7.2 验证用户名是否有效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*
        需求：当用户点击了校验按钮，要获取输出框中的内容，然后验证是否合法<br>
        验证的规则是：必须游字母、数字、下划线组成。并且长度是5到12位。
         */
        function onclickFun() {
            //1 当我们操作这个标签时，一定要先获得这个标签兑对象；
            var userNameObj = document.getElementById("username");
            // [object HTMLInputElement] 他就是dom对象
            var usernameText = userNameObj.value;
            var patt = /^w{5,12}$/;
            /*
            test()方法用于测试某个字符串，是不是匹配我的规则
            匹配就返回true，否则false
             */
            if (patt.test(usernameText)) {
                alert("用户名合法！")
            } else {
                alert("用户名合法！")
            }
        }
    </script>
</head>
<body>
用户名：<input type="text" id="username" value="lqq"/>
<button onClick="onclickFun()">校验</button>
</body>
</html>

2.7.3 正则表达式对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>regxp</title>
    <script type="text/javascript">
        //表示要求字串中，是否包含字母e
        // var patt = new RegExp("e");
        // var patt = /e/;//也是正则表达式对象
        //表示要求字符串中，是否包含字母a或b或c
        // var parr = /[abc]/;
        // var parr = /[a-z]/;
        // var parr = /[A-Z]/;
        // var parr = /[0-9]/;
        // var parr = /[\W]/;//是否包含字母、数字、下划线
        // var parr = /[a+]/;//表示字符串中是否包含至少一个a
        // var parr = /[a*]/;//表示字符串中是否包含零个或多个a
        // var parr = /[a?]/;//表示字符串中是否包含零个或一个a
        // var parr = /[a{3}]/;//表示字符串中是否包含连续的3个
        // var parr = /[a{3,5}]/;//表示字符串中是否包含至少三个连续的a,最多5个连续的a
        // var parr = /[a{3,}]/;//表示字符串中是否包含至少三个连续的a
        // var parr = /[a$]/;//匹配任何结尾为n的字符串
        // var parr = /[^a]/;//匹配任何开头为n的字符串
        // var parr = /[^a{3,5}$]/;//要求字符串从头到尾都必须完全匹配
        // var parr = /[?=a]/;//匹配任何其后紧跟指定字符串n的字符串
        var parr = /[?!a]/;//匹配任何其后没有紧跟指定字符串n的字符串
        var str = "abcd";
        alert(parr.test(str));
    </script>
</head>
<body>

</body>
</html>

2.7.3 两种常见的验证效果提示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*
        需求：当用户点击了校验按钮，要获取输出框中的内容，然后验证是否合法<br>
        验证的规则是：必须游字母、数字、下划线组成。并且长度是5到12位。
         */
        function onclickFun() {
            //1 当我们操作这个标签时，一定要先获得这个标签兑对象；
            var userNameObj = document.getElementById("username");
            // [object HTMLInputElement] 他就是dom对象
            var usernameText = userNameObj.value;
            var patt = /^\w{5,12}$/;//此处别忘了斜杠/与反斜杠\!!!
            /*
            test()方法用于测试某个字符串，是不是匹配我的规则
            匹配就返回true，否则false
             */
            var usernameSpanObj = document.getElementById("usernameSpan");
            // innerHTML  表示起始标签和结束标签中的内容
            // innerHTML  这个属性可读可写
            // alert(usernameSpanObj.innerHTML);//读
            usernameSpanObj.innerHTML = "可可爱爱！";
            if (patt.test(usernameText)) {
                alert("用户名合法!");
                // usernameSpanObj.innerHTML = "用户名合法!";
                usernameSpanObj.innerHTML = "<img src=\'right.jpg\' width=\'18\' height=\'18\'>";
            } else {
                alert("用户名不合法!");
                // usernameSpanObj.innerHTML = "用户名不合法！";
                usernameSpanObj.innerHTML = "<img src=\'wrong.jpg\' width=\'18\' height=\'18\'>";

            }
        }
    </script>
</head>
<body>
用户名：<input type="text" id="username" value="wzg"/>
<span id="usernameSpan" style="color: red;">

</span>
<button onClick="onclickFun()">校验</button>
</body>
</html>

2.7.4 getElementByName

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function checkALL() {
            //全选:让所有复选框都选中
            // document.getElementsByName();是根据指定的name属性查询返回多个标签对象的集合
            //这个集合操作与数组一样
            //集合中的每个元素都是dom对象
            //集合中的元素顺序是他们在HTML源代码页面中从上到下的顺序
            // alert(languages);//[object NodeList]
            // alert(languages.length);//返回该集合的长度
            // alert(languages[1]);//返回该集合中的特定对象
            var languages = document.getElementsByName("language");
            //checked表示复选框的选中状态，如果选中是true 不选中的false
            //cheched可读可写
            for (var i = 0; i < languages.length; i++) {
                languages[i].checked = true;
            }
        }
        function checkNo() {
            //全不选
            var languages = document.getElementsByName("language");
            //checked表示复选框的选中状态，如果选中是true 不选中的false
            //cheched可读可写
            for (var i = 0; i < languages.length; i++) {
                languages[i].checked = false;
            }
        }

        function checkReverse() {
            //反选
            var languages = document.getElementsByName("language");
            for(var i = 0;languages.length;i++){
                languages[i].checked = !languages[i].checked;
            }
        }
    </script>
</head>
<body>
兴趣爱好：
<input type="checkbox" name="language" value="cpp">C++
<input type="checkbox" name="language" value="java">JAVA
<input type="checkbox" name="language" value="js">JavaScript
</br>
<button onclick="checkALL()">全选</button>
<button onclick="checkNo()">全不选</button>
<button onclick="checkReverse()">反选</button>
</body>
</html>

2.7.5 getElementByTagName

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function checkALL() {
            //全选:让所有复选框都选中
            // document.getElementsByTagName("input");
            //这个集合操作与数组一样
            //集合中的每个元素都是dom对象
            //集合中的元素顺序是他们在HTML源代码页面中从上到下的顺序
            var inputs = document.getElementsByName("input");
            for (var i = 0; i < input.length; i++) {
                input[i].checked(true);
            }
        }
    </script>
</head>
<body>
兴趣爱好：
<input type="checkbox" name="language" value="cpp">C++
<input type="checkbox" name="language" value="java">JAVA
<input type="checkbox" name="language" value="js">JavaScript
</br>
<button onclick="checkALL()">全选</button>

</body>
</html>

2.7.6 document对象的三个查询方法的使用注意事项

document对象的三个查询方式，如果有id属性，优先使用getElementById方法进行查询，如果没有id属性，则优先使用getElementByName方法来进行查询，如果前两者都没有，最后按照标签名查询。getElementByTagName。

以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象。

2.7.8 节点的常用属性和方法

节点就是标签对象

方法：

通过具体的元素节点调用

getElementByTagName()

方法，获取当前节点的指定标签名孩子节点

appendChildNode()

方法，可以添加一个子节点，oChildNode是要添加的孩子节点

属性：

childNodes	获取当前节点的所有子节点
firstChild	获取当前节点的第一个子节点
lastChild	获取当前节点的最后一个子节点
parentNode	获取当前节点的父节点
nextSibling	获取当前节点的下一个节点
previousSibing	获取当前节点的上一个节点
className	获取或设置标签的class属性
innerHTML	表示获取/设置起始标签和结束标签中的内容
innerText	表示获取/设置起始标签和结束标签中的文本

2.7.9 document对象补充说明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            //现在需要我们使用JS代码来创建HTML标签，并且显示在页面上
            //标签的内就是:<div>倩倩<div>
            var divObj = document.createElement("div");//在内存中<div></div>
            var textNodeObj = document.createTextNode("倩倩");//有一个文本节点对象#倩倩
            divObj.appendChild(textNodeObj);//<div>倩倩<div>
            divObj.innerHTML = "倩倩";//<div>倩倩</div>但是，还只是在内存中
            document.body.appendChild(divObj);
        }
    </script>
</head>
<body>

</body>
</html>

第三章：jQuery

jQuery的引用：

    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>

3.1 jQury的hello程序示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
    <script type = text/javascript>
        // window.onload = function () {
        //     var btnObj = document.getElementById("btnId");
        //     alert(btnObj);//[object HTMLButtonElement]===>dom对象
        //     btnObj.onclick = function () {
        //         alert("js原生的单击事件");
        //     }
        // }
        $(function () {//表示页面加载完成之后，相当于window.onload = funcion(){}
            var $btnObj = $("#btnId");//表示按id查询标签对象
            $btnObj.click(function () {
               alert("jQuery的单击点击事件");
            });
        })
    </script>
</head>
<body>
<button id="btnId">SayHello </button>
</body>
</html>

3.2 如何为按钮添加点击响应函数？

1.使用jQuery查询到标签对象；

2.使用标签对象dick.function(){};

3.3 jQuer核心函数

$是jQuery的核心函数，$()就是调用$这个函数

1、传入参数为[函数]时：表示页面加载完成之后，相当于window.onload = function(){}

2、传入参数为[HTML字符串]时：会对我们创建这个html标签对象；

3、传入参数为[选择器字符串]时：

$("#id属性值")；id选择器，根据id查询标签对象；

$("标签名");标签名选择器，根据指定的标签名查询对象；

$(".class属性值");类型选择器，可以根据class属性查询标签对象；

4、传入参数为[DOM对象]时；会把DOM对象转化为jQuery对象；

3.4 jQuery对象和dom对象

Dom对象：

1、通过getElementById()查询出来的标签对象是Dom对象

2、通过getElementsByName()查询出来的标签对象是Dom对象

3、通过getElementByTagName()查询出来的标签对象是Dom对象

4、通过createElement()查询出来的标签对象是Dom对象

Dom对象Alert出来的效果是：[object HTML标签名Element]

jQuery对象：

1、通过jQuery提供的API创建的对象；

2、通过jQuery包装的Dom对象；

3、通过jQuery提供的查询到的对象；

jQuery对象Alert出来的效果是：[object Object]

3.4.1 jQuery对象的本质是？

jQuery对象是dom对象的数组+jQuery提供的一系列功能函数

3.4.2 jQuery对象和dom对象的使用区别

jQuery对象不能使用dom对象的属性和方法

dom对象不能使用jQuery对象的属性和方法

3.4.3 Dom对象和jQuery对象的互换

1、Dom对象转换成jQuery对象

（1）先有DOM对象

（2）$(DOM对象)就可以转换成jQuery对象

2、jQuery对象转换成Dom对象

（1）先有jQuery对象

（2）jQuery对象[下标]取出相应的DOM对象

3.5 jQuery选择器

3.5.1 基本选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div, span, p {
            width: 140px;
            height: 140px;
            margin: 5px;
            background: aqua;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Verdana;
        }
        div.mini {
            width: 55px;
            height: 55px;
            background-color: darkcyan;
            font-size: 12px;
        }
        div.hide {
            display: none;
        }
    </style>
    <script type="text/javascript" src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //1.选择id为one的元素'background-color","#bbffaa"
            $("#btn01").click(function () {
                //css方法 可以直接设置和获取样式
                $("#one").css("background-color", "#bbffaa");
            });

            //2.选择class为mini的所有元素
            $("#btn02").click(function () {
                $(".mini").css("background-color", "#bbffaa");
            });
            //3.选择元素名是div的所有元素
            $("#btn03").click(function () {
                $("div").css("background-color", "#bbffaa");
            });
            //4.选择所有的元素
            $("#btn04").click(function () {
                $("*").css("background-color", "#bbffaa");
            });
            //5.选择所有的span元素和id为two的元素
            $("#btn05").click(function () {
                $("span,#two").css("background-color", "#bbffaa");
            });

        });


    </script>
</head>
<body>
<!--基本选择器-->
<input type="button" value="选择id为one的元素" id="btn01">
<input type="button" value="选择class为mini的所有元素" id="btn02">
<input type="button" value="选择元素名是div的所有元素" id="btn03">
<input type="button" value="选择所有的元素" id="btn04">
<input type="button" value="选择所有的span元素和id为true的元素" id="btn05">

<br>

<div class="one" id="one">
    id为one，class为one的div
    <div class="mini"> class为mini</div>
</div>

<div class="one" id="two" title="test">
    id为two，class为one，title为test的div
    <div class="mini" title="other"> class为mini，other</div>
    <div class="mini" title="test"> class为mini，test</div>
</div>

<div class="one">
    <div class="mini">class为mini</div>
</div>

<div style="display: none;" class="none">style的display为none的div</div>
<div class="hide">class为hide的div</div>
<div>
    包含input的type为“hidden”元素的div<input type="hidden" size="8">
</div>
</body>
</html>

3.5.2层级选择器

    <script>
        $(document).ready(function () {
            //1.选择body内所有的div元素
            $("#btn01").click(function () {
                //css方法 可以直接设置和获取样式
                $("body div").css("background-color", "#bbffaa");
            });

            //2.在body内，选择div子元素
            $("#btn02").click(function () {
                $("body > div").css("background-color", "#bbffaa");
            });
            //3.选择id为one的下一个div元素
            $("#btn03").click(function () {
                $("#one+div").css("background-color", "#bbffaa");
            });
            //4.选择id为two的元素后面的所有div兄弟元素
            $("#btn04").click(function () {
                $("#two~div").css("background-color", "#bbffaa");
            });
        });
    </script>

3.5.3 过滤选择器

3.5.4 内容过滤器

3.5.5 属性过滤选择器

3.5.6 表单过滤选择器

3.5.7 元素筛选器

第四章：xml

4.1 XML简介

4.1.1 什么是XML?

XML是可扩展的标记性语言。

4.1.2 XML的作用？

1、用来保存数据，而且这些数据有自我描述性；

2、它还可以作为项目或者模块的配置文件；

3、还可以作为网络传输数据的格式（现在JSON为主）。

4.2 XML语法

4.2.1 XML注释、元素

4.2.2 文本区域：（CDATA区）

CDATA格式：<![CDATA[这里可以把你输入的字原样显示，不会解析XML]]>

4.3 dom4j解析技术（重点******）

4.3.1 dom4j编程步骤：

第一步：先加载.xml文件创建Ducument对象；

第二步：通过Dcument对象拿到根元素对象；

第三步：通过根元素.elements（标签名）；可以返回一个集合，这个集合里放着所有你指定标签名的对象；

第四步：找到你想要修改、删除的子元素，进行相应操作；

第五步：保存到硬盘上。

4.3.2 获取Document对象：

创建一个lib目录，并添加dom4j的jar包。并添加到类路径。

注意此处的选择：

小项目：从books.xml文件中提取信息

一、创建文件，导入包

二、Dom4jTest.java代码块

package com.atshnu.proj;

import org.dom4j.Document;
import org.dom4j.DocumentException;
import org.dom4j.Element;
import org.dom4j.io.SAXReader;
import org.junit.Test;

import javax.xml.parsers.SAXParser;
import java.util.List;

/**
 * @ 创建人 罗倩倩
 * @ 创建时间 2021/11/10
 * @ 修改人和其它信息
 */
public class Dom4jTest {

    @Test
    public void test1() throws Exception {
        //创建一个SaxReader输入流，去读取XML配置文件，生成Document对象
        SAXReader SAXReader = new SAXReader();
        try {
            String systemId;
            Document document = SAXReader.read(systemId = "src/books.xml");
            System.out.println(document);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    /**
     * 读取books.xml文件生成Book类
     */
    @Test//测试模块，双击模块名之后”右键“”执行“
    public void test2() throws Exception {
        //1.读取books.xml文件
        SAXReader reader = new SAXReader();
        //在Junit测试中，相对路径是从模块名开始算
        Document document = reader.read("src/books.xml");
        //2.通过document对象获取根元素
        Element rootElement = document.getRootElement();
//        System.out.println(rootElement);
        //3.通过根元素获取标签转化为Book类
        //element()和elements()都是通过标签名查找子元素
        List<Element> books = rootElement.elements("book");
        //4.遍历，处理每个book标签转换成Book类
        for(Element book:books){
            //.asXML()把标签对象转换成标签字符串
//            System.out.println(book.asXML());
            Element nameElement = book.element("name");
//            System.out.println(nameElement.asXML());
            //getText()方法可以获取标签中的文本内容
            String nameText = nameElement.getText();
            //直接获取指定标签名的文本内容
            String priceText = book.elementText("price");
            System.out.println(priceText);
            String authorText = book.elementText("author");
            String snValue = book.attributeValue("sn");
            System.out.println(new Book(snValue,nameText,Double.parseDouble(priceText),authorText));
        }

    }

}

特别注意：对于

System.out.println(new Book(snValue,nameText,Double.parseDouble(priceText),authorText));

此处的Double.parseDouble(priceText)，若只是“priceText”，会输出为null

三、books.xml代码块

<?xml version="1.0" encoding = "utf-8" ?>
<!--
<?xml version="1.0" encoding = "utf-8" ?>-
以上是xml文件声明
-->
<books>
    <book sn = "sn123456789">
        <name>时间简史</name>
        <author>霍金</author>
        <price>76.5</price>
    </book>
    <book sn = "sn123456788">
        <name>信息安全原理</name>
        <author>熊平</author>
        <price>75.5</price>
    </book>
</books>

四、book.java代码块

package com.atshnu.proj;

import java.math.BigDecimal;

public class Book {
    private String sn;

    public Book(String sn, String name, Double price, String author) {
        this.sn = sn;
        this.name = name;
        this.price = price;
        this.author = author;
    }

    public Book(String snValue, String nameText, String priceText, String authorText) {
    }

    @Override
    public String toString() {
        return "Book{" +
                "sn='" + sn + '\'' +
                ", name='" + name + '\'' +
                ", price=" + price +
                ", author='" + author + '\'' +
                '}';
    }

    public Book() {
    }

    public void setSn(String sn) {
        this.sn = sn;
    }

    public void setName(String name) {
        this.name = name;
    }

    public void setPrice(double price) {
        this.price = price;
    }

    public void setAuthor(String author) {
        this.author = author;
    }

    public String getSn() {
        return sn;
    }

    public String getName() {
        return name;
    }

    public double getPrice() {
        return price;
    }

    public String getAuthor() {
        return author;
    }

    private String name;
    private Double price;
    private String author;
}

第五章：Tomcat

5.1 JavaWeb概念

1.什么是JavaWeb？

JavaWeb是指，所有通过Java语言编写可以通过浏览器访问的程序的总称，叫JavaWeb。JavaWeb是基于请求和响应来开发的。

2.什么是请求？

请求是指客户端给服务器发送数据，request。

3.什么是响应？

响应是指服务器给客户端回传数据，response。

4.请求和响应的关系？

请求和响应是成对出现的。

5.2 Web资源的分类

web资源实现技术和呈现的效果不同，又分为静态资源和动态资源两种。

静态资源：html、css、js、TXT、mp4视频、JPG图片

动态资源：jsp页面、serviet程序

5.3 常用的服务器

Tomcat、Jboss、GlassFish、Resin、WebLogic

5.4 Tomcat服务器和Servlet版本的对应关系

Servlet程序从2.5版本是现在市面上使用最多的版本（XML配置），到Servlet3.0之后。就是注解版本的使用。

5.5 Tomcat的使用

5.4.1 如何启动与关闭Tomcat服务器？

一、启动Tomcat

方法一：找到Tomcat目录下得bin目录下的startup.bat文件，双击，就可以启动Tomcat服务器。

方法二【此方法可看到启动错误的详细信息】：

1、打开命令行；

2、cd到Tomcat的bin目录下；

3、敲入启动命令：catalina.run

二、关闭Tomcat

方法一：关闭命令行窗口。

方法二：把Tomcat服务器窗口置为当前窗口，然后按快捷键Ctrl+C。

方法三：找到Tomcat的bin目录下得shutdon.bat双击，就可以停止Tomcat服务器。

5.4.2 如何测试Tomcat服务器启动成功？

打开浏览器，在浏览器地址栏中输入以下地址测试：

1、http://localhost:8080

2、http://127.0.0.1:8080

3、http://真实ip:8080

出现以下界面，即表示启动成功

5.4.3 常见的启动失败的情况

双击startup.bat文件，就会出现一个小黑窗口一闪而过。失败原因是没有配置好JAVA_HOME环境变量。

常见的JAVA_HOME配置错误有以下几种情况：

（1）JAVA_HOME必须全大写；

（2）JAVA_HOME中间是下划线不是减号；

（3）JAVA_HOME配置的路径只需要配置到jdk的安装目录即可。不需要带上bin目录。

5.4.4 如何修改Tomcat的端口号？

Mysql默认端口号：3306

Tomcat：8080

找到Tomcat目录下得conf目录，找到server.xml配置文件。

平时上百度：http://www.baidu.com:80

HTTP协议的默认端口号是：80

5.4.5 如何部署web工程到Tomcat中？

第一种方法：只需把web工程的目录拷贝到Tomcat的webapps目录下即可。

下错误未找到原因：

第二种方法：找到Tomcat下的conf目录Catalina\localhost下，创建配置文件“文件名xml”：

设置该文件内容（示例）：<context path="/abc" docBase="E:\book">

5.4.6 手托HTML页面到浏览器和在浏览器中输入http://ip:端口号/工程名/访问的区别

5.4.7 ROOT的工程访问，以及默认index.html页面的访问

当我们在浏览器的地址栏中输入访问地址如下：

http://ip:port/ =====>>> 没有工程名的时候，默认访问的是ROOT工程。

当我们在浏览器的地址栏中输入访问地址如下：

http://ip:port/ 工程名=====>>> 没有资源名的时候，默认访问的是index.html页面。

5.6 IDEA整合Tomcat服务器

File | Settings | Build, Execution, Deployment | Application Servers

5.7 IDEA中动态web工程的操作

5.7.1 IDEA中如何创建动态web工程并且使用服务器

由上，创建完毕。

目录的简单介绍

5.8 给Tomcat添加jar包

把jar包复制到之前创建好的lib目录中......

5.9 如何在IDEA中部署工程到tomcat上运行

第六章：Servlet

6.1 Servlet技术

6.1.1 什么是servlet

1 、 Servlet 是 JavaEE 规范之一。规范就是接口

2 、 Servlet 就 JavaWeb 三大组件之一。三大组件分别是： Servlet 程序、 Filter 过滤器、 Listener 监听器。

3 、 Servlet 是运行在服务器上的一个 java 小程序，它可以接收客户端发送过来的请求，并响应数据给客户端。

6.1.2 手动实现Servlet程序

1、编写一个类去实现 Servlet 接口

2、实现 service 方法，处理请求，并响应数据

3、到 web.xml 中去配置 servlet 程序的访问地址

6.1.3 sevlet常见程序错误

6.1.4 sevlet生命周期方法

1、执行sevlet构造器方法

2、执行init初始化方法

第一、二步是在第一次访问的时候创建sevlet程序会调用；

3、执行service方法

第三步，每次访问都会调用；

4、执行destroy销毁方法

第四步，在web工程停止的时候调用。

6.1.4 sevlet请求的分发处理

6.1.5 通过继承HttpServlet实现Sevlet程序

一般在实际开发中，都是使用继承HttpSevlet类的方式去实现Sevlet程序。

1、编写一个类去继承HttpSevlet类

2、根据业务需要重写doGet或doPost方法

3、到web.xml中配置Sevlet程序的访问地址

可以通过扩展子类或扩展一般类继承sevlet，方便使用父类的方法

6.1.6 IDEA菜单生成sevlet程序

6.1.7 整个sevlet类的继承体系

6.1.8 SevletConfig类的介绍

SevletConfig类从类名上看来，就知道是Sevlet程序的配置信息类。

Sevlet程序和SevletConfig对象都是由Tomcat负责创建，我们负责使用。

Sevlet程序默认是第一次访问的时候创建的，SevletConfig是每一个Sevlet程序创建时，就创建一个对应的SevletConfig对象。

（1）SevletConfig类的三大作用：

用于作用初始化

1、可以获取Sevlet程序的别名sevlet-name的值；

2、获取初始化参数init-param;

3、获取SevletContext对象；

6.1.9 SevletConfig类的补充说明（此节不太清楚）

每一个sevletConfig程序对应一个sevlet程序，不能获取其他sevlet程序的信息。

当重写init方法之后，要调用super.init(config)方法

6.1.10 SevletContext类

什么是SeveletContext?

1、SevletContext是一个接口，它表示Sevlet上下文对象；

2、一个web工程，只有一个SevletContext对象实例；

3、SevletContext对象是一个域对象；

4、SevletContext是在web工程部署启动的时候创建。在web工程停止的时候销毁。此时的部署相当于，把之前的工程停止，然后再重启现在的工程。只要是重启，都会被销毁，只要有SevletContext对象，就能随时取出来。

什么是域对象？

域对象，是可以像map一样存取数据的对象，叫域对象；这里域指的是存取数据的操作范围。

	存数据	取数据	删除数据
Map	put()	get()	remove()
域对象	setAttribute()	getAttribute()	removeAttribute()

SevletContext类的四个作用

1、获取web.xml中配置的上下文参数context-param

2、获取当前的工程路径，格式：/工程路径

3、获取工程部署后在服务器硬盘上的绝对路径

/ 斜杠被服务器解析地址为：http://ip:port/工程名/ 映射到IDEA代码的web目录

4、像Map一样存取数据

6.1.11 HTTP协议

a) 什么是HTTP协议？

什么是协议？协议是双方或多方相互约好，大家都需要遵循的规则，叫协议。

b) 请求的HTTP协议格式

get请求

post请求

常用请求头说明：

Accept:表示客户端可以接收的数据类型

Accept-Language:表示客户端可以接收的语言类型
User-Agent:表示客户端浏览器的信息

Host:表示请求时的服务器IP和端口号

哪些是get请求哪是post请求：

Get请求：

form 标签method= get
a 标签
link标签引入css
Script标签引入js
img标签引入图片
iframe引入页面
在浏览器地址栏中输入地址后敲回车

POST请求：

form标签method = post

常用的响应码说明

200：表示请求成功

302：表示请求重定向

404：表示请求服务已经收到了，但是你要的数据不存在

500：表示服务器已经收到请求。

MIME类型说明：

6.2 HttpSeverletRequest类

6.2.1 HttpSeverletRequest类的作用

每次只要有请求进入Tomcat服务器，Tomcat服务器就会把请过来的HTTP协议信息解析好封装到Request对象中。然后传递到service方法（doGet和doPost）中给我们使用。我们可以通过HttpServletRequst对象，获取到所有请求的信息。

6.2.2 HttpSeverletRequest类的常用方法

getRequestURI()	获取请求的URL地址
getRequestURL()	获取请求的统一资源定位符（绝对路径）
getRemoteHost()	获取客户端的IP地址
getHeader()	获取请求头
getParameter()	获取请求参数
getParameterValues()	获取请求参数（多个值的时候使用）
getMethod()	获取请求的方式GET或POST
setAttribute(key,value)	设置域数据
getAttribute(key)	获取域数据
getRequestDispatcher()	获取请求转发对象

6.2.3 请求的转发

什么是请求转发？是指服务器收到一个资源后，从一个资源跳转到另一个资源的操作叫请求转发。

尚硅谷Servlet请求转发讲的是真的不错！！！

6.2.4 base标签的作用

（1）Web中的相对路径和绝对路径

（2）web中/的不同意义

6.2.5 Web中的相对路径和绝对路径

在javaweb中，路径分为相对路径和绝对路径两种：

相对路径：

.	表示当前目录
..	表示上一级目录
资源名	表示当前目录/资源名

绝对路径：http://ip:port/工程路径/资源路径

6.2.6 web中，/斜杠的不同意义

6.3 HttpServletResponse类

6.3.1 HttpServletResponse类的作用

HttpServletResponse类通过流来进行访问

6.3.2 两个输入输出流说明

字节流	getOutputStream();	常用于下载（传递二进制数据）
字符流	getWriter();	常用于回传字符串（常用）
两个流同时只能使用一个。否则会报错。

6.3.3 往客户端回传数据

要求往客户端回传字符串数据。

6.3.4 Servlet解决中文乱码

        //它会同时设置服务器和客户端都使用UTF-8字符集，还设置了响应头
        //“resp.setContentType("text/html;charset=utf-8");”此方法一定要在获取流对象之前才有效
        resp.setContentType("text/html;charset=utf-8");

6.3.5 请求重定向

请求重定向，是指客户端给服务器发请求，然后服务器告诉客户端说：“我给你一些新的地址，你去新地址访问”，叫请求重定向。（因为之前的地址可能已经被废弃）。

Tomcat会把每次请求封装成一个response

第七章：jsp

7.1 什么是JSP

jsp的全称是java server pages。java服务器的页面。jsp的主要作用是代替Servlet程序回传html页面的数据。因为Servlet回传数据是一件很繁琐的事情。开发成本极高。

第八章：EL表达式

第九章：JSTL标签库

第十章：文件上传与文件下载

第十一章：Cookie

第十二章：Filter

第十三章：JSON

第十四章：AJAX

第十五章：i18n

第十六章：需要注意的点

需要注意 “new|module” 与 “new|Directory” 的区别：

第十七章：书城项目

javaEE的三层架构

分层的目的是为了解耦。解耦的目的是降低代码的耦合度。方便项目后期的维护和升级。

web层	com.atshnu,web/servlet/controller
service层	com.atshnu.service	Service接口包
	com.atshnu.service.impl	Service接口实现类
dao持久化	com.atshnu.dao	Dao接口包
	com.atshnu.dao.impl	Dao接口是实现类
实体bean对象	com.atshnu.pojo/entity/domain/bean	JavaBean类
测试包	com.atshnu.test/junit
工具类	com.atshnu.utils