02021年10月1日开始
1、特殊字符
常用的特殊符号:
< “<”
> ">"
空格 “ ”
2、标题标签
h1-h6都是标题标签:
h1最大 h6最小
align属性是对齐属性:
left:左对齐(默认)
center:居中
right:右对齐
3、超链接
a 标签是超链接:
href属性设置连接的地址
target属性设置哪个目标进行跳转
_self 表示当前页面(默认值)
_blank 表示打开新页面进行跳转
4、列表标签
无序列表:ul
有序列表:ol
5、img标签
src设置图片路径
在JavaSE中路径分为相对路径和绝对路径:
相对路径:从工程名开始算
绝对路径:盘符:/目录/文件名
在web中路径分为相对路径和绝对路径:
相对路径:
. 表示当前文件所在的目录
… 表示当前文件所在的上一级目录
文件名 表示当前文件所在的目录的文件,相当于./文件名 ./可以省略
绝对路径:
http://ip:port/工程名/资源路径
alt属性设置当指定路径找不到图片时,用来代替显示的文本内容
6、table标签
table标签是表格标签
border 设置表格标签
width 设置表格宽度
height设置表格高度
tr 是行标签
th 是表头标签
td 是单元格标签
cellspaceing 设置单元格间距
colspan 属性设置跨列
rowspan 属性设置跨行
7、iframe框架标签
iframe标签可以在页面上开辟一个小区域显示一个单独的页面
1.在iframe标签中使用name属性定义一个名称
2.在a标签的target属性上设置iframe的name的属性值
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LRemVdzU-1633428982404)(file:///C:\Users\上官飞羽\AppData\Roaming\Tencent\Users\1536285398\QQ\WinTemp\RichOle\YL@H}RP@EFSE%{TJS$QRWM7.png)]
8、表单标签
表单就是HTML页面中,用来收集用户信息的所有元素集合,然后把这些信息发送给服务器
form标签就是表单
input type=text 是文本输入框 value设置默认显示内容
input type=password 是密码输入框 value设置默认显示内容
input type=radio 是单选框 name属性可以对其进行分组 checked=“checked”表示默认选中
input type=checkbox 是复选框 checked=“checked”表示默认选中
input type=reset 是重置按钮 value属性修改按钮上的文本
input type=submit 是提交按钮 value属性修改按钮上的文本
input type=button 是按钮 value属性修改按钮上的文本
input type=file 是文件上传域
input type=hidden 是隐藏域 当我们要发送某些信息,不需要用户参与,就可以使用隐藏域
select 标签是下拉列表框
option 标签是下拉列表框中的选项 selected=“selected”设置默认选中
textarea 表示多行文本输入框(起始标签和结束标签中的内容是默认值)
rows 属性设置可以显示几行的高度
cols 属性设置每行可以显示几个字符的宽度
9、表单提交的细节
action属性设置提交的服务器地址
![img](file:///C:\Users\上官飞羽\AppData\Roaming\Tencent\Users\1536285398\QQ\WinTemp\RichOle\XJP@X52E3DDY~YJ8R3{O
3.png)
method属性设置提交的方式GET(默认值)或POST
表单提交的时候,数据没有发送给服务器的三种情况:
1.表单项没有name属性值
2.单选、复选(下拉列表中的option标签)都需要添加value属性,以便发送给服务器
3.表单项不在提交的form标签中
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FI69DrAo-1633428982406)(file:///C:\Users\上官飞羽\AppData\Roaming\Tencent\Users\1536285398\QQ\WinTemp\RichOle\Z$RQE0J7R8TWU03{2060D}C.png)]
GET请求的特点是:
1.浏览器地址中的地址是action属性[+?+请求参数]
2.不安全
3.他有数据长度的限制
POST请求的特点是:
1.浏览器地址栏中只有action属性值
2.相对于GET请求更安全
3.理论上没有数据长度的限制
10、其他标签
div标签 默认独占一行
span标签 它的长度就是分装数据的长度
p段落标签 默认会在段落的上方或下方各空出一行(如果已有就不再空)
11、CSS
CSS是【层叠样式表单】。是用于(增强)控制网页样式并允许将样式信息与内容分离的一种标记性语言
1.语法规则img
2.CSS和HTML的结合方式
第一种:在标签的style属性上设置“key:value value;”,修改标签样式。
缺点:①代码量庞大
②可读性差
③css没复用性可言
第二种:在head标签中使用style标签来定义各种自己需要的css样式。
格式如下:
XXX{
Key:value value;
}
![img](file:///C:\Users\上官飞羽\AppData\Roaming\Tencent\Users\1536285398\QQ\WinTemp\RichOle`%C~ZEM]RTF@F{[5YW
P47.png)
缺点:
①只能在同一页面中复用代码,不能在多个页面中复用css代码。
②维护不方便,工作量大。
第三种:
把css样式
使用html的标签导入css样式文件。
12、css选择器
1.标签名选择器
标签名选择器的格式是
标签名{
属性:值;
}
2.id选择器
id选择器的格式是:
#id属性值{
属性:值;
}
id选择器可以让我们通过id属性选择性去使用这个样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<style type="text/css">
#id001{
color: blue;
border: 1px yellow solid;
}
#id002{
color: red;
font-size: 20px;
border: 5px blue dotted;
}
</style>
</head>
<body>
<div id="id001">div标签1</div>
<div id="id002">div标签2</div>
</body>
</html>
3.class选择器
class类型选择器的格式是:
.class属性值{
属性:值;
}
class类型选择器,可以通过class属性有效的选择性去使用这个样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class类型选择器</title>
<style type="text/css">
.class01{
color: grey;
font-size: 26px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="class01">div标签</div>
</body>
</html>
4.组合选择器
组合选择器的格式是:
选择器1,选择器2,选择器n{
属性:值;
}
组合选择器可以让多个选择器共用同一个css样式代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组合选择器</title>
<style type="text/css">
.class01,#id001{
color: blue;
font-size: 20px;
border: 1px yellow solid;
}
</style>
</head>
<body>
<div class="class01">div标签class01</div><br />
<span id="id001">span 标签</span><br/>
</body>
</html>
13、JavaScript介绍
Js是弱类型,Java是强类型
特点:
1.交互性(它可以做的就是信息的动态交互)
2.安全性(不允许直接访问本地硬盘)
3.跨平台性(只要是可以解释js的浏览器都可以执行和本平台无关)
14、JavaScript和html代码的结合方式
第一种方式:
只需要在head标签中,或在body标签中,使用script标签来书写JavaScript代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//alert是JavaScript语言提供的一个警告框函数。
//它可以接收任意类型的参数,这个参数就是警告框的提示信息。
alert("hello javascript!");
</script>
</head>
<body>
</body>
</html>
第二种方式:
使用script标签引入单独的JavaScript代码文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript" src="02.js"></script>
</body>
</html>
15、变量
什么是变量?变量是可以存放某些值的内存的名称。
Javascript的变量类型:
数值类型: number
字符串类型: string
对象类型: object
布尔类型: boolean
函数类型: function
JavaScript里特殊的值:
undefind 未定义,所有js变量 未赋予初始值的时候默认值都是undefined.
null 空值
NAN 全称是:Not a Number。 非数字。非数值。
JS中定义变量格式:
var 变量名;
var 变量名=值;
16、关系(比较)运算
等于:== 等于是简单的做字面值的比较
全等于:===除了做字面值的比较之外还会比较两个变量的数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var a="12";
var b=12;
alert(a==b);//ture
alert(a===b);//false
</script>
</head>
<body>
</body>
</html>
17、逻辑运算
且运算:&&
或运算:||
取反运算:!
在Javascript语言中,所有的变量都可以作为一个boolean类型的变量去使用。
0、null、undefine、”“(空串)都认为是false;
&&且运算
有两种情况:
第一种:当表达式全为真的时候,返回最后一个表达式的值。
第二种:当表达式中,有一个为假的时候,返回第一个为假的表达式的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var a="abc";
var b=true;
var d=false;
var c=null;
//alert(a&&b);//true
//alert(b&&a);//abc
//alert(a&&d);//false
//alert(a&&c);//null
//alert(a&&b&&c);//null
//alert(a&&d&&c);//false
</script>
</head>
<body>
</body>
</html>
||或运算
有两种情况:
第一种情况:当表达式全为假时,返回最后一个表达式的值
第二种情况:只要有一个表达式为真,就会返回第一个为真的表达式的值
18、Javascript数组
JS中数组的定义:
格式:
var 数组名=[];//空数组
var 数组名=[1,‘abc’,true];//定义数组同时赋值元素
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> var arr=[];//定义一个空数组 //alert(a.length);//0 arr[0]=12; //alert(arr[0]);//12 alert(arr.length);//1 //javascript语言中的数组,只要我们通过数组下表赋值,那么最大的下标值, //就会自动给数组做扩容操作 arr[2]="abc"; //alert(arr.length);//3 //alert(arr[1]);//undefined for (var i=0;i<arr.length;i++){ alert(arr[i]); } </script></head><body></body></html>
19、JavaScript函数
函数的两种定义方式
第一种:使用function关键字来定义函数。
使用的格式如下:
function 函数名(形参列表){
函数体
}
在JavaScript语言中,如何定义带有返回值的函数?
只需要在函数体内直接使用return语句返回值即可!
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> //定义一个无参函数 function f() { alert("无参函数f()被调用了") } //函数调用===才会执行 //f(); //------------------------------------ //定义一个有参函数 function f1(a,b) { alert("有参函数f1()被调用了a=>"+a+" b=>"+b); } //f1(12,"abc"); //------------------------------------ //定义带有返回值的参数 function sum(num1,num2) { var result=num1+num2; return result; } alert(sum(500,166)); </script></head><body></body></html>
第二种:
使用格式如下:
var 函数名=function(形参列表){函数体}
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> var fun=function () { alert("无参函数"); } //fun(); var fun1=function (a,b) { alert("有参函数a=>"+a+",b=>"+b); } //fun1(1,2); var fun2=function (num1,num2) { return num1+num2; } alert(fun2(500,166)); </script></head><body></body></html>
注:在Java中函数允许重载。但是在JS中函数的重载会直接覆盖掉上一次的定义
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function fun(a,b) { alert("有参函数fun(a,b)"); } function fun() { alert("无参函数fun()"); } fun(123,"abc");//无参函数fun() </script></head><body></body></html>
20、函数的arguments隐形参数(只在function函数内)
就是在function函数中不需要定义,但却可以直接用来获取所有参数的变量。我们管他叫隐形参数。
隐形参数特别像Java基础的可变长参数一样。
public void fun(obje…args);
可变长参数其他就是一个数组。
那么js中的隐形参数也跟Java的可变长参数一样。操作类似数组。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function f() { //alert(arguments.length);//可查看参数个数 //alert(arguments[0]); //alert(arguments[1]); //alert(arguments[2]); for (var i=0;i<arguments.length;i++){ alert(arguments[i]); } } f(1,"ad",true);//3 // alert("无参函数fun()") //需求:要求编写一个函数,用于计算所有参数相加的和并返回 function sum(num1,num2) { var result=0; for (var i=0;i<arguments.length;i++){ if(typeof arguments[i]=="number"){ result+=arguments[i]; } } return result; } alert(sum(1,1,1,1,1,"abc"))//5 </script></head><body></body></html>
21、js中的自定义对象
Object形式的自定义对象
对象的定义:
var 变量名=new Object(); //对象实例(空对象)
变量名.属性名=值; //定义一个属性
变量名.函数名=function(){} //定义一个函数
对象的访问:
变量名.属性/函数名();
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> var obj=new Object(); obj.name="脑堵"; obj.age="6"; obj.fun=function () { alert("姓名:"+this.name+"年龄"+this.age); } obj.fun(); </script></head><body></body></html>
{}花括号形式的自定义对象
var 变量名={ //空对象
属性值:值, //定义一个属性
属性值:值, //定义一个属性
函数名:function(){}//定义一个函数
};
对象的访问:
变量名.属性/函数名();
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script type="text/javascript"> var obj={ name:"xiye", age:18, fun:function () { alert("姓名:"+this.name+"年龄"+this.age); } }; obj.fun();</script></body></html>
22、JS中的事件
什么是事件?
事件是电脑输入设备与页面进行交互的响应。我们称之为事件。
常用的事件:
onload加载完成事件: 页面加载完成之后,常用于做页面js代码初始化操作
onclick单机事件: 常用于按钮的点击响应操作。
onblur失去焦点事件: 常用于输入框失去焦点后验证其输入内容是否合法。
onchange内容发生改变事件: 常用于下拉列表和输入框内容发生改变后操作。
onsumbit表单提交事件: 常用于表单提交之前,验证所有表单项是否合法。
事件的注册又分为静态注册和动态注册两种:
什么是事件的注册(绑定)?
其实就是告诉浏览器,当事件响应后要执行那些操作代码,叫做事件注册或事件绑定。
静态注册事件:通过html标签的事件直接赋予事件相应后的代码,这种方式我们叫静态注册。
动态注册事件:是指通过js代码得到标签的dom对象,然后再通过dom对象.事件名=function(){}这种形式赋予事件响应后的代码,叫动态注册。
动态注册基本步骤:
1.获取标签对象
2.标签对象.事件名=function()
onload加载完成事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> //onload事件的方法 function onloadFun() { alert('静态注册onload事件所有代码'); } //onload事件动态注册,是固定写法 window.οnlοad=function () { alert("动态注册的onload事件"); } </script></head><!--静态注册onload事件 onload事件是浏览器解析完页面之后就会自动触发的事件 <body οnlοad="onloadFun()">--><body></body></html>
onclick单机事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><script type="text/javascript"> function onClickFun() { alert("静态注册onclick事件"); } //动态注册onClick事件 window.οnlοad=function () { //1.获取标签对象 //document是javaScript语言提供的一个对象(文档) //get 获取 //Element 元素(就是标签) //By 通过。。 //Id id属性 var btnObj=document.getElementById("btn01"); //alert(btnObj); //2.通过标签对象.事件名=function(){} btnObj.οnclick=function () { alert("动态注册的onclick事件"); } }</script><body><!-- 静态注册onClick事件--> <button onclick="onClickFun()">按钮1</button> <button id="btn01">按钮2</button></body></html>
onblur失去焦点事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> //静态注册失去焦点事件 function onblurFun() { //console是控制台对象,是由JavaScri语言提供,专门用来向浏览器的控制台打印输出,用于测试使用 //log()是打印方法 console.log("静态注册失去焦点事件"); } //静态注册onblur事件 window.οnlοad=function () { //1.获取标签对象 var passwordObj=document.getElementById("password"); //alert(passwordObj); //2.通过标签对象.事件名=function(){}; passwordObj.οnblur=function () { console.log("动态注册失去焦点事件"); } } </script></head><body> 用户名:<input type="text" onblur="onblurFun()"><br/> 密码:<input id="password" type="text"><br/></body></html>
onchange内容发生改变事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function onchangeFun() { alert("男神已经改变了"); } <!--动态注册onchange事件--> window.onload=function () { //1.获取标签对象 var selObj = document.getElementById("s01"); //2.通过标签对象.事件名=function(){} selObj.οnchange=function () { alert("男神已经改变了"); } } </script></head><body> 请选择你心中的男神: <!--静态注册onchange事件--> <select onchange="onchangeFun()"> <option>---男神---</option> <option>dog</option> <option>cat</option> <option>panda</option> <option>fish</option> </select> 请选择你心中的男神: <select id="s01"> <option>---男神---</option> <option>dog</option> <option>cat</option> <option>panda</option> <option>fish</option> </select></body></html>
onsumbit表单提交事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> //静态注册表单提交事件 function onsubmitFun() { //要验证所有表单项是否合法,如果有一个不合法就阻止表单提交 alert("静态注册表单提交事件---发现不合法"); return false;//return ture提交 } window.οnlοad=function () { //1.获取标签对象 var formObj = document.getElementById("form01"); //2.通过标签对象.事件名 formObj.οnsubmit=function () { //要验证所有表单项是否合法 alert("静态注册表单提交事件---发现不合法"); return false;//return ture提交 } } </script></head><body> <!--return false 可以阻止表单提交--> <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun()"> <input type="submit" value="静态注册"> </form> <form action="http://localhost:8080" id="form01"> <input type="submit" value="动态注册"> </form></body></html>
23、doucument对象概念介绍
DOM模型
DOM全称是Doucument Object Model 文档对象模型
就是把文档中的标签,属性,文本,转换为对象来管理。
Document对象
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GraApVbn-1633428982408)(C:/Users/上官飞羽/Desktop/无标题2.png)]
Doucument对象的理解
第一点:Document它管理了所有的HTML文档内容
第二点:docunment它是一种树结构的文档。有层级关系。
第三点:他让我们把所有的标签都对象化。
第四点:我们可以通过document访问所有标签对象。