javaWeb笔记

缺省适配器设计模式:父类不实现该方法，让子类去实现(抽象方法)

模板方法设计模式：定义一个操作中的方法骨架，而将一些步骤延迟到子类中。模板方法使得子类可以不改变一个方法的结构即可重定义该算法的某些特定步骤。如：在父类中有参方法调用无参方法，子类可以重写无参方法而不会影响到有参方法

(html)

1.基本规则

html书写规则：
​ 1.双标签 你好宋伟 开始标记 结束标记 中间可以包裹内容或其他标签
​ 2.单标签（自结束标签） charset="utf-8" 没有结束标记 通常要搭配属性使用

乱码：文本本身编码格式 跟读取的程序编码格式不统一
统一编码格式

html解析文本格式
​ 1.回车换行 需要使用html中特殊的方式（使用br标签）
​ 2.空格需要使用html特殊的格式（转义符） &xxx;
​ 3.编写文本时 注意不要跟html标签格式产生冲突

2.常用标签

2.1.标题标签

加粗 改字号 换行（自己占满一行） 上下边距

		<h1>测试标题</h1>
		<h2 id="myaim">测试标题</h2>
		<h3>测试标题</h3>
		<h4>测试标题</h4>
		<h5>测试标题</h5>
		<h6>测试标题</h6>
		普通文本
		<p>这是一个段落</p>

2.2.转义标签

源代码	显示结果	描述
&lt；	<
&gt；	>
&amp；	&
&quot；	"
&reg；		注册商标
&copy；		版权符号
&trade；		tm符号
&ensp；		半个空白位
&emsp；		一个空白位
&nbsp；		b不断行的空白

2.3.列表标签

	定义列表	
		<dl>
			<dt>标题1</dt>
			<dd>列表项1</dd>
			<dd>列表项2</dd>
			<dt>标题2</dt>
			<dd>列表项1</dd>
			<dd>列表项2</dd>
		</dl>
	有序列表
		<ol type="a">
			<li>列表项1</li>
			<li>列表项2</li>
			<li>列表项3</li>
			<li>列表项4</li>
		</ol>

	无序列表
		<ul type="square">
			<li>列表项1</li>
			<li>列表项2</li>
			<li>列表项3</li>
			<li>列表项4</li>
		</ul>

2.4.文本标签

<u>测试</u><strong>文</strong><em>本</em>

2.5.超链接

<a href="1html基本规则.html">这是超链接</a>

图片超链接
<a href="#">
			<img src="https://www.baidu.com/img/bd_logo1.png" width="50px" height="50px" alt="美女图片" />
		</a>

2.5.1.锚点

使用id与name声明锚点的区别

在老版本浏览器中最初都是使用name作为锚点位置的声明方式。

网页中name属性的取值不唯一，因此造成锚点定位不准，所以后期浏览器都支持使用id作为锚点声明位置。

Html5规范中已经声明取消name的锚点声明方式，建议使用id。

超链接中经常嵌套图片标签

<a href="#jump">点我看看</a>
---<p id="jump">我是该区域的相应内容</p>
    ---<p name="jump">我是该区域的相应内容</p>

2.6图片

Src 图片路径

Width 图片宽度

Height 图片高度

Alt 图片说明(当图片失效时显示)

1.src与href的区别：实际效果类似 内部处理方式不同 主要区别如下

2.src（ source ）的值是外部资源的访问路径，在请求src资源时会将其指向的资源下载并应用到当前文档中，此时外部资源作为当前文档的一部分（引入），一般用作非文本引入方式。

3.href 表示超文本引用（hypertext reference），在使用href请求外部资源时，会下载外部资源，同时当前网页读取外部资源的内容（引用）。一般用作文本引入方式

注意：Link、a标签使用href，其余使用src

<img src="coder.jpg" width="100px" height="100px" alt="图片"/>

2.7表格

常见标签

Table 表格

Tr 行

Td 单元格（列）

Th 列头

Thead 表区域（头）

Tbody 表区域（体）

Tfoot 表区域（脚）

Caption 表名

Rowspan 跨行

Cellspan 跨列

2.8.表单

Input标签
<input  type=”xxxx”/>  常用表单元素
type的属性值：
	Text  文本框
	Password  密码框
	Radio  单选按钮
	Checkbox  多选按钮
	File    文件框
	Color   颜色框
	Date   日期框
	Button  空白按钮
	Submit  提交按钮
	Reset   重置按钮

