属性篇
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标签也具有语义的意义,也就是说元素本身传达了关于标签所包含内容类型的一些信息。例如,当浏览器解析到
为什么要语义化?
代码结构: 使页面没有css的情况下,也能够呈现出很好的内容结构
有利于SEO: 爬虫依赖标签来确定关键字的权重,因此可以和搜索引擎建立良好的沟通,帮助爬虫抓取更多的有效信息
提升用户体验: 例如title、alt可以用于解释名称或者解释图片信息,以及label标签的灵活运用。
便于团队开发和维护: 语义化使得代码更具有可读性,让其他开发人员更加理解你的html结构,减少差异化。
方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等,以有意义的方式来渲染网页。