<!doctype html>
< --根--> < html> < head> < title> </ title> </ head> < body> </ body> </ html> 1.段落标记
<p>内容</p>
2.标题字
<h1></h1>从h1到h6
3.换行标记(独目标记)
<br>
4.水平线(独目标记)
<hr>
给水平线指定颜色，和宽度
color和width都是属性
<hr color="red" width="50%">
5.预留标签
<pre>
这里面的格式是什么样就怎样显示
</pre>
6.删除字
<del>删除字</del>
7.插入字
<ins>插入字</ins>
8.粗体字
<b>粗体字</b>
9.斜体字
<i>斜体字</i>
10.右上角加字
10的2次方
10<sup>2</sup>
11.右下角加字
10的m
10<sub>m</sub>
12.字体标签
<font color ="颜色" size="大小">
内容
</font>
所有实体符号，以&开始，以;结束。实体符号与HTML冲突，就需要用实体符号
1.小于号
<
2.大于号
>
3.空格
<table border = "1px" width = "300px" height="100px">
<tr align = "center">
< td> </ td> </ tr> </ table> < td> </ td> < td> < table> < thead> < tr> < td> </ td> < td> </ td> < td> </ td> </ tr> </ thead> < tbody> < tr> < td> </ td> < td> </ td> < td> </ td> </ tr> </ tbody> < tfoot> < tr> < td> </ td> < td> </ td> < td> </ td> </ tr> </ tfoot> </ table> 背景颜色 bgcolor = "颜色"
背景图片 background = "图片路径"
<img src = "路径"
width="图片宽度，单位为像素"
height="图片高度"
title="设置鼠标悬停时信息"
alt = "图片无法加载时，显示的提示信息"
/>
开始标签，结束标签如果中间没有东西可以在开始标签后面加/
如:<img></img> --> <img />
<!--
href:hot references 热引用
href属性接资源地址
超链接特点：
有下划线
鼠标停留有小手
点击后跳转页面
超链接有一个target属性可取值
_blank ：新窗口
_self ：当前窗口，默认
_top ：顶级窗口
_parent ：父窗口
文字超链接：
<a href="">文字名称</a>
图片超链接：
<a href ="url" >
<img src = "" />
</a>
无序列表
没有序号
<ul>
<li>
<ul>
<li>
</li>
</ul>
</li>
</ul>
有序列表
有序号
有属性type
<ol>
<li>水果
<ol>
<li>香蕉
</li>
</ol>
</li>
</ol>
作用接收用户信息
input属性：
type：submit提交表单数据
button普通按钮
text文本输入框
password密码
reset清空表单
checkbox 复选框
radio 单选按钮，如果只能选中一个，那么就让name相同，checked表示默认选择
要提交数据，必须要有name
value：设置按钮显示文本
重点：表单项有name的都会提交给服务器
下拉框：
有几个选项就有几个option
selected默认选中
multiple="multiple"支持多选
size 显示条目数目
<select name = "">
<option value="值">选项</option>
<option value="值">选项</option>
<option value="值">选项</option>
<option value="值">选项</option>
</select>
文本域
<textarea row="列数" col="行数">
</textarea>
form表单method：
采用get方式提交显示数据
采用post方式不会显示数据
<form action="提交数据的服务器地址" method="post">
<!--画输入域-->
<input type = "submit" />
<input type = "text" name = "usename">
</form>
file控件
文件上传专用
<input type="file"/>
hidden控件
隐藏域：隐藏要提交的数据并且不想让用户看见
<input type="hidden" name ="" value="">
readonly和disabled
两者修饰的都是只读，但是readonly可以提交数据
而disabled无法提交数据和选中
< input type = "text" name = "xx" readonly />
< input type = "text" disabled />
input标签的maxlength
maxlength控制输入数据的长度
1.在HTML文档中任何一个元素（节点，标签组）都有id属性，id属性
是节点的唯一标识，所以在同一个HTML中id属性不能重复
2.id的作用是定位，供JavaScript对HTML进行增删改，使网页产生动态效果
id的存在让我们获取节点更加方便
<form id = "id值" ></form>
div和span作用：
作用是布局，可以成为图层
图层作用是保证页面可以灵活的布局。
div和span区别，默认情况下div会独站行，而span不会
将另一个页面引入当前页面
<iframe src="引入页面地址" width="宽度" height="高" ></iframe>
css是层叠样式表
作用是设置HTML页面，设置HTML样式，使HTML更好看
HTML是主体，css依赖于HTML
第一种方式：在标签内部使用style属性来设置元素css样式，这种方式称为内联定义方式
语法格式：
<标签 style ="样式名:样式值;样式名:样式值;....></标签>
第二种方式：在head标签中使用style块，这种方式被称为样式块方式
语法格式：
<head>
<style type="text/css">
选择器{
样式名:样式值;
样式名:样式值;
样式名:样式值;
}
选择器{
样式名:样式值;
样式名:样式值;
样式名:样式值;
}
</style>
</head>
选择器：
id选择器：#跟id{}只作用于指定id
标签选择器 标签名{}//标签选择器作用范围比id选择器广
类选择器 .跟类名{}//可以给标签设置class,指定一类class样式
class相同的可以认为是同一类标签
第三中方式：连入外部样式表文件，将样式单独写道一个css文件当中，在需要的网页上直接引用
语法格式：
<link type="text/css" rel=stylesheet" href="css文件路径" />
这中方式最常用，易维护，维护成本较低
width:宽度样式
heigth:高度样式
background-color:背景颜色
display:布局样式（none表示隐藏，block表示显示）
cursor:光标样式
position:absolute;绝对定位
是事件句柄，js是事件驱动型语言。
onclick="js代码"执行原理
页面打开时js代码不会执行，只是把这段js代码注册到按钮的click事件上
等这个按钮发生click事件后，注册在onclick后面的js代码会被浏览器自动调用
浏览器弹出消息
window.alert("消息");其中window.可以省略,;也可以省略，字符串也可以用''括起来
alert会阻塞页面的加载
暴漏在脚本块的程序，在页面打开的时候执行，
并且遵守自上而下的顺序逐行执行（这个代码不需要事件）
脚本块在一个页面中可以出现多次，而且Javascript出现位置随意
语法格式：
<script type="text/javascript">
js代块
</script>
在需要的位置位置引入js文件
<script type="text/javascript src="js文件路径"">
如果引用文件在脚本块中写没用，并且</script>不能省略
js文件可以多次引入，并且可以引用文件+脚本块。
</script>
变量声明：
var 变量名;
变量赋值：
变量名 = 值;
js中的变量可以赋任意值
JavaScript是一种弱类型编程语言
undefinde是一个具体存在的值，当在js中没有手动赋值时系统自动赋一个undefinde
全局变量：
在函数体之外声明的变量属于全局变量。
生命周期：浏览器打开时声明，在浏览器关闭时销毁
局部变量：
在函数体中声明的变量，包括一个函数的形参都属于局部变量
生命周期：函数开始执行时局部变量开辟控件，函数执行结束后，内存空间释放
※如果一个变量在声明的时候没使用var关键字，它都是是全局变量
语法格式：
第一种：function 函数名(形式参数列表){
函数体;
}
第二种：函数名= function(形式参数列表){
函数体
}
NaN是一个具体存在的值，表示该值不是数字
js的函数可以随意传参，不限制类型，和个数
在js中如果函数重名，后者会把前者覆盖
原始类型：
Undefined Number String Boolean Null
引用类型：
Object以及Object的子类
在ES6之后添加了新数据类型Symbol
JS中有个运算符叫typeof，这个运算符可以在程序运行阶段动态获取变量的数据类型
typeof运算符语法格式：
typeof 变量名
typeof运算符的运算结果为以下6个字符串之一：
※字符串全部小写
"undefined"
"number"
"string"
"boolean"
"object"
"function"
在js中比较字符串使用"=="
typeof运算符使用：
function sun(a,b){
if(typeof a ="number" && typeof b=="number"){
return a+b;
}
alert(a+","+b+"必须都为数字");
}
Null属于Null类型，但是typeof运行结果为object
isNaN函数：
用法：
isNaN(数据)，结果是true表示不是一个数字，结果为false表示为数字
isNaN: is nat Number
parseInt函数：
将字符串自动转换成数字，并且取整数位
parseInt("字符串");
parseFloat函数：
将字符串自动转换成数字
parseInt("字符串");
Math.celi函数：向上取整Math.celi();
JS中if括号中会自动转换成布尔类型
Boolean函数：
将非布尔类型转换成布尔类型
Boolean();”有“为true，”没有“转换成false
String类型：
js中定义字符串：
var i = "";
var i = '';
var i = new String("");//这种方式typeof为Object
在JS中无论怎么定义的字符串，他们的方法都是通用的
String常用方法和属性：
length属性：获取字符串长度
charAt方法：获取指定下标字符
concat方法: 连接字符串
replace方法：替换字符//"1919-12-1".replace("-",",");该方法只能替换第一个
split方法：拆分字符串
Object类型：
prototype属性。翻译为原型这个属性可以给对象动态扩展属性和方法
例 给类扩展方法
类名.prototype.方法名 = function(){
扩展的方法实现
}
例 给类扩展属性
类名.prototype.属性名 = "";
1.定义类
第一种方式：
function 类名(形式参数列表){
this.属性名 = 参数；
this.方法名 = function(){
}
}
第二种方式：
类名 = function(形式参数列表){
this.属性名 = 参数；
this.方法名 = function(){
}
}
2.调用
如果直接使用方法就是普通函数dosome
如果new对象就是创建对象var a = new dosome();
访问属性的特别方法 对象名["属性名"]
==表示等同运算符，只比较值是否相等
===表示全等运算符，即比较值是否相等，还比较数据类型是否相等
1.blur失去焦点
2.focus获取焦点
3.click鼠标单击
4.dblclick鼠标双击
5.keydown键盘按下
6.keyup键盘弹起
所有键盘事件都有keyCode属性，可以获得键值
回车键的键值是13，ESC件值为27
7.mousedown鼠标按下
8.mouseover鼠标经过
9.mousemove鼠标移动
10.mouseout鼠标离开
11.mouseup鼠标弹起
12.submit表单提交
13.reset表单重置
14.select文本被选定
15.change下拉列表选中项改变，或文本框内容改变
16.load页面加载完毕
load事件另外的写法：
在<script type="text/javascript">
表示在页面加载完成之后执行以下函数
将window理解为body
window.onload = 执行的函数；
</script>
每个事件都有事件句柄，事件句柄就是在前面加on
※使用JS代码触发事件
.focus();获取焦点
.blur();失去焦点
注册事件的第一种方式：
在标签中使用"事件句柄",在事件句柄后面编写JS代码
当事件句柄对应的事件发生后，注册的代码被监听器调用
<input type="button" onclick = "alert()" />
注册事件的第二中方式：
在JS当中有一个内置隐含对象叫做：document，代表整个HTML文档
document获取节点方法getElementById()
通过.属性名可以改属性值
document.getElementById("节点ID")
var a = document.getElementById();
可以绑定匿名函数
a.click = function(){
方法实现
}
页面打开的过程就是各种事件的绑定，只有事件触发才会执行函数
语法格式：void(表达式)
执行表达式，但不返回任何结果，即使表达式中有结果，经过viod运算符，也就没了
<a href="javascript:void(0)"></a>
将href路径废弃掉，大多数不用写javascript：这个表示以下代码为js代码
选择结构：
if
switch
循环结构：
for
while
do..while
转向语句：
break
continue
return
※JS特殊语句
for..in:
var aar=[1,2,2,3,4,5];
//index代表数组下标
for(var index in arr){
console.log(arr[index])
}
for..in还能取对象属性值,可以便利对象属性
with:
var a = new Object();
//这样写就可以不用写a.了，直接可以调用a里的属性
with(a){
console.log(tostring)
}
Array:
1.创建数组对象
创建数组的第一种方式：
var a = [];//创建一个长度为0的数组对象
//数组中的元素类型可以不一致，JS中的数组长度可变，数组会自动扩容
//js中数组没有下标越界一说
创建数组的第二种方式：
var arr = new Array();//创建长度为0的数组
var arr1 = new Array(3);//创建一个长度为3的数组对象
var arr2 = new Array(1,2,2,3,4)//创建有元素的数组
2.Array常用的方法
concat方法
push方法：将元素加到数组末尾
pop方法：将末尾元素弹出，数组长度减一
reverse方法：将数组翻转
join方法：将数组中的每一个元素连接成字符串
var a =[1,2,3,4,5,6,7];
a.join("$");
输出结果：1$2$3$4$5$6$7
Date:
创建对象：
var time = Date();//获取系统当前时间
格式转换：
//获取年月日时分秒
var year= time.getFullYear();
var month= time.getMonth();//0-11表示12个月,所以月份要+1
var xingqi = time.getDay();//获取的星期几
var day = time.getDate();//获取一个月份的第几天
var hours = time.getHours();//获取小时
var min = time.getMinutes();//获取分钟
var sec = time.getSeconds();//获取秒
var sss = time.getMilliseconds();//获取毫秒
在JS中一个函数toLocaleString(),这个函数是Object的，可以将
日期转化为具有本地语言环境的日期格式
var strTime = time.toLocaleString();
获取时间戳：
console.log(new Date().getTime());//获取自1970到现在毫秒数
BOM:浏览器对象模型
DOM:文档对象模型
window是BOM老大
document是DOM老大，只不过window可以省略
innerHTML:
可以通过innerHTML属性设置标签内的内容
会将后面字符串解释并执行
document.getElementById("div").onclick = function(){
document.getElementById("div").innerHTML = "要执行的HTML语句"
}
innerText:
只会显示字符串内容，不会对内容进行解释执行
window.setInterval("要调用的函数",间隔时间)//间隔多长时间调一次函数，setInterval有返回值，用来停止周期性执行
window.clearInterval(setInterval的返回值);//停止周期性调用
窗口的开启和关闭：
开启窗口：
window.open('url','可以接开启窗口条件')//开启窗口,默认开启新窗口
关闭窗口：
window.close()
alert和confirm方法：
alert()//弹出消息框
confirm()//确认框，有返回值是Boolean类型确认是true，取消是false
如果当前窗口不是顶级窗口，将当前窗口设置为顶级窗口
if(window.top!=window.self){
window.top.location=window.self.loaction //loaction表示地址
}
历史记录：
后退到上以页面
window.history.back()
前进到下以页面
window.history.go(1)//前进一步，go可以传负数，-1也相当于后退一步
window.loaction.href:
window.location.href ="跳转的url"//可以把href省略
document.loaction.href = "跳转的url"//也可以跳转页面可以把href省略
浏览器向服务器发送请求的几种方式：
1.直接在浏览器地址栏写URL
2.点击页面超链接
3.提交form表单
4.window.open('url')
5.window.location.href = url
6.document.location.href = url
拼接HTML的方式，设置table的tbody
JSON是一种轻量级的数据交换格式
1.eval函数
可以将字符串当作js代码解释执行
window.eval("要执行的字符串")
2.如何创建json对象和访问json属性
语法格式：
var json名 ={
"属性名" : 属性值,
"属性名" : 属性值,
"属性名" : 属性值,
"属性名" : 属性值,
....
};//属性值可以是任意类型，JSON属性值可以是JSON对象
[]是数组，{}是json
访问属性
json名.属性的方式
json名["属性"]的方式
JSON是一种无类型的对象
3.java与javascr交换数据
java的JDBC连接数据库查询数据，将数据转换为JSON类型的字符串
将字符串传给JavaScript，然后在Javascript中将json格式的字符串转换成json
对象，这样就完成了数据交换
1.什么是正则表达式
正则表达式是独立学科，基本每个语言都支持
通常使用正则表达式进行字符串格式匹配
正则表达式是一堆特殊符号组成的一个表达式
每个特殊符号都有特殊的代表含义
例如：
qq号的正则表达式
邮箱地址的正则表达式
2.常见的正则表达式
. 匹配除换行符以外的字符
\w 匹配字母或数字或下划线或汉字
\s 匹配任意的空白符
\d 匹配数字
\b 匹配单词的开始或结束
^ 匹配字符的开始
$ 匹配字符串的结束
* 重复零次或更多次
+ 重复一次或更多此
？ 重复零次或一次
{n}重复n次
{n,}重复n次或更多次
{n,m}重复n到m次
※数量匹配的永远是前面的出现次数
\W 匹配任意不是字母，数字，下划线，汉字的字符
\S 匹配任意不是空白符的字符
\D 匹配非数字的字符
\B 匹配不是单词开头或结束的位置
[^x]匹配除x以外的任意字符
[^aeiou]匹配除了aeiou这几个字母以外的任意字符
3.在JS中创建正则表达式对象
第一种方式：
var regExp = /正则表达式/标记
标记是可选项
g : 全局匹配
i : 忽略大小写
第二种方式：
var regExp = new RegExp("正则表达式","标记");
4.正则表达式方法
test("用户输入字符串")；//返回boolean类型，匹配上是true,匹配不上false
JQuery是一个Javascript的库，相当于Java的工具类
JQuery是存放JS代码的地方，放的都是函数，存在的
目的是简化js代码。
$是一个函数
1)基本选择器
1.$(function(){});当里面传入函数时，相当于页面加载完成时即window.onload
2.$(传入HTML字符串);时会根据这个字符串创建元素节点对象
3.$(传入选择器字符串时);查寻选择器对象
#标签ID:ID选择器，按照id查
.class:类型选择器
标签名:标签选择器
4.传入[DOM对象]时：会将DOM对象包装为JQuery对象返回
var $obj = $("#标签ID");
$($obj);
JQuer对象是DOM对象数组+JQuery提供的一系列功能函数
JQuery对象不能使用DOM对象方法，反之亦然
DOM对象与JQuery对象互相转换
DOM对象传到$();中就变成了JQuery对象
JQuery对象通过下标来变成Jquer对象
DOM对象--> document.getElenmentById();
JQuery对象--> $(document.getElenmentById());
DOM对象--> $(document.getElenmentById())[0];
.css方法可以设置获取样式
2)层级选择器
1.body div:选择body里的所有div
2.body>div:选择body中的子元素
3.body+div:选择body中下一个div
4.body~div:选择body后面的所有div
JQuery的.val()可以操作表单项的value值，传值就是赋值，不传值就是获取
需要用到属性选择就用[属性 条件 '值']
需要用到表单选择就用":接表单类型"
3)过滤选择器
:first 获取第一个元素
:last 获取最后一个元素
:not(selector) 获取除去选择器匹配的元素
:even 匹配所有索引值为偶数的元素，从0开始
:odd 匹配所有为奇数的元素
:eq(index) 匹配给定索引值的元素
:gt(index) 匹配所有大于给定索引值的元素
:lt(index) 匹配所有小于给定索引值的元素
:header 匹配标题元素
:animated 匹配所有正在执行动画效果的元素
4）内容过滤器
:contains(text) 匹配包含给定文本的元素
:empty 匹配不包含子元素或者文本为空的元素
:parent 匹配函有子元素或者文本的元素
:has(selector) 匹配含有选择选择器所匹配的元素的元素
5）属性过滤器
[attribute] 匹配包含给定属性的元素
[attribute = value] 匹配给定属性是某个指定值的元素
[attribute !=value] 匹配所有不包含指定属性，或者属性不等于特定值的元素
[attribute ^=value] 匹配给定属性以某些值开始的元素
[attribute $=value] 匹配给定属性以某些值结尾的元素
[attribute *=value] 匹配给定属性包含某些值的元素
[条件一][条件二][条件三] 复合属性选择器，同时满足所有条件的元素
6）表单过滤器
:input 匹配所有表单元素
:text 匹配所有文本输入框
:password 匹配所有密码输入框
:radio 匹配所有单选框
:checkbox 匹配所有复选框
:submit 匹配所有提交按钮
:image 匹配所有img标签
:reset 匹配所有重置按钮
:button 匹配所有butyon按钮
:file 匹配所有文件上传
:hidden 匹配所有不可见元素
7）表单对象选择器
:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
:checked 匹配所有选中的单选，复选，和下拉列表中的option标签对象
:selected 匹配所有选中的option
eq() 获取给定索引的元素
first() 获取第一个元素
last() 获取最后一个元素
filter(exp) 留下匹配的元素
is(exp) 判断是否匹配给定的选择器，只要有一个匹配就返回，
truhas(exp) 返回包含有匹配选择器的元素的元素
not(exp) 删除匹配选择器的元素
children(exp) 返回匹配给定选择器的子元素
find(exp) 返回匹配给定选择器的后代元素
next() 返回当前元素的下一个兄弟元素
nextAll() 返回当前元素后面所有的兄弟元素
nextUntil() 返回当前元素到指定匹配的元素为止的后面元素
parent() 返回父元素
prev(exp) 返回当前元素的上一个兄弟元素
prevAll() 返回当前元素前面所有的兄弟元素
prevUnit(exp) 返回当前元素到指定匹配的元素为止的前面元素
siblings(exp) 返回所有兄弟元素
add() 把 add 匹配的选择器的元素添加到当前 jquery 对象中
1)html()与Dom的innerHTML相同
2)text()与Dom的innerText相同
3)val()与Dom的value相同
val()可以控制单选多选和下拉框的选择.val(["要选择的value值"])
还可以同时控制所有$(":radio,:checkbox").val(["radio要选的value值","checkbox要选的value值"]);
4)attr() 可以设置和获取属性值,传一个参数表示获取值，传两个参数，表示设置第一个参数的属性值
不推荐操作，checked、readOnly、selected、disabled等属性，因为会返回undefined导致意义不名
5)prop() 可以设置和获取属性值，推荐操作checked、readOnly、selected、disabled等属性会返回boolean
与attr形成互补
.each()JQuery的遍历方法，里面有this表示当前对象
内部插入(将元素添加到指定元素的内部)
1)appendTo();将元素添加到指定元素的末尾
2)prependTo();将元素添加到指定元素的首部
外部插入(将元素添加到指定元素的外部)
1)insertAfter();将元素添加到指定元素的下面
2)insertBefore();将元素添加到指定元素的上面
替换
1)replaceWith(); a.replaceWith(b)用b替换a
2)replaceAll(); a.replaceAll(b)用a替换掉所有bb
删除
1)remove(); a.remove()删除a标签
2)empty(); a.empty()清空标签a里的内容
html() 设置标签里内容，和dom属性中innerHTML相同
text() 设置标签里内容，以字符串形式展示，和dom中innerText相同
val() 获取表单项的value值，和dom属性中value一样
attr() 设置和获取属性值，不推荐操作checked、readOnly、selected、disabled等等，attr()方法还可以操作非标准属性，如自己定义的属性
prop() 设置和获取属性值，只推荐操作checked、readOnly、selected、disabled 等等
内部插入：
appendTo() a.appendTo(b) 把a元素插入到b元素的末尾，成为最后一个元素
prepenTo() a.prepenTo(b) 把a元素插到b元素所有子元素的前面，成为第一个元素
外部插入：
insertAfter() a.insertAfter(b) 把a元素放到b元素的后面
insertBefore() a.insertBefore(b) 把a元素放到b元素的前面
替换：
replaceWith() a.replaceWith(b) 用b替换掉a
replaceAll() a.replaceAll(b) 用b替换掉所有a
删除：
remove() a.remove() 删除a标签
empty() a.empty() 清空a标签
addClass() 添加样式
removeClass() 删除样式
toggleClass() 有就删除，没有就添加
offset() 获取和设置元素的坐标
基本动画：
show() 将隐藏的元素显示
hide() 将可见的元素隐藏
toggle() 可见隐藏，不可见显示
以上动画方法都可以添加参数。
1、第一个参数是动画 执行的时长，以毫秒为单位
2、第二个参数是动画的回调函数 (动画完成后自动调用的函数)
淡入淡出动画：
fadeln() 淡入（慢慢可见）
fadeOut() 淡出（慢慢消失）
fadeTo() 在指定时常内慢慢的将透明度修改到指定值。0透明 1完全可见 0.5半透明
fadeToggle() 淡入/淡出 切换
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
