一，html

1，语义化

2，新特性

（1）绘图:canvas+svg

canvas:通过脚本绘制图形

 <canvas id="myCanvas">你的浏览器不支持 HTML5 canvas 标签。</canvas>
    
    <script>
        var c = document.getElementById('myCanvas');
        var ctx = c.getContext('2d'); //返回对象，该对象上有绘制图形的方法和属性
        ctx.fillStyle = '#FF0000';
        ctx.fillRect(0, 0, 80, 100);
    </script>
1
2
3
4
5
6
7
8

SVG：可缩放矢量图形

 <svg>
       <rect width="200px" height="200px" fill="blue"></rect>
 </svg>
1
2
3

（2）拖拽

<div id="box" ondragover="allowDrage" ondrop="drop"></div>
<img src="./p2869446365.jpg" draggable="true" id="img" ondragstart="dragStart"/>
<script type="text/javascript">
            function dragStart(ev){
                ev.dataTrasfer.setData("Text",ev.target.id)
            }
            function allowDrage(ev){
                ev.preventDeafault();
            }
            function drop(ev){
                ev.preventDeafault();
                var data = ev.dataTrasfer.getData("Text");
                var img = document.getElementById("img");
                ev.targer.appendChild(img);
            }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

（3）音频、视频

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
</video>
1
2
3
4

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
</audio>
1
2
3
4

（4）地理位置

<button id="btn">click</button>
   <script>
    var btn = document.getElementById("btn");
    btn.addEventListener("click",()=>{
        var geoloc = window.navigator.geolocation;
        geoloc.getCurrentPosition(
            (success)=>console.log('success' , success),
            (err)=>console.log('err' , err),
            {timeout:5000}
        )
    })
   </script>
1
2
3
4
5
6
7
8
9
10
11
12

（5）localStorage、sessionStorage、cookie

a, localStorage+sessionStorage

一个5M大小的针对于前端页面的数据库,值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换

//存
var ls = window.localStorage || window.sessionStorage
ls.setItem("key",value)
//取
ls.getItem("key")
//改
ls.key = value
//删全部
ls.clear()
//删某个
ls.removeItem("key")
1
2
3
4
5
6
7
8
9
10
11

b, cookie

https://blog.csdn.net/GoodburghCottage/article/details/125978987