查看: 914|回复: 0

HTML5学习总结


18-8-25 11:26:13 | [复制链接]

2

主题

8

帖子

47

积分

菜鸟

Rank: 1

发表于 18-8-25 11:26:13 | 显示全部楼层 |阅读模式
HTML5学习总结
一、HTML5概念
HTML5并不仅仅只是做为HTML标记语言的一个最新版本,更重要的是它制定了Web应用开发的一系列标准,成为第一个将Web做为应用开发平台的HTML语言。
HTML5定义了一系列新元素,如新语义标签、智能表单、多媒体标签等,可以帮助开发者创建富互联网应用,同时有令人眼花缭乱的css 3,还提供了一些Javascript API,如地理定位、重力感应、硬件访问等,可以在浏览器内实现类原生应用,制作webApp,甚至结合Canvas我们可开发网页版游戏。
我们日常讨论的H5其实指的是一个泛称,它是由HTML5 + CSS3 + Javascript等技术组合而成的一个应用开发平台。
HTML5绝大部分新增部分都有浏览器兼容性问题,特别注意的是,并不是所有的html5都是IE9就兼容的,有一些属性是需要IE10,等更高级的浏览器才能兼容,而html5更多运用在移动端方面,因为移动端搭载的浏览器比较高级。
二、HTML5新增部分简介1.新增的结构标签
1)header(头部) (2)nav(导航) (3)section(主体) (4)aside(侧边栏) (5)article (内容)(6)footer(底部)
作用:与div一样,只是增加了语义性,便于SEO优化。
拓展:SEO优化可以提升网站在搜索引擎中的排名,在前端实际应用中,我们会更多的去运用语义化标签,同时针对一些特殊的字符,我们运用权重高的标签去包裹网站logo。
兼容性解决:
1)利用document.creatElement()去创建html5的新标签,同时设置成块元素(相对麻烦)

2)借助于第三方的JS框架 =>html5shiv.min.js (推荐)配合IE的hack实现最佳兼容


2.新增的智能表单
2.1 input表单新增了type属性值:
  • type="email" 限制用户输入必须为Email类型
  • type="url" 限制用户输入必须为URL类型
  • type="date" 自动生成一个日期控件
  • type="time" 同上
  • type="month" 同上
  • type="week" 同上
  • type="number" 限制用户输入必须为数字类型
  • type="range" 产生一个滑动条的表单
  • type="search" 产生一个搜索意义的表单
  • type="color" 生成一个颜色选择表单

智能表单在移动端用的比较多,它会调取手机自身的控件。
2.2 表单智能验证
  • required => 验证表单是否为空,必须配合form表单来使用
  • pattern => 自定义验证表单规则,匹配正则
  • invalid => 验证失败的时候触发的事件
  • dom.setCustomValidity() => 自定义弹出的内容 参数:string 自定义的内容

2.3 表单新属性
  • placeholder => 占位文本,体验更加
  • autofocus => 自动获取焦点 dom.focus()
  • autocomplete => 提交一次后下次自动补全 注意:必须提交一次之后,同时必须要有name属性
  • multiple => 配合file控件实现多选
  • form => 配合form表单的id值实现关联,在任意位置都可以被提交,但是不建议这么写

2.4 智能表单过滤(datalist)
类似于搜索提示,输入一个内容会提示相关联的匹配的提示。它是利用表单的list =“datalist的id值”与datalist这个标签取得联系实现的。
2.5 video和audio标签
HTML5中新添了video标签来实现视频的播放而不是借助于flash技术
属性:
  • autoplay =>视频默认加载完成后播放
  • controls =>播放的控件
  • loop =>控制播放循环
  • poster =>在视频没有播放时的预览图片

API:
  • play() => 播放
  • pause() => 暂停
  • load() => 加载

支持的视频格式:
video标签支持3种视频格式:Ogg、MPEG4、WebM,并且各个主流浏览器的支持格式也不一样,如果需要处理兼容性,我们需要借助于source标签来解决(目前仅mp4格式得到完全兼容)。
audio的用法和video一样。
3.js获取元素的新方式
1)document.querySelector('selector') 通过类似CSS选择器获取元素,符合匹配条件的第1个元素。可以传入复合选择器(如:.box li, .box > li input[type=’button’])等
2)document.querySelectorAll('selector') 通过CSS选择器获取元素,以类数组形式存在。可以传入复合选择器(如:.box li, .box > li input[type=’button’])等
4.js操作类名的新方式
  • Node.classList.add('class') 添加class
  • Node.classList.remove('class') 移除class
  • Node.classList.toggle('class') 切换class,有则移除,无则添加
  • Node.classList.contains('class') 检测是否存在class

