h5复习笔记

HTML提升

语义标签

常见语义标签

• header 头部
• nav 导航
• article 主体内容
• aside 侧边栏
• section 片段 区块
• footer 底部

语义化标签兼容性

• 语义化标签在IE9以下不支持
• 使用html5shiv插件可以解决，使用方法如下

表单类型

常用类型

• search
• email
• url
• number
• date

表单属性

常用表单属性

• form

  • autocomplete 设置整个表单是否开启自动完成 on|off
  • novalidate 设置H5的表单校验是否工作 true 不工作 不加该属性代表校验

• input:

  • autocomplete 单独设置每个文本框的自动完成
  • autofocus 设置当前文本域页面加载完了过后自动得到焦点
  • placeholder 文本框占位符
  • required 限制当前input为必须的
  • form 属性是让表单外的表单元素也可以跟随表单一起提交

JAVASCRIPT提升

DOM扩展

获取元素

document.getElementsByClassName ('class'); 
//通过类名获取元素，以伪数组形式存在。

document.querySelector('selector');
//通过CSS选择器获取元素，符合匹配条件的第1个元素。

document.querySelectorAll('selector'); 
//通过CSS选择器获取元素，以伪数组形式存在。

类名操作

Node.classList.add('class'); 
//添加class

Node.classList.remove('class'); 
//移除class

Node.classList.toggle('class'); 
//切换class，有则移除，无则添加

Node.classList.contains('class'); 
//检测是否存在class

自定义属性

在HTML5中我们可以自定义属性，其格式如下data-*=""

课程总结

• 能够使用过渡转换动画实现宣传页一类型的需求。
• 在使用HTML5语义标签，表单类型，表单属性的时候，遇见新的不要太惊讶，因为它可能做了更新。
• HTML5新增API，提高在应用开发过程中的效率

扩展内容

拖拽上传

拖拽事件

• 拖拽元素
  • ondrag 应用于拖拽元素，整个拖拽过程都会调用
  • ondragstart应用于拖拽元素，当拖拽开始时调用
  • ondragleave应用于拖拽元素，当鼠标离开拖拽元素时调用
  • ondragend应用于拖拽元素，当拖拽结束时调用
• 目标元素
  • ondragenter应用于目标元素，当拖拽元素进入时调用
  • ondragover应用于目标元素，当停留在目标元素上时调用
  • ondrop应用于目标元素，当在目标元素上松开鼠标时调用
  • ondragleave应用于目标元素，当鼠标离开目标元素时调用

上传代码

    
    
    


拖放图片到该区域