Select标签  下拉菜单
<select>       
<option>选项1</option>
<option>选项1</option>
</select>

Textarea标签 多行文本框
<textarea></textarea>  

Form表单（用户填写的数据需要通过表单标签提交）
<form action=“http://www.sohu.com” method=“post”>  </form>
Action属性 代表提交的地址
Method属性 代表提交的方式get post

2.8.get和post

	GET	POST
后退按钮/刷新	无害	数据会被重新提交（浏览器应该告知用户数据会被重新提交）。
书签	可收藏为书签	不可收藏为书签
缓存	能被缓存	不能缓存
编码类型	application/x-www-form-urlencoded	application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。
历史	参数保留在浏览器历史中。	参数不会保存在浏览器历史中。
对数据长度的限制	是的。当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。	无限制。
对数据类型的限制	只允许 ASCII 字符。	没有限制。也允许二进制数据。
安全性	与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。 在发送密码或其他敏感信息时绝不要使用 GET ！	POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。
可见性	数据在 URL 中对所有人都是可见的。	数据不会显示在 URL 中。

2.9.Frameset frame

通过frameset 可以把页面拆分成多份
通过frame在每一份引入一个单独的页面

<FRAMESET  rows="20%,*"   frameborder="0">  //设置成无边框
      <FRAME src="top.html" name="topframe" scrolling="no" noresize="noresize">  //scrolling="no" 不显示滚动条
      <FRAMESET cols="20%,*">
      <FRAME src="left.html"  noresize="noresize" scrolling="no" name="leftframe" > //noresize="noresize"禁止调整框架大小
      <FRAME src="right.html" name="rightframe">  // name="rightframe"框架名称，便于超文本链接锚标签
</FRAMESET>

可以通过超链接的target属性 指定到跳转哪个frame

<frame src="xxxx" name="窗口名">　　 

<a href="xxx" target="窗口名">

(css)

1.css引入方式

1.通过style标签 编写css代码 调试代码时使用
2.通过style属性 不推荐使用（调试较麻烦）（优先级高）
3.通过link标签引入css文件 最终格式 使页面整洁

2.css常用选择器

​

.元素选择器         元素名（标签名）
2.class选择器   .class值     使用较灵活
	class属性允许多个值
3.id选择器           #id值             尽量不用

4.并集选择器         选择器,选择器
5.交集选择器         (元素)选择器选择器    
6.后代选择器          选择器 选择器          可以跨代
7.子代选择器          选择器>选择器         不可以跨带
8.属性选择器         [属性] [属性="属性值"] 一般要搭配交集选择器使用
9.全局选择器         *

2.1.伪类选择器

：active 点击动作

：hover 鼠标悬停

			a:hover{
				color: greenyellow;				
			}
			a:active{
				color: lightblue;
			}
			div{
				border: 1px solid black;
				height: 100px;
				 100px;
				
			}
			div:hover{
				background-color: lightseagreen;
				cursor: pointer;
			}
			div:active{
				background-color: lightpink;
			}
			<a href="###">超链接</a>

3.常用属性

html元素中 有几个通用属性使用

id 在页面中尽量不要重复

name 表单元素的提交

class 跟样式配合使用 值部分允许多个值

style 直接编辑样式属性 尽量不用

color 文字颜色

font-size 文字大小

font-family 字体类型

text-align 文本对齐方式

line-hight 行高

text-decoration 文本修饰（下划线等）

Background 背景图片

background-repeat 背景图片重复方式

background-color 背景颜色

Widht 宽

Height 高

List-style 列表标签的列表样式

3.1.元素排布规则相关属性display

默认文档流

block 块状元素 从上到下

inline行内元素从左到右 不可以设置宽高 大小由内容大小决定

inline-block行内块状元素 从左到右 可以设置宽高

none不显示

3.2盒子相关属性

border 边框

margin 外边距

padding 内部填充

margin: 10px;上下左右
margin: 10px 20px;上下 左右
margin: 10px 20px 30px; 上 左右 下
margin: 10px 20px 30px 40px; 上 右 下 左
margin: 10px auto; 做块左右居中
margin-left: 100px; 四边可以单独设置

padding 填充 用法和margin相似

3.2.1盒子嵌套的问题

当盒子模型嵌套使用时 会遇到超过边界的问题（内容大小 大于父元素的大小）

可以使用overflow属性处理 隐藏超过的内容

改变在父元素中的排列属性 可以使用float浮动属性 让元素水平排列

