JavaWeb总结
一、Web三要素
- 浏览器
- 服务器
- http协议
1.web主要学习内容
- html:用于勾勒出网页的结构和内容
- css:用于网页美化
- js:js操作的目标是html css
2.Web项目开发
二、HTML
HTML ，HyperText Markup Languages,超文本标记语言，**是一种纯文本类型的语言。
1.html基本结构
<!DOCTYPE html>
<html>
<!-- head标签：头部信息 -->
<head>
<!-- meta：属性 charset：字符编码的设置： -->
<meta charset="utf-8">
<!-- 设置浏览器的显示的网页标题 -->
<title>第一个网页</title>
</head>
<!-- body标签： 网页的内容 -->
<body>
第一个网页： hello world.
<h3>标题标签</h3>
</body>
</html>2.HTML文件的标签与元素介绍
- 一个HTML文件是由一系列的元素和标签组成的
- HTML的标签分单独出现的标签和成对出现的标签
3.html页面的访问方式
- html是解释执行的语言。浏览器直接会解析html标签，显示内容到网页中。
- 网络方式访问
http://127.0.0.1:8848/web01/day1/aa.html - 文件方式访问
通过文件的硬盘路径，打开文件。
三、HTML的标签
1.文本标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本相关标签</title>
</head>
<body>
<!-- 常用的文本相关标签 -->
<!-- 标题标签：h1~h6,字号逐渐变小，越来越细.换行显示的标签 -->
<!-- 标签的属性：align = " right(右) / center（中）/ left(左)"-->
<h1 align="center">我是h1</h1>
<h2 align="right">我是h2</h2>
<!-- 段落标签： p -->
<p align="center"> </p>
<!-- 文本标签:span ,没有默认的样式效果 ， 不换行的标签 -->
<span>hello</span>
<!-- 文本标签：div , 没有默认的样式效果 ， 换行的标签 -->
<div>第一个div</div>
<!-- 换行标签： br标签用于换行 -->
<span>第一行的span</span>
<br>
<!-- 产生一条横线的标签： hr标签 , width属性，设置宽度-->
<hr width="300px" color="aqua" />
<!-- 列表标签：ul（un order list - 无序列表） -->
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<!-- 列表标签： ol（ order list - 有序列表） -->
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</body>
</html>2.特殊效果的文本标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>特殊样式的文本标签</title>
</head>
<body>
<!-- 加粗， 倾斜， 下划线， 删除线 -->
<b>b标签:加粗</b>
<strong>strong标签：加粗</strong>
<em>em标签：倾斜</em>
<i>i标签:倾斜</i>
<del>del标签:删除线</del>
<u>u标签:下划线</u>
<b><i>加粗，倾斜</i></b>
<!-- sub:下标， sup：上标 -->
<h3>静夜思<sub>李白</sub></h3>
<b>H<sub>2</sub>O</b>
<b>3<sup>3</sup>=27</b>
<!-- 分区的标签：span , 行内元素，不换行 -->
<!-- 分区的标签：div , 块级元素， 换行 -->
<!-- style="border: 1px solid green;" ,每个标签都有style属性， 用于设置标签的样式。
border:1px solid green; --- 边框 (宽度 ，类型，颜色)
background-color: gray; --- 背景颜色(颜色值) -->
</body>
</html>3.超链接和图片标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片和超链接的使用</title>
</head>
<body>
<!-- 设置顶部标志：定义锚点 -->
<a name="top">顶部区域</a>
<br>
<!-- img标签：img标签的功能是引用一张存在的图片，在网页上显示图片。
src: 引用的图片资源的路径
** 相对路径: 根据当前文件的路径，查找需要引 用的资源的路径 （../img/b.jpeg）。
** 绝对路径：从协议开始的全路径. (http://127.0.0.1:8848/web01/img/a.jpeg)
可以省略协议及其域名， 直接从根目录开始的路 径，也就是绝对路径。（/web01/img/a.jpeg）
alt: 如果图片没有正常加载成功，则显示alt的文 字说明
-->
<img src="http://127.0.0.1:8848/web01/img/a.jpeg"
width="200px"
height="200px"
title="策马奔腾"
alt="这里是一张有很多马的图片"
/>
<img src="/web01/img/a.jpeg" />
<img src="../img/b.jpeg" />
<!-- a标签： 超链接标签， 点击超链接标签，可以让页面跳转到新的资源路径。网页的内容被更新了。
href属性：指定需要跳转的url地址（相对地址，绝对地址）。
**url：统一资源定位路径。(网络上可以访问的资源的路径)。
target属性：
_blank - 打开的内容显示在一个新窗口，
_self - 打开的内容显示当前窗口。
-->
<a href="http://www.baidu.com"target="_blank">百度首页</a>
<!-- 通过定义的锚点的名字top， 跳转到锚点所在位置。-->
<a href="#top">回到顶部</a>
</body>
</html>4.表格标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格标签</title>
</head>
<body>
<h2>三行四列的表格</h2>
<!-- table标签：用于实现表格
- caption 设置表格的名字
-tr (table row) : 行
-td : 列(单元格)
table标签的属性：
- border 边框
- width 宽度（默认的宽度有表格中的内容的宽度决定）
- cellspacing="0" 设置单元格之间的宽度
- cellpadding="0"设置文本内容和表格边框的宽度
- align : 表格显示位置
-->
<table border="1" cellspacing="0" width="300px">
<caption>购物车展示</caption>
<!-- thead : 代表表头 -->
<thead>
<tr>
<!-- th和td类型， th中的文字会加粗 -->
<th>商品名字</th>
<th>商品数量</th>
<th>商品单价</th>
<th>小计</th>
</tr>
</thead>
<!-- tbody:表格中的数据 -->
<tbody>
<tr>
<td>鼠标</td>
<td>2</td>
<td>20</td>
<td>40</td>
</tr>
<tr>
<td>键盘</td>
<td>3</td>
<td>40</td>
<td>120</td>
</tr>
</tbody>
<tfoot>
<tr>
<!-- table标签要求： 每行的列数相等， -->
<td>总计：</td>
<!-- colspan="3" : 把三列合并为1列， 让每行的列数相等。 -->
<td colspan="3">160</td>
</tr>
</tfoot>
</table>
<table>
<caption>分数统计</caption>
<tr>
<th>姓名</th><th>科目</th><th>分数</th>
</tr>
<tr>
<!-- rowspan="2" ： 把两行的单元格合并为一个。让每行的列数相等 -->
<td rowspan="2">小红</td><td>语文</td><td>80</td>
</tr>
<tr>
<!-- 这行只写两个td， 是因为上一行已经合并了本行的td。本行实际还是能保证有三列 -->
<td>数学</td><td>90</td>
</tr>
</table>
</body>
</html>5.表单相关标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单使用：登陆界面</title>
</head>
<body>
<h1 align="center">登陆界面</h1>
<!-- form标签：表单相关的标签，其内部嵌套用于用户 输入数据的标签。
* action: 表单提交的请求地址(url)
* method: 请求的方式get / post
* enctype : 设置enctype的类型，对请求参数的处 理方式。
** 如果表单中涉及到文件上传 ，要求：method是 post , enctype设置为multipart/form-data
-->
<form action="#" method="get" enctype="application/x-www-form-urlencoded">
<!-- for:label的for属性对应的数据值时input标签的id。 那么单击label标签的时候，input标签获取焦点(光标就在输入框内部, 用户就可以直接输入数据。) -->
<label for="inputname">用户名:</label>
<!--
input标签： 用于用户输入数据
* type: 设置标签的类型,对用户输入的数据进行一些设置
* name: 用户输入的数据，传输到服务器端的时候 ， java程序根据name的值，获取到输入框的数据。
* value: 对应的就是用户输入的数据值
-->
<input id="inputname" type="text" name="username" value="tom" /><br>
<label for="inputpwd">密码:</label>
<input id="inputpwd" type="password" name="userpwd" /><br>
<!-- type="submit":提交请求(请求的地址 + 请求的参数)的按钮 , 单击按钮触发表“单提交事件”
“表单提交事件” ： 发送请求给服务器，并且把请求参数(用户输入的数据)也传输到服务器端。-->
<input type="submit" value="提交" />
<!-- type="reset" , reset事件， 清空表单中的数据值 -->
<input type="reset" value="重置" />
</form>
<h2>表单相关元素的介绍</h2>
<form action="#" method="post" enctype="multipart/form-data">
单行文本框：<input type="text" name="user" /><br>
密码框：<input type="password" name="pwd" /><br>
隐藏域：<input type="hidden" name="hide" /><br>
文件上传：<input type="file" name="photyo" /><br>
<!-- 单选按钮：①一般一组单选按钮，需要设置相同的name值，才能保证只有一个按钮被选中。
② 标签后面的文本提示，是给用户看的， 标签的value值时给 程序使用的。
(程序中用0表示男，1表示女)
③ checked="checked" ,表示设置为默认选中
-->
单选按钮：<input type="radio" name="sex" value="0"/> 男
<input type="radio" name="sex" value="1" checked="checked"/> 女 <br>
复选框：<input type="checkbox" name="hobbys" value="看书" checked="checked" /> 看书
下拉列表(单选)：<select name="city">
<option>请选择</option>
<option value="0">上海</option>
<!-- selected="selected" : 设置默认选中项 -->
<option value="1" selected="selected">北京</option>
<option value="2">天津</option>
</select><br>
下拉列表(多选):
<!-- multiple="multiple"：用于设置下拉列表，支持多选 -->
<select name="language" multiple="multiple" size="6">
<option value="java">java</option>
<option value="c">c</option>
<option value="c++">c++</option>
<option value="python">python</option>
<option value="html">html</option>
</select><br>
多行文本框：
<!-- cols="5" :设置宽度 rows="10" :设置高度 -->
<textarea name="info" cols="5" rows="10"></textarea><br>
submit:<input type="submit" value="提交数据" /><br><br>
reset:<input type="reset" value="清空数据" /><br>
button:<input type="button" value="普通按钮" /><br>
分组标签：
<fieldset>
<legend>地址</legend>
邮箱： <input type="email" name="email" />
年龄: <input type="number" name="phone" />
date: <input type="date" name="date" />
颜色：<input type="color" name="color" />
submit:<input type="submit" value="提交数据" /><br><br>
</fieldset>
</form>
</body>
</html>iframe标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iframe标签的使用</title>
</head>
<body>
<!-- iframe标签： 在网页中，可以通过src的路径找到新的网页，嵌套在当前网页中。 -->
<iframe src="1.表单相关标签.html" width="100" height="100"></iframe>
<iframe src="../img/a.jpeg" width="100" height="100"></iframe>
<ul>
<!-- a标签的target ，指定为iframe标签的name值 ， 那么超链接的内容，则显示到iframe标签中。 -->
<li><a href="../day1/1.html文件的结构.html" target="content">1.文件结构</a></li>
<li><a href="../day1/2.文本相关标签.html" target="content">2.文本相关</a></li>
<li><a href="../day1/3.有特殊样式的文本标签.html" target="content">3.特殊样式的文本</a></li>
</ul>
<!-- 单击li中的超链接，把超链接的内容显示到iframe标签中。 -->
<iframe src="../day1/1.html文件的结构.html" width="300px" height="300px" name="content" ></iframe>
</body>
</html>四、CSS
css(Cascading Style Sheets**）:层叠样式表，又叫级联样式表，简称样式表，用于HTML文档中元素的样式定义，实现网页的美化，实现将内容和表现分离。
1.CSS三种使用方式
内联样式
- 样式定义在单个的HTML元素中
<p id="p1" style="width: 500px; background-color: aquamarine;">内部样式
- 样式定义在HTML页的头元素中
<style>
#p2{width: 400px; background-color: blanchedalmond; }
p{ color: red; }
</style>外部样式
- 将样式定义在一个外部的css文件中（.css文件）
- 由HTML页面引用样式表文件
<link href="./p3.css" type="text/css" rel="stylesheet" /><style>
#p2{width: 400px; background-color: blanchedalmond; }
p{ color: red; }
</style>2.CSS特征
继承性
- 大多数css的样式规则可以被继承
层叠性
- 可以定义多个样式表
- 多个不冲突的样式，可以层叠为一个优先级
- 样式定义冲突时，按照不同样式的规则优先级来应用样式
- 浏览器默认样式< 标签的默认样式 < [外部样式/内部样式/内联样式]
外部样式/内部样式/内联样式: 根据谁后写，谁优先。
3.CSS选择器
标签选择器:
<style>
li{
background-color: green;
list-style: none;
margin:3px ;
}
</style>id选择器：
<style>
#first{font-size: 30px;}
</style>class选择器：
<style>
.group { color: red; }
</style>分类选择器：
<style>
span.three{ width: 120px; }
</style>分组选择器：
<style>
p , h1{
border: 3px solid black;
border-radius: 5px;
}
</style>派生选择器：
- 找子(嵌套在内部的第一层符号条件的标签元素) 选择器>选择器{}
- 找子孙(嵌套在内部的所有符号条件的标签元素) 选择器 选择器{}
<style>
#sel>span{
padding: 5px; border: 3px solid red;
}
#sel span{
padding: 5px; border: 3px solid #008000;
}
</style>伪类选择器：
伪类用于向某些选择器添加特殊的效果
使用冒号(:)作为结合符，结合符左边是其他选择器，右边是伪类
常用伪类：
— :link 页面上从来没有点击过的链接
— :active 选择活动链接，并设置其样式：
— :visited 选择已访问的链接，并设置其样式：
— :hover 鼠标悬停的状态
— :focus 获取焦点的状态[对有键盘焦点的元素设置]
4.CSS样式
常见样式
<style>
//
div{
width: 400px;
height: 200px;
background-color: greenyellow;
overflow: hidden; /*溢出的解决方式： 隐藏溢出部分*/ overflow: scroll; /* 设置出现滚动条，溢出的内容通过 滚动条查看*/
overflow: visible; /* 溢出部分可见 ， 溢出的默认处 理方式*/
overflow: auto; /*继承父元素的溢出处理方式*/
}
.box{
width: 200px; height:
200px; background: #008000;
/* 边框 */
border: 3px solid gray; /*四个方向均有边框*/
/* 四个方向分别设置边框
border-left: 3px solid greenyellow ;
border-top: 3px solid seagreen ;
border-right: 3px solid yellowgreen;
border-bottom: 3px solid lightyellow ;*/
/* border的边框宽度，样式， 颜色分别设置 */
border-width: 5px;
border-style: dotted;
border-color: #000000;
}
/* margin: 外边距， 设置元素之间的间距 */ #box1{
margin: 10px; /*四个方向都是10px*/
margin: 10px 20px;/* margin: 上下 左右;*/ margin: 5px 10px 20px 30px;/* margin: 上 右 下 左;四个方向分别设置*/
margin-top: 20px ; /*只设置上方向的margin , 等同 于： margin:20px 0 0 0;*/
/* margin-left , margin-right , margin-bottom*/ }
/* padding :内边距， 设置元素和自己内部的内容之间的间距*/ #box2{
padding: 20px; /* 四个方向都是20px*/
padding: 20px 40px; /*padding:上下 左右;*/ padding: 5px 10px 15px 20px; /*padding :上 右 下 左;四个方向分别 设置*/
padding-top: 20px ; /*只设置上方向的padding , 等 同于： padding:20px 0 0 0;*/
/*padding-left , padding-right; padding- bottom */
}
/* html标签分类：
1. 块级元素： 占据一整行，其他内容换行显示。可以设置width , height ,比如：h1 , div , p .
2. 行内元素： 宽高由内容决定，剩下的区域可以显示其他元素。不支持设置width ,height. 比如：span , input.
3. 块级行内元素：具有块级元素的特征，但是不换行。可以设置width，height ,比如： img.
css样式的display: display: none; -- 隐藏标签。 display:block; -- 设置为块级元素 display: inline ; -- 设置为行内元素 display: inline-block ; -- 设置为行内块级元素。 */
</style>CSS定位
<!--定位：流定位 ，浮动定位，相对定位，绝对定位，固定定位
①流定位：页面中的块级元素从上到下一个接一个显示，行内元素 在一行中从到右排.
②浮动定位：让元素脱离了普通的流定位 ，通过css的float属性设置元素的浮动方向，浮动元素依旧在父元素内部，用它实现特殊的定位效果。 -->
<style>
.inner{
float：none/left/right
clear: both; /*清除浮动的影响：
none - 不清除,
both-清除两边的浮动元素的影响， left-清除左边的影响，
right - 清除右边的影响*/
}
</style>
<!-- position：定位 ,top ,left ,right, bottom 设置元素的 具体的位置。
① 相对定位:relative , 参考自己本身原来的位置。
② 绝对定位:absolute , 参考的是自己的有相对定位的包裹元素， 如果直接父元素没有相对定位，那么就找父辈的， 如果最终也 没有，那么就找html(body)为准。
③ 固定定位:fixed , 参考html(body) -->
<!--层叠和透明度
z-index,已定位的元素，可以通过z-index控制层次顺序。z- index的值是一个整数，数据值越大，离视线越近，如果没有设置z-index，默认值是0.
元素可以设置透明度：
opacity :背景和文字都透明
rgba： 背景透明，名字不透明 -->五、js（JavaScript）
操作html和css , 实现动态页面
1.js的三种使用方式
- 事件定义的方式
- js嵌入到html页面，通过script标签来使用
- js相关内容写在单独的**.js**文件中，然后在html页面上，通过script标签的 **src=“xx.js”**引入js文件，进行使用。
2.基础知识点
- 变量的定义
- let 变量名
- let 变量名=变量值;
- 变量的名字不能使用关键字。
- 数据类型
- string
- number
- boolean
- object
- null
- undefined
- 运算符
- 算术运算符
- 关系运算符
- 逻辑运算符
- 赋值运算符
- 数据类型转换
- 隐式转换
- 数据类型转换函数
- 分支语句
- if…else
- if…
- if…else if…
- 循环语句
- for（let i =0 ; i < n ; i++）{}
- for循环同java语法规则
- 获取元素的方式
- document.getElementById(id值) ： 根据id查找元素，结果是一个元素对象
- document.getElementsByTagName(标签名字) ： 根据标签名查找，结果是一个元素的数组对象。
- document.getElementsByName(标签的name属性) ： 根据标签的name属性的值查找，结果是一个元素的数组对象。
- document.getElementsByClassName(标签class的值) ： 根据标签的class的值查找，结果是一个元素的数组对象。
- 修改和获取标签内部的内容：
- obj.innerHTML: 可以对文本和标签进行使用
- obj.innerText:只能对文本进行使用
- obj.value: 表单元素的value值的获取或者设置
- 修改标签的style
- obj.value: 表单元素的value值的获取或者设置
- obj.style.width/height
- obj.style.color
- …
3.js的数组、对象、事件：
数组对象 : Array
- 定义数组，数组赋值， 遍历数组， 数组长度，数组下标，数组的各种函数
- 排序
- 二维数组
函数对象 : function
- 函数的定义
- 函数的调用
函数参数对象 : arguments
- 函数的参数都存放在arguments对象中
- arguments本质就是一个数组
全局函数： setInterval , clearInterval
- let timer = setInterval(function , time ) ，启动了定时器函数
- clearInterval(timer) ,关闭定时器
- parseInt
- parseFloat
- encodeURI:编码
- decodeURI:解码
BOM:浏览器对象模型
screen , history , location , navigator , document
DOM:文档对象模型
- document
- 节点名字（nodeName： #document , #text , 标签名字大写） , 节点的类型(nodeType:文档节点， 元素节点， 属性节点， 文本节点)
- 节点的内部嵌套内容(innerHTML, innerText)
- 节点的样式(style)，节点的属性(标签的属性) ： getAttribute …
- 获取节点: document.getElementById
（标签id , 标签名，标签的class ，标签的name）
(父节点， 子节点， 兄弟节点) - 节点的创建（createElement(标签名)）
- 节点的添加 （插入到网页上）
- 节点替换， 克隆
- 删除节点
自定义对象的创建
- new Object
- 自定义构造器函数
- json格式的对象 ：{key:value, key1:value1} , key-string , value-任意数据类型事件类型 & event对象
- 鼠标事件， 键盘事件， 状态改变事件,…
- event : 每发生一次事件，就会产生一个event对象。
- 事件源： 触发事件的源头(节点对象)
- 事件处理机制： 冒泡 ， 阻止冒泡
六、jquery
js的函数库 , 操作html，css
1.jquery对象：
- jquery对象: 可以调用jquery中封装的函数
- js对象： 按原生js进行操作。
- jquery对象和js对象的转换：
- $(js对象) – 转换了jquery对象。
- $(“span”).get(0) , 获取到的是js对象。
2.选择器 ：
query通过选择器函数，得到的是一个数组
jquery的选择器函数 :
**$(selecter)**中的选择器支持任意css的选择器。
基本选择器（id ,class , tag）
层次选择器(子 ，子孙, 弟弟)
过滤选择器（:lt ,:odd(奇数), :even(偶数)）
表单选择器(:text)
3.jquery函数：
css , attr , html , text , val , height , width …
4.函数的参数是函数：
setInterval(funcion , time);
5.回调(callback)函数：
某个函数执行完成之后，再执行的其他函数，被称为回调函数。
语法规则：
function xx (yy){
<!--先执行xx需要执行的代码，这部分执行完之后 -->
<!-- 然后在判断yy是否存在，存在就调用yy函数 -->
if(yy){
yy()
}
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
