unit01-HTML、CSS

HTML: 用于开发网页的一门技术

CSS: 用于修饰、渲染网页的一门技术

HTML+CSS可以开发一个非常美观、非常漂亮的网页

开发网页 盖房子

HTML标签搭建网页的结构 砖块(搭建房子的结构)

CSS属性 石灰、油漆等涂料

HTML概述

HTML是什么

HTML(Hyper Text Markup Language): 超文本标记语言

超文本: 超级文本、超过文本(其中可以包含除了文本以外的其他数据,例如图片、音频、视频等各种格式)

标记:也叫标签、元素、节点等,就是用尖括号(<>)括起来的一组内容,例如:

<head> <body> <div> <span> <table>等

HTML是最基础的开发网页的语言。

HTML由W3C组织提供(CSS/xml)

关于HTML的细节:

(1)使用HTML开发的网页文件通常以 .htm或 .html 为后缀!

(2)使用HTML开发的网页文件由浏览器负责解析并显示(浏览器就是一个html解析器)

(3)HTML是文档的一种(txt/word/ppt/pdf等)

总结: HTML就是用于开发网页的一门语言!!

HTML的结构

1、案例:编写我的第一个HTML网页,并用浏览器打开

新建一个txt文档,将后缀名改为.html,代码实现如下:

<!DOCTYPE html>
<html>
	<head>
		<title>网页的标题</title>
	</head>
	<body>
    	<h1>Hello CGB2003...</h1>
	</body>		
</html>

2、HTML结构详解

(1)<!DOCTYPE HTML> 文档声明, 用来声明HTML文档所遵循的HTML规范和版本
	上面是html5.0的声明, 也是目前最常用的版本
(2)<html></html> 根标签, 用于包裹所有的网页内容(除了文档声明)
(2)<head></head> 头部分, 用来存放HTML文档的基本属性信息, 比如网页的标题, 文档使用的编码等, 这部分信息会被浏览器优先加载.
(3)<body></body> 体部分, 用来存放网页可视化的网页内容. 即真正的网页数据
(4)<title></title> 声明网页的标题
(5)<meta charset="utf-8" > 用来通知浏览器使用哪一个编码来打开HTML文档, 这个编码一定要和文件保存时的编码保持一致, 才不会出现中文乱码问题.

HTML语法(了解)

1、html标签

标签:也叫做标记、元素等,标签分为开始标签,例如:

<head>、<body>

和结束标签,例如:

</head>、</body>

开始标签和结束标签之间还可以包含其他内容。

<head>
	<titile>声明网页的标题</title>
	<meta charset="utf-8">
</head>

有些标签开始标签和结束标签之间没有内容要包裹,通常可以写成自闭标签,例如:

<br/> <hr/> <input/> <img/> <link/>等

2、html属性

在标签上可以声明属性(属性不能独立存在,必须声明在标签上)

<div id="d1" class="c1" style="color:red;">这是一个div元素</div>

标签上可以声明多个属性,多个属性之间用空格分隔

标签上的属性的值可以使用单引号或者双引号引起来

<meta charset="UTF-8" id="m1">
<meta charset='UTF-8' id='m1'>

3、html注释

格式: <!-- 注释内容 -->

注释的作用: (1)为代码添加解释说明

(2)将一些暂时不需要执行的代码注释

浏览器对于html注释中的内容不会解析,也不会显示!

4、html空格和换行

在浏览器中,多个连续的空白字符(空格、制表符tab、换行)会被浏览器显示为一个空格。那么:

如何在网页中做一个换行:可以使用 <br/> 标签做换行

如何在网页中做一个空格:可以使用&nbsp;&emsp;做空格

补充: HTML中是不区分大小写的!

HTML中对语法要求非常不严格!(比如大小写混用,或者标签只有开始没有结束,或者标签的不合理嵌套),但是我们在书写HTML时要按照规范来写。

HTML标签

图像标签

通过img标签可以在网页中插入一副图像

<!-- 
	不推荐写带盘符的绝对路径,因为将来项目发布,位置会改变,到时还要修改图片的路径
<img src="D:/JavaDevelop/WS_CGB2003_WEB/day05-htmlcss/WebContent/imgs/meinv.jpg"/>
 -->
<!-- 
	./: 表示当前目录(当前文件所在的目录),由于当前html在WebContent目录下
	因此 ./叫表示WebContent目录, 另外 ./ 可以省略!
	../: 表示当前目录的上一级目录里(也就是当前目录的父目录)
	../../: 表示当前目录的上一级目录的上一级目录(也就是当前目录的父目录的父目录)
 -->
<img src="./imgs/meinv.jpg" width="50%"/>
<img src="./imgs/lpx.jpg"  width="50%"/>

其中src属性用于指定图片的路径(图片的路径不要是带盘符的绝对路径,推荐使用相对路径)

width属性用于指定图片的宽度

height属性用于指定图片的高度

超链接标签

超链接就是a标签,通过a标签可以在网页中创建指向另外一个文档的超链接

点击超链接可以跳转到另外一个网页(图片/下载路径等),示例:

<!-- 跳转到本地的一个网页 -->
<a href="01-第一个网页.html">01-第一个网页.html</a>
<!-- 跳转到百度首页 -->
<a href="http://www.baidu.com">百度一下,你就不知道</a>
<br/>
<!-- 点击图片跳转到tmooc -->
<a target="_blank" href="http://www.tmooc.cn">
	<img alt="tmooc" src="imgs/tmooc.png" />
</a>

其中 href 属性用于指定点击超链接后将要跳转到的URL地址

target属性用于指定以何种方式打开超链接

_self:默认值, 表示在当前窗口中打开超链接

_blank:表示在新的窗口中打开超链接

表格标签

1.案例:在网页中插入一个3*3的表格

<h1>案例:在网页中插入一个3*3的表格</h1>
<table><!-- 用于在网页中定义一个表格 -->
    <tr><!-- 用于定义一个表格行 -->
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
    </tr>
    <tr>
        <td>11</td><!-- 用于定义一个单元格 -->
        <td>12</td>
        <td>13</td>
    </tr>
    <tr>
        <td>21</td>
        <td>22</td>
        <td>23</td>
    </tr>
    <tr>
        <td>31</td>
        <td>32</td>
        <td>33</td>
    </tr>
</table>

在浏览器中显示效果如下:

image-20200315184602647

在head标签内添加如下内容:

<style>
    /* style标签内只能书写css注释和css代码 */
    table{
        border:*2px solid red; /* 为表格添加边框 */
        border-collapse: collapse; /* 设置边框合并 */
        background-color: pink; /* 为表格设置背景颜色 */
        width: 70%; /* 为表格设置宽度 */
        /* margin-left: 15%; */
        /* 设置表格的左外边距和右外边距自适应(保证两者始终相等) */
        margin-left: auto;
        margin-right: auto;
    }
    td,th{
        border:2px solid red; /* 为单元格添加边框 */
        border-collapse: *collapse*; /* 设置边框合并 */
        padding: 5px; /* 设置单元格边框和内容的距离(内边距) */
    }
    h1{
        /* border: 2px solid blue; */
        text-align: *center*; /* 设置元素中的内容水平居中 */
    }
</style>

再次刷新浏览器显示效果为:

2、表格标签介绍

table -- 用于在网页中定义一个表格
tr -- 用于定义表格中的行
td -- 用于定义表格中的单元格
th -- 用于定义表头行中的单元格(th中的文本默认居中,并且加粗)

3、练习:使用表格标签在网页中生成一个表格,如下图:

要求如下:

(1) 表格内容如下图, 并设置表格边框
(2) 设置单元格之间没有缝隙, 并设置单元格边框和内容之间的距离为5px
(3) 设置表格的背景颜色为pink, 并设置表格的宽度为70%
(4) 设置表格在网页中居中显示, 并为表格添加表头以及标题

表单标签

1、表单的作用: 用于向服务器提交数据

向服务器提交数据的两种方式:

(1)通过表单向服务器提交数据

表单中可以包含表单项标签,在表单项中可以填写数据(比如用户名、密码等),填写完成后通过提交表单,可以将表单中的数据提交给相应的服务器。

(2)通过超链接向服务器提交数据

http://www.baidu.com?username=张三&pwd=123&like=篮球

<a href="http://www.baidu.com?username=张三&pwd=123&like=篮球" target="_blank">百度一下,你就不知道!</a>

在地址栏URL地址的后面通过问号(?)可以拼接参数,参数可以有多个,多个参数之间用&分隔,参数还分为参数名(例如:username/pwd/like)以及参数值(例如:张三/123/篮球),在回车后访问百度服务器的同时,就可以将问号后面拼接的参数一并带给百度服务器。

2、表单标签

<form action="url地址" method="提交方式"></form>

其中action属性用于**指定表单的提交地址,**例如,将action指向百度服务器,就意味着将来填写完表单后,提交表单将会把表单中的数据提交给百度服务器。

method="GET/POST" 属性是用于指定表单的提交方式,常用的就是GET和POST提交。

表单项标签

1、input元素:

(1)普通文本输入框(比如:用户名/昵称/邮箱/验证码等)

<input type="text" name="username"/>

(2)密码输入框(比如:密码/确认密码等)

<input type="password" name="pwd"/>

(3)单选框(比如:性别/部门等)

<input type="radio" name="gender"/>男

(4)复选框/多选框(比如:爱好/岗位等)

<input type="checkbox" name="like"/>

(5)普通按钮(比如:换一张图片)

<input type="button" value="换一张"/>

普通按钮本身没有功能,但我们可以通过js为按钮添加功能或添加行为

(6)提交按钮(比如:提交/注册/登录)

<input type="submit" value="提交/注册/登录"/>

提交按钮用于提交表单中的数据到服务器中!

2、select、option标签:

<select name="city">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option selected="selected">广州</option>
    <option>深圳</option>
</select>

select用于定义一个下拉选框

option用于定义下拉选框上的选项

selected设置当前option选项默认被选中

3、textarea多行文本输入区域:

<textarea name="description" cols="30" rows="5"
placeholder="请输入描述信息..."></textarea>

cols属性: 用于设置文本输入框的列数(宽度)

rows属性: 用于设置文本输入框的行数(高度)

placeholder属性: 设置输入框中的提示消息!

表单细节问题

1、提交表单时,表单中的数据为什么没有被提交?

