1 HTML
1.1. HTML基本概念
HTML:hyper text markup language 超文本标记语言，就是超出纯文本范畴的语言，其中既可以定义文本也可以定义图片，超链接等等非文本性质的内容。
HTML语言是由标签<>构成，一般是成对出现<></>所以叫标记语言。
jhd=
HTML应用在开发前端，属于MVC层次中的View层
前端项目将数据呈现给用户，也可以提供一些操作的请求发送给后端，比如注册时将用户名和密码提交到数据库。前端使用HTML+CSS+JAVAScript+jq+vue等技术
1.2 HTML常用标签
1.2.1 定义html页面
<!DOCTYPE html >
<html> <!--html文件的开始-->
<head>
<meta charset="utf-8"> <!--文件字符编码-->
<!--自适应设备大小-->
<meta name="viewport" content="width=device-width,inital-scale=1">
<title>这是显示到浏览器的标题栏</title>
</head>
<body>
<!--html文件主体部分-->
<h1>html主体部分</h1>
欢迎学习html
</body>
</html> <!--html文件的结束-->
1.2.2 定义超链接
标签里面可以定义属性，
<a>标签里定义href属性，表示即将跳转的链接。
定义超链接后会发送一个请求到指定的路径，可以从服务器端取得数据；
如果点击的超链接不存在，会现404
<!DOCTYPE html >
<html> <!--html文件的开始-->
<head>
<meta charset="utf-8"> <!--文件字符编码-->
<!--自适应设备大小-->
<meta name="viewport" content="width=device-width,inital-scale=1">
<!--这是显示到浏览器的标题栏-->
<title>html学习</title>
</head>
<body>
<!--html文件主体部分-->
<h1>html主体部分</h1>
欢迎学习html
<a href ="http://blog.mbzvip.cn/doc.html">这是html学习文档的超链接</a>
</body>
</html> <!--html文件的结束-->
1.2.3 定义图片
定义图片使用<img>标签
属性src 表示图片地址，可以用本机的图片，也可以用网络上的路片
<!DOCTYPE html >
<html> <!--html文件的开始-->
<head>
<meta charset="utf-8"> <!--文件字符编码-->
<!--自适应设备大小-->
<meta name="viewport" content="width=device-width,inital-scale=1">
<!--这是显示到浏览器的标题栏-->
<title>html学习</title>
</head>
<body>
<!--html文件主体部分-->
<h1>html主体部分</h1>
欢迎学习html
<a href ="http://blog.mbzvip.cn/doc.html">这是html学习文档的超链接</a> <br>
<<h2>这是一只小狗</h2><br>
<img src="图片地址"/></body>
</html> <!--html文件的结束-->
1.2.4 清单列表标签
1.很多大型站点的导航栏布局都是使用清单标签
2.清单分为有序清单,无序清单
3.清单中需要嵌套清单列表项，标签为<li></li>
1.2.4.1 有序清单
有序清单标签：<ol></ol>
序号默认是阿拉伯数字，要想指定为字母或者罗马数字需要在标签中指定属性以及属性值
（1）字母：<ol type="A"> 或<ol type="A">
（2） 罗马数字：<ol type="I">
<!DOCTYPE html >
<html> <!--html文件的开始-->
<head>
<meta charset="utf-8"> <!--文件字符编码-->
<!--自适应设备大小-->
<meta name="viewport" content="width=device-width,inital-scale=1">
<!--这是显示到浏览器的标题栏-->
<title>中国文传统文化学习</title>
</head>
<body>
<!--html文件主体部分-->
<h1>中国四大名著</h1>
<ol>
<li>《水浒传》</li>
<li>《红楼梦》</li>
<li>《三国演义》</li>
<li>《西游记》</li>
</ol>
<h2>中国四大发明</h2>
<ol type="A">
<li>造纸术</li>
<li>指南针</li>
<li>火药》</li>
<li>造纸术》</li>
</ol>
<h3>中国传统文化</h3>
<ol type="a">
<li>中国书法</li>
<li>京剧</li>
<li>皮影</li>
<li>武术</li>
</ol>
</body>
</html> <!--html文件的借宿-->
1.2.4.2 无序清单
无序清单标签：<ul></ul>
无序标签默认黑色实心圆点，要改变样式需要改变属性
（1）实心方块：<ul type="square">
（2）空心圆：<ul type="circle">
<!DOCTYPE html >
<html> <!--html文件的开始-->
<head>
<meta charset="utf-8"> <!--文件字符编码-->
<!--自适应设备大小-->
<meta name="viewport" content="width=device-width,inital-scale=1">
<!--这是显示到浏览器的标题栏-->
<title>中国文传统文化学习</title>
</head>
<body>
<!--html文件主体部分-->
<h1>中国四大名著</h1>
<ul>
<li>《水浒传》</li>
<li>《红楼梦》</li>
<li>《三国演义》</li>
<li>《西游记》</li>
</ul>
<h2>中国四大发明</h2>
<ul type="square">
<li>造纸术</li>
<li>指南针</li>
<li>火药》</li>
<li>造纸术》</li>
</ul>
<h3>中国传统文化</h3>
<ul type="circle">
<li>中国书法</li>
<li>京剧</li>
<li>皮影</li>
<li>武术</li>
</ul>
</body>
</html> <!--html文件的借宿-->
1.2.5 表格标签
1.在实际开发中如果一个站点需要显示一组数据（一个集合数据），比如要显示某公司雇员信息，此时可以用表格
2.表格标签：
<table>:定义表格
<tr>:定义行
<td>:定义列
1.2.5.1 定义表格
1. 定义表格 需要在<table>标签加上属性border="值"，才会出现表格线条。
2. <th></th>标签：用来定义表头的信息
3. <td></td>标签：用来定义表中的数据
<!DOCTYPE html >
<html> <!--html文件的开始-->
<head>
<meta charset="utf-8"> <!--文件字符编码-->
<!--自适应设备大小-->
<meta name="viewport" content="width=device-width,inital-scale=1">
<!--这是显示到浏览器的标题栏-->
<title>中国文传统文化学习</title>
</head>
<body>
<!--html文件主体部分-->
<h1>员工信息</h1>
<table border="1">
<tr>
<th>编号</th><th>姓名</th><th>职位</th><th>薪资</th><th>入职日期</th>
</tr>
<tr>
<td>1001</td><td>Bob</td><td>总裁</td><td>50000</td><td>2000-11-09</td>
</tr>
<tr>
<td>1002</td><td>Mary</td><td>经理</td><td>20000</td><td>2004-02-09</td>
</tr>
<tr>
<td>1003</td><td>Allen</td><td>财务</td><td>20040</td><td>2003-10-09</td>
</tr>
<tr>
<td>1004</td><td>Foad</td><td>人事</td><td>20888</td><td>2009-06-09</td>
</tr>
</table>
</body>
</html> <!--html文件的借宿-->
1.2.5.1 定义表格居中显示
1. <table border="1" align="center">
使用align属性，设置表格在页面的显示位置
2. 一般在项目上提供此类员工数据会加上修改数据或者删除数据的操作，就需要在每条数据后面增加一个按钮
3. <button></button>:按钮标签
<!DOCTYPE html >
<html> <!--html文件的开始-->
<head>
<meta charset="utf-8"> <!--文件字符编码-->
<!--自适应设备大小-->
<meta name="viewport" content="width=device-width,inital-scale=1">
<!--这是显示到浏览器的标题栏-->
<title>中国文传统文化学习</title>
</head>
<body>
<!--html文件主体部分-->
<h1>员工信息</h1>
<table border="1" align="center">
<tr>
<th>编号</th><th>姓名</th><th>职位</th><th>薪资</th><th>入职日期</th><th>操作</th>
</tr>
<tr>
<td>1001</td><td>Bob</td><td>总裁</td><td>50000</td><td>2000-11-09</td><td><button>删除</button></td>
</tr>
<tr>
<td>1002</td><td>Mary</td><td>经理</td><td>20000</td><td>2004-02-09</td><td><button>删除</button></td>
</tr>
<tr>
<td>1003</td><td>Allen</td><td>财务</td><td>20040</td><td>2003-10-09</td><td><button>删除</button></td>
</tr>
<tr>
<td>1004</td><td>Foad</td><td>人事</td><td>20888</td><td>2009-06-09</td><td><button>删除</button></td>
</tr>
</table>
</body>
</html> <!--html文件的借宿-->
1.2.6 表单标签
1.2.6.1 认识表单
1. 表单是用来采集并且提交数据的，将用户数据提交到服务器端进行验证，比如登录的实现，注册的实现，搜索的实现都可以用表单完成。
2. 表单标签：
<form>
<input>
1.2.6.2 表单的属性
1. 属性
1. <form>中action="地址"：表示表单要提交的地址
2. <form>中method属性表示指定情求的类型
（1）post:一般使用post,post类型请求不会在浏览器地址栏暴露用户输入的参数
（2） get:get类型请求会在浏览器地址栏暴露用户输入的参数，不安全。
3.<fieldset></<fieldset>:使表单格式紧凑
4.<lenged></lenged>:表单框提示信息
2. 属性
1. <input>:表示输入框，输入框有多种类型
（1）type="text":表示输入文本
（2）type="password":表示输入密码
（3）type="submit":表示提交按钮
（4）type="reset":表示重置
（5）type="file":表示上传文件，name="pic"表示上传图片
（6）type="date":表示日期 +name="date"
（7）placeholder属性：定义输入框提示信息
 表示空格
