HTML基础
HTML基础
HTML 超文本标记语言
*标记语言 指的是通过一组标签的形式描述事物的本质
*超文本 比普通的文本更强大（除了文字还有音频视频之类的 ）
1.存储的文本大小可超过64K，普通在64K以下
2.还可以通过网页浏览器打开，除了记事本。
作用：制作页面（静态页面）
【F12进入调试页面/查看源码】
常用标签介绍
【一个HTML文件的拓展名是.html或者.htm结尾】
结构标签
根标签：<html> <html>
<head> --htm的头标签
<body> --htm的体标签
【Tab制表符 为了分清层次】
字体标签
<font>标签：html中的字体标签
<font>文字</font>
<标签 属性名=“属性值” 属性名=“属性值”><标签>
属性： color属性 size属性（px）
排版标签
标题标签 ：h标签 <h1>...<h6>（字体逐级减小）
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
段落标签：p标签 <p>一段文字</p>
字体加粗标签：b标签 <b>文字</b>
字体斜体标签 <i>文字</i>
字体下划线 <u>文字</u>
居中标签 <center>内容</center>
br标签 换行<br/>
hr标签 水平线<hr/>
图片标签<img>
属性：src:来源（绝对路径/相对路径） width:宽度 height:高度（1.px 2.总页面的百分比） alt:图片找不到显示的内容
列表,超链接
有序列表 <ol> 无序列表 <ul>
超链接标签：<a>
属性: href:链接的路径 target:打开的方式（_self自身页面打开 _blank新打开一个窗口）
表格标签 <table>
表单标签 <form>
get 是获取数据，post是修改数据。
Get把请求的数据放在url上，即HTTP协议头上，
Post把数据放在HTTP的包体内
GET产生一个TCP数据包，浏览器会把http header和data 一并发出去，服务器响应200（返回一个数据）。
POST产生两个TCP数据包，浏览器先发送header,服务器响应100 continue,浏览器在发送data，服务器响应200（返回数据）。
Get快，但post更安全。
单选按钮和复选按钮的name必须相同，value可以不同。
<textarea>文本框可以设置行和列，cols和rows。
分组标签
特殊标签
  空格 > 大于 < 小于