对于表单中的表单项标签,只要是需要向服务器提交数据,该表单项上必须添加name属性;如果表单项标签上没有name属性,在表单提交时,该项将会被忽略。例如:

<input type="text" name="username"/>
<input type="password" name="psw"/>

2、如何让多个单选框只能有一个被选中?

要求多个单选框必须具有相同的name属性值,如果多个单选框name属性值相同,则说明是一个组的内容,一个组中的单选框只能选择其中的一个!

<td>性别:</td>
<td>
    <input type="radio" name="gender"/>男
    <input type="radio" name="gender"/>女
</td>

3、为什么单选框、复选框选择某一项后提交的值都是on?

因为单选框、复选框只能选择,不同于用户名、密码输入框,可以输入内容。

因此我们需要通过value属性为单选框或复选框设置提交的值(如果不设置默认值都是on),例如:

<input type="radio" name="gender" value="male"/>男
<input type="radio" name="gender" value="female"/>女

4、如何设置单选框或复选框默认选中某一项?

可以在单选框或复选框标签上添加一个checked="checked"属性,就可以让当前单选框或复选框默认被选中。例如:

<input type="radio" checked="checked" name="gender" value="male"/>男
<input type="radio" name="gender" value="female"/>女
<!-- 爱好复选框/多选框 -->
<input type="checkbox" name="like" value="basketball"/>篮球
<input type="checkbox" checked="checked" name="like" value="football"/>足球
<input type="checkbox" name="like" value="volleyball"/>排球

5、如何设置下拉选框默认选中某一项?

在option标签上添加一个selected="selected"属性,可以让当前option选项默认被选中,例:

<select name="city">
    <option>北京</option>
    <option>上海</option>
    <option selected="selected">广州</option>
    <option>深圳</option>
</select>

6、下拉选框中option选项上的value属性的作用是什么?

<select name="city">
	<option value="beijing">北京</option>
	<option value="shanghai">上海</option>
	<option selected="selected">广州</option>
	<option>深圳</option>
</select>

如果某一个选项被选中,并且该选项上添加了value属性,在提交表单时,将会提交value属性的值。

如果某一个选项被选中,该选项上没有添加value属性,在提交表单时,将会提交标签中的内容

注册表单案例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
/* style标签内只能书写css注释和css代码 */
table {
	border: 2px solid red; /* 为表格添加边框 */
	border-collapse: collapse; /* 设置边框合并 */
	background-color: lightgrey; /* 为表格设置背景颜色 */
	/* margin-left: 15%; */
	/* 设置表格的左外边距和右外边距自适应(保证两者始终相等) */
	margin-left: auto;
	margin-right: auto;
}

td, th {
	border: 2px solid red; /* 为单元格添加边框 */
	border-collapse: collapse; /* 设置边框合并 */
	padding: 5px; /* 设置单元格边框和内容的距离(内边距) */
}

h1 {
	/* border: 2px solid blue; */
	text-align: center; /* 设置元素中的内容水平居中 */
}
</style>
</head>
<body>
	<h1>欢迎注册</h1>
	<form action="#">
		<table>
			<tr>
				<!-- 用户名输入框 -->
				<td>用户名:</td>
				<td><input type="text" name="username" /></td>
			</tr>
			<tr>
				<!-- 密码输入框 -->
				<td>密码:</td>
				<td><input type="password" name="pwd" /></td>
			</tr>
			<tr>
				<!-- 性别单选框 -->
				<td>性别:</td>
				<td><input type="radio" checked="checked" name="gender"
					value="male" />男 <input type="radio" name="gender" value="female" />女
				</td>
			</tr>
			<tr>
				<!-- 爱好复选框/多选框 -->
				<td>爱好:</td>
				<td><input type="checkbox" name="like" value="basketball" />篮球
					<input type="checkbox" checked="checked" name="like"
					value="football" />足球 <input type="checkbox" name="like"
					value="volleyball" />排球</td>
			</tr>
			<tr>
				<!-- 城市下拉选框 -->
				<td>城市:</td>
				<td><select name="city">
						<option value="beijing">北京</option>
						<option value="shanghai">上海</option>
						<option selected="selected">广州</option>
						<option>深圳</option>
				</select></td>
			</tr>
			<tr>
				<!-- 自我描述 多行文本输入框 -->
				<td>自我描述:</td>
				<td><textarea name="description" cols="30" rows="5"
						placeholder="请输入描述信息..."></textarea></td>
			</tr>
			<tr>
				<!-- 提交按钮 -->
				<!-- colspan: 设置单元格横跨的列数 -->
				<td colspan="2" style="text-align: center;"><input
					type="submit" value="提交" /></td>
			</tr>
		</table>
	</form>
</body>
</html>

CSS概述

什么是CSS?(了解)

CSS: 层叠样式表,用于修饰、渲染网页的一门技术

使用css样式修饰网页,可以实现将设置样式的css代码和展示数据的html代码进行分离,增强了网页的展示能力!

在HTML中引入CSS

方式1:通过style属性引入css(不推荐)

<!-- 
	1.通过标签上的style属性给div设置样式 
	边框:2px solid red 
	字体大小:26px
	背景颜色为:pink
-->
<div style="border:2px solid red;font-size:26px; background:pink;">这是一个div...</div>

由于上面这种方式是将css样式代码,直接写在标签上的style属性内部,如果属性太多,容易造成页面结构的混乱,不利于后期的维护。

将样式代码写在标签上,样式代码只对当前标签生效,代码无法复用!

并且使用这种方式无法将html标签和css样式进行分离!

因此不推荐使用这种方式!(这种通过style属性添加的样式,叫做行内样式/内联样式)

方式2:通过style标签引入css

在head标签内部可以添加一个style标签,在style标签内部可以直接书写css样式

这种方式是将所有的css样式代码集中在一个style标签内部统一管理,这种方式不会造成页面结构的混乱,并且可以实现代码的复用!

初步的实现了将html标签代码和css样式代码进行了分离!

代码示例 :

<!-- 2.通过style标签给span设置样式如下: 
	边框: 2px solid green
	字体大小: 30px
	字体加粗
-->
<head>
<meta charset="utf-8">
<style type="text/css">
	/* ****** CSS样式 ****** */
	span{ /* 为当前html中的所有span标签设置样式 */
		border:2px solid green;
		font-size:30px;
		font-weight:bolder; /* bold/bolder */
	}
</style>
</head>

方式3:通过link链接引入外部的css文件

在head标签内部,通过一个link标签可以引入外部的CSS文件

这种方式是将所有的css代码集中在一个单独的css文件中统一管理,真正的实现了将css代码和html代码的分离,实现了代码的复用。

代码示例:html中引入demo.css文件

<!-- 3.通过link标签引入外部的css文件,为p元素设置样式如下: 
	边框: 2px solid blue;
	字体颜色:red
	字体设置为华文琥珀
	设置首行文本缩进50px
-->
<!-- 引入demo.css文件(中的样式) -->
<link rel="stylesheet"  href="demo.css"  />

demo.css文件

@charset "UTF-8";
p{
	border: 2px solid blue;
	color: red;
	font-family: "华文琥珀";
	text-indent: 50px;
}

CSS选择器

所谓的选择器就是能够在html中帮助我们选中元素进行修饰的一门技术。

标签名选择器

通过元素名称(或标签名称)选中指定名称的所有标签

格式: 元素名/标签名{ css样式... }

/* ----- 1.标签名选择器练习 ----- 
将所有span标签的背景颜色设置为#efbdef, 设置字体大小为22px,字体加粗;*/
span{ /* 选中所有的span元素 */
	background-color:#efbdef; 
	font-size: 22px;
	font-weight: bolder;
}

class选择器

可以为元素添加一个通用的属性 -- class,通过class属性为元素设置所属的组,class值相同的元素则为一组。通过class值可以选中这一组的元素,为元素添加样式。

格式:.class值{ css样式... }

实例:

/* ----- 2.类选择器练习 ----- 
(1)将所有的span(但是不包括div和p标签下的span)的背景颜色设置为#faf77b,边框改为2px solid cyan;
(2)将div下的span和内容为"span111"的span,背景颜色设置为#5eff1e、字体颜色设置
#ec0e7e;*/
.s1{ /* 选中所有class值为s1的元素 */
	background: #faf77b;
	border: 2px solid cyan;
}
.s2{ /* 选中所有class值为s2的元素 */
	background: #5eff1e;
	color: #ec0e7e;
}

另外,一个元素也可以设置多个class值,多个class值中间用空格分隔,例如:

<span class="s1 s2" >span111</span>

表示当前元素同时属于多个分组,多个分组上设置的样式也会同时作用在当前元素上。

如果多个分组设置了相同的样式(但是值不一样),样式会发生冲突,写在后面的样式会覆盖前面的样式!


内容补充:选择器优先级顺序:

(1)如果是同一类选择器,同时给某些元素设置了样式,如果样式冲突了,那么写在后面的样式会覆盖前面的样式。

(2)如果是不同的选择器,设置的样式优先级顺序是:id选择器(100) > 类选择器(10) > 元素名选择器(1)


id选择器

通过标签上通用的属性id,可以为标签设置一个独一无二的编号(id值应该是唯一的),通过id值可以唯一的选中一个元素。

格式:#id值{ css样式 }

/* ----- 3.id选择器练习 -----
用id选择器将第一个p标签设置字体大小为24px,字体颜色为#a06649, 首行文本缩进20px。*/
#p1{ /* 选中id值为p1的元素 */
	font-size:24px;
	color: #a06649;
	text-indent: 20px;
}
<p id="p1">这是一个p元素!!!</p>

后代选择器

选中指定元素内部的指定后代元素

格式: 祖先 后代{ css样式... }

/* ----- 4.后代选择器练习 ----- 
为p元素内部的所有span元素,设置字体大小为18px,字体颜色为红色,背景颜色为pink;*/
p span{ /* 匹配所有p元素内部的所有span元素 */
	font-size:18px;
	color: red;
	background: pink;
}
/* p,span{} 匹配所有的p元素和所有的span元素 */
<p id="p1">
	这是一个p元素!!!
	<span>这是一个span元素!!!</span>
</p>

属性选择器

在选择器选中元素的基础上,根据元素的属性条件筛选/过滤元素

格式:选择器[属性条件]...{ css样式 }

