【无标题】

属性篇

1._input新增type

placeholder
Calendar,date,time,email,url,search
ContentEditable
Draggable
Hidden
Context-menu
Data-Val(自定义属性)

2._contenteditable

3._Drag被拖拽元素

<div draggable="true"></div>
<div class="a" style="width: 100px;height: 100px; border: 1px solid black;" draggable="true"></div>
    <div class="target" style="width: 200px;height: 200px; border: 1px solid black;"></div>
<script type="text/javascript">
         var oDragDiv = document.getElementsByClassName("a")[0];
        oDragDiv.ondragstart=function(e){
            console.log(e)
        }
        oDragDiv.ondrag=function(e){
            console.log(e)
        }
        oDragDiv.ondragend=function(e){
            console.log(e)
        }
        var oDragTarget = document.getElementsByClassName("target")[0];
        oDragTarget.ondragenter = function(e){
            console.log(e)
        }
        var oDragTarget = document.getElementsByClassName("target")[0];
        oDragTarget.ondragenter = function(e){//拖拽的鼠标进入才触发
            console.log(e)
        }
        oDragTarget.ondragover = function(e){//在区域内移动一直触发
            console.log(e)
            e.preventDefault();//阻止默认事件
        }
        oDragTarget.ondragleave = function(e){//离开区域后触发
            console.log(e)
        }
        oDragTarget.ondrop = function(e){
            console.log(e)
        }
    </script>

拖拽生命周期：拖拽开始–拖拽进行中–拖拽结束
拖拽的组成：被拖拽的物体，目标区域
所有的标签元素，拖拽周期结束后，默认回到原处
事件是由行为触发的，但一个行为不止触发一个事件

标签篇

1.语义化标签

什么是语义元素？
语义是指对一个词或者句子含义的正确解释。很多html标签也具有语义的意义，也就是说元素本身传达了关于标签所包含内容类型的一些信息。例如，当浏览器解析到

标签时，它将该标签解释为包含这一块内容的最重要的标题。h1标签的语义就是用它来标识特定网页或部分最重要的标题。

为什么要语义化？
代码结构: 使页面没有css的情况下，也能够呈现出很好的内容结构
有利于SEO: 爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息
提升用户体验： 例如title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活运用。
便于团队开发和维护: 语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。
方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。

2._canvas画线