<br>表示换行
2.<input type="checkbox" name="ints" values="值" />
复选框：提供一组选项让用户选择，一次可以选择多个选项
3.<input type="radio" name="ints" values="0/1" />
单选按钮：提供一组选项让用户选择，一次只能选择1个选项。如果name值相同就认为是一组，只能从中选择一个，如果不相同就认为不是一组，可以多选
3. 文本域
<textarea></textarea>
1.采集用户的信息的时候，可能需要用户提供一定量的文字描述，用input输入框不方便
2. 此时使用文本域来实现
4. 下拉列表
<select>
<option> 选择内容 </option>
</select>
1. 将选择信息保存在下拉列表当中，用户点击之后弹出内容让用户选择，选择之后收回弹出的内容
1.2.6.1 定义登录表单
<!DOCTYPE html >
<html> <!--html文件的开始-->
<head>
<meta charset="utf-8"> <!--文件字符编码-->
<!--自适应设备大小-->
<meta name="viewport" content="width=device-width,inital-scale=1">
<!--这是显示到浏览器的标题栏-->
<title>中国文传统文化学习</title>
</head>
<body>
<!--html文件主体部分-->
<h1>这是登录表单</h1>
<form action="">
<fieldset>
<legend>请输入信息</legend>
用户名 ：<input type="text" placeholder="请输入内容"><br><br>
密    码:   <input type="password" placeholder="请输入密码"><br><br>
照    片： <input type="file"><br><br>
日    期： <input type="file"><br><br>
爱    好： <input type="checkbox" name="ints" values="抽烟">抽烟
<input type="checkbox" name="ints" values="酗酒">酗酒
<input type="checkbox" name="ints" values="上网">上网
<input type="checkbox" name="ints" values="烫头">烫头
<input type="checkbox" name="ints" values="赌博">赌博 <br><br>
性    别： <input type="radio" name="sex" values="1">男
<input type="radio" name="sex" values="0">女 <br><br>
描    述： <textarea name="" id="" cols="20" rows="3"></textarea> <br><br>
所在城市： <select>
<option >请选择城市</option>
<option >上海</option>
<option >北京</option>
<option >深圳</option>
<option >广州</option>
</select><br><br>
<input type="submit">   
<input type="reset">
</form>
</body>
</html> <!--html文件的借宿-->
1.2.7 跑马灯标签
<marquee></marquee>:
1. 功能：内容可以在页面中自动移动
2. 属性：
bgcolor:设置背景颜色
heigt:设置高度
width:设置宽度
direction:设置内容移动方向
1.2.8 音频标签
<audio></audio>
1.功能：在页面插入音频
2.属性：
controls="controls":控制是否显示播放功能界面
1.2.9 视频标签
<vedio></vedio>:htnl5本身支持的标签
<embed></embed>:需要浏览器安装flash插件才能使用这个标签
1.功能：在页面插入视频
2.属性
controls="controls":控制是否显示播放功能界面
heigt:设置高度
width:设置宽度
1.3 行内元素与块级元素
HTML的标签也叫作元素。
HTML的元素分为：
（1）行内元素
（2）块级元素
1.3.1 行内元素
1.3.1.1 普通行内元素
1. 行内元素：相邻元素可以放在同一行,共享同一行空间，
（1） 行内元素不可以设置宽高，
（2）行内元素的宽高不受CSS控制，是根据内容的大小设置的
2. 常见的行内元素：
span,img,a,lable,input,abbr(缩写)，em(强调),big,cite(引用)，i(斜线),q(短引用)，textarea(文本域)，select(下拉列表)，small(让内容变小一点)
sub,sup,strong,u(下划线)
1.3.1.2 行内元素变块级元素
使用CSS改变 行内元素属性，使其具备块级元素的特征，就变成了块级元素
属性： display:block;
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a{
background-color: #ADFF2F;
display: block;
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<a href="">这是行内元素</a>
</body>
</html>
1.3.1.3 行内块元素
行内块元素：具备块级元素的特征，可以设置宽高，也可以和其他元素共享同一行空间
属性： display: inline-block;
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a{
background-color: aquamarine;
display: inline-block;
height: 100px;
width: 300px;
}
</style>
</head>
<body>
<a href="">这是行内块元素</a>
</body>
</html>
1.3.2 块级元素
1. 块级元素：元素独占一行，可以设置宽高相邻元素不可以放在同一行
2. 常见的块级元素：
div,p,h1~h6,ul,ol,dl,li,dd,table,hr,blockquote,address,menu,pre
1.3.3 文档流
1. 标准文档流：浏览器在显示内容时是从左到右，从上到下，每个元素按照自己应该在的位置占用浏览器的平面空间
2. 非标准流：某个元素脱离标准流，不再占用浏览器的平面空间，一般是float浮动元素，浮动到浏览器的上方，这种就叫非标准流。
1.3.4 元素的浮动
1. 什么是浮动？
1. float：浮动主要永凯实现某些布局,比如div的浮动
2. float属性有连个属性值：left(向左浮动)
right(向右浮动)
3. 在开发中浮动使用非常多。
2. 块级元素浮动
1. 块级元素浮动之后取消独占一行的特权，与多个元素共享一行空间。
2. 浮动之后脱离标准文档流，父div 会认为子div不存在。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#fdiv{
border:solid red 2px;
width:450px;
height:220px;
}
#fdiv div{
float:left;
width:100px;
height:200px;
margin-left: 10px;
margin-top: 10px;
background-color: #DB7093;
}
</style>
</head>
<body>
<div id="fdiv">
<div >我是块级元素</div>
<div >我是块级元素</div>
<div >我是块级元素</div>
<div >我是块级元素</div>
</div>
</body>
</html>
3. 行内元素浮动
行内元素浮动之后就可以设置宽高。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul li{
float: left;
list-style: none;
margin-left: 10px;
}
</style>
</head>
<body>
<ul>
<li>首页</li>
<li>视频</li>
<li>资料</li>
<li>关于我们</li>
</ul>
</body>
</html>
4. 清除浮动对其他元素的影响
父元素中
属性：overflow:hidden;
不设置清除浮动影响时，子元素浮动，父元素当子元素不存在了，自动调整大小
设置清除浮动影响后，子元素浮动，父元素依旧保持有子元素时的大小
1.4 元素的边框与边距
一个元素的样式组成包括 边框，内边距，外边距
1.4.1 元素边框border
1. 每个元素都有边框border， 默认是无色
2. 需要边框有色，可以在head设置style，定义了不指定颜色，默认黑色
3. border有实线，虚线，
1.4.2 元素边距
元素都有边距，分为内边距（padding）和 外边距(margin)
1.4.2.1 内边距（padding）
内边距（padding）:边框到外面其他元素的距离
（1）上内边距：padding-top
（2）下内边距：padding-bottom
（3）左内边距：padding-left
（4）右内边距：padding-right
1.4.2.2 外边距(margin)
外边距(margin)：内容到边框的距离
（1）上外边距：margin-top
（2）下外边距：margin-bottom
（3）左外边距：margin-left
（4）右外边距：margin-right
1.5 div盒子模型
1.5.1 div的概念
1. div是无语义的标签，又叫盒子模型专门用来实现页面的布局
2. div 的特性
（1）div 默认没有边框
（2）div是块级元素，独自占一行
1.5.2 使用div布局
使用div布局下列页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>布局</title>
<link rel="stylesheet" href="zxx.css">
</head>
<body>
<div id="header">
头部导航
</div>
<div id="nav">
这是nav
</div>
<div id="body">
<div id="leftnav">leftnav</div>
<div id="content">content</div>
</div>
<div id="bowtton">
底部
</div>
</body>
</html>
#header{
background-color: darkgray;
width: 100%;
height:40px;
margin:0 atto;
}
#nav{
background-color: firebrick;
width: 80%;
height:50px;
float: right;
margin:0 atto;
margin-left: 10%;
margin-right: 10%;
}
#body{
background-color: greenyellow;
width: 80%;
height:520px;
margin:0 atto;
margin-left: 10%;
margin-right: 10%;
}
#leftnav{
background-color: burlywood;
width: 30%;
height:470px;
float: left;
margin:0 atto;
}
#content{
background-color: goldenrod;
width: 70%;
height:470px;
margin:0 atto;
float: right;
}
#bowtton{
background-color: darkgray;
width: 100%;
height:100px;
margin:0 atto;
}
1.6 元素居中
1.6.1 默认边距
1. 一些元素是有默认边距的，比如body,ul
2. 有默认边距的元素，在开发中默认边距会影响布局，所以在定义css样式的时候需要先重置body样式，与ul样式。
body{
/*外边距设置为0*/
margin: 0 ;
}
ul{
/*内外边距设置为0*/
margin: 0 ;
padding: 0;
}
1.6.2 文本居中
1. 大多数时候，文本需要垂直居中
2. 使用属性： line-height: 值为父元素高度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
/*外边距设置为0*/
margin: 0 ;
}
ul{
/*内外边距设置为0*/
margin: 0 ;
padding: 0;
line-height: inherit;
}
div{
overflow: hidden;
background-color: lightgreen;
height: 70px;
width:400px
}
li{
float: left;
margin-left: 10px;
list-style: none;
line-height: 70px;
}
</style>
</head>
<body>
<div>
<ul>
<li>上下居中</li>
<li>上下居中</li>
<li>上下居中</li>
<li>上下居中</li>
<li>上下居中</li>
</ul></div>
</body>
</html>
1.6.3 div居中
1. 又是div也需要水平居中
2. 设置margins属性，上下边距设置值，左右边距auto(自动)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
/*外边距设置为0*/
margin: 0 ;
}
div{
background-color: lightgreen;
height: 70px;
width:400px;
margin-top:20px;
margin-bottom:0 ;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div>
div水平居中
</ul></div>
</body>
</html>
1.7 定位
1.7.1 定位布局
1. 在开发中，某些元素需要指定位置，并不是完全按照标准文档流布局，此时就需要定位
2. 常用定位分为：
（1）相对定位
（2）绝对定位
（3）固定定位
3. 定位使用css属性： position
1.7.2 相对定位
1. 相对定位就是相对于元素本身在标准流中的位置去定位
2. position:relative;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
/*外边距设置为0*/
margin: 0 ;
}
#div1 {
background-color: lightgreen;
height: 70px;
width:40px;
}
#div2 {
background-color: fuchsia;
height: 70px;
width:40px;
/*相对定位*/
position: relative;
/*向下移动*/
top:30px;
/*向右移动*/
left:10px;
}
</style>
</head>
<body>
<div id="div1">
div1
</div>
<div id="div2">
div2
</div>
</body>
</html>
1.7.3 绝对定位
1. 绝对定位的参考是距离最近的被定为过得父元素
2. position: absolute;
3. 如果没有父元素，那么定位参考就是body
<!DOCTYPE html >
<html> <!--html文件的开始-->
<head>
<meta charset="utf-8"> <!--文件字符编码-->
<!--自适应设备大小-->
<meta name="viewport" content="width=device-width,inital-scale=1">
<!--这是显示到浏览器的标题栏-->
<title>HTML学习</title>
<style>
#fdiv {
background-color: antiquewhite;
width: 300px;
height: 200px;
border:solid weight ;
/*相对位置*/
position: relative;
top:34px;
left:90px;
}
#zdiv {
background-color: aqua;
width: 120px;
height: 80px;
border:solid weight ;
/*绝对位置*/
position: absolute;
top:30px;
left:60px;
}
</style>
</head>
<body>
<div id="fdiv">
fdiv
<div id="zdiv">
zdiv
</div>
</div>
</body>
</html> <!--html文件的结束-->
1.7.4 固定定位
1. 固定定位就是指定元素在页面的具体位置
2. 固定定位参考系是浏览器窗口左上角
3. position: fixed;
<!DOCTYPE html >
<html> <!--html文件的开始-->
<head>
<meta charset="utf-8"> <!--文件字符编码-->
<!--自适应设备大小-->
<meta name="viewport" content="width=device-width,inital-scale=1">
<!--这是显示到浏览器的标题栏-->
<title>HTML学习</title>
<style>
#d1 {
background-color: darkorange;
}
#div {
background-color: gold;
width: 300px;
height: 200px;
border:solid weight ;
/*固定位置*/
position: fixed;
top:34px;
left:90px;
}
</style>
</head>
<body>
<div id="d1">
.....内容省略
</div>
<div id="div">
位置固定的
</div>
</body>
</html> <!--html文件的结束-->
2. CSS
2.1 认识CSS
2.1.1 CSS的概念
CSS负责元素的样式控制（样式的渲染）
在HTML中可以使用标签进行适当的元素样式调节，但是终究是有限度的，很多样式不能使用原始的html标签属性实现调节。
2.1.2 使用CSS的三种方式
2.1.2.1 在html标签中定义style样式
2.1.2.2 在head标签中定义style样式
2.1.2.3 导入外部CSS文件（使用最多）
<link rel="stylesheet" href="CSS文件地址">
2.1.2.4三种使用方式的优先级
优先级：标签中的样式 > head中的style样式 > 外部引入的样式
2.2 CSS选择器
2.2.1 CSS选择器概念
1. 选择器就是能在css文件中识别html中指定的元素的语法
2. css选择器有很多种，基本使用的有：
（1）元素选择器：直接使用元素的名称选择元素
（2）id选择器：#id值 就能选择id为此值的元素
（3）类选择器：.class值 就能选择class为此值的元素
（4）子选择器
（5）后代选择器
（6）伪类选择器
（7）属性选择器
2.2.2 元素选择器
元素名{ }
2.2.3 id选择器
#id值 { }
2.2.4 类选择器
.class值 { }
2.2.5 子选择器
#父id > 子代元素名{ }
仅子代所有元素样式相同，孙代及孙代以后元素不包括
2.2.6 后代选择器
#父id 后代元素名{ }
后代中所有这个元素的样式都是相同的
2.2.7 伪类选择器
#id值：hover { }
设置鼠标经过，离开时元素的变化
2.2.8 属性选择器
1.根据元素的属性进行选择
2. 元素名[属性名]；//就是选择具有某属性的元素
<!DOCTYPE html >
<html> <!--html文件的开始-->
<head>
<meta charset="utf-8"> <!--文件字符编码-->
<!--自适应设备大小-->
<meta name="viewport" content="width=device-width,inital-scale=1">
<!--这是显示到浏览器的标题栏-->
<title>HTML学习</title>
<style>
div[class] {
background-color: greenyellow;
width: 50px;
height: 30px;
border:solid weight ;
float: left;
margin-left: 20px;
}
div[id] {
background-color: #7FFFD4;
width: 50px;
height: 30px;
border:solid weight ;
float: left;
margin-left: 20px;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d1"></div>
<div id="div"> </div>
<div class="d1"></div>
<div id="div"></div>
<div class="d1"></div>
</body>
</html> <!--html文件的结束-->
3 JavaScript
3.1 JavaScript基本概念
3.1.1 历史
1. 一开始，JS主要解决一些服务器端语言（perl）对对数据的验证功能：因为在JS出现之前，要将表单数据提交到服务器端才能验证数据的合法性，有效性..当时使用电话拨号上网速度很慢，用户要等许久才能知道知道自己输入的信息是否正确，效率非常低，很不实用
2. NetSacpe互联网公司在1995年开发出JavaScript语言，使得简单的数据验证直接在客户端进行验证，不必再提交到服务器端
3. 现在JavaScript几乎可以实现所有的浏览器交互功能，主流的浏览器都支持JavaScript,都有解析JavaScript引擎，可以解释JavaScript语言
4. JavaScript是解释性语言，不需要进行编译
3.1.2 JS基本语法格式
1. JS严格区分大小写
2. 标识符与Java相同
（1）首位可以是字母，下划线，美元符号
（2）其他位置可以是字母，下划线，美元符号，数字
3. 注释：
（1）单行注释： //
（2）多行注释： /* */
4. JavaScript每行代码后面加不加“ ;” 都可以，没有语法错误
3.1.3 JS中变量和数据类型
1. 变量
1. 变量：声明用来保存数据的内存空间
2. 变量声明：使用关键字 var let .....
（1）声明并且赋值；
（2）先声明后赋值
3. JS中声明一个变量，可以保存任何类型的数据，故JS是匿类型语言
2. 数据类型
（1）基本数据类型
js中有5中基本数据类型
（1）undefined:没有被赋值的变量，或者不存在的变量
（2）string:字符串类型
（3）number:数字类型
（4）null:空类型
（5）boolean:布尔类型
（2）javascript中的string字符串
1. 开发中遇到最多的是string字符串类型，javascript中为字符串提供了很多实用的方法
a.根据索引取得对应位置上的字符
字符串的charAt( 索引) 方法，取出指定索引上的字符
<script >
var str = "北京很欢迎你";
//取出第2个位置（索引）上的字符
console.log(str.charAt(2));
</script>
b. 取得指定字符串在字符串中第一次出现的位置
字符串的 indexOf( 指定字符串) 方法，取得指定字符串在字符串中第一次出现的位置
<script >
var str = "北京很欢迎你";
//取得指定字符串“欢迎”在字符串中第一次出现的位置
console.log(str.indexOf("欢迎"));
</script>
c. 取得指定字符串在字符串中最后一次出现的位置
字符串的 lastIndexOf( 指定字符串) 方法，取得指定字符串在字符串中最后一次出现的位置
<script >
var str = "北京很欢迎你超级欢迎你";
//取得指定字符串“欢迎”在字符串中最后一次出现的位置
console.log(str.lastIndexOf("欢迎"));
</script>
d. 取得字符串长度
字符串的 length属性，取得字符串长度
<script >
var str = "北京很欢迎你超级欢迎你";
//取得字符串长度
console.log(str.length);
</script>
e. 按照指定字符或正则将字符串分割
字符串的 split("指定字符") ，按照指定字符或正则将字符串分割，返回一个数组
<script >
var str = "苹果|葡萄|哈密瓜|芒果|桃子";
//取得字符串长度
console.log(str.split("|"));
</script>
f. 按照指定位置截取字符串
1. substring( 索引值)按照指定位置截取指定位置后（包括指定位置）的字符串
2. /substring( 起索引，终) 按照指定位置截取从起点位置后（包括起点位置）到终点位置（不包括终点位置）的字符串
3. 返回截取到的字符串
4. 原来的字符串没有影响
<script >
var str = "苹果是甜甜的有营养的水果";
//打印原字符串
console.log(str)
// 按照指定位置截取字符串
console.log(str.substring(3));
// 截取指定位置间字符串
console.log(str.substring(3,6));
</script>
（3）非数据类型
（1）object:对象类型
（2）function: 功能类型
g. 大小写转换
1. toUpperCase()方法，全部转为大写字母
2. toLowerCase()方法，全部转为大写字母
3. 返回新字符串，原字符串不变
<script >
var str = "sagyYHGJHGLHGssa";
//打印原字符串
console.log("原字符串"+str)
// 按照指定位置截取字符串
//全部转为大写字母
console.log(str.toLowerCase())
//打印原字符串
console.log("原字符串"+str)
//全部转为大写字母
console.log(str.toUpperCase())
//打印原字符串
console.log("原字符串"+str)
</script>
3.1.4 JS的3种定义方式
1. 在HTML元素标签中定义js代码
一般很少 在HTML元素标签中定义js代码，但是会用到
比如 alert("内容")：在页面弹出一个提示框，点击确认之后消失
<body>
<a href="javascript:alert('禁止跳转')" >链接</a>
</body>
2.在script标签中定义JS代码
1. 在<script>标签中定义JS代码，当浏览器解析到<script>标签的时候会唤醒浏览器中JS解析引擎来解释js代码
2. <script>标签可以放在html文档的任何位置，都会被读到
3. 如果js代码不复杂的情况使用
<script>
var temp;
//在控制台输出信息， typeOf:关键字，判断变量的类型
console.log(typeof temp); //此时为undefined类型
temp = 10; //给变量赋值
console.log(typeof temp); //此时为number类型
temp = "今天天气很好";
console.log(typeof temp); //此时为string类型
</script>
3. 在JS文件中定义js代码
1. 将JS定义在一个单独的文件中（xxx.js）,在需要的地方导入该文件
2. 使用最为广泛
3. 定义在单独的文件方便代码的重用，方便维护
var temp;
temp = 10; //给变量赋值
//在控制台输出信息， typeOf:关键字，判断变量的类型
console.log(typeof temp); //此时为number类型
temp = true;
console.log(typeof temp); //此时为string类型
<script src="table.js" type="text/javascript" charset="utf-8"></script>
3.2 JS语法
3.2.1 JavaScript流程控制语句
javaScript流程控制语句与java一样，仅仅是变量声明使用关键字不一样
<script >
for(var i=0;i<10;i++){
if(i==3){
continue;
}
console.log(i);
}
</script>
3.2.2 隐式转换
1. js的流程控制语句或者是循环判断的条件会对数据进行 隐式转换
2. if语句中，
（1）会把条件0转换成false,
（2）把非0数字转换成true
（3）把空字符串转换成 false
<script >
if(1){
console.log("1条件为true就打印")
}
if(0){
console.log("2条件为true就打印")
}
if(""){
console.log("3条件为true就打印")
}
if("asgh"){
console.log("4条件为true就打印")
}
if(-1){
console.log("5条件为true就打印")
}
</script>
3.2.3 javascript函数
1. javascript中没有方法的概念，只有函数function
2. function也是对一些代码进行封装，之后再需要的地方直接使用函数名进行调用,避免代码重复
1. 函数的声明
1. js使用function声明函数
2. 声明函数不需要返回值类型
3. 参数不需要指定类型，只需要参数名
4. 返回值可有可无，看情况定
5. 多个js文件的函数和变量可以相互调用和引用，前提是都导进一个html文件，或者jsp文件，被调用的js文件必须放在前面,不然会报错
<script src="table.js" type="text/javascript" charset="utf-8"></script>
<script >
var sum = addSum(12,45);
console.log(sum);
</script>
2. javascript常用函数
js中有很多常见的函数是内置的，不需要我们自己定义，可以直接使用，这些函数一般是可以用来对各种数据进行操作的函数
a. 数字转换的函数
1. 将字符串类型数字转换成整数：parseInt(字符串)
使用这个方法会在转换过程中去掉小数部分
2. 将字符串类型数字转换成浮点数：parseFloat(字符串）
3. 如果转换内容有非数字字符，则只会转换这之前的数字字符串
4. number类型的toFixed(保留小数个数)方法，转化后的数字保留指定小数个数并且实现四舍五入
<script >
var str="123";
console.log("转换成整数"+parseInt(str));
var str1="123.03";
console.log("转换成小数"+parseFloat(str1));
var num = 123.0456;
console.log("保留2位小数"+num.toFixed(2));
</script>
b. 日期类型数据
js中提供了一个构造函数Date()可以实现日期对象的创建
<script >
var date = new Date();
console.log(date); //标准格式
console.log(date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+":"+date.getHours());
</script>
3.3 ES6新特性
3.3.1 新的变量声明
1. let声明局部变量
1. let声明局部变量，只在限定范围内（块级作用域）使用
2. 与var相比：var无论声明在哪里，都会被认为声明到函数的最顶端，就是变量提升特性（hositing）
3. let声明的变量不具备变量提升特性，只在块级作用域有效果
<script >
var x='全局变量';
//使用let声明的变量作用域就是块级作用域
if(1){
let x = '局部变量';
console.log(x);
}
console.log(x)
</script>
<script >
if(1){
let x = '局部变量';
console.log(x);
}
console.log(x)
</script>
2. const声明常量
1. const声明常量，常量名需要大写，也是在块级作用域内使用，
（1）const声明的变量都会被认为是常量，值被设置完成后就不可以修改
（2）const设置的对象，对象包含的是可以被修改的，只是对象所指向的地址没有变
（3）const在声明变量时必须被赋值（必须给常量初始化）
<script >
const x = 1;
console.log("x的值为："+x);
x=2; //此时会报错，常量被赋值后不可以再赋值
</script>
<script >
const STUDENT = {name:"Bob",sex:"男",age:20};
console.log(STUDENT);
STUDENT.name="Mary";
STUDENT.sex="女";
STUDENT.age=18
console.log(STUDENT);
</script>
3.3.2 模板字符串
ES6中，用反引号 ``构建模板字符串
<script >
var str = `hello
world
love
you`;
console.log(str);
</script>
3.3.3 箭头函数（Arrow Functions）
1. 箭头函数就是函数的简写形式
2. 不需要使用function关键字创建函数
3. 省略return关键字
4. 当返回值只有一个的时候表达式可以省略{}和return
// function addSum(a,b){
// return a+b;
// }
//修改使用箭头函数、
var addSum=(a,b)=>{
return a+b;
}
<script src="table.js" type="text/javascript" charset="utf-8"></script>
<script >
var sum = addSum(2,6);
console.log(sum);
</script>
3.3.4 函数的参数默认值
1. ES6之前在函数体内定义函数的参数默认值
2. ES6之后在参数位置定义函数的参数默认值
<script >
//1. ES6之前在函数体内定义函数的参数默认值
function printText1(text){
text=text||'default'; //不给参数的时候，默认参数为default
console.log(text)
}
var text = printText1();
//2. ES6之后在参数位置定义函数的参数默认值
//不给参数的时候，默认参数为default
function printText2(text=`default`){
console.log(text)
}
3.3.5 可变参数操作符
类似于迭代器，把数组中的内容分迭代出来，传递到函数中
<script >
//Es6之前
console.log("-----------Es6之前----------");
function foo(x,y,z){
console.log(x,y,z);
}
let arr=[1,2,3]
foo(...arr);
//es6之后
console.log("-----------Es6之后----------");
function foo1(...args){
console.log(args);
}
foo1(1,2,3,4,5,6,7);
3.3.6 for…of 和 for…in
1. for..of:用于遍历一个迭代器，比如数组、
2. for..in：用于遍历对象中属性
<script >
let letters=['a','b','c','d','e'];
for(let letter of letters){
console.log(letter);
}
let students={name:"小明",sex:"男",age:20};
for(let student in students){
console.log(students[student]);
}
</script>
3.4 js获取html节点
3.4.1 js的document内置对象
1. 把html的每个标签都看做是一个节点，通过js可以获取这些节点
2. document对象：js的内置对象，可以取出html的节点，并对节点进行修改，删除，替换内容等操作
3. 内置对象：就是已经创建好的对象，可以直接使用
3.4.2 根据id值取得元素节点对象
1. document.getElementById("id值") ：根据id 值取得元素节点对象，返回值是一个对象
2. 对象的innerHTML属性：取得节点对象下的所有html代码
3.函数的绑定：将函数绑定到元素上，使用onclick=“函数名（）”进行绑定
<body>
<div id="div1">
<p>
今天天气真好！
</p>
</div>
</body>
</html> <!--html文件的结束-->
//js代码放在最后，避免文件读取不到html元素
<script >
var d = document.getElementById("div1");
console.log(d.innerHTML);
</script>
3.4.2 根据标签名取得元素节点对象
1. document.getElementsByTagName("元素名") ：根据标签名取得元素节点对象集，返回值是一个数组
2. isNaN( )：判断一个字符串是不是纯数字，是返回true，否返回false
3. 从表单中获取的数据默认是字符串类型，要转换成数字可以使用内置的parseInt（）方法实现
function phoneNum(){
var inputs =document.getElementsByTagName("input");
console.log("用户名"+inputs[0].value);
console.log("密码"+inputs[1].value);
console.log("电话"+inputs[2].value);
var phoneNum = inputs[2].value;
if(isNaN(phoneNum)){
alert("电话号码格式不正确");
}else{
alert("电话号码格式正确");
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form id="form">
<fieldset id="">
<legend>请输入信息</legend>
用户名：<input type="text" name="username" placeholder="请输入用户名"><br><br>
密码：<input type="password" name="pwd" placeholder="请输入密码"><br><br>
电话：<input type="text" name="phone" placeholder="请输入电话" ><br><br>
<input type="button" value="提交" onclick="phoneNum()"> </input>
</fieldset>
</form>
</body>
</html>
<script src="login.js"></script>
3.4.4 js操作属性
1. 使用JavaScript操作html标签（元素）的属性
2. 比如可以操作img的src属性，替换新图片
图片轮播
1. 使用img.setAttribute("属性名",替换值)
img.setAttribute("src",imgs[i++])
2. 内置对象window的setInterval(函数，间隔时间)方法实现让函数中的代码在指定的时间间隔之后重复执行
//1. 准备一个数组装要播放的图片
let images=new Array();
//2.加入图片
images.push("https://img2.baidu.com/it/u=2381344113,3410394464&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=399");
images.push("https://img2.baidu.com/it/u=2515267202,1571382403&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500");
images.push("https://img0.baidu.com/it/u=3375019702,335664991&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=480");
images.push("https://img1.baidu.com/it/u=3127718144,456950386&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500");
images.push("https://img1.baidu.com/it/u=48507634,3527418649&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=500");
images.push("https://img2.baidu.com/it/u=3475649646,2889539306&fm=253&fmt=auto&app=138&f=JPEG?w=670&h=500");
/**
* 2. 实现图片轮播的函数
*/
function changeImage(){
//1.定义索引
var index = 0;
//2.获取元素标签第一个值，0位置的
var img = document.getElementsByTagName("img")[0];
//设置一秒钟替换一次图片
//3.使用window.setInterval(函数，时间间隔（单位是毫秒）)
window.setInterval(function(){
//4. 替换img的src属性值
img.setAttribute("src",images[index++]);
// //5. 设置index为最大值就归o
if(index>5){
index=0;
}
},1000)
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img{
height: 400px;
width: 600px;
}
input{
height: 30px;
width: 70px;
}
</style>
<script src="./login.js" type="text/javascript" charset="utf-8"></script>
</script>
</head>
<body>
<img
src="https://img2.baidu.com/it/u=2064997347,3042749779&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=800" >
<button type="button" onclick="changeImage()">点击轮播</buton>
</body>
</html>
3.4.5 js操作css
使用javascript对html元素的css样式进行动态操作
1. 取得对应节点元素
2. 使用元素的style属性，改变其值，就是改变了css样式
阅读模式案例
看小说时提供三种阅读模式：正常模式，夜间模式，高亮模式
/**切换阅读背景颜色
* @param {Object} color
*/
function changeColor(color){
//1. 获取元素，使用元素的style属性修改背景颜色为参数传递的颜色
var bgcolor = document.getElementsByTagName("div")[0].style.backgroundColor=color;
//2. 判断，当传入参数为black时背景色为黑色，则修改前景色为white白色
//背景色不为黑色时修改前景色为黑丝，避免背景色前景色混合
if(bgcolor=='black'){
document.getElementsByTagName("div")[0].style.color='white';
}else{
document.getElementsByTagName("div")[0].style.color='black';
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
height: 500px;
width: 90%;
background-color: gainsboro;
color:black;
margin: 20px auto;
padding:30px;
}
</style>
</head>
<body>
<div>
<h1>《伤仲永》</h1>
<p>
金溪民方仲永，世隶耕。仲永生五年，未尝识书具，忽啼求之。父异焉，借旁近与之，即书诗四句，并自为其名。其诗以养父母、收族为意，传一乡秀才观之。自是指物作诗立就，其文理皆有可观者。邑人奇之，稍稍宾客其父，或以钱币乞之。父利其然也，日扳仲永环谒于邑人，不使学。
余闻之也久。明道中，从先人还家，于舅家见之，十二三矣。令作诗，不能称前时之闻。又七年，还自扬州，复到舅家问焉，曰“泯然众人矣。”
王子曰：仲永之通悟，受之天也。其受之天也，贤于材人远矣。卒之为众人，则其受于人者不至也。彼其受之天也，如此其贤也，不受之人，且为众人；今夫不受之天，固众人，又不受之人，得为众人而已耶？
</p>
<p>
金溪民方仲永，世隶耕。仲永生五年，未尝识书具，忽啼求之。父异焉，借旁近与之，即书诗四句，并自为其名。其诗以养父母、收族为意，传一乡秀才观之。自是指物作诗立就，其文理皆有可观者。邑人奇之，稍稍宾客其父，或以钱币乞之。父利其然也，日扳仲永环谒于邑人，不使学。
余闻之也久。明道中，从先人还家，于舅家见之，十二三矣。令作诗，不能称前时之闻。又七年，还自扬州，复到舅家问焉，曰“泯然众人矣。”
王子曰：仲永之通悟，受之天也。其受之天也，贤于材人远矣。卒之为众人，则其受于人者不至也。彼其受之天也，如此其贤也，不受之人，且为众人；今夫不受之天，固众人，又不受之人，得为众人而已耶？
</p>
<p>
金溪民方仲永，世隶耕。仲永生五年，未尝识书具，忽啼求之。父异焉，借旁近与之，即书诗四句，并自为其名。其诗以养父母、收族为意，传一乡秀才观之。自是指物作诗立就，其文理皆有可观者。邑人奇之，稍稍宾客其父，或以钱币乞之。父利其然也，日扳仲永环谒于邑人，不使学。
余闻之也久。明道中，从先人还家，于舅家见之，十二三矣。令作诗，不能称前时之闻。又七年，还自扬州，复到舅家问焉，曰“泯然众人矣。”
王子曰：仲永之通悟，受之天也。其受之天也，贤于材人远矣。卒之为众人，则其受于人者不至也。彼其受之天也，如此其贤也，不受之人，且为众人；今夫不受之天，固众人，又不受之人，得为众人而已耶？
</p>
</div>
<center>
<button type="button" onclick="changeColor('gainsboro')">正常模式</button>
<button type="button" onclick="changeColor('aquamarine')">护眼模式</button>
<button type="button" onclick="changeColor('black')">夜间模式</button>
</center>
</body>
</html>
<script <script src="./bgcolor.js" type="text/javascript" charset="utf-8"></script>
3.5 事件绑定
3.5.1 事件
1. js的事件就是对用户特定行为作出相应的相应的过程
2. 实质上是浏览器监听到用户的某些行为的时候会执行对应绑定的程序
3.5.2 事件的绑定
1. 事件绑定：在html 元素上将触发事件的行为和事件响应的程序关联起来就是事件绑定
2. 事件的绑定有多种方案
1. 在html代码中绑定事件
就是在html标签中直接写响应的程序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="javascript:alert('这是超链接')">html 代码中绑定事件</a>
</body>
</html>
2. html中绑定函数
1. 把响应的程序单独定义成一个函数（事件），在html 元素中进行绑定
2. 直接绑定一个单击事件（onclick）
3. 这样会让html中有很多js代码，不太友好，不方便维护也不美观
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button type="button" onclick="login('scott','1234')">按钮</button>
</body>
</html>
<script>
function login(name,pwd){
var username="scott";
var password="1234";
if(name==username&&pwd==password){
alert("登录成功，即将跳转到首页");
window.location.href="http://www.mbzvip.cn";
}else{
alert("用户名或密码不正确");
}
}
</script>
3. 在js中实现事件绑定
1. 在js文件中取得html元素,,为其绑定函数
2. 将js文件导入html文件
3. js文件应该放在html文件的最后，当html加载完毕后再加载js文件，避免加载js文件在加载触发事件按钮之前，事件无法响应
3.5.3 事件的加载
1. 为页面的body元素绑定一个加载事件onload
2. 加载事件:当html全部加载完之后再触发的事件
3. 作用：当html页面内容完全加载完毕之后立刻执行onload绑定的函数
1. 在body标签绑定onload事件
2. 在js中使用window.onload = function(){}绑定事件
3.5.4 常见事件
3.6 window对象
3.6.1 window对象概念
1. window是js提供的一个内置对象（就像document,console一样）
2. window是js最大的一个内置对象，有非常多的方法和属性，可以直接调用使用
763
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