/* ----- 5.属性选择器 ----- 
为所有的文本输入框,设置背景颜色为#FF7CCC、字体大小22px,首行文本缩进15px;*/
input[type='text']{ /* 匹配所有的input并且type值为text的元素 */
	background: #FF7CCC;
	font-size: 22px;
	text-indent: 15px;
}
input[type='text'][name='email']{ 
	/* 选中所有的input并且type值为text、并且name为email的元素 */
	background : yellow;
}

常用属性总结

文本属性

1、text-align:设置元素内的文本水平对齐方式,其常用取值为:

left: 默认值。左对齐
right: 右对齐
center: 居中对齐
justify: 两端对齐

2、text-decoration:设置文本的下划线样式,其常用取值为:

underline: 有下划线
none: 没有下划线

3、text-indent:设置文本首行缩进,单位: 像素/百分比

4、letter-spacing:设置字符间隔/间距,其常用取值为:

normal
像素值

5、text-shadow:设置字体阴影,其取值为:

像素值 像素值 像素值 颜色值
第一个值为阴影水平位移,第二个值为阴影垂直位移,第三个值为阴影扩散值,第四个值为阴影颜色

字体属性

font-size:设置字体大小

font-weight:设置字体粗细 normal、bold、bolder 100/200/300../900

font-family:设置字体,比如微软雅黑、黑体、楷体等

color:设置字体颜色

背景属性

background-color:设置背景颜色

background-image:设置背景图片,url('图片的路径');

background-repeat:设置或检索对象的背景图片是否及如何排列,常用取值:

repeat(默认值,重复排列)
repeat-x(横向重复排列,但纵向不重复)
repaet-y(纵向重复排列,但横向不重复)
no-repeat(不重复)

background-position:设置或检索对象的背景图片位置

background: 背景颜色 背景图片 背景图片是否重复 背景图片的位置

边框(border)

border:2px solid red; -- 设置元素的边框(可以同时设置边框的宽度、样式、颜色)

border属性可以拆分为如下设置:

border-width: 2px; -- 设置元素边框的宽度
border-style: solid; -- 设置元素边框的样式
border-color: red; -- 设置元素边框的颜色

其中border-width、border-style、border-color也可以按照上右下左方向进行拆分,以border-width为例:

border-top-width: 2px; -- 设置上边框的宽度
border-left-width: 2px; -- 设置左边框的宽度
border-right-width: 2px; -- 设置右边框的宽度
border-bottom-width: 2px; -- 设置下边框的宽度

其他属性

width:设置元素的宽度

height:设置元素的高

margin: 设置元素的外边距

margin-top: 10px; -- 设置元素的上外边距为10px;
margin-right: 20px; -- 设置元素的右外边距为20px;
margin-bottom: 30px; -- 设置元素的下外边距为30px;
margin-left: 40px; -- 设置元素的左外边距是40px;
---------------------------------------------
margin: 10px 20px 30px 40px; -- 上 右 下 左, 顺时针方向对应
margin: 10px 20px 30px; -- 上 左右 下
margin: 10px 20px; -- 上下 左右
margin: 10px; -- 上下左右都是10px;

补充: 颜色设置

颜色取值方式常见的方式有三种:

方式一:设置颜色名,例如:

red、green、blue、yellow、cyan、pink、white、black等

方式二:设置#加上六位的十六进制数值

#FF0000(red)、#00FF00(green)、#0000FF(blue)、#FFFF00(yellow)、#00FFFF(cyan)等

方式三:设置rgb颜色值

rgb(255,0,0) 、rgb(0,255,0) 、rgb(0,0,255) 、rgb(255,255,0) 、rgb(0,255,255) 等
(red) (green) (blue) (yellow) (cyan)

网页开发实战

完成JT项目中的登录页面!

完成JT项目中的注册页面!(选作!)

注册页面视频:https://www.bilibili.com/video/BV16K4y1x7wX

扩展内容

display属性

display用来设置元素的类型,常用取值:

block:块级元素的默认值
    默认情况下独占一行
    可以设置宽高
inline:行内元素的默认值
    默认情况下多个行内元素可以处在同一行
    一般不能设置宽高
inline-block:行内块元素
    多个元素既可以显示在同一行, 也可以设置宽和高
none:表示隐藏元素

元素类型(了解)

div/span/p 都是一个容器标签,用于包裹其他内容(这些元素本身不具备太多的样式!)

p: 块级元素,默认独占一行,用于包裹一段文本(写文章时用于p标签包裹每一段内容)

div: 块级元素,默认独占一行,用于包裹其他内容,将样式设置在div上,就可以作用在div的内容上。

span:行内元素,默认可以和其他元素显示在同一行。

(1)块级元素(block)

默认情况下,块级元素独占一行

可以设置宽和高,如果设置了就是设置的宽和高

如果不设置宽和高,其中宽是默认填满父元素,而高是由内容决定(由内容支撑)

比如: div/p/h1~h6/form/table 等元素都是块级元素

(2)行内元素(inline)

默认情况下,多个行内元素可以处在同一行

不能设置宽和高

比如: span/input/img/i/b 等元素都是行内元素

(3)行内块元素(inline-block)

既具备行内元素的特征(可以同行显示),还具备块级元素的特征(可以设置宽和高)

htmlcss作业

06-05作业:

1、使用html+css实现一个4*4的表格, 并设置边框、背景等样式

2、完成课上讲的注册表单页面(能提交数据)

3、练习CSS的三种引入方式、练习CSS选择器

4、完成课上讲的京淘登录页面

unit02-JavaScript

JavaScript简介

什么是JavaScript(了解)

全称叫做JavaScript,简称叫做JS

由NetScape(网景)公司提供,是一门专门嵌入在浏览器中执行的脚本语言

LiveScript JavaScript

JS运行在浏览器中,负责实现网页中的动画效果

或者是实现表单校验等功能

JS特点和优势(了解)

1、特点:

(1)JS是一门直译式的语言(边解释边执行,没有编译的过程)

java--> 编写时 xx.java --->编译成 xx.class --> 运行class文件

js ---> 编写时 html, 编写时 js文件, 直接运行, 没有编译过程

(2)JS是一门基于对象的语言(JS中没有类的概念,也没有编译的过程)

JS中是有对象的(内置对象、自定义对象)

(3)JS是一门弱类型的语言(Java:强类型)

在java中: 变量一旦声明, 就属于固定的数据类型, 不能被改变
String str = "abc";
int number = 100;
在JS中: 变量是不区分类型的, 可以指向任意的数据类型
var s = 100;
s = "abc";
s = true;
s = [];
s = function(){}

2、优势:

(1)JS具有良好的交互性

(2)JS具有一定的安全性(只能在浏览器内部运行,不能访问浏览器以外的资源)

(3)JS具有跨平台性(JS 浏览器)

( JS语言是跨平台的,是因为有浏览器,但浏览器不跨平台

Java语言是跨平台的,是因为有虚拟机,但虚拟主机不跨平台 )

在HTML书写JS的方式

1、在script标签内部可以书写JS代码:

在head或者body标签内部可以添加一个script标签,在script标签内部可以直接书写JS代码!

<!-- 在script标签内部可以书写JS注释和JS代码 -->
<script type="text/javascript">
	//JS的单行注释
	/* JS的多行注释 */
	alert( "在html中引入JS的第一种方式..." );
</script>

2、通过script标签引入外部的JS文件

在head或body标签内部,可以通过script标签引入外部的JS文件。例如:

<!-- 通过script标签可以引入外部的JS文件 -->
<script src="demo.js"></script>

注意:(1)在引入js文件的script标签内部不要书写JS代码,例如:

<script src="demo.js">
	alert( 111 ); //这里的代码不会执行
</script>

(2)不要将引入JS文件的script标签自闭,因为可能会导致文件引入失败,如下:

<script src="demo.js" />

扩展内容:也可以直接在元素上书写JS代码

<!-- 直接在元素上书写JS代码:
onclick属性用于给当前元素绑定点击事件:点击元素就会触发事件,执行相应函数
-->
<input type="button" value="点我~" onclick="alert('叫你点你还真敢点啊!!!')"/>
<input type="button" value="别点我"  onclick="console.log( new Date() )"/>

JavaScript语法

注释格式

JS的注释符号和Java的注释符号相同,如下:

// 单行注释内容
/* 多行注释内容 */

数据类型

1、基本数据类型

(1)数值类型(number)

在JS中,所有的数值在底层都是浮点型,但是在处理和显示的过程中会自动的和整型进行转换。

例如:2.4+3.6=6
特殊值:Infinity(无穷大) / -Infinity(负无穷大) / NaN(非数字)

(2)字符串类型(string)

在JS中,字符串类型属于基本数据类型,字符串常量可以使用单引号或者使用双引号引起来。例如:

var s1 = "Hello JS";
var s2 = 'Hello JS';

另外,JS中字符串类型有对应的包装对象(String),在需要时会自动的和包装对象进行转换。

var s1 = "Hello JS"; //基本数据类型, string
console.log( typeof s1 ); //string
var s2 = new String("Hello JS"); //复杂数据类型, object
console.log( typeof s2 ); //object
//不管是基本数据类型s1, 还是对象类型s2, 都可以当作对象来用
console.log( s1.valueOf() ); //s1是基本数据类型, 会转成对象, 调用valueOf函数
console.log( s2.valueOf() );

(3)布尔类型(boolean)

布尔类型的值有两个,分别为true和false。

(4)undefined类型

undefined类型的值只有一个,就是undefined,表示变量未定义(但不是指变量没有声明)。

是指声明了变量,但没有为变量赋值,该变量的值就是undefined。

/* 1.undefined类型 */
var x;
alert( x ); //undefined
alert( y ); //抛异常

(5)null类型

null类型的值也只有一个,就是null,表示空值。

可以作为函数的返回值,表示函数返回的是一个空的对象。

注意:null和undefined类型的变量是不能调用函数或属性的,会抛异常!

2、复杂数据类型

主要指对象(JS的内置对象、自定义的对象、函数、数组)

变量声明

JS中是通过var关键字声明变量,声明的变量是不区分类型,可以指向任意的数据。例如:

var x = 100;
x = "abc";
x = true;
x = [];
x = function(){}
x = new Object();
x = {};

另外,JS中多次声明同名的变量不会出现语法错误,例如:

