前端基础知识复习（html）

html5 新特性

一 语义化标签

语义化标签.png

二 新增属性

三 增强型表单

html5修改一些新的input输入特性，改善更好的输入控制和验证

html5新增了五个表单元素

html5新增表单属性

四 视频和音频

// 视频
<video src="" controls></video>
// 音频
<audio controls>
    <source src=""></source>
</audio>

Audio/Video 属性

五 canvas

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">


<script>
var canvas=document.getElementById("myCanvas");
// 创建canvas对象  getContext("2d")对象时内建的html5对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
var ctx=canvas.getContext("2d");   
// 绘制的矩形的背景色
ctx.fillStyle="#FF0000";
// 绘制矩形的大小 fillRect(x,y,width,height)          
ctx.fillRect(0,0,150,75);
// 把一张图绘制到canvas drawImage(image,x,y)
var img=document.getElementById("scream");
ctx.drawImage(img,10,10)
</script>

六 拖放 API

<style type="text/css">
#div1, #div2
{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<script>
function allowDrop(ev){
        /*
         * 默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
        */
    ev.preventDefault();
}

function drag(ev){
        /*
         *  拖动什么 - ondragstart 和 setData()
         *  dataTransfer.setData() 方法设置被拖数据的数据类型和值：
         * Text 是一个 DOMString 表示要添加到 drag object 的拖动数据的类型。值是可拖动元素的 id ("drag1")。
        */ 
      ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev){
        /*
        * 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
        * 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
        */
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}
</script>

七 Web Storage

WebStorage是HTML新增的本地存储解决方案之一，但并不是取代cookie而指定的标准，cookie作为HTTP协议的一部分用来处理客户端和服务器的通信是不可或缺的，session正式依赖与实现的客户端状态保持。WebSorage的意图在于解决本来不应该cookie做，却不得不用cookie的本地存储。

websorage拥有5M的存储容量，而cookie却只有4K，这是完全不能比的。

客户端存储数据有两个对象，其用法基本是一致。

localStorage：没有时间限制的数据存储

sessionStorage:在浏览器关闭的时候就会清除。

    localStorage.setItem(key,value);//保存数据
    let value = localStorage.getItem(key);//读取数据
    localStorage.removeItem(key);//删除单个数据
    localStorage.clear();//删除所有数据
    let key = localStorage.key(index);//得到某个索引的值

八 WebSocket

文章参考
https://www.cnblogs.com/binguo666/p/10928907.html