© 版权 ® 商标
CSS基础
一.css介绍
CSS指层叠样式表，央视通常存储在样式表中，它定义了如何显示HTML元素，外部样式表通常存储在CSS文件中，外部样式表可以极大提高效率，多个样式定义可层叠为一。
二．引入css方式
了解
1. 行内样式
直接在HTML的元素上使用style属性设置CSS
2. 页面内样式
在HTML的<head>标签中使用<style>标签设置CSS
<style>
h1{
color:blue;
font-size:40px;
}
</style>
【style里面的注释用/* */或//,html注释用<!-- -->】
3. 外部样式
单独定一个.css的文件，在HTML中引入该CSS文件
<link href=”../../css/demo1.css” rel=”stylesheet” type=”text/css”>
三．css选择器
1.分类
元素选择器（文档的元素是就是最基本的选择器）/
div{ }
ID选择器(选择器前面需要有一个#号，选择器本身则为文档中某个元素的id属性的值 #d1{ }
类选择器（用于将样式规则与附带class 属性的元素匹配，其中该class属性的值为类选择器中指定的值，定义类选择器前面需要有一个.） .divClass{ }
属性选择器
<style> input[type=”text”]{ } </style>
后代元素选择器
子元素选择器
并列选择器
2.浮动 float
注： 清除浮动可以理解为打破横向排列
对于css的清除浮动，一定要牢记，这个规则只能影响使用的元素本身，不能影响其他元素。
<html>
<head><title>float浮动</title>
<meta charset="utf-8">
<style>
.divClass{
width:200px;
height:200px;
background-color:yellow;
border:1px solid blue;
}
/*div是块级元素，在页面中独占一行，自上问下排列
浮动可以理解为让某个div元素脱离标准流，漂浮在标准流上，
和标准流不是一个层次*/
/*
虽然div1浮动，但div2,div3,div4仍在标准流中，
所以div2会自动向上移动，占据div1的位置，重新组成一个流。
*/
/*
假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，
那么A元素会跟随上一个元素的后边 */
#div1{
float:right;
}
#div2{
clear:right;
float:right;
}
</style>
</head>
<body>
<div id="div1" class="divClass"></div>
<div id="div2" class="divClass"></div>
<div id="div3" class="divClass"></div>
<div id="div4" class="divClass"></div>
</body>
</html>
四．css布局
- 1. 盒子
自我总结：外边距和内边距设置顺序为上右下左。如果一个值的话如：padding:50px.设置的是上边和左边。
margin-right基本无效，建议不使用。
- 2. 定位
没有脱离文档流
1.相对定位，参照物是自己本身，通常配合left,right,bottom,top使用，只需要使用两个就可以对一个元素进行定位，一个水平和一个竖直的。
2.使用相对定位，内联元素还是内联元素，块级元素还是块级元素。
脱离文档流
1.子元素开启绝对定位，若父元素没有开启定位，会相对于浏览器定位。一般父元素要开启相对定位，若父元素开启定位，会相对于父元素进行定位。
2.通常配合left,right,bottom,top使用，只需要使用两个就可以对一个元素进行定位，一个水平和一个竖直的。
3.绝对定位会改变元素的性质：内联元素会变成块级元素，块级元素的宽高默认都被内容撑开。
脱离文档流
当元素的position设置成fixed，就开启了固定定位，固定定位也是一种绝对定位，他的大部分特点和绝对定位一样，不同的是：固定定位永远都会相对于浏览器窗口定位。 固定定位会固定在浏览器的某个位置，不会随着滚动条而滚动。
js基础
一.js介绍
二．基础语法
1.使用
2.语法规范
3.变量
4.运算符
5.语句
分支语句 if{}else if{}else{}
switch() case 1:语句；break;。。。default:语句；
循环语句 for while do while
while是先判断在执行,do while是先执行再判断，do while不管条件符不符合，至少会执行一次执行体。
6.数组
Join以括号内的方式拼接。
pop最后删除
push 最后添加
shift开头删除
unshift开头添加
7.函数
8.事件
页面加载
- body onload=“load()”
function load(){alert(“页面正在加载”);}
- window.onload=function(){
alert(“页面正在加载”);
}
自我总结思路：1.一个点击按钮触发事件
2.获得用户名《根据id》 3.获得用户名的value值，判断是否为空 4.如果为空弹出窗口,否则验证下一个…
三.js对象
JS中的四大对象
1.内置对象。如date、Math等
2.自定义对象
3.浏览器Browser对象：如：window对象，document对象，location对象等
4.ActiveX对象（一套用于访问数据源的组件对象模型（COM）对象）
regex 正则表达式
date.getFullYear()+"-"+date.getMonth()+"-"+date.getDate() +“ ”+date.getHours()+":"++date.getMinutes()+":"+date.getSeconds()
abs()返回绝对值
round() 把数四舍五入为最接近的整数
random() 返回0~1之间的随机数。
DOM编程
一． Dom概述
二． 常见对象
Window对象（包括location对象，history对象）
Dom对象
1. Document对象 HTML文档的根节点，可以从脚本对HTML页面中的所有元素进行访问，是window对象的一部分，可通window.document属性对其进行访问。
2.HTML DOM中，元素对象代表一个HTML元素。
3.HTML DOM中，Atrr对象代表一个HTML属性。HTML属性总是属于HTML元素。
4.事件对象
5.console对象
window.alert()/…中window可省略
调用window.location.href/reload/…时，window可以省略。
例子：
三． 节点
节点的定义与分类/如何访问节点（document属性…）/节点的属性
注：1.nodeValue属性：文本节点或者属性节点可以获得它的节点值，而元素节点得不到它的值，为null。
2.对于nodeType节点的类型，元素节点为1，属性节点为2，文本节点为3，注释节点为8，文档节点为9。
四．节点的相关操作
创建节点（属性：两种方法）/增加（两种方法）/删除/替换
Select对象和Option对象
【Select中options 属性length返回集合的option元素数目】
本章练习 练习一二是关于对象的
思路：
先设置（Img）第一张图片 页面加载时用周期函数控制轮播时间，定义轮播函数
在轮播函数中，循环++,最后一张图片播完在到第一张。 然后，根据id找到标签，访问和设置照片属性，完成轮播。
思路：先设置（Img）第一张图片 页面加载时用定时函数设置显示函数控制时间 。 在显示函数中，通过id找到标签，将图片设置为显示状态 。 清除时间定时。设置隐藏函数 。
在隐藏函数中，通过id找到标签，将图片设置为隐藏状态 。
清楚时间定时，设置显示函数。
（ 一直重复的隐藏和显示）
自我总结思路：1.一个点击按钮触发事件
2.获得用户名《根据id》 3.获得用户名的value值，判断是否为空 4.如果为空,在输入框后面加一个节点（文本节点输入：用户名不能为空）
否则验证下一个…
自我总结思路：
1.获得表格
2.获得行数，循环遍历行，分别找到奇数行和偶数行。
3.分别访问背景颜色，设置。
自我总结思路：
- 先把表格分为表头和表体
- 表头行，触发事件checkAll
- 获得表头行的复选框，判断复选框是否被选中。
- 获得表格体的所有复选框
- 上面总复选框被选中true，则需改表格体中所有复选框为选中。
上面总复选框未被选中true，则需改表格体中所有复选框checked设置为false.
自我总结思路：
1.写一个省下拉框和一个市下拉框。
2.在省下拉框中，定义省的value值，通过onchange函数将value值（0，1，2为了与选项匹配）传过去，接受函数用index接收。
3.定义省市二维数组,并赋值，将数组下标与value值对应
4..循环遍历（二维），用市创建第二个下拉框市的option（市，value）；
5.获得市的下拉列表对象，往市里添加option
6.若下拉市列表不为空，用select里的options.length清空列表
Juery编程
一． 简介
Jquery可以搜索 jquery.com官网，不用下载，直接创建jquery-3.4.1js，将未压缩的js文件复制过来即可。
二． Jquery对象和Dom对象
1. 插删创
Jquery对象的创建 与Dom对象的互相转化
Jquery对象的查询，创建插入删除
2.属性操作
3.样式遍历
JQuery遍历用each数组
1. $.each(数组，function(i,n){}) //i：下标，n：元素值
2. $(数组).each(function(i,n){})
三． 选择器
按照定位的不同特点，jquery选择器分类如下：基本选择器、
层级选择器、过滤选择器、表单选择器.
基本选择器
层级选择器
过滤选择器
表单选择器
清空下拉列表可以改为 $(shi).empty();
四． 事件和效果
页面初始化加载$(function(){});
Ajax
一。简介
二.原理
三．应用
1.ajax对象
【查找工作空间 file->switch workspace->other】
localhost本地主机 8080tomcat默认端口号
通过浏览器访问输入 http://localhost:8080/ajax/regist.html
2. get请求
没有加防乱码的
在open(‘get’，encodeURI（‘。。。’），true)
没有加防乱码的，格式同上。
3. post请求
4. jquery支持
如下：
5. json支持
在写这篇文章之前需要明白浏览器和web服务器，以及servlet之间如何交互的，如果不明白的话，建议看一下这篇文章：https://blog.csdn.net/My_name_is_ZwZ/article/details/82710858
. 1.为什么会有servlet？
一开始的Java做不得例如网站前端和后端交互这种事情，（好像利用网络编程可以，但是这个过程实现起来比较复杂）。于是乎sun公司就为此而创造出了servlet供开发者使用。其目的就是为动态网站提供技术上的支持。
即：servlet是在Java上面的一个发展，它以Java作为基础。每一个技术的演变或者发展都是因为为了满足一种需求，或者更好的实现一种需求。
2.servlet如何运行？
servlet是使用servletAPI编写的跑在服务器端的Java程序。
————————————————
3.tomcat中WEB-INF/web.xml使得web服务器与servlet连接的方法：
<servlet>
<servlet-name> (给servlet取一个名字) </servlet-name>
<servlet-class> (指明该servlet在哪个包下) </servlet-class>
</servlet>
以上的配置代码目的是：让服务器“知道”有一个servlet
<servlet-mapping>
<servlet-name> (与上边<servlet-name>标签中的内容相同) </servlet-name>
<url-pattern>/ (访问该servlet的资源名) </url-pattern>
</servlet-mapping>
以上代码是servlet的映射 ： 让用户知道如何访问该servlet
4.web服务器与servlet交互的过程：
5.servlet的生命周期：
如上表所示：当web服务器找到相对应的servlet之后，就会使用反射机制创建实例调用init( )方法将该实例装载到内存中，并且把接收到的HTTP请求封装成request对象，(同时还有一个response对象，只不过此对象中没有任何内容)作为service( )方法的参数传入。 然后执行 service( )函数，进而获取到response对象（该对象中存储着各种信息），然后由web服务器把response对象的信息拆出，并形成HTTP响应格式返回给浏览器。
每次请求，都会创建一个新的HttpServletResponse对象
————————————————
版权声明：本文为CSDN博主「ZwZ_NULL」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/My_name_is_ZwZ/article/details/82710858
1.关于web.xml中关于tomcat的设置
1 <?xml version="1.0" encoding="UTF-8"?>
2 <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
3 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
4 xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
5 version="4.0">
6
7 <servlet>
8 <!--自定义，一般为类名-->
9 <servlet-name>servletDemo1</servlet-name>
10 <!--一定是package + .类名-->
11 <servlet-class>day08_servlet.ServletDemo1</servlet-class>
12 </servlet>
13 <!--给Servlet提供（映射)一个可供客户端访问的URI-->
14 <servlet-mapping>
15 <!--和servlet中的name必须相同-->
16 <servlet-name>servletDemo1</servlet-name>
17 <!-- servlet的映射路径 -->
18 <url-pattern>/servlet</url-pattern>
19 </servlet-mapping>
20
21 </web-app>
创建serlet的路径（url）一定要与open中第二个url相同，这样servel才能被访问。
2.web项目下面的目录分别代表神魔?
src下是java 程序。
WebRoot下的是前端文件，比如jsp页面，html页面,js，jar包，web配置项目所在的地方。下面的WEB-INE目录是受保护文件，只可以由servlet访问，而WebRoot根目录下的可以直接通过url地址直接访问。
3. url和uri的区别
uri（统一资源标识符）包括url（统一资源定位符）和urn。
题集
1.alert( "12">"9" ) 的运行结果正确的是（ B ）
A．true B．false
|
2.以下代码运行后的结果是输出( B ) |
|
|
|
|
|
|
|
使用dom创建如下标签，并添加到<body> > |
Dom对象习题(代码)
浙公网安备 33010602011771号