/* 2.变量的定义 */
var s = "Hello"; // var s; s="Hello";
var s = 123; // var s; s=123; 第二次声明变量x没有生效
alert( s ); //123

JS是严格区分大小写的!

JS运算符

JS和Java中的运算符大致相同,例如:

算术运算符: +,-,*,/,%,++,--
赋值运算符: =,+=,-=,*=,/=,%=
比较运算符: ==,!=,>,>=,<,<=
位运算符: & , |
逻辑运算符: && ,||   ( false && 表达式, true || 表达式 )
前置逻辑运算符: ! (not)
三元运算符: 表达式 ? 表达式 : 表达式
。。。

JS语句

JS中的语句和Java中的语句也大致相同

1、if分支结构

if分支结构用于基于不同的条件来执行不同的动作。语法结构如下:

if (条件 1){
	当条件 1 为 true 时执行的代码
}else if (条件 2){
	当条件 2 为 true 时执行的代码
}else{
	当条件 1 和 条件 2 都不为 true 时执行的代码
}

2、switch语句

使用 switch 语句来选择要执行的多个代码块之一。语法结构如下:

switch(n){
	case 1:
		执行代码块 1
		break;
	case 2:
    	执行代码块 2
		break;
    ...
	default:
		与 case 1 和 case 2 不同时执行的代码
}

执行原理:首先设置表达式 n(通常是一个变量)。随后表达式的值会与结构中的每个case 的值做比较。如果存在匹配,则与该 case 关联的代码块会被执行。请使用 break来阻止代码自动地向下一个 case 运行。

3、for循环语句 -- 循环代码块一定的次数

for 循环的语法结构如下:

for (语句 1; 语句 2; 语句 3){
	被执行的代码块
}

4、while循环 -- 在指定条件为真时循环执行代码块

JS中while循环也分为while和do/while循环,下面为while循环语法结构:

while (条件){
	需要执行的代码
}

while 循环会在指定条件为真时循环执行代码块。

案例1:if分支案例: 接收用户输入的成绩,判断成绩所属的等级

80~100(包括80,也包括100) 优秀
60~80(包括60,但不包括80) 中等
0~60(包括0,但不包括60) 不及格
其他值 输入有误

代码实现如下:

propmt( 参数1, 参数2 )函数:在页面上弹出一个消息输入框,接收的参数1是在弹框中显示的提示内容,用户输入的内容,会作为函数的返回值直接返回。

参数2, 是输入框中的默认值, 可以修改

var score = prompt("请输入您的成绩: ");
if( score >= 80 && score <=100 ){
	alert("您的成绩属于: 优秀!");
}else if( score >= 60 && score < 80 ){
	alert("您的成绩属于: 中等!");
}else if( score >= 0 && score < 60 ){
	alert("您的成绩属于: 不及格!");
}else{
	alert("您的输入有误, 请重新输入!");
}

案例2:switch语句案例—实现一个简易的计算器:

可以接收用户输入的两个数值和一个运算符(+、-、*、/),根据运算符号的不同,对两个数值执行不同的运算。

代码实现如下:

//1.接收用户输入的数值和运算符, 中间用空格分隔

var str = prompt("请输入数值1、运算符、数值2,中间用空格分隔:"); //"10 + 5"

//2.对用户输入的内容进行切割(以空格作为分隔符切割)

var arr = str.split(" "); // ["10", "+", "5"]

var num1 = arr[0] - 0 ;
var opt = arr[1];
var num2 = arr[2] - 0 ;
//3.通过switch分支实现计算器
switch( opt ){
	case "+":
		alert( "两个数的和为: "+( num1+num2 ) );
		break;
	case "-":
		alert( "两个数的差为: "+( num1-num2 ) );
		break;
	case "*":
		alert( "两个数的乘积为: "+( num1*num2 ) );
		break;
	case "/":
		alert( "两个数的商为: "+( num1/num2 ) );
		break;
	default:
		alert( "您输入的运算符有误, 请重新输入!" );
}

案例3:for循环语句案例

遍历1~100之间的所有整数,求1~100之间所有整数的和,并输出到控制台;

代码实现如下:

//--------------------------------------
var i = 1;
var sum = 0;
while( i <= 100 ){
    sum += i;
    i++;
}
alert( "1~100之间所有整数的和为: "+sum );
//--------------------------------------
var sum = 0;
for( var i=0; i<=100; i++){
	sum += i;
}
alert( "1~100之间所有整数的和为: "+sum );
//--------------------------------------

案例4:while循环语句案例

遍历下面数组中的元素,将元素输出到控制台。

var arr = [123, "abc", false, new Object() ];

代码实现如下:

var arr = [123, "abc", false, new Object() ];
var index = 0;
while( index < arr.length ){
	console.log( arr[index] );
	index++;
}
for( var i=0; i<arr.length; i++ ){
	console.log( arr[i] );
}

JS数组

Array 对象用于在单个的变量中存储多个值。

JS数组的声明方式一:

//声明一个空数组,长度为零
var arr1 = [];
//声明一个数组,并为数组设置初始值
var arr2 = ["Hello", 111, false, new Object() ];

JS数组的声明方式二:

//声明一个空数组,长度为零
var arr3 = new Array();
//声明一个数组,并为数组设置初始值
var arr4 = new Array("Hello", 111, false, new Object());

数组中的细节问题:

(1)JS中的数组可以存储任意类型的数据

(2)JS中的数组长度是可以被任意改变的

var arr1 = [];
console.log("此处数组的长度为: "+arr1.length ); // 0
arr1.length = 5;
console.log("此处数组的长度为: "+arr1.length ); // 5
arr1[9] = "a";
console.log("此处数组的长度为: "+arr1.length ); // 10
arr1[99] = "b";
console.log("此处数组的长度为: "+arr1.length ); // 100

JS函数

函数就是一个具有功能的代码块, 可以反复调用

函数就是包裹在花括号中的代码块,前面使用了关键词 function。

JS中声明函数的方式为:

function 函数名称([参数列表]){
	函数体
}

或者:

var 变量名/函数名 = function([参数列表]){
	函数体
}

调用函数: 函数名称([参数列表]);

综合练习

(自己完成)声明一个函数fn,在函数中实现:遍历指定的两个数值(例如1和100)之间的整数,将是3的倍数的数值存入到一个数组中,并将数组返回。

1、声明fn函数

//声明一个fn函数,接收两个参数
function fn(x,y){
    //声明一个数组,用于存储是3的倍数的数值
    var arr = [];
    //循环x到y之间的所有整数
    for(var i=x,j=0;i<y;i++){
        //判断i(当前正在遍历的整数)是否为3的倍数
        if(i%3==0){
        	arr[j] = i; //如果是,则将i存入arr数组中
        	j++; //j自增
    	}
    }
    return arr; //返回arr数组
}

2、调用fn函数, 获取1~100之间是3的倍数的数值组成的数组

var arr = fn(1,100);

3、遍历数组中的元素, 输出在网页上(提示: document.write("输出的内容") )

for(var i=0;i<arr.length;i++){
	document.write(arr[i]+" ");
}

DOM操作

DOM: Document Object Model,文档对象模型,其实就是JS专门为访问html元素提供的一套API。

案例:电灯开关

点击电灯可以实现开/关灯,代码实现如下:

var flag = "off"; //标记灯的状态, off表示灯是关闭的!
function changeImg(){
	//获取img元素,返回的是一个JS对象
	var oImg = document.getElementById("img1");
	if( flag == "off" ){ //表示灯之前是关闭状态,点击之后则需要打开
		oImg.src = "imgs/on.gif"; //灯打开了
		flag = "on"; //更新灯的状态为on,表示灯打开了
	}else{ //on,表示灯之前是打开状态,点击之后则需要关闭
		oImg.src = "imgs/off.gif"; //灯关闭了
		flag = "off"; //更新灯的状态为off,表示灯关闭了
	}
}

案例:增删改元素

点击网页中的按钮对html元素进行操作

练习1、添加元素:添加一个div元素到body中

function addNode(){
    //1.创建一个新的div元素(返回的是一个JS对象, 表示新创建的div元素)
    var newDivObj = document.createElement("div"); // \<div\>\</div\>
    newDivObj.innerHTML = "我是新来的....";
    //2.获取body元素(body是父元素)
    var bodyObj = document.body;
    //3.通过父元素(body)添加子元素(newDivObj)
    bodyObj.appendChild( newDivObj );
}

练习2、删除元素: 删除id为div_2的元素

function deleteNode(){
    //1.获取要删除的元素(id为div_2)
    var div2 = document.getElementById("div_2");
    //2.获取id为div_2的元素的父元素
    var parent = div2.parentNode;
    //3.通过父元素删除子元素
    parent.removeChild( div2 );
}

练习3、更新元素内容:将div_3的内容更新为当前时间

function updateNode(){
    //1.获取id为div_3的元素
    var div3 = document.getElementById("div_3");
    //2.获取表示当前时间的字符串
    var dateStr = new Date().toLocaleString();
    //3.将div_3元素的内容更新为当前时间
    div_3.innerHTML = dateStr;
}

案例:网页换肤

/** 练习1:执行下面的函数,切换字体大小 */
function resize( selector ){
	//获取id为newstext元素
	var div = document.getElementById("newstext");
	//将id为newstext元素的class属性值设置为 selector
	div.className = selector;
}

/** 练习2:执行下面的函数,为页面切换不同的皮肤
	点击换肤链接时,执行changeStyle函数,将link标签的href属性值指向
	不同的css文件的路径,就会使用不同的css文件中的样式 */
//定义数组,存放不同的皮肤(css文件的路径)
var styleArr = ["css/red.css", "css/green.css", "css/blue.css"];
var index = 0;
function changeStyle(){
	//获取head中的link标签(id=link)
	var link = document.getElementById("link");
	//	将link标签的href属性值指向css文件的路径
	link.href = styleArr[index];
	index++;
	if( index == styleArr.length ){ //如果下标等于数组长度
		index = 0; //则将下标重置为0
	}
}

总结:JS获取元素

document是一个js对象,用于表示当前html网页。当浏览器加载完整个html网页后,会用document对象表示整个html网页!

document.getElementById( id值 ) -- 通过元素的id值,获取一个元素。返回的是表示该元素的js对象。

<div id="div1">xxxx</div>
//获取id为div1的元素
var oDiv1 = document.getElementById("div1");
//oDiv1是一个js对象,表示获取的div元素

