复习：2024-1-20
一、html部分
1.图片标签：
<img src="路径" > <img src="../imgs/tu.jpg" alt="这里本来有一张图片" title="这是一张风景图" width="100%" height="100%"> src:路径 alt:展示不出来的时候显示的内容 title:鼠标悬浮的内容 width:宽度--注意百分比的情况 height:高度
2.跳转：
a标签：
做跳转，页面间跳转
三种跳转：
2.1 页面间链接
由一个页面跳转到另外的页面，可以是本页面，也可以是别人网站的页面。
<a href="http://www.baidu.com" target="_blank">百度一下</a> <a href="http://www.qfedu.com" target="_self">千锋</a>href:目标文件路径target:目标文件的打开位置 <a href="路径">需要跳转的文本</a>
2.2锚链接 -- anchor
先设计一个锚点
再使用#跳转到指定锚点
锚点不一定必须是a标签，如果你用a标签做锚点，name属性就可以跳转
如果是其他标签做锚点，需要用id属性
2.3功能性链接
比如我们点击超链接打开一个QQ
<a href="tencent://message?uin=qq号">联系客服</a>
3.热点图片（map定义图像映射）
img:
usermap ="map名字"
map:名字
map+imgimg:usemap = #map的namemap:name<area shape="rect/circle/poly" coords="坐标" href="这个形状对应的资源路径"> audio videosrc,controls,muted,autoplay,loop,source
带有可点击的区域的图像映射：<img src="图片路径" alt="" ,usemap="地图名"><map name="地图名"><area share="rect" coords="像数值" href="跳到那个页面"><area share="rect" coords="10,208,155,338" href="http://baidu.com"><area share="ricle" coords="10,208,155,338" href="http://baidu.com"><area share="poly" coords="10,208,155,338" href="http://baidu.com"> </map>
4.视频和音频的插入
4.1插入音频：
循环播放：loop
自动播放： autoplay 需要在不打扰其他人的前提下
静音： muted
设计模式有（23种）：1.多例2.单例。。。。
source:为了适应浏览器设计的标签
<body><!-- 一定要加控制器 controls--><!-- 循环播放 --><audio src="../../../../html/img/yw.mp3" controls loop></audio><!--自动播放 --><audio src="../../../../html/img/yw.mp3" controls autoplay </audio><!-- 静音播放 --><audio src="../../../../html/img/yw.mp3" controls muted></audio></body> 多列模式：<!-- 模拟音乐播放器模式 --><p>我的楼兰</p> //循环播放这首歌<audio controls loop><source src="muszic.ogg"><source src="muszic.mp3"><source src="muszic.mp3"></audio>
4.2插入视频
<!-- 插入视频 需要设置宽高，不然视频不适用看不到--><video src="../../../../html/img/hongfenghu.mp4" controls loop></video><!-- 指定播放器 --><video controls loop><source src="../../../../html/img/hongfenghu.mp4"><source src="../../../../html/img/hongfenghu.mp4"><source src="../../../../html/img/hongfenghu.mp4"></video>
5.表格
5.1：table+tr+td
表格的特点：宽相等，高平齐
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>td{width: 10px;height: 10px;background-color: bisque;border: 1px solid red;}td:hover{background-color: blueviolet;}</style>
</head>
<body><table align="center" border="1" cellspacing="0" cellpadding="3px"><tr><td colspan="2"></td> <td rowspan="2"></td></tr><tr><td rowspan="2"></td><td></td> </tr><tr><td colspan="2"></td></tr></table>
</body>
</html>
练习;
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格练习</title> </head> <body><!-- colspan="2"：占用2个列 rowspan:占用2行--><table align="center" border="1" cellspacing="0" cellpadding="3px"><tr><td>11</td><td>12</td><td>13</td><td>43</td></tr><tr><td>21</td><td colspan="2" rowspan="2">22</td> <td>24</td></tr><tr><td>31</td><td colspan="2">32</td> </tr><tr><td>41</td><td>42</td><td>43</td><td>44</td></tr> </table> </body> </html>
6.表单(重点背下来)
表单：前端往后端发送数据的
背：
掌握十种input表单形式，还要掌握select,textarea。
form action:提交的后台地址method:get/post 请求提交的方法 get:参数传递是放在地址栏上通过url传送，不安全，有长度限制post:参数通过请求体发送，相对安全input:type:text,password,radio,checkbox,submit,button,reset,image,file,hiddenname:传递数据value:值placeholder,required,readonly,disabled,checked....button:自带提交的按钮select~optiontextarea:多行文本域
二、css部分
2.1.属性的运用
三、js部分
面试题：
1.输入一个正整数，把这个数分解因数：
如：90 = 2 * 3 * 3 * 5
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>面试题</title><script>// 1.输入一个正整数，把这个数分解因数：// 如： 90 = 2 * 3 * 3 * 5// 输入数据用num接var num = prompt();//打印numdocument.write(num + "=");// 从2开始分解var i = 2;while (true) {// 判断当前i能不能分解if (i % num == 0) {// 打印出i这个因子document.write(i + "*");num /= i;} else {// i不是因数i++;}// 判断是否该退出if (num = i) {document.write(i);break;}}</script>
</head>
<body>
</body>
</html>
2.有一个小球从1000米高空掉下，每次落地后反弹高度的一半，（不考虑小数），问当小球反弹
<script>// <!-- 2.有一个小球从1000米高空掉下，每次落地后反弹高度的一半，// 不考虑小 数）， 问当小球反弹一共经历了多少米 路程？ 用代实现-- >
// 方法：首尾只算一次// 总高度1000米var h = 1000;// 第一次下落的路程var sum = h / 2;// 判断高度超过10while (h >= 10) {h = parseInt(h / 2);sum += h * 2;
}// 最后一次高度一半sum -= h;console.log(sum, h);</script>
3.1-1000这些数里面一共有多少5的因子。
1.父级元素设置z-index=0和不设置的区别：
是否创建层叠上下文。
渐变：
2、什么是javascript
如果没有html+css，只要有js
页面的动作。 静态的东西也是由js操作的。
java && javascript
3、javascript的引入
行内
<button οndblclick="javascript:alert('点什么点')">点我</button>
内部
<script>//js代码alert("我是内部js");
</script>
外部：
<script src="../js/common.js" type="text/javascript"></script>
注意：一个script标签要么引入外部js，要么写内部js。
4、变量
在程序运行过程中，我们有一些中间数据需要存储，这时候我们就要用到变量。
变量就是一个符号，容器。
变量使用三步骤：
定义变量，赋值，使用。
var/let/const
var n ;//声明
n = 3;//赋值
console.log(n);//使用
var n=8; console.log(n); n = 80; console.log(n); js中数据的类型：基本：数值（整数+小数 - number），字符串（string）,boolean,undefined,null引用：对象，数组var n ;n=8;console.log(typeof n); n = n+1; console.log(n);console.log(typeof(n));var n ;n="张";console.log(typeof n); n = n+"三"; console.log(n);console.log(typeof(n)); var flag = false;//ture--flaseconsole.log(flag);console.log(typeof(flag));flag = true;console.log(flag);console.log(typeof(flag)); //undefinedvar n;console.log(n);console.log(typeof(n)); var n=null;console.log(n);console.log(typeof(n)); 要注意：js中变量不光是值能变，类型也能变。var n = 8;console.log(n);//8console.log(typeof n);//numbern = n+"1";console.log(n);//"9"console.log(typeof n);//stringn = true;console.log(n);//trueconsole.log(typeof n);//booleann = null;console.log(n);//nullconsole.log(typeof n);//object 练习：请用变量保存您的个人信息：姓名，年龄，性别，电话号码，邮箱，个人爱好，一次性输出到控制台
5、运算符
=,+=,-=,*=,/==： 把右边的值赋给左边的变量var n = 8；n += 8; ==> n = n+8;
+，-，*，/,% ++ --var n = 8;console.log(n+1);//9console.log(n+'1');//81var a = "a";console.log(a+1);//a1var a = "6";console.log(a-1);//5console.log(a-'1'+3);//8
NaN:not a numberconsole.log(8/4);//2console.log(8/3);//2.66665console.log(8/0);//infiniteconsole.log(0/0);//NaN
console.log(10%3);//1console.log(10.3%4.2);//1.9
var a = 6;console.log(a++);//6 a= a+1 console.log(++a);//8
> ,<,>=,<=,== ,!= ,=====:仅仅比较值是否相等===：比较的是值和类型是否相等console.log(6==="6");//falseconsole.log(6>50);//falseconsole.log(6>"50");//false//如果是两个字符串比较大小，从高位一位一位的比较console.log("6">"50");//true//如果要用数值的形式比较字符的大小，需要把字符串转为数字console.log(parseInt("6")>"50");//falseconsole.log((6<8)+3);//4
&&,||,!&&：两者都为真结果为真--短路的条件是第一个表达式为假||：有一个表达式为真结果为真--短路的条件是第一个表达式为真var a = 5;console.log(6<8||a++<6);//false -- 短路与 --短路或console.log(a);//5
?:
表达式？表达式为真取这个值：表达式为假取这个值；var gender=false;console.log(gender?"男":"女");
运算符的优先级：算术>关系>赋值练习：定义一个四位的整数1234，计算这个数的各位和是多少？ 10
6、输入输出
数据进入到程序---程序在内存输入：控制台---仅仅用于程序员自己调试页面输入---- input的id属性注意：id属性的名字不要与变量冲突弹框输入：Prompt输出：控制台---console.log()alert();--程序员调试页面输出---- span,div -- innerText,innerHTMLinput --- valuedocument.write();//输出到页面--新页面
7、条件语句
if(条件-boolean值){//条件成立就执行这个代码
}else if(boolean){//条件成立就执行这个代码 }
....
else{//前面所有的条件都不成立执行这里
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>function calc(){var s = score.value;if(s>=90){res.innerText = "优秀";}else if(s>=80){res.innerText = "良好";}else if(s>=60){res.innerText = "及格";}else{res.innerText = "不及格";}}</script>
</head>
<body><input type="text" id = "score"><br><button οnclick="calc()">计算结果</button><span id="res"></span>
</body>
</html>作业：1、猜数游戏
//1、初始化页面猜数的输入框和猜数按钮不可用 //2、点击开始按钮自己不能继续点，猜数的输入框和猜数按钮可用生成一个随机数，让用户猜 10000 //3、显示结果 //4、继续玩
2、完成一个3D彩票游戏。
买彩票的逻辑：把用户的选择（直选，组选，数字）保存起来即可用户输入数据后判断是不是豹子，可以使用onblur（失去焦点）
8、循环结构:重复的完成一件事
8.1 for:循环次数固定的情况
8.2 while：循环次数不固定
var i = 1;//初始化循环变量while(i<=100){//条件console.log(666);i++;//迭代}
8.3 循环控制:
continue---继续 --
本次循环终止，继续下一次循环
break---退出 ---
终止循环:
8.4 二重循环
3.1.数组基本使用
<script>//数组的使用：var name = ["张三", "李四", "王五"];// 下标为4的地方添加莫要他// 增name[4] = "莫要他";name[6] = "张天爱";
// 删 删除最后一个元素---删除的元素有返回值// 改names[5] = name;// 输出names数组的长度console.log(names.length);var name = names.pop();//查
for (var i = 0; i < names.length; i++) {// 打印下标和所有数组console.log(i, names[i]);}//splice(0);一个全搞定增删、改查names.splice(0);</script>
splice用法:
3.2.二维数组:
3.3.函数概念:
3.4.定时器:
3.5.节点访问
4.事件
在什么时候做什么事，怎么做？
事件分类：
一、鼠标事件
4.1.1点击事件
4.1.2.双击事件
4.1.3.悬浮事件
3.1onmouseover和onmouseout：
3.2onmouseenter和onmouseleave：
4.1.4.onfocus:获取焦点
onblur:移除焦点
onmousemove：移动焦点（鼠标跟随）
onmousedown:按下鼠标
onmouseup:抬起鼠标
二、键盘事件
4.2.1keydown:键盘按下
4.2.2keyup:键盘抬起
4.2.3keypress:键盘按压下去产生字符
4.2.4 onload：加载事件
4.2.5 onchange:表单事件
三、事件参数
小练习：
)
带来透明度)
