第一章 HTML常用设置
1.1.html：html、标题标签、特殊符号、水平线标签、文字标记、图片标签等解析。

 
一级标题标签
二级标题标签
三级标题标签
四级标题标签
六级标题标签
特殊符号
大于号： > 
小于号：< 
版权符号:© 
商品符号:®
引号: "
空格：
换行标签: &ltbr / > 
水平线标签
文字标记
中关村软件园 软件开发 训练营欢迎您！
图片标签

展示效果如下：title标签展示的内容，目录和效果如下

1.2.文字段落、音乐标签、视频标签、字体标签和网页中滚到效果的应用。

文字段落
 剑圣说： 你的剑就是我的剑！！！ 
音乐标签
视频标签
字体标签
2000万柔光双摄，照亮你的美！！！
网页中滚动效果的应用
马云说，对钱不感兴趣！！欢迎 Admin,登陆成功！

展示效果如下：

1.3.表格标签和表格的嵌套：

1,1
1,2
1,3
2,2
2,3
3,1
表格的嵌套

展示效果如下：

1.4.文本框、密码框、单选按钮、多选按钮、下拉选和文本域和按钮。

文本框 : 

密码框: 

性别[单选按钮]:男 中女

爱好[多选按钮]:抽烟喝酒烫头 

[下拉选] :省 : --请选择--云南省河南省河北省山西省

[文本域]备注: 
请输入备注

按钮:
 普通按钮

展示效果如下：

1.5.Email类型、search类型、数字类型、滑块类型、颜色类型、日期类型、placeholder属性、required属性和autofocus属性。

Email类型 : 

search 类型 : 

数字类型: 

滑块类型: 

颜色类型: 

日期类型: 

placeholder属性:

required属性：   

autofocus属性:   

效果展示如下：

第二章 Html的设置
2.1.字体样式设计

#p1{font-size: 24px;/*font-weight: bold;*/font-family: "仿宋";}
字体样式设计
第一种行内式
第二种 嵌入式
第三种 引入式

展示效果如下：

2.2.选择器的设置

#p1{color: red;background-color: yellow;}.c1{font-size: 48px;}p{color: green;}*{background-color: antiquewhite;}
AAAAAAAAAAA
BBBBBBBBBBB
CCCCCCCCCCC
DDDDDDDDDDDD 

展示效果如下：

2.3.边框线、选择器等的设置。

#d1,p,.c1{width: 200px;height: 200px;border: 1px solid black;/*边框线: 像素实线solid 颜色*/background-color: rgba(255,255,0,1);/*rgba red green blue a透明: 它们的取值范围为 0-255 a的取值范围是： 0-1 */}#content #top .right{color: red;}#content #main .right{color: blueviolet;}
AAAAAAAAAAA
top图片欢迎admin 登录主体内容数据列表

展示效果如下：

2.4.div + css页面分割展示

#content{width: 600px;}#top{width: 100%;height: 50px;border: 1px solid red;}#center{width: 100%;height: 300px;/*border: 1px solid black;*/margin-top: 6px;/*上外边距 */}#left{width: 200px;height: 300px;border: 1px solid blue;float: left;/*浮动 left 左浮动right 右浮动*/}#right{width: 390px;height: 300px;border: 1px solid green;float: right;}#footer{width: 100%;height: 50px;border: 1px solid darkmagenta;margin-top: 6px;}顶部左边菜单栏右边显示内容的区域底部信息

展示效果如下：

2.5.盒子模型（选出页面某一块当作盒子）

#d1{width: 350px;height: 90px;border: 1px solid black;margin-top: 100px;margin-left: 200px;padding-top: 10px;padding-left: 50px;/*注意: 设置内边距时 div的 大小会被改变,此时,应该把改变的大小也考虑进去*/} 这是div块的内容展示 

展示效果如下：

2.6.ul+li列表样式设计