document.getElementsByTagName( 元素名 ) -- 通过元素名称获取当前文档中的所有指定名称的元素,返回的是一个数组,其中包含了所有指定名称的元素。

document.body -- 获取当前文档中的body元素

element.parentNode -- 获取当前元素的父元素。element表示当前元素

总结:JS增删改元素

document.createElement( 元素名称 ) -- 根据元素名称创建指定名称的元素,返回的是表示新创建元素的js对象

parent.appendChild( child ) -- 通过父元素添加子元素,其中parent表示父元素,child表示子元素

parent.removeChild( child )-- 通过父元素删除子元素,其中parent表示父元素,child表示子元素

element.innerHTML -- 获取当前元素的html内容(从开始标签到结束标签之间的所有内容),还可以设置当前元素的html内容(如果元素内部有内容,将会覆盖原有内容)

<div id="div1">
	这是一个div元素...
	<span>这是一个span元素</span>
</div>
//获取div元素
var oDiv1 = document.getElementById("div1");
oDiv1.innerHTML;//获取div元素的内容

htmlcss+JS作业

05-09作业:

1、独立完成京淘注册页面(1~2遍)

2、(选作)完成京淘的登录页面

3、完成课上讲过的JS语句案例里

(1) if分支结构案例: 接收用户输入的成绩, 判断成绩所属的等级
(2) switch语句: 实现一个简易计算器
(3) 综合案例

05-11作业:

1、完成课上讲过的DOM操作相关的案例:

(1)电灯开关
(2)增删改元素
(3)网页换皮肤

2、复习文档就绪事件函数(掌握什么时候该使用文档就绪事件函数)

unit03-jQuery

jQuery简介

什么是jQuery(了解)

jQuery: JavaScript Query JS查询

jQuery是一门轻量的、免费开源的JS函数库(就是JS的简单框架)

jQuery可以极大的简化JS代码

jQuery的核心思想:“写的更少,但做的更多”


轻量的:是指一个技术或框架对代码或程序的侵入程度是比较低的。

或者说代码对该技术依赖程度越低,这个技术越轻。对该技术的依赖程度越高,这个技术越重。

jQuery本质就是一个包含了很多函数的JS文件,如果要在某一个HTML中使用这个JS文件中的函数,就必须得将JS文件引入到HTML中(想使用jQuery,就得引入jQuery的函数库文件,就是一个JS文件)


jQuery的优势(了解)

(1) 可以极大的简化JS代码

(2) 可以像CSS选择器一样获取html元素

css中获取所有的div,给div添加样式:

div{ css属性... }

jQuery中获取所有div,给div添加边框样式:

$("div").css("border", "2px solid red");
JS获取id为div1的元素: document.getElementById("div1")
jQuery获取id为div1的元素: $("#div1")

(3) 可以通过修改css属性控制页面的效果

(4) 可以兼容常用的浏览器

比如: JS中的innerText属性、removeNode()函数、replaceNode( )函数 这些函数在某些浏览器中是无法使用的。

jQuery中提供了相应的函数( text函数、remove函数、replaceWith函数 )

常用浏览器:谷歌浏览器、火狐浏览器、苹果浏览器、欧朋浏览器等

jQuery引入

jQuery的函数库文件就是一个普通的JS文件,引入jQuery和引入JS文件的方式一样。

<!-- 在使用jQuery之前,必须先引入jQuery的函数库文件 -->
<script src="js/jquery-1.8.3.js"></script>

在引入jQuery函数库文件时,如果文件引入路径错误,则会导致文件引入失败,如下图:

image-20200217103533313

文档就绪事件函数

<head>
<meta charset="UTF-8">
<!-- 在使用jQuery之前,必须先引入jQuery的函数库文件 -->
<script src="js/jquery-1.8.3.js"></script>
<script>
	//1.获取id为demo的h1元素
	var h1 = document.getElementById( "demo" );
	//2.获取h1元素中的内容( innerHTML )
	alert( h1.innerHTML );
</script>
</head>
<body>
	<h1 id="demo">jQuery的引入示例...</h1>
</body>

问题描述:上面的代码在执行时,会报一个错误:

image-20200217105525351

原因描述:在执行获取id为demo的元素时, h1元素还没有被浏览器加载到,所以获取不到h1元素。

解决方式一:

将script标签移到body内部,也就是h1元素的后面

这样浏览器在加载时,会先加载h1元素,再执行获取h1元素的代码,由于在获取h1元素之前,h1元素已经被浏览器加载过了,所以后面再获取就能够获取到!

代码示例:

<body>
	<h1 id="demo">jQuery的引入示例...</h1>
	<script>
		//1.获取id为demo的h1元素
		var h1 = document.getElementById( "demo" );
		//2.获取h1元素中的内容( innerHTML )
		alert( h1.innerHTML );
	</script>
</body>

解决方式二:

将获取元素的代码放在文档就绪事件函数中,文档就绪事件函数会在浏览器加载完所有的html元素后(也就是加载完最后一个html元素时)立即执行。

由于当前网页中的所有元素都被加载了,h1元素肯定也被加载了,此时再获取h1元素就一定能获取到。

<head>
<meta charset="UTF-8">
<!-- 在使用jQuery之前,必须先引入jQuery的函数库文件 -->
<script src="js/jquery-1.8.3.js"></script>
<script>
	$(function(){
		//1.获取id为demo的h1元素
		var h1 = document.getElementById( "demo" );
		//2.获取h1元素中的内容( innerHTML )
		alert( h1.innerHTML );
	});
</script>
</head>
<body>
	<h1 id="demo">jQuery的引入示例...</h1>
</body>

解决方式三:

将获取元素的代码放在一个自定义的函数中,并将该函数绑定在h1元素的点击事件上,当我们点击h1元素时会执行自定义的函数,函数执行时才获取h1元素,此时就能够获取到h1元素。

<head>
<meta charset="UTF-8">
<!-- 在使用jQuery之前,必须先引入jQuery的函数库文件 -->
<script src="js/jquery-1.8.3.js"></script>
<script>
	function fn1(){
		//1.获取id为demo的h1元素
		var h1 = document.getElementById( "demo" );
		//2.获取h1元素中的内容( innerHTML )
		alert( h1.innerHTML );
	}
</script>
</head>
<body>
	<h1 id="demo" onclick="fn1()">jQuery的引入示例...</h1>
</body>

总结:什么时候该使用文档就绪事件函数?

如果在获取元素时,获取元素的代码执行的时机,比元素本身加载的时间还要早,如果元素还没有加载就获取,必然是获取不到的。

可以将获取元素的代码放在文档就绪事件函数中,等浏览器加载完整个网页后,文档就绪事件函数才会执行,此时所有的元素都被加载了,再获取任何元素都能获取到!

jQuery提供的文档就绪事件函数(简写形式):

<script>
	$(function(){
		//在浏览器加载完整个html网页后立即执行
	});
</script>

其完整写法为:

<script>
	$(document).ready(function(){
		//在浏览器加载完整个html网页后立即执行
	});
</script>

JS也为我们提供了文档就绪事件函数,其写法为:

<script>
	window.onload = function(){
		//在浏览器加载完整个html网页后立即执行
	}
</script>

jQuery选择器(重点)

基本选择器

(1)元素名选择器
$("div") -- 选中所有的div元素
$("span") -- 选中所有的span元素

(2)class/类选择器
$(".s1") -- 选中所有class值为s1的元素(class值为s1的元素可能是任何元素)
$("span.s1") -- 选中所有class值为s1的span元素

(3)id选择器
$("#one") -- 选中id为one的元素

(4)多元素选择器
$("div,span,.s1,#one") -- 选中所有的div元素,以及所有的span元素,以及所有class值为s1的元素,以及id为one的元素

层级选择器

$("div span") -- 选中所有div内部的所有span元素
$("#one span") -- 选中id为one的元素内部的所有span元素

$("#two+span") -- 选中id为two的元素后面紧邻的span兄弟元素
$("#two").next("span") -- 选中id为two的元素后面紧邻的span兄弟元素
$("#two").prev("span") -- 选中id为two的元素前面紧邻的span兄弟元素

$("#two~span") -- 选中id为two的元素后面所有的span兄弟元素
$("#two").nextAll("span") -- 选中id为two的元素后面所有的span兄弟元素
$("#two").prevAll("span") -- 选中id为two的元素前面所有的span兄弟元素

$("#two").siblings("span") -- 选中id为two的元素前、后所有的span兄弟元素

基本过滤选择器

(1) 选中第一个div元素
$("div:first")
$("div:eq(0)")
$("div").eq(0)

(2) 选中最后一个div元素
$("div:last")
$("div:eq(-1)")
$("div").eq(-1)

(3) 选中第n+1个div元素(n从零开始)
$("div:eq(n)")
$("div").eq(n)

综合案例

创建表格元素

练习1:创建单行单列的表格

function createTable1(){
	//1.创建一个table元素
	var $tab = $("<table></table>");
	//2.创建一个tr元素
	var $tr = $("<tr></tr>");
	//3.创建一个td元素, 并为td添加内容
	var $td = $("<td></td>");
	$td.html("Hello TD~~");
	//4.将td添加到tr元素内部
	$tr.append( $td );
	//5.将tr添加到table元素内部
	$tab.append( $tr );
	//6.将table添加到body元素内部
	$("body").append( $tab ); 
	
	//$("body").append( "<table><tr><td>Hello~~TD...</td></tr></table>" );
}

练习2.1:创建单行6列的表格

function createTable2(){
	//1.创建一个table元素
	var $tab = $("<table></table>");
	//2.创建一个tr元素
	var $tr = $("<tr></tr>");
	for(var i=0;i<6;i++){ 
		//3.创建一个td元素, 并为td添加内容
		var $td = $("<td></td>");
		$td.html("Hello TD~~");
		//4.将td添加到tr元素内部
		$tr.append( $td );
	}
	//5.将tr添加到table元素内部
	$tab.append( $tr );
	//6.将table添加到body元素内部
	$("body").append( $tab ); 
}

练习2.2:创建5行6列的表格

