多种事件使用----

复习:2024-1-20

一、html部分

1.图片标签:

这里本来有一张图片
src:路径
alt:展示不出来的时候显示的内容
title:鼠标悬浮的内容
width:宽度--注意百分比的情况
height:高度

2.跳转:

a标签:

做跳转,页面间跳转

三种跳转:

2.1 页面间链接

由一个页面跳转到另外的页面,可以是本页面,也可以是别人网站的页面。

百度一下
千锋
    href:目标文件路径
    target:目标文件的打开位置
​
需要跳转的文本

2.2锚链接 -- anchor

先设计一个锚点

再使用#跳转到指定锚点

锚点不一定必须是a标签,如果你用a标签做锚点,name属性就可以跳转

如果是其他标签做锚点,需要用id属性

2.3功能性链接

比如我们点击超链接打开一个QQ

联系客服

3.热点图片(map定义图像映射)

img:

usermap ="map名字"

map:名字

map+img
    img:usemap = #map的name
    map:name
         
    
audio
video
   src,controls,muted,autoplay,loop,source

带有可点击的区域的图像映射:
   
    
        
               
        
         
        
        

4.视频和音频的插入

4.1插入音频:

循环播放:loop

自动播放: autoplay 需要在不打扰其他人的前提下

静音: muted

设计模式有(23种):1.多例2.单例。。。。

source:为了适应浏览器设计的标签


    
    
    
    
    

4.2插入视频

 
    
    
    

5.表格

5.1:table+tr+td

表格的特点:宽相等,高平齐




    
    
    Document
    


    
        
                        
            
        
        
            
                       
        
        
            
        
    

练习;



​

    
    
    表格练习
​

​

    
    
        
            
            
            
            
        
        
            
            
​
            
        
        
            
            
​
​
        
        
            
            
            
            
        
​
​
​
​
​
    
11121343
212224
3132
41424344

6.表单(重点背下来)

表单:前端往后端发送数据的

背:

掌握十种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:多行文本域
​

二、css部分

2.1.属性的运用

三、js部分

面试题:

1.输入一个正整数,把这个数分解因数:

如:90 = 2 * 3 * 3 * 5



​

    
    
    面试题
    

​

​

​

​

2.有一个小球从1000米高空掉下,每次落地后反弹高度的一半,(不考虑小数),问当小球反弹

   

3.1-1000这些数里面一共有多少5的因子。

1.父级元素设置z-index=0和不设置的区别:

是否创建层叠上下文。

渐变:

2、什么是javascript

如果没有html+css,只要有js

页面的动作。 静态的东西也是由js操作的。

java && javascript

3、javascript的引入

行内

 
     
内部

外部:

注意:一个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--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 二重循环

3.1.数组基本使用

    

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:表单事件

三、事件参数

小练习:

你可能感兴趣的:(html5,javascript)