通过div加浮动 可以使用css制作类似frameset的页面布局

overflow例：
.mainD{
				border: 1px solid black;
				 700px;
				height: 500px;
				overflow: hidden;/*处理内部超过边界*/
			}

3.3.position定位

relative 相对定位 元素本身位置保留（不脱离文档流） 根据元素本身的位置进行偏移

absolute 绝对定位 元素本身位置不保留（脱离文档流） 根据页面位置进行偏移 不推荐使用

fixed 固定定位 元素本身位置不保留（脱离文档流）根据浏览器主体部分进行偏移 并固定在主偏移位置上(小广告)

z-index 层叠顺序 需要使用在有定位属性的元素上，值大的覆盖值小的

(javascript)

1.js引入方式

Script标签中编写

通过script标签引入（当前标签无法再编辑js代码）

在页面中直接编写javascript

例：onclick="javascript:alert(1)" 尽量不用

2.变量

变量声明规则与java基本一致

var num = 10 ;

Js中变量类型

Number 数字类型

String 字符串类型

Boolean 布尔类型

Undefined 未定义或未初始化类型

Null 表示空对象 一般作为对象类型的初始值

Object 复合类型 包含js中的各种对象

类型装换函数

parseInt():字符串转换为整数(parseInt(string, radix))

parseFloat():字符串转换为浮点数

toString()：返回字符串

注意parseInt parseFloat对字符串的转换

运算符

inFixed(取小数位数)

3.函数

parseInt 函数可解析一个字符串，并返回一个整数 parseInt(string, radix)

parseFloat 函数可解析一个字符串，并返回一个浮点数。 parseFloat(string)

IsNaN 函数用于检查其参数是否是非数字值。 isNaN(value)

eval 函数可计算某个字符串，并执行其中的的 JavaScript 代码。 eval(string)

4.js事件

Js会自动对行为进行监听，当触发某些行为时，可以调用自定义函数来完成用户交互。

事件通常与函数配合使用，当事件发生时去调用函数

鼠标点击 onclick

鼠标悬浮于页面的某个热点之上 onmouseover

在表单中选取输入框 onfocus

内容改变 onchange

页面或图像载入 onload

键盘按键 onkeyup

表单提交 onsubmit

5.history对象

常用方法

back()：加载上一个浏览的文档 用法：history.back()

forward()：加载下一个浏览过的文档 同上

go(n)：n为整数，跳转第n个浏览过的文档 同上

​ n==0 则刷新当前页面

​ n>0 则向前跳转到第n个文档

​ n<0 则向后跳转到第n个文档

6.Location对象

常用属性与方法

Href属性 与浏览器地址栏直接输入地址效果相同

Reload()方法 与浏览器刷新按钮效果相同

location.href="http://www.baidu.com/";
location.reload();

7.Document对象

常用属性与方法

Title 可以设置文档的title

getElementById() 返回对拥有指定id的第一个对象的引用

getElementsByTagName() 返回带有指定名称的对象集合

getElementsByName() 返回带有指定名称的对象集合

选取元素的方法也可以通过元素调getElementById(xxx).getElementsByTagName(xxx)，当选取元素有不需要的元素时 可以通过属性再次进行筛选

document.title  页面标题
document.getElementById("id名")       //通过id获取元素
document.getElementsByTagName("div")  //通过标签名获取元素集合
document.getElementsByName("honby")   //通过name属性获取元素集合
document.getElementById("aimdiv").getElementsByTagName("input") //在目标父元素内部获取元素

8.Window对象常用方法

8.1.Open()

打开新窗口

newWin= window.open("弹出窗口的url", "窗口名称", "窗口特征")

属性名称	说明
height/width	窗口文档显示的高度与宽度(px)
left/top	窗口的X,Y坐标(px)
toolbar=yes|no|1|0	显示浏览器的工具栏，默认yes
scrollbars=yes|no|1|0	是否显示滚动条，默认yes
location=yes|no|1|0	是否显示地址字段，默认yes
status=yes|no|1|0	是否添加状态栏，默认yes
menubar=yes|no|1|0	是否显示菜单栏，默认yes
reszable=yes|no|1|0	窗口是否可调节尺寸，默认yes
titlebar=yes|no|1|0	是否显示标题栏，默认yes
fullscreen=yes|no|1|0	是否使用全屏模式显示浏览器，默认no

8.2.close()

关闭窗口

newWin.close()  关闭打开的窗口