function createTable2(){
	//1.创建一个table元素
	var $tab = $("<table></table>");
	for(var j=0;j<5;j++){ //外层循环:控制行数
		//2.创建一个tr元素
		var $tr = $("<tr></tr>");
		for(var i=0;i<6;i++){ //内层循环:控制列数
			//3.创建一个td元素, 并为td添加内容
			var $td = $("<td></td>");
			$td.html("Hello TD~~");
			//4.将td添加到tr元素内部
			$tr.append( $td );
		}
		//5.将tr添加到table元素内部
		$tab.append( $tr );
	}
	//6.将table添加到body元素内部
	$("body").append( $tab ); 
}

练习3:创建指定行和列的表格

function createTable3(){
	//获取用户输入的行数和列数(js方式)
	//var rows = document.getElementById("rows").value;
	//var cols = document.getElementById("cols").value;
	var rows = $("#rows").val();
	var cols = $("#cols").val();
	console.log(rows+" : "+cols);
	//1.创建一个table元素
	var $tab = $("<table></table>");
	for(var j=0;j<rows;j++){ //外层循环:控制行数
		//2.创建一个tr元素
		var $tr = $("<tr></tr>");
		for(var i=0;i<cols;i++){ //内层循环:控制列数
			//3.创建一个td元素, 并为td添加内容
			var $td = $("<td></td>");
			$td.html("Hello TD~~");
			//4.将td添加到tr元素内部
			$tr.append( $td );
		}
		//5.将tr添加到table元素内部
		$tab.append( $tr );
	}
	//6.将table添加到body元素内部
	$("body").append( $tab ); 
}

仿QQ好友列表

/** 通过jQuery实现仿QQ列表好友列表 */
function openDiv(thisobj){ //thisobj是一个js对象 --转成--> jQuery对象
	//先将其他三个分组关闭( 将其他三个分组内的div设置为隐藏 )
	$("table span").not(thisobj).next("div").hide(); //css("display", "none")
	//根据被点击的分组找到分组内的好友列表, 切换好友列表的展示状态
	$(thisobj).next("div").toggle(); //如果元素显示则切换为隐藏, 如果隐藏则切换为显示
}

模拟员工信息管理系统

练习1:添加员工信息

function addEmp(){
	//1.获取要添加的员工信息(id, name, email, salary)
	var id = $("#box1 input[name='id']").val().trim();
	var name = $("#box1 input[name='name']").val().trim();
	var email = $("#box1 input[name='email']").val().trim();
	var salary = $("#box1 input[name='salary']").val().trim();
	console.log(id+" : "+name+" : "+email+" : "+salary);
	
	//2.校验员工信息
	//2.1.添加的员工信息不能为空!
	if( id == "" || name == "" || email == "" || salary == "" ){
		alert( "添加的员工信息不能为空!" );
		return;
	}
	
	//2.2.添加的员工id不能重复! (id=3)
	//获取所有的tr元素, 并遍历所有的tr元素
	var flag = false; //false表示id是不存在的!!!
	$("table tr").each(function(){ //this(JS对象)表示当前被遍历的元素 
		// this --转换为jQuery对象--> $( this ) 
		var _id = $(this).find("td:eq(1)").text();
		//拿着用户输入的id和当前员工的id进行比较
		if( id == _id ){ //只要有一个相等,就说明id已存在,则停止添加
			alert("您输入的员工ID已存在, 请重新添加!");
			flag = true; //true表示id已存在!!
			//return; 放在这里的return不能终止程序的执行
		}
	});
	if( flag ){ //true表示id已存在!!
		return;
	}
	//3.将员工信息添加到页面上(添加到table中)
	//>>创建一个tr元素
	var $tr = $("<tr></tr>");
	//>>创建5个td元素,并将员工信息添加到td中
	var $td1 = $("<td><input type='checkbox'/></td>"); //复选框
	var $td2 = $("<td>"+id+"</td>"); //ID
	var $td3 = $("<td>"+name+"</td>"); //name
	var $td4 = $("<td>"+email+"</td>"); //email
	var $td5 = $("<td>"+salary+"</td>"); //email
	//>>将td元素添加到tr中
	$tr.append( $td1 ).append( $td2 ).append( $td3 ).append( $td4 ).append( $td5 );
			
	//>>将tr元素添加到table中
	$("table").append( $tr );
}

练习2:删除员工信息

function delEmp(){
	//1.获取所选中员工所在的tr行 (获取所有被选中的复选框)
	//$("input:checked").parents("tr").remove(); //会连接表头一起删除
	$("input:checked").parent("td").parent("tr").remove();
}

练习3:修改员工信息(自己完成)

练习4:实现全选或全不选

function checkAll(){
	//1.获取全选复选框的选中状态( 选中(true)?  没选中(false)? )
	var isCheck = $("#all").prop("checked"); //true|false
	//2.获取所有普通复选框, 将全选框的选中状态设置给所有普通复选框
	$("input[type='checkbox'][id!='all']").prop("checked",isCheck);
}

jQuery总结

html元素操作

1、创建元素

$("<div></div>") -- 创建一个div元素,返回的是一个jQuery对象,表示创建的div元素
$("<div>xxxx</div>") -- 创建一个包含内容的div元素,返回的是一个jQuery对象,表示创建的div元素

2、添加子元素

$parent.append( $child ) -- 父元素调用方法添加子元素
$("body").append( "<div>我是新来的...</div>" ); -- 往body元素内部追加一个div子元素

3、删除元素

$("div").remove() -- 删除所有的div元素

JS删除所有div元素:
//获取所有的div元素(返回的是所有div组成的数组)
var divArr = document.getElementsByTagName("div"); //div数组
//遍历div数组,依次删除每一个div元素
var len = divArr.length;
for(var i=0;i<len;i++){
    //通过当前元素的父元素删除当前元素(始终删除第一个)
    divArr[0].parentNode.removeChild( divArr[0] );
}

4、替换元素

$("div").replaceWith("<p>我是来替换的…</p>")

html元素内容和值的操作

<div>
  	这是一个div11元素
    <span>这是一个span元素</span>
    这是一个div1111元素
</div>
<input type="text" name="user"/>

1、html()函数 (类似于js中的innerHTML属性)

-- 用于获取或设置元素的内容,比如为div、span、p、h1~h6、table、tr、td、form等元素设置内容

$("div").html() -- 获取所有div中的第一个div的内容
$("div").html("xxxx") -- 为所有div设置内容

2、text()函数 (类似于js中的innerText属性,innerText在部分浏览器中不兼容)

-- 用于获取或设置元素的文本内容

$("div").text() -- 获取所有div中的所有文本内容
$("div").text("xxxx") -- 为所有div设置文本内容

3、val()函数 (类似于js中的value属性)

-- 获取或设置表单项元素的value值(input/select/option/textarea)

$("input").val() -- 获取所有input元素中的第一个input元素的value值
$("input").val(值) -- 为所有的input元素设置value值

元素属性和css属性操作

<input type="text" name="username" id="inp"/>

1、prop()函数 -- 用于获取或设置元素的属性值

在jQuery1.6版本之后才有这个函数,1.6之前版本的jQuery可以使用attr()函数

$("input[type='checkbox']").prop("checked")
// 获取input复选框的选中状态, 返回true表示复选框为选中状态,返回false表示复选框为取消选中状态
$("input[type='checkbox']").prop("checked", true)
// 设置所匹配的复选框元素为选中状态

$("#inp").prop("name"); //获取id为inp元素的name属性值, 返回useranme
$("#inp").prop("name","user"); //为id为inp的元素设置name属性值, name属性值就会变成user

2、css()函数 -- 用于获取或设置元素的css属性值

$("#div1").css("width") -- 获取id为div1元素的宽度
$("#div1").css("width","200px") -- 设置id为div1元素的宽度为200px
$("#div1").css({
	"width" : "200px",
	"height" : "150px",
	"border" : "5px solid red",
	"background" : "pink"
}); // 为id为div1的元素设置宽度为200px、高度为150px、边框以及背景颜色等样式

其他函数

1、each() 函数

$(selector).each(function( index,element ){})
// each()函数可以遍历$(selector)选择器选中的所有元素(即每次都选择器选中的元素中获取一个元素,并执行function 函数)
// function中的index -- 表示遍历的元素的下标
// function中的element -- 表示当前正在遍历的元素(也可以通过this获取)

示例:

$("table tr").each(function(){
	//从当前行中获取第二个单元格的内容(当前行的id值)
	var tempId = $(this).find("td").eq(1).html();
	//拿着用户输入的id 和 每一行中的id值进行比较
	if( id == tempId ){
		alert("添加失败,id已存在!");
		flag = true; //id存在,更新flag的值,true表示已存在!
	}
});

2、show()/hide() 函数

show() -- 设置元素由隐藏变为显示

$("div").show() -- 设置所有的div元素为显示

等价于:

$("div").css("display", "block");

hide() -- 设置元素由显示变为隐藏

$("div").hide() -- 设置所有的div元素为隐藏

等价于:

$("div").css("display", "none");

2、toggle()/slideToggle()

toggle() -- 切换元素的显示状态, 如果元素是显示的, 则切换为隐藏, 否则切换为显示

slidToggle() --切换元素的显示状态, 如果元素是显示的, 则切换为隐藏,否则切换为显示,切换为显示为下拉状态,隐藏为收缩状态。

扩展内容

为元素绑定点击事件

以点击事件为例,为元素绑定点击事件的方式为:

方式1(js版):

<script>
  function fn(){
    alert("input按钮被点击了...");
  }
</script>
<body>
	<input onclick="fn()" type="button" value="点我~!" />
</body>

方式2(js版):

<script>
	window.onload = function(){
		//获取id为btn的元素
		var btn = document.getElementById("btn");
		btn.onclick = function(){
			alert("input按钮被点击了...");
		}
	}
</script>
<body>
	<input id="btn" type="button" value="点我~!" />
</body>

方式3(jQuery版):

<script>
$(function(){
    //当点击btn按钮时,触发点击事件执行其中的函数
    $("#btn").click( function(){
        alert("input按钮被点击了...");
    });
});
</script>
<body>
	<input id="btn" type="button" value="点我~!" />
</body>

js对象和jQuery对象的互相转换

通过JS的方式获取元素,返回的是JS对象,JS对象只能调用JS的属性或函数

通过jQuery选择器获取元素,返回的是jQuery对象(结构像一个集合),jQuery对象只能调用jQuery的属性或函数。

如果现有JS对象,但我们需要调用jQuery的属性或函数,可以将JS对象转成jQuery对象;

