HTML5知识梳理

一、属性篇

1、placeholder 提示信息

 <input type="text" placeholder="请输入账号">
 <input type="password" placeholder="请输入密码">

2、input 的新type属性 在form表单下的Calendar类 标有New的是html5新增加

H5新增加的input属性大多数浏览器都不支持（除了Chrome）所以基本不适用，附带一张仅供参考的兼容图。

3、contenteditable （内容可编辑）-- 无兼容性问题 该属性可以被子元素继承 默认值为flase

<div contenteditable="true">我可以被修改
    <br>
    <span>我也可以被修改 因为我继承的父级</span>
</div>

4、draggable （被拖拽元素）

<div class="demo" draggable="true"></div> 
<!-- 兼容性 chrome safari 可以正常使用  Firefox 不好使-->
 <!-- 拖拽的声明周期，拖拽的组成
    1、拖拽开始 拖拽进行中 拖拽结束 
    2、按下物体的瞬间是不会触发事件的 
  --> 

1）被拖拽的物体上的事件：ondragstart，ondrag，ondragend

var dragDiv = document.getElementsByClassName('demo')[0];
         // 用户开始拖动元素触发
         dragDiv.ondragstart = function(e){
   
             console.log(e);
         } 
         // 物体正在拖拽中触发  
         dragDiv.ondrag = function(e) {
   
            console.log(e);
        } 
        // 用户拖拽元素结束触发 
        dragDiv.ondragend = function (e) {
   
            console.log (e);
        }

下面代码实现一个拖拽的小demo

    var dragDiv = document.getElementsByClassName('demo')[0];
    var beginX = 0;
    var beginY = 0;
        dragDiv.ondragstart = function (e) {
   
            beginX = e.clientX;
            beginY = e.clientY;
        }
        dragDiv.ondragend = function (e) {
   
            var x = e.clientX - beginX;
            var y = e.clientY - beginY;
            dragDiv.style.left = dragDiv.offsetLeft + x + 'px';
            dragDiv.style.top = dragDiv.offsetTop + y + 'px';
        }

2）目标区域上的事件 ondragenter ondragover ondragleave ondrop

<div class="box" draggable="true"></div>
<div class="target"></div>
<script>
    var targetDiv = document.getElementsByClassName("target")[0]
    targetDiv.ondragenter = function(e){
   
        // 并不是元素图形进入目标区域触发，而是拖拽的鼠标进入目标区域触发
        console.log(e)
    }
    targetDiv.ondragover = function(e){
   
        // 鼠标进入目标区域时不停触发
        console.log(e)
        // e.preventDefault();
    }
    targetDiv.ondragleave = function(e){
   
        // 离开目标区域触发
        console.log(e)
    }
    targetDiv.ondrop = function(e){
   
        // 当鼠标在目标区域松开时 想要在目标区域用ondrop，需要取消ondragover的默认事件
        // 所有标签元素，当拖拽周期结束时，默认事件时是回到原处
        // 事件是由行为触发的，但是一个行为可以不止触发一个事件
        // ondrapover --> 回到原处  --> 执行drop
        console.log(e)
    }
</script>

二、标签篇

1、语义化标签

<!-- 本质都是div只不过是名字不同 具有不同含义而已 -->
<header></header> <!--头部-->
<footer></footer> <!--尾部-->
<nav></nav> <!-- 导航栏 -->
<article></article> <!-- 文章，可以被直接引用 -->
<section></section> <!-- 段落 -->
<aside></aside><!-- 侧边栏，几乎不用 -->

2、canvas标签 --画板

• 1、HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。
• 2、 标签只是图形容器，您必须使用脚本来绘制图形。
• 3、若想书写canvas代码有提示的话 可以在前面加上
  /** @type {HTMLCanvasElement} */
  （1）创建一个画布

<canvas id="cav" width="300px" height="200px" style="border: 1px solid red;"></canvas> 
//注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.

（2）使用 JavaScript 来绘制图像
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

<script>
        var canvas = document.getElementById('cav');
        var cxt = canvas.getContext("2d");   
        cxt.moveTo(100,100);   //定义起点位置
        cxt.lineTo(200,100);   //定义落点位置
        cxt.lineTo(200,200);
        cxt.closePath();    //自动闭合 只针对某一个路径一笔画出的图形才有用
        cxt.stroke();       // 绘画路径
        cxt.fill();         //  填充路径
     </script>

（3）案例： 使用canvas绘画矩形的几种不同方法
1、使用线条绘画

  <script>
         var canvas = document.getElementById('cav');
         var cxt = canvas.getContext('2d');
         // 用线绘画矩形 
         cxt.lineWidth = 10; //设置线的粗细
         cxt.moveTo(100,100);
         cxt.lineTo(300,100);
         cxt.lineTo(300,200);
         cxt.lineTo(100,200);
         cxt.closePath();
         cxt.stroke();
         cxt.fill();
    </script>

2、 使用rect() 方法

cxt.rect(100,100,200,100);  
// 四个参数分别为 起点横坐标 纵坐标 矩形的长度 矩形的宽度
cxt.stroke(); 

3、使用strokeRect() 方法

cxt.strokeRect(100,100,200,100); //一行代码就可以绘制

4、 fillRect()方法是绘制一个填充的矩形

cxt.fillRect(100,100,200,100);

（4）用canvas画图
1、画个圆

<script>
    /** @type {HTMLCanvasElement} */
    var canvas = document.getElementById('cav');
    var ctx = canvas.getContext('2d');
    <