5.js自定义属性
H5中,我们使用data-=""的格式来自定义属性,可以通过dataset[属性名]来获取到我们的自定义属性的属性值,如果属性名是类似于-的形式,则我们需要使用驼峰命名的形式来获取属性值。
jQuery中我们使用data()方法来获取标签的data属性的属性值。
6.网络状态
window.navigator.onLine:检测用户的网络状态,链接网络时返回true,网络断开时返回false。
window.addEventListener("online",function(){}):网络链接从断开到连接时触发。
window.addEventListener("offline",function(){}):网络链接从连接到断开时触发。
7.地理定位
HTML规范中,增加了获取用户地理信息的API,这样使得我们可以基于用户位置开发互联网应用,即基于位置服务 (Location Base Service)
7.1 获取地理位置的方式
  • IP地址
  • GPS(Global Positioning System,全球定位系统)
  • Wi-Fi
  • 手机信号
  • 用户自定义数据

浏览器会自动以最优方式去获取用户地理信息。
7.2 API详解
navigator.geolocation.getCurrentPosition(successCallback,errorCallback,options)//获取当前位置的地理信息。
navigator.geolocation.watchPosition(successCallback,errorCallback,options)//重复获取当前位置的地理信息。
(1)当成功获取地理信息后,会调用succssCallback,并返回一个包含位置信息的对象position。
获取纬度:position.coords.latitude
获取经度:position.coords.longitude
(2)当获取地理信息失败后,会调用errorCallback,并返回错误信息error
(3)可选参数 options 对象可以调整位置信息数据收集方式:timeout 超时设置,单位为ms
8.web存储
8.1 特性
  • 设置、读取方便
  • 容量较大,sessionStorage约5M、localStorage约20M
  • 只能存储字符串,可以将对象JSON.stringify() 编码后存储

8.2 window.sessionStorage
  • 生命周期为浏览器窗口
  • 不能在多窗口下数据共享,但通过跳转可以

8.3 window.localStorage
  • 永久生效,除非手动删除
  • 可以多窗口共享

8.4 方法详解
  • setItem(key,value)//设置存储内容
  • getItem(key) //获取存储内容
  • removeItem(key) //删除key值的存储内容
  • claer() //清除所有存储内容
  • key(n) //以索引值来获取存储内容

8.5 sessionStorage,localStorage和cookie的区别
区别:
cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。
差异性:
相同点:都是存储数据,存储在web端,并且都是同源
不同点:
  • cookie 只有4K 小 并且每一次请求都会带上cookie 体验不好,浪费带宽
  • session和local直接存储在本地,请求不会携带,并且容量比cookie要大的多
  • session 是临时会话,当窗口被关闭的时候就清除掉 ,而 local永久存在,cookie有过期时间
  • cookie 和local都可以支持多窗口共享,而session不支持多窗口共享 但是都支持a链接跳转的新窗口

9. 全屏显示
requestFullScreen()//开启全屏显示
cancelFullScreen()//退出全屏显示
10. 文件读取
通过FileReader对象能够实现对本地存储文件的读取,可以使用 File 对象来指定所要读取的文件或数据。其中File对象可以是来自用户在一个 <input\>元素上选择文件后返回的FileList 对象,也可以来自由拖放操作生成的DataTransfer。
10.1 FlieList对象
由于HTML5中我们可以通过为表单元素添加multiple属性,因此我们通过<input\>上传文件后得到的是一个FileList对象(伪数组形式)。
10.2 FileReader对象
HTML5新增内建对象,可以读取本地文件内容。
通过 new FileReader()实例化一个对象。
使用.readAsDataURL()方法来读取文件,文件读取结果放在result属性中。
11. 拖拽元素
通过设置元素的draggables属性为true来实现,img和a元素默认可以拖拽。
事件监听:
1、拖拽元素
  • ondrag 应用于拖拽元素,整个拖拽过程都会调用
  • ondragstart 应用于拖拽元素,当拖拽开始时调用
  • ondragleave 应用于拖拽元素,当鼠标离开拖拽元素时调用
  • ondragend 应用于拖拽元素,当拖拽结束时调用

2、目标元素
  • ondragenter 应用于目标元素,当拖拽元素进入时调用
  • ondragover 应用于目标元素,当停留在目标元素上时调用
  • ondrop 应用于目标元素,当在目标元素上松开鼠标时调用
  • ondragleave 应用于目标元素,当鼠标离开目标元素时调用

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

订阅|小黑屋|手机版|千锋教育论坛 ( 京ICP备12003911号-3

GMT+8, 19-12-8 20:31 , Processed in 0.326490 second(s), 41 queries .

Powered by Discuz! X3.2

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表