如果现有jQuery对象,但我们需要调用JS的属性或函数,可以将jQuery对象转成JS对象;

image-20200512153617181

jQuery作业

07-08作业:

1、复习文档就绪事件函数(掌握什么时候该使用文档就绪事件函数)

2、将课上讲过的选择器练习自己再做一遍!

3、完成jQuery综合案例:

(1)创建表格
(2)仿QQ好友分组
(3)模拟员工信息管理系统
(4)尝试使用jquery完成js案例(电灯开关、元素的dom操作、网页换肤)

unit04-tomcat、HTTP

服务器概述

什么是服务器?

服务器:分为服务器硬件 和 服务器软件。在硬件服务器(计算机)上安装了服务器软件,才可以对外提供服务。

比如:让其他的计算机来访问当前服务器,为其他的计算机提供服务。

(1) 服务器硬件:是指在互联网上具有独立IP地址的计算机,比如我们自己用的计算机也可以作为服务器使用。

(2) 服务器软件:就是一个计算机程序,比如MySQL服务器软件,tomcat服务器软件。服务器软件分为很多类型,比如:ftp服务器,数据库服务器,web服务器软件,邮件服务器等。

什么是Web服务器?

(1) web服务器是指驻留在互联网上的某种类型的计算机程序。当浏览器访问服务器,请求服务器上的文件时,服务器将会处理该请求,并将请求的文件响应给浏览器,并会附带一些信息告诉浏览器如何查看该文件(即文件的类型)

(2) web服务器是可以向 "发出请求的浏览器提供文档" 的程序,比如在访问百度时,其实就是在访问百度的服务器。

tomcat就是一个web服务器软件,是由apache组织提供的一款服务器软件,特点:小巧灵活,免费开源,简单易用。

tomcat下载、安装、启动、配置

下载tomcat服务器

下载地址:http://tomcat.apache.org/

tomcat有很多版本,有解压版 和 安装版,还分windows (还分为32位和64位版)和linux版,根据自己的需求,选择对应的版本下载。

tomcat服务器运行需要jdk的支持(tomcat是由java语言开发的),版本对应为:

tomcat5 需要jdk4以上支持
tomcat6 需要jdk5以上支持
tomcat7 需要jdk6以上支持
tomcat8 需要jdk7以上支持

安装、启动tomcat服务器

1、安装tomcat服务器

绿色版解压之后就可以使用(原则:安装的路径中不要包含中文和空格)

解压后还需要配置JAVA_HOME环境变量,该变量指向jdk的根目录,指定tomcat启动时使用哪一个位置的jdk。

2、启动tomcat服务器


如何配置JAVA_HOME环境变量:

变量名: JAVA_HOME

变量值: C:\Program Files\Java\jdk1.8.0_45

注意:变量值指向JDK的根目录(不是bin目录),变量值的后面也不要加分号;

2、启动tomcat服务器

启动、关闭tomcat服务器:

通过 [tomcat根目录]/bin/startup.bat 可以启动tomcat服务器;

通过 [tomcat根目录]/bin/shutdown.bat 可以关闭tomcat服务器;

访问测试服务器:

在tomcat服务器启动后,服务器会默认监听8080端口,可以通过如下地址访问tomcat服务器的主页:

http://localhost:8080

修改tomcat默认端口

image-20200218164109285

tomcat服务器在启动时,默认监听的端口是8080,这意味着,我们在访问tomcat服务器时,需要在主机名(localhost)或者IP地址(127.0.0.1)等后面加上端口。这样非常不方便。

可以将8080端口改为80端口,因为80端口非常特殊,可以省略不写(只有80端口可以省略,其他端口可在访问时必须得加上)

修改方法:找到 [tomcat安装目录]/conf/server.xml 文件并打开该文件,将文件中的 69 行的 <Connector> 标签上的 port 属性的值改为 80即可。

<Connector port="80" protocol="HTTP/1.1"
           connectionTimeout="20000"
           redirectPort="8443" />

改完后,保存文件,重新启动服务器(只有在服务器启动时,才会重新加载server.xml文件)再次启动的服务器就会监听新的端口。

image-20200218164951343

扩展问题:端口占用问题:

在启动tomcat服务器时,可能会遇到端口占用问题,如下图:

image-20200609152859436

原因分析:

**情况一:**可能是之前的tomcat服务器没有完全关闭,仍然在占用8080(或80)端口,导致服务器再次启动时,启动失败。

解决方式:运行shutdown.bat文件,将tomcat按照正常流程再关闭一次即可。再次启动服务器,如果成功,则说明问题已解决,否则看情况二。

**情况二:**可能是其他程序占用了8080(或80)端口,导致服务器启动失败。

解决方式:打开一个cmd窗口,通过 netstat -ano 命令查看当前系统中活动的进程,找到8080(或80)端口对应的进程编号(PID),根据进程编号将进程结束即可!

netstat -ano
协议  本地地址         外部地址        状态           PID
TCP  0.0.0.0:8080      0.0.0.0:0      LISTENING     6520
TCP  0.0.0.0:135     0.0.0.0:0      LISTENING     448
...
taskkill /f /pid 6520

tomcat目录结构

tomcat目录结构介绍

tomcat服务器安装根目录下有很多子目录,这些目录的作用是:

bin:用于存放tomcat服务器中批处理文件的目录(xx.bat/xx.sh)
conf:用于存放tomcat服务器中的配置文件的目录(其中server.xml文件是tomcat服务器中非常重要的一个文件。)
lib:用于存放tomcat服务器运行时所依赖的jar包。
logs:用于存放tomcat服务器运行时产生的日志文件(启动tomcat服务器时会打印很多日志信息,这些日志信息还会以文件形式保存到logs目录下)
temp:用于存放tomcat服务器产生的临时文件,tomcat会自己清理,可以忽略该目录

webapps:是localhost【虚拟主机】默认管理的目录,将开发好的【web应用】程序放在webapps目录下,就可以通过浏览器访问localhost主机中的Web资源文件了。
可以简单的理解为:webapps目录就是web资源(html、css、js、图片、jsp等)的存放目录,将web资源文件放在该目录下,就可以通过浏览器来访问。

work:用于存放tomcat服务器产生的工作文件(JSP翻译后的Servlet文件会放在work目录下;session对象序列化后产生的文件也会放在work目录下;)

虚拟主机和Web应用

image-20200328095145558

总结:

(1)虚拟主机就是tomcat服务器中配置的一个站点,在tomcat服务器中默认提供了一个localhost虚拟主机,这个主机的发布目录是webapps目录:

image-20200513155211940

这样意味着,将Web应用放在webapps目录下,就表示发布到了localhost虚拟主机中。

(2)Web应用就是一个存放了很多Web资源(html、css、js、jsp、servlet、图片等)的目录,将Web应用发布到虚拟主机中,就可以通过浏览器来访问Web应用中的这些资源文件了。

web应用

web应用的目录结构

news(目录,web应用)
  |-- 其他目录, 放在news根目录或者其他目录中的资源文件,浏览器可以直接访问
  |-- WEB-INF目录, 放在这个目录下的资源文件是受保护的,浏览器不能直接访问(不是不能访问,是不能直接访问) 
  		 |-- classes目录, 用于存放编译后的class文件
  		 |-- lib目录, 用于存放web应用所依赖的jar包
  		 |-- web.xml文件, 用于存放和web应用相关的一些配置(配置Servlet、配置主页、配置session的超时时间等)

其中news就是一个目录, 同时也是一个web应用程序, 其中可以包含很多的资源文件。

部署web应用到虚拟主机中

直接将Web应用的目录拷贝到虚拟主机所管理的目录下,就发布到了虚拟主机中

例如:将news目录拷贝webapps目录下,由于webapps目录是localhost主机默认管理的目录,所以就相当于将news应用发布到 了localhost主机中。

通过如下路径规则就可以访问localhost主机下的news应用下的资源文件:

http://localhost:端口/news/xxx

扩展内容(了解)

哔哩哔哩视频链接:https://www.bilibili.com/video/BV1Hg4y1B7dr

访问tomcat服务器主页:http://localhost

访问news/hello.html:http://localhost/news/hello.html

能否将访问 news/hello.html 的路径缩短一些(比如只通过主机名就可以访问news/hello.html这个网页)

配置WEB应用的主页

如果没有将 hello.html 配置为当前Web应用的主页,在访问 hello.html 时的路径为:

http://localhost/news/hello.html

如果将 hello.html 配置为当前Web应用的主页,再次访问 hello.html 时的路径为:

http://localhost/news

在上的路径中,/hello.html 这个路径可以加,也可以省略。

将 hello.html 配置为当前应用的主页,方式为:找到 [当前Web应用]/WEB-INF/web.xml文件并打开,在web.xml文件的根标签内部添加如下配置:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                      http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
  version="3.1">
  	<welcome-file-list>
			<welcome-file>/hello.html</welcome-file>
			<welcome-file>/hello1.html</welcome-file>
			<welcome-file>/hello2.html</welcome-file>
  	</welcome-file-list>

</web-app>

配置完后,需要重启服务器,配置才会生效。

配置缺省的(默认的)WEB应用

上面已经将news/hello.html配置为news应用的主页,访问hello.html时路径为:http://localhost/news/

如果不将 news 应用配置为默认的Web应用,在访问 news 下的 hello.html(主页)时的访问路径为:

http://localhost/news/

如果将 news 应用配置为缺省的(默认的)Web应用,在访问 hello.html(主页)时的路径就变成了:

http://localhost/

如何将 news 配置为缺省的(默认的)Web应用(缺省Web应用只能有一个)?:

将Web应用的名字改为一个大写的ROOT,当前Web应用就是一个默认的Web应用,再访问这个Web应用下的资源文件时,访问的路径中就可以不用写Web应用的名称了。

打war包

war包和jar包都是java程序中的一种压缩包格式,如果开发一个Java基础工程,可以将其中编译后的class文件和相关的配置文件打成一个jar包。

可以将一个Web应用打成一个war包,这样做的好处有:

(1) 将web应用打成一个war包,传输起来更加方便,而且文件体积会变小。
(2) 将war包发布到服务器中,服务器能识别war包格式,会自动将war包解压发布!

打war包的方法是:

