src:路径 alt:展示不出来的时候显示的内容 title:鼠标悬浮的内容 width:宽度--注意百分比的情况 height:高度
a标签:
做跳转,页面间跳转
三种跳转:
由一个页面跳转到另外的页面,可以是本页面,也可以是别人网站的页面。
百度一下 千锋 href:目标文件路径 target:目标文件的打开位置 需要跳转的文本
先设计一个锚点
再使用#跳转到指定锚点
锚点不一定必须是a标签,如果你用a标签做锚点,name属性就可以跳转
如果是其他标签做锚点,需要用id属性
比如我们点击超链接打开一个QQ
联系客服
img:
usermap ="map名字"
map:名字
map+img img:usemap = #map的name map:name audio video src,controls,muted,autoplay,loop,source
带有可点击的区域的图像映射:![]()
循环播放:loop
自动播放: autoplay 需要在不打扰其他人的前提下
静音: muted
设计模式有(23种):1.多例2.单例。。。。
source:为了适应浏览器设计的标签
表格的特点:宽相等,高平齐
Document
练习;
表格练习
11 | 12 | 13 | 43 |
21 | 22 | 24 | |
31 | 32 | ||
41 | 42 | 43 | 44 |
表单:前端往后端发送数据的
掌握十种input表单形式,还要掌握select,textarea。
form action:提交的后台地址 method:get/post 请求提交的方法 get:参数传递是放在地址栏上通过url传送,不安全,有长度限制 post:参数通过请求体发送,相对安全 input: type:text,password,radio,checkbox,submit,button,reset,image,file,hidden name:传递数据 value:值 placeholder,required,readonly,disabled,checked.... button:自带提交的按钮 select~option textarea:多行文本域
1.输入一个正整数,把这个数分解因数:
如:90 = 2 * 3 * 3 * 5
面试题
2.有一个小球从1000米高空掉下,每次落地后反弹高度的一半,(不考虑小数),问当小球反弹
3.1-1000这些数里面一共有多少5的因子。
是否创建层叠上下文。
渐变:
如果没有html+css,只要有js
页面的动作。 静态的东西也是由js操作的。
java && javascript
行内
内部
外部:
注意:一个script标签要么引入外部js,要么写内部js。
在程序运行过程中,我们有一些中间数据需要存储,这时候我们就要用到变量。
变量就是一个符号,容器。
变量使用三步骤:
定义变量,赋值,使用。
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--flase console.log(flag); console.log(typeof(flag)); flag = true; console.log(flag); console.log(typeof(flag)); //undefined var 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);//8 console.log(typeof n);//number n = n+"1"; console.log(n);//"9" console.log(typeof n);//string n = true; console.log(n);//true console.log(typeof n);//boolean n = null; console.log(n);//null console.log(typeof n);//object 练习:请用变量保存您的个人信息: 姓名,年龄,性别,电话号码,邮箱,个人爱好,一次性输出到控制台
5、运算符
=,+=,-=,*=,/= =: 把右边的值赋给左边的变量 var n = 8; n += 8; ==> n = n+8; +,-,*,/,% ++ -- var n = 8; console.log(n+1);//9 console.log(n+'1');//81 var a = "a"; console.log(a+1);//a1 var a = "6"; console.log(a-1);//5 console.log(a-'1'+3);//8 NaN:not a number console.log(8/4);//2 console.log(8/3);//2.66665 console.log(8/0);//infinite console.log(0/0);//NaN console.log(10%3);//1 console.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");//false console.log(6>50);//false console.log(6>"50");//false //如果是两个字符串比较大小,从高位一位一位的比较 console.log("6">"50");//true //如果要用数值的形式比较字符的大小,需要把字符串转为数字 console.log(parseInt("6")>"50");//false console.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,innerHTML input --- value document.write();//输出到页面--新页面
7、条件语句
if(条件-boolean值){ //条件成立就执行这个代码 }else if(boolean){ //条件成立就执行这个代码 } .... else{ //前面所有的条件都不成立执行这里 } Document
作业: 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 二重循环
splice用法:
在什么时候做什么事,怎么做?
事件分类:
3.1onmouseover和onmouseout:
3.2onmouseenter和onmouseleave:
onblur:移除焦点
onmousemove:移动焦点(鼠标跟随)
onmousedown:按下鼠标
onmouseup:抬起鼠标
小练习: