前端入门之旅——HTML5学习深拷贝：深拷贝是开辟了一个新的栈，两个对象或数组对应两个不同的地址，修改一个对象或数组的属

1，新增标签

页头<header></header>  
页脚<footer></footer>  
导航<nav></nav>  
文章<actical></actical
侧边栏<aside></aside?
节<section></section>  
音频<audio>  
视频<vedio>
画布<canvas>方法：getcontext('2d')创建2d画布 在标签内可以设置长宽且不必加px
* 只有vedio 是行内元素，其他都是块级元素

2，表单

新增表单类型

form

* emile 
  用于判断输入内容是否为邮箱形式；

* number
  用于规范提交内容为数字，有四个属性 mix min step value  

* range
  用于设置数值的输入值在设定区域，有四个属性 mix min step value  

* search
  用于设置搜索域  

* Date pickers (date, month, week, time, datetime, datetime-local)
  Date:<input type="date">  

* url  
 用于设置url地址的输入域，规范提交的内容为地址  
 
* color  
 用于设置提交内容为颜色  

* tel
 用于设置输入框为电话  

* file
 用于设置输入类型为文件，上传文件名及内容
 <input type="file" multiple="multiple" accept=" ">
 accept设置文件内容的文件类型  
multiple 属性为上传多个文件

表单类型回顾

<form action="  ">
    <input type="text">文本  
    <input type="password">密码(不显示)   
    <input type="radio">单选框  
    <input type="submit">提交
    
<\form>

新增表单元素

*datalist 元素  
规定输入域的选项列表
<input type="url" list="url_list" name="link" />
<datalist id="url_list">
    <option label="W3School" value="http://www.W3School.com.cn" />
    <option label="Google" value="http://www.google.com" />
    <option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
id中的内容和list中的内容相等时，选项框与列表相关联，列表选项内容即为选项框的内容

表单元素回顾

<label for=" ">点击</label><input name="" type="radio" id="">
当for与id中的信息相等时点击"点击"时可以选中该单选框

3.音频，视频

1.audio

音频格式 mp3 ogg wav
音频属性

    <audio src="" controls=""></audio>
    src 中表示音频路径 
    controls 供添加播放、暂停和音量控件
    loop 循环播放  
    autoplay 自动播放

2.视频

视频格式
mp4 ogg webm
视频属性

src 中表示音频路径 
    controls 供添加播放、暂停和音量控件
    loop 循环播放  
    autoplay 自动播放
    width 视频可以设置长宽

4.新增获取元素的方法

querymentselector（''）获取第一个元素，可以是类id或标签名
querymentselectorAll（''）获取所有元素是一个类数组

5.设置元素属性的方法

1.ali.key 获取ali.key
2.ali.setAttribute(key,value) 获取 ali.getAttribute(key)
3.在HTML中<p data-index=""> 在JS中ali.dataset.key=value ali.dataset 返回一个对象获取ali.data.key
方法2,3 所设置属性可以在HTML控制台看到

dataset的一个实例————图片懒加载  
<img src="" data-src="">src中存放的是小图片地址，data-src中存放的是真正的图片地址；  
当设置的属性在标签中表示为data-***-***,获取时需要使用驼峰式；

6.浅拷贝和深拷贝（浅克隆和深克隆）

深拷贝和浅拷贝

浅拷贝：浅拷贝是深层次的对象或数组地址的复制，并没有开辟新的栈，也就是复制的结果是两个对象指向同一个地址，修改其中一个对象或数组的属性值，则另一个对象或数组的属性值也会发生改变

var a={name:"kkk"}
  var b=a;
  a.name="kk";
  console.log(b);
  console.log(a);

深拷贝：深拷贝是开辟了一个新的栈，两个对象或数组对应两个不同的地址，修改一个对象或数组的属性，不会改变另一个对象或数组的属性。实现深拷贝的方法：
1.JSON.stringfy()对象转化成字符串
JSON.purse()字符串转化成对象

  var a = {
    name: 'kk',
    age:3
  }
  var b = JSON.stringify(a);
  var c=JSON.parse(b);
  a.name='kkk';
  console.log(c);//kk

2.封装一个方法遍历每一项

var obj={
        name:'xc',
        age:12,
        array:[11,22]
    }
    function deepclone(obj){
        var tmp= Array.isArray(obj)?[]:{};
        if(typeof(obj)==='object')
            for(key in obj){//key in 不仅可以循环对象，还可以循环数组
                if(typeof(obj[key])==='object'){
                    tmp[key]=deepclone(obj[key])
                }
                else {
                    tmp[key]=obj[key];
                }
            }
        else{
            tmp=obj;
        }
    return tmp;
    }
    var p=deepclone(obj);
    obj.age=14;
    console.log(obj);
    console.log(p);

3...扩展运算符

var a = {
        name: 'kk',
        age:3
        }
  var b = {...a};
  a.name='kkk';
  console.log(b);//kk

7.本地存储

cookie
cookie 存储大小为4K 可以设置过期时间，如果不设置关闭浏览器窗口就会消失；
localstorage
可存取数据大小为5M，可永久存储；
sessionstorage
可存取数据大小为5M，浏览器窗口关闭之后就消失，sessionStorage 返回一个对象

设置方法：
localstrooage.name="kkk";
localstorage.setItem("name","kkk");
获取方法：
localstorage.key
localstorage.getItem(key,value)

8，堆和栈

栈(stack)：栈会自动分配内存空间，会自动释放，存放基本类型，简单的数据段，占据固定大小的空间。（基本类型：String，Number，Boolean，Null，Undefined）
堆(heap)： 动态分配的内存，大小不定也不会自动释放，存放引用类型，指那些可能由多个值构成的对象，保存在堆内存中，包含引用类型的变量，实际上保存的不是变量本身，而是指向该对象的指针。（引用类型：Function，Array，Object） alt