进入到web应用的目录下,将Web应用目录下的所有子目录和文件全部选中,右键压缩成一个 xxx.zip 包,再把 xxx.zip 改为 xxx.war即可!!

需要注意的是,如果有以下问题,可能会导致war不会自动解压:

(1) 在将Web应用打成一个压缩包时,没有打成一个 xxx.zip,而是使用 rar格式或者其他格式,会导致自动解压失败!
(2) 打成的war包的名字 和 已发布的web应用的名字不能冲突,会导致自动解压失败!
(3) war包中包含的目录名和文件名是中文的,也会导致自动解压失败!

HTTP协议概述

什么是HTTP协议?

HTTP协议是用于规定浏览器和服务器之间的通信方式/规则

主要规定了浏览器给服务器发送的请求信息的格式

以及规定了服务器给浏览器发送响应信息的格式

HTTP协议在工作时所遵循的基本原则:

(1)一次请求,只对应一次响应
(2)请求只能由浏览器发起,服务器只能被动的等待请求,根据请求作出回应。

HTTP协议详解

IE浏览器的插件:HttpWatch,可以监听浏览器和服务器通信的内容。

HTTP请求

1、请求行

GET  /news/hello.html  HTTP/1.1

(1)GET:表示请求方式,在HTTP协议中一共定义了7种提交方式,但是我们只用GET和POST。

(2)/news/hello.html:请求资源路径,表示浏览器请求的是哪一个Web应用以及哪一个web资源文件。

(3)HTTP/1.1:请求所遵循的协议和版本。

2、若干请求头

请求头都是Key-Value结构,例如:

image-20200219143453111

Host:localhost -- 通知服务器,浏览器要请求的是哪一台虚拟主机。
Accept:text/html, appliaction/xhtml+xml,...  -- 通知服务器,浏览器能接收的响应数据类型。
...

(空白行,用于分隔请求头和请求实体)

3、请求实体内容

如果请求方式为 GET 提交,请求实体是没有内容的!

如果请求方式为 POST 提交,并且请求中携带了数据,请求实体中才会有内容!

HTTP响应

1、状态行

HTTP/1.1 200 OK

(1)HTTP/1.1:表示响应所遵循的协议和版本

(2)200:状态码,三位的数字,表示服务器对请求处理的结果。

	200: 表示请求处理成功
	302: 表示请求重定向(即需要再进一步请求才可以获取到相应的资源)
	304/307: 表示通知浏览器使用缓存
	404: 表示浏览器请求的资源不存在(浏览器的问题, 请求路径错误)
	500: 表示服务器在处理请求的过程中抛出了异常。

(3)OK:描述短语(可以忽略),也表示服务器对请求处理的结果,和状态码表示的结果一致。

	200:OK
	404:Not Found
	500: Internal Server Error
	...

2、若干响应头:也是key-value格式

Content-Type: 表示服务器响应的数据类型,text/html,  image/*...
Content-Length: 表示服务器响应数据的长度, 例如: 384 /字节
Set-Cookie: 和cookie技术相关的一个头, 后面会提到。
...

3、响应实体内容

响应实体就是浏览器所请求文件的内容。例如:浏览器向服务器请求一个hello.html文件,服务器会找到hello.html文件,将文件的内容作为响应实体发送给浏览器。

内容补充

1、问题1:请求方式什么时候是GET提交?什么时候是POST提交?

只有当使用表单(form),并且在表单上明确的通过method指定提交方式为POST时,请求方式才是POST提交,其他方式都是GET提交(AJAX除外)

思考:判断以下请求方式是GET还是POST?

(1)<form action="#"></form>						-- GET提交
(2)<form action="#" method="GET"></form>		-- GET提交
(3)<form action="#" method="POST"></form>		-- POST提交
(4)点击超链接访问服务器,例如:
	<a href="http://www.baidu.com">百度一下</a>	-- GET提交
(5)直接在浏览器的地址栏中书写URL地址访问服务器		-- GET提交

2、问题2:GET提交和POST提交有什么区别?

主要区别体现在请求参数传输过程的不相同

GET提交:

  • 将数据通过问号拼接在地址栏URL地址的后面,相对非常不安全。
  • 将数据拼接在地址栏URL地址的后面,数据量是有限制的,通常不能超过1KB或者4KB。

POST提交:(form)

  • POST提交是通过请求实体将数据提交给服务器,不会显示在地址栏上,因此相对更加安全。
  • POST提交通过请求实体提交数据,数据量理论上是没有限制的。

3、总结:

  • 如果只是单纯做一个跳转,请求中没有数据,基本都是使用GET提交。
  • 如果在请求中有数据,但数据量不大,并且数据没有隐私性,也尽量使用GET提交。
  • 如果在请求中有数据,数据量比较大或者数据较为隐私,此时推荐使用POST提交。

将Tomcat整合到Eclipse中

将Tomcat服务器整合到Eclipse工具中,可以通过Eclipse启动、关闭tomcat服务器,更重要的是,可以非常方便的将在Eclipse中创建的Web项目发布到Tomcat服务器中运行。

哔哩哔哩视频链接:https://www.bilibili.com/video/BV1wz411z73V

方式一:在window偏好设置中配置Tomcat

1、点击Window --> Preferences(偏好设置):

image-20200311184907773

2、在偏好设置窗口中点击 Server --> Runtime Environments --> add:

image-20200311184913436

3、在弹出的窗口中选择 --> Apache --> Apache Tomcat v8.5,需要注意的是,这里得根据自己安装的tomcat版本进行选择,比如我安装是8.5版本的tomcat,所以这里选择Apache Tomcat v8.5。

image-20200311184921087

4、在下面的窗口中配置tomcat服务器的安装根目录,可以直接把路径复制到第二个输入框中;也可以点击后面的 Browse按钮在文件管理器中选择tomcat服务器安装根目录。

image-20200311184932405

最后点击finish即可完成将Tomcat整合到Eclipse中的配置。

方式二:在创建Web项目时配置Tomcat

1、如果在创建Web项目时,Target runtime选项中没有配置可选的服务器,可以点击右面的选项进行配置

点击后进入下一步操作。

image-20200311184950046

2、在弹出的窗口中选择 --> Apache --> Apache Tomcat v8.5,需要注意的是,这里得根据自己安装的tomcat版本进行选择,比如我安装是8.5版本的tomcat,所以这里选择Apache Tomcat v8.5。

image-20200311185003036

3、在下面的窗口中配置tomcat服务器的安装根目录,可以直接把路径复制到第二个输入框中;也可以点击后面的 Browse按钮在文件管理器中选择tomcat服务器安装根目录。

image-20200311185013454

最后点击finish即可完成将Tomcat整合到Eclipse中的配置。

4、上一步完成后,回到Web项目创建的视图窗口,再查看"Target runtime"选项,如下:

image-20200311185028965

将整合到Eclipse中的tomcat从Eclipse中删除

如果要将整合到Eclipse中的tomcat从Eclipse删除:点击Windows --> Preferences --> Server --> Runtime Environments,选中要删除的服务器,点击右侧的删除按钮即可删除,最后点击Apply and Close保存设置即可!

image-20200311185037713

在Eclipse中创建Server及移除Server

上面讲解了如何将Tomcat整合到Eclipse中,整合之后,需要在Eclipse中创建一个Server才可以进行启动tomcat、关闭tomcat等操作。

1、Eclipse中找到Servers窗口:

2、如果没有可以到Window --> Show View --> Other中搜索"servers",如下图:

3、在Server窗口中点击“No servers are available…”链接:

4、在弹出的窗口中,保持默认配置,直接点击完成

如果弹出的窗口中默认的服务器不是tomcat,则说明在此之前没有将Tomcat整合到Eclipse中。

5、在上一步点完成后,Eclipses左侧会多出一个Servers项目,Servers窗口中会出现创建的Server,也就是tomcat服务器。

注意:①处的Servers项目不能关闭(close),更不能删除(delete)

6、在创建完Server后,双击tomcat,可以修改Tomcat服务器配置

(1)将Server Locations中的选项切换为第二个选项

(2)将Deploy Path右侧的输入框中的内容改为webapps。ctrl+s保存配置即可

image-20200328164951699

以上配置是为了保证在Eclipse中发布Web应用到tomcat服务器中时,可以将项目发布到tomcat服务器的webapps目录下。

如果不配置,会导致tomcat服务器中webapps下的Web应用无法访问。

7、如果要移除添加的Server,需要同时删除①处的Servers项目(右键delete,要彻底从硬盘上删除),以及删除②处的tomcat服务器(右键delete)

image-20200728012608142

tomcat右键选项介绍

a) Start:用于启动tomcat服务器,如果已启动,则显示 ReStart,作用是重启服务器

b) Stop:用于停止服务器

c) Add and Remove:将Web应用部署到tomcat服务器中,或者移除服务器中部署的Web应用

d) Clean:作用是将发布到Eclipse自己的webapps目录中的项目删除再重新部署

e) Clean Tomcat Work Directory:作用是将在tomcat运行过程中存入work目录的文件删除

tomcat启动失败常见原因

问题1:tomcat服务器启动失败-1

如果在启动服务器时,服务器启动失败,并弹出窗口显示如下异常信息:

根据上面的描述信息,可以看出是8005、8080、8009端口被同时占用了,此时只有一种可能,就是之前已经启动了tomcat或者之前开启的tomcat没有完全关闭导致的。

解决方式:到tomcat安装目录找到bin目录中的shutdown.bat文件,双击运行将服务器关闭,再到Eclipse中启动服务器即可!

问题2:tomcat服务器启动失败-2

如果在启动服务器时,服务器启动失败,并弹出窗口显示如下异常信息:

解决方法:

(1) 可以先将服务器中所有的Web应用移除(在服务器上右键,Add and Remove-->Remove All-->Finish

(2) 再分别执行服务器右键选项中的cleanClean Tomcat Work Directory

(3)再次启动服务器,如果启动没有报错,则说明tomcat服务器本身没有问题,再将要运行的项目发布到tomcat中,再次启动服务器,观察是否有错误。如果有则说明是项目本身的问题。

(4)如果移除了所有的Web应用,启动tomcat服务器报错,则说明tomcat本身就有问题,可以将tomcat服务器重新配置一次到Eclipse中(将tomcat和Server项目删除,再点击链接重新创建Server)

Q.E.D.

知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议

毕生所求无它,爱与自由而已