#daohang{width: 200px;font-size: 24px;/*border: 1px solid blanchedalmond;*/text-align: center;/*文本内容居中显示*/}ul li{list-style-type: none;/*列表 样式none:无什么样式都不添加*/line-height: 40px;/*行高*/background-color: darkgray;/*背景颜色*/}ul li a{text-decoration: none;/*文本的修饰*/}/*鼠标悬停状态*/ul li a:hover{color: red;background-color: yellow;display: block;}
首页
日志
相册
说说
留言板

展示效果如下：

2.7.盒子阴影设置

#d1{width: 200px;height: 300px;margin-left: 300px;margin-top: 50px;border: 1px solid black;box-shadow: 0px 0px 10px 5px blue,0px 0px 15px 10px red,0px 0px 20px 15px green;/*盒子阴影: X Y 偏移量模糊的距离 阴影的尺寸 颜色*/}

展示效果如下：

2.8.文字特效设置

p{height: 260px;/*高度*/background-color: black;/*背景颜色*/color: white;/*白色字体*/text-align: center;/*文字居中*/font-size: 150px;/*字号大小*/font-family: "微软雅黑";font-weight: bolder;/*字体加粗*//*文字阴影*/ /*X Y 偏移量 阴影大小 颜色*/text-shadow: 0px 0px 8px white,0px -5px 14px yellow,-2px -15px 15px red,-4px -25px 15px orange;padding-top: 50px;}
王者荣耀

展示效果如下：

2.9.动画的事件、方法设置

#d1{width: 200px;height: 200px;background-color: red;/*与 动画进行绑定: 动画的方法 执行的时间 执行的次数*/animation: xuanzhuan 1s infinite;/*匀速旋转*/animation-timing-function: linear;/*旋转的圆点XY 的值*/transform-origin: 100px 100px;}/*动画的事件/方法*/@keyframes xuanzhuan{to{/*改变 : 旋转(deg度)*/transform: rotate(360deg);}}

展示效果如下：长方形在旋转

第三章 js相关知识
3.1.js基础知识1

/*js的第一种输出方式*///document.write("hello world!!!!");function aa(){alert("警告弹窗！！！");}

展示效果如下：点击点击我弹出弹框

3.2.js基础知识2

点击我function aa(){document.getElementById("show").innerHTML = "第三种输出方式";/*document: 文本文档 getElementById:get 获取Element 节点 byId通过id的名称innerHTML： 页面上显示的内容*/}

展示效果服下：点击惦记我出现第三种输出方式。

3.3.js运算1

1.各个页面的设置：align = “center”表示所在的行文字居中显示，marquee标签中的文字从右往左滚动展示。

学生管理系统
欢迎 rose, 登陆成功！！
copyright © || 联系我们||合作伙伴 
Addr: 小名
导航栏
详细内容

展示效果如下：

3.login登录页面设计：title表示页面的作用，页面中不展示，
表示换行，form表示表单，action表示跳转的页面，method表示返回的方法，一般为get方法或post方法，border表示边框宽度，cellspacing表示单元格间距，

表示一行，

表示行中的列，表示一个空格，input表中这一行或列可输入内容，type表示内容的类型，name为后端传来的名字，placeholder没有输入是默认的内容，标签为超链接，href为超链接的地址。

用户名
 
密码
 
 注册

展示效果如下：

3.8.节点相关操作，onclick点击追加、插入、删除、复制和修改节点