8.3l.setInterval

setInterval（fun,time） 开启定时循环函数反复执行

8.4.clearInterval

clearInterval  停止循环
方式1：
var task = setInterval（“myfun()”,1000）
方式2：
var task = setInterval（myfun,1000）
方式3：
var task = setInterval（function(){xxxxxx},1000）
clearInterval（task） 停止定时函数

8.5.setTimeout

setTimeout（fun,time）开启定时函数  执行一次

8.6.clearTimeout

clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。
用法与setInterval相同

9.文档对象模型（dom树结构）

9.1.Dom动态操作相关方法

//动态操作元素 
document.createElement 创建元素
	var newli = document.createElement("li");
	var newinput = document.createElement("input");
	或者 newinput.setAttribute("type","button");

//appendChild(newli)     追加子元素
	newli.appendChild(newinput);
	把新input加在新li里

//insertBefore(newli,目标元素) 追加子元素  在目标元素之前
    document.getElementById("aimul").insertBefore(newli,document.getElementById("aimli"));

//cloneNode(bol)  复制节点 true 复制当前节点及子节点   false  只复制当前节点
//removeChild(ele) 删除指定节点

//parentNode：返回节点的父节点
//childNodes：返回子节点集合,childNodes[i]
//firstElementChild：返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
//lastElementChild： 返回节点的最后一个子节点
//nextElementSibling：下一个节点
//previousElementSibling：上一个节点

9.2Dom操作表格相关方法

rows  行数组
cells 单元格数组
//查看数组原素console.log(document.getElementById("mytable").rows[1].cells[1].innerHTML);

insertRow(idx)    添加行
insertCell(idx)   新增单元格（列）
deleteRow(idx)    删除行
function addTBVal(){
				var newrow = document.getElementById("mytable").insertRow(document.getElementById("mytable").rows.length);
				var newtd1 = newrow.insertCell(0);
				var newtd2 = newrow.insertCell(1);
				var newtd3 = newrow.insertCell(2);
    			//从文本框中读取数据写入table
				newtd1.innerHTML=document.getElementById("nametext").value;
				newtd2.innerHTML=document.getElementById("agetext").value;
				newtd3.innerHTML=document.getElementById("addrtext").value;
				
			}
//删除
function delTBVal(){
	document.getElementById("mytable").deleteRow(document.getElementById("mytable").rows.length-1);
			}
//操作html
function addTBVal2(){
				document.getElementById("mytable").innerHTML+="<tr><td>"+123+"</td><td>452</td><td>水里2</td></tr>";
			}

10.String

IndexOf 查找指定字符

subString 截取字符串

Substr 截取字符串

Split 分割

toUppercase 转大写

console.log(mystr.indexOf("de"));//查找成功返回条件的第一次出现的位置，失败返回-1
console.log(mystr.lastIndexOf("de"));
//if(mystr>0)//表示有查找的字符		
console.log(mystr.substring(2,5));//起止位置
console.log(mystr.substr(2,5));//起始位置 截取几个

11.Math

Ceil        向上取整
Floor       向下取整 
Round       四舍五入
Random      伪随机数 [0-1)
			console.log(Math.floor(myunm));
			console.log(Math.ceil(myunm));
			console.log(Math.round(myunm));
			//如果想要指定的随机数  扩倍数    加减
			//比如获取 0-3 parseInt(Math.random()*4)
			console.log(parseInt(Math.random()*4));//[0,10)

12.Date

用法与java用法一致

<script>
			var mydate = new Date();
			console.log(mydate);
			//不能拿这个时间作为服务器时间的标准
			var mydate2 = new Date("2022-2-2 2:2:2");
			console.log(mydate2);
			var mydate3 = new Date("2022/2/2 22:22:22");
			console.log(mydate3);
			
			var myyear = mydate.getFullYear();
			var mymonth = mydate.getMonth()+1;
			var mydayofMonth = mydate.getDate();
			var myhour = mydate.getHours();
			var mymin = mydate.getMinutes();
			var mysec = mydate.getSeconds();
			
			console.log(myyear+"年 "+mymonth+"月 "+mydayofMonth+"日 "+myhour+"时 "+mymin+"分 "+mysec+"秒")
			//mydate.getTime() 是标准格林威治时间 与东8区有8小时时差
			console.log(mydate.getTime());
			
			
			
		</script>

13.Array数组对象

数组 不需要指定成员类型 数组大小可以随意扩充 使用上类似 ArrayList