追加插入删除节点复制节点修改
aaa1
aaa2
aaa3
aaa4
aaa5
function updateNode(){var divEle = document.getElementById("d1");// 创建节点var pNode = document.createElement("p");pNode.innerHTML = "修改了原有的节点";// 获取最后一个节点var lastEle = divEle.lastElementChild;// 实际是替换 1参的节点替换2参的节点divEle.replaceChild(pNode,lastEle);}function copyNode(){var divEle = document.getElementById("d1");// 调用 克隆的方法true 克隆子节点var pNode = divEle.firstElementChild.cloneNode(true);divEle.appendChild(pNode);}function deleteNode(){var divEle = document.getElementById("d1");// 删除div 的最后一个孩子节点divEle.removeChild(divEle.lastElementChild);}function insertNode(){var divEle = document.getElementById("d1");// 创建节点var pNode = document.createElement("p");// pNode.innerHTML = "aaa0";// 把a0 这个节点 插入 到 父节点的第一个孩子节点前divEle.insertBefore(pNode,divEle.firstElementChild);}function addNode(){var divEle = document.getElementById("d1");// 创建节点var pNode = document.createElement("p");// pNode.innerHTML = "aaa6";//把 a6 节点追加到div 的子节点的最后divEle.appendChild(pNode);}

展示效果如下：

3.9.列表展示、全选、修改等操作

/*全部选中/ 全部取消*/function checkAll(){/*alert("测试coming...")*/var ckAll = document.getElementById("selectCheckAll");//获取所有name 是 checkItem 的节点返回数组类型var checkItems = document.getElementsByName("checkItem");// 判断 全选 按钮是否被选中if(ckAll.checked==true){// 循环遍历所有的name 节点 全部选中 for(var i=0;i<checkItems.length;i++){checkItems[i].checked = true;}}else{// 循环遍历所有的name 节点 全部取消 for(var i=0;i<checkItems.length;i++){checkItems[i].checked = false;}}} /*点击反选 按钮 触发事件*/function resSelect(){var checkItems = document.getElementsByName("checkItem");for(var i=0;i<checkItems.length;i++){checkItems[i].checked = !checkItems[i].checked;}}
学生管理系统
、
全选
序号
姓名
性别
班级
操作
1
张三丰
男
计科1班
修改||删除
2
李思敏
男
计科1班
修改||删除
1
张三丰
男
计科1班
修改||删除
1
张三丰
男
计科1班
修改||删除
1
张三丰
男
计科1班
修改||删除
1
张三丰
男
计科1班
修改||删除
1
张三丰
男
计科1班
修改||删除
反选 

展示效果如下：

3.10.节点样式属性

div哈哈哈点击我function ab(){// 获取内容alert(d1.innerHTML); // 修改或者 添加内容 d1.innerHTML="嘿嘿嘿。。。";/*操作样式*/d1.style.width = "200px";d1.style.height = "100px";d1.style.backgroundColor = "yellow";/*操作属性*/d1.setAttribute("class","logo");}

展示点击变化：

3.11.鼠标事件

/*处理事件的第二种方式*/window.onload = function(){document.getElementById("btn1").onclick = function(){alert("单击");}document.getElementById("btn2").ondblclick = function(){alert("双击666");}document.getElementById("btn3").onmousedown = function(){alert("按下");}document.getElementById("btn4").onmouseup = function(){alert("弹起来");}// 鼠标移动到内部 悬停事件document.getElementById("btn5").onmouseover = function(){document.getElementById("btn5").style.backgroundColor = "red";}/*移出 */document.getElementById("btn5").onmouseout = function(){document.getElementById("btn5").style.backgroundColor = "orange";}}单击双击按下弹起

展示效果如下：鼠标放在矩形上会变色

3.12.键盘事件：

username:window.onload = function(){document.getElementById("username").onkeydown = function(){/*this 指的是 选中的 这个对象 id为 username 这个input 标签 */this.style.backgroundColor = "pink";}document.getElementById("username").onkeyup = function(){/*this 指的是 选中的 这个对象 id为 username 这个input 标签 */this.style.backgroundColor = "blue";}}

展示效果如下：输入时会变色

3.13.cookie

/*使用cookie*/ /*简单设置cookie*/ /*设置过期时间 expires=(内部状态，不会打印出来)*/ var oDate = new Date(); oDate.setDate(oDate.getDate()+30);// 设置时间是30天 后 document.cookie = "root=user;expires="+oDate;document.cookie = "password=666";

3.14.cookie封装：

// 封装设置 cookiefunction setCookie(name,value,iDay){var oDate = new Date();oDate.setDate(oDate.getDate()+iDay);document.cookie = name+"="+value+";expires="+oDate;}// 向cookie 中写入数据 /*setCookie('username','rose',30);setCookie('password','123456',30);*/// 删除 cookiefunction removeCookie(name){setCookie(name,'1',-1);}removeCookie("password");

第四章 流程控制、函数、变量和一维数组
4.1.四种一如方法，引入外部文件和重定向

alert("内嵌式");点击运行行内式

第四种，重定向

效果如下：

4.2.运算符

/*赋值运算符 += -= *= /==*/var a = 12;a+=12;// a=a+12;document.write("a="+a);document.write("
");/*比较运算符 >= <=== != === */var b = 20;var c = 20;var d = "20";document.write(b==c);document.write("
");document.write(b==d);document.write("
");document.write(b===c);document.write("
");document.write(b===d);document.write("
");/*== 比较的是值=== 比较的是 数值和类型*//* * && 有一个假的 结果为 假 || 有一个真的结果为真! */

展示效果如下

4.3.控制流程语句

/*判断结构 if(){}else{} prompt输入框*///var a = prompt("请输入一个number");//if(a>0){//alert("这是一个正数");//}else if(a<0){//alert("这是一个负数");//}else if(a==0){//alert("这是 0");//}else{//alert("这就不是一个数字");//}//=============================================================================/*选择结构输入的数字 为1-12 *///var a = prompt("请输入1-12 整数");alert(typeof a);// 此时 a的类型为string////var b = parseInt(a); // 把字符串类型的a 转换成number 类型的b //alert(typeof b);////switch (b){//case 3://case 4://case 5: document.write("春天");//break;//case 6://case 7://case 8: document.write("夏天");//break;//default:document.write("nono");//break;//}//===============================================================================/*通过for 循环写一个 99乘法表 *矩形 平行四边形三角形菱形*//*1*1=1 1*2=2 2*2=41*3=3 2*3=6 3*3=91*4=4 2*4=8 3*4=12 4*4=16........... * *//*for(var i=1;i<10;i++){for(var j=1;j<=i;j++){document.write(j+"*"+i+"="+j*i+"");}document.write("
");}*///===============================================================================var k = 1;do{document.write("至少输出一次！！！");}while(k<0);

展示效果如下：

4.4.流程控制关键字

for (var i = 1; i < 10; i++) {document.write("i=" + i); // 0123456 0 if (i % 7 == 0) {break; // 跳出当前循环}}document.write("
");for (var k = 1; k < 10; k++) {if (k % 7 == 0) {continue; // 跳过本次循环，继续下次循环}document.write("k=" + k + "
");}//课堂小练习:输出100以内 能被 11 整除的数字 11 22 3344。。。。99document.write("
");for (var k = 1; k < 100; k++) {if (k % 11 != 0) {continue; // 跳过本次循环，继续下次循环}document.write("k=" + k + "
");}

展示效果如下

4.5.如何创建函数

function aa1(){alert("无参数 无返回值方法...");}//aa1();function aa2(name){alert("有参数 无返回值方法... 传进来的参数:"+name);}//aa2("rose");function aa3(){return "返回aa3()得字符串...";}//alert(aa3());function aa4(bb){return "别"+bb;}alert(aa4("说话"));

展示如下：

4.6.变量的作用域

/*作用域 大括号里面 能调用 外面的变量而大括号里面定义的变量外面不能够调用*/var j = 10;function aa1(){var x = 5;alert("j="+j);}aa1();alert("x="+x);

展示效果如下：

4.7.一维数组创建

/*第一种 创建方式 */var arr1 = [12,3.14,true,"abc"];alert(typeof arr1);// 类型object/*第二种 创建方式 */var arr2 = new Array(5);/*第三种 创建方式 */var arr3 = new Array();/*第四种 创建方式 */var arr2 = new Array("30",30,true);

展示如下：

4.8.一维数组操作

var arr = [12,3.1415,true,"哈哈"];//alert(arr[0]);// 通过下标获取 值//alert(arr.length);// 获取数组的长度/*循环遍历这个数组*///for(var i=0;i");document.write(arr1);

展示如下：

4.9.常用对象String

var str = new String("abe:cde:afg");/*替换*/document.write(str.replace("a", "***"));document.write("
");/*根据 : 来进行 切割 字符串 */var arr = str.split(":");//document.write(arr.toString());for (var i = 0; i < arr.length; i++) {document.write(arr[i] + "
");}document.write("
");/*截取字符串 截前不截后 *//*indexOf 通过元素 获取它的下标*/document.write(str.substring(str.indexOf("b"), str.indexOf("f")));document.write("
");/*全部转换成 大写*/document.write(str.toUpperCase());document.write("
");/*全部转换成 小写*/document.write(str.toLowerCase());

​​​​展示如下：

4.10.常用对象Date

var date = new Date();alert(date.toLocaleString());alert(date.toLocaleDateString()); // 年月日alert(date.toLocaleTimeString()); // 时分秒

展示如下：

4.11.js定时器

停止var i = 0;function aa1() {i++;show.innerHTML = i;}// 定时器 每1000毫秒调用一次aa1 方法 var inter = setInterval(aa1, 1000);function stop() {// 清除定时器clearInterval(inter);}

​​​​​展示如下：

4.12.动态时间

function goTime() {var date = new Date();showTime.innerHTML = date.toLocaleString();}//setInterval(goTime,1000);function aa() {alert("弹出一次");}/*过3秒后只调用一次 aa() 这个方法*/setTimeout(aa, 3000);

展示如下：

4.13.时间案例

页面  秒后跳转到百度var interId = setInterval(cutTime, 1000);var i = 2;function cutTime() {font1.innerHTML = i;i--;if (i < 0) {clearInterval(interId);}}function go() {/*重定向当前窗口的链接 地址 :*/window.location.href = "https://www.baidu.com";}/*3秒后调用 go 这个方法*/setTimeout(go, 3000);

​​​​​​​展示如下：

4.14.确认取消框

/*var aa = window.confirm("确认删除吗？");alert(aa);*/if (window.confirm("确认关闭窗口吗？")) {alert("真的关闭了哦");window.close();} else {alert("又不关了哦");}

展示如下：

4.15.抓取节点的几种方式

AAAAAdivdiv
pname1pname1pname1
pname2pname2pname2
cl1111class1class1
cl222class1class1
cl3333class1class1
cl444444ss1class1
/*页面加载事件打开页面 加载完主体部分就会加载该 事件 */window.onload = function() {var divId = document.getElementById("d1");//alert(divId.innerHTML);// 查看该节点 页面上显示的内容// 通过标签名称 拿到节点比如 p 标签var pEles = document.getElementsByTagName("p");for (var i = 0; i < pEles.length; i++) {//alert(pEles[i].innerHTML);}/*通过name 拿到元素的节点*/var psEles = document.getElementsByName("ps");for (var i = 0; i < psEles.length; i++) {//alert(psEles[i].innerHTML);}/*通过class 拿到元素的节点*/var paEles = document.getElementsByClassName("pa");for (var i = 0; i < paEles.length; i++) {alert(paEles[i].innerHTML);}}

展示如下

4.16.通过关系获得节点

aa1
aa2
aa3
window.onload = function() {var divEle = document.getElementById("d1");/*获取第一个元素的子节点*/var p1Ele = divEle.firstElementChild;//alert(p1Ele.innerHTML);/*获取最后一个元素的子节点*/var lastEle = divEle.lastElementChild;//alert(lastEle.innerHTML);/*先获取第一个节点再获得这个节点的 弟弟节点*/var nextEle = divEle.firstElementChild.nextElementSibling;//alert(nextEle.innerHTML);/*它的哥哥节点|上一个节点*/var preEle = divEle.lastElementChild.previousElementSibling;alert(preEle.innerHTML);}

​​​​​​​展示如下：