html-5

最新推荐文章于 2023-12-06 08:40:35 发布

插上翅膀的天空

最新推荐文章于 2023-12-06 08:40:35 发布

阅读量142

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_52848715/article/details/115054412

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

html-5

一、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的新标签，同时设置成块元素（相对麻烦）

<script type="text/javascript">
    var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
    var i= e.length;
    while (i--){
        document.createElement(e[i])
    }  
</script>

（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链接跳转的新窗口

10.2HTML5 新的表单属性

HTML5 的和标签添加了几个新属性.

新属性：

autocomplete
novalidate

新属性：

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height 与 width
list
min 与 max
multiple
pattern (regexp)
placeholder
required
step

文件读取
通过FileReader对象能够实现对本地存储文件的读取，可以使用 File 对象来指定所要读取的文件或数据。其中File对象可以是来自用户在一个 <input>元素上选择文件后返回的FileList 对象，也可以来自由拖放操作生成的DataTransfer。

10.1 FlieList对象

由于HTML5中我们可以通过为表单元素添加multiple属性，因此我们通过<input>上传文件后得到的是一个FileList对象（伪数组形式）。

10.2 FileReader对象

HTML5新增内建对象，可以读取本地文件内容。

通过 new FileReader()实例化一个对象。

使用.readAsDataURL()方法来读取文件，文件读取结果放在result属性中。

1、拖拽元素

ondrag 应用于拖拽元素，整个拖拽过程都会调用
ondragstart 应用于拖拽元素，当拖拽开始时调用
ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用
ondragend 应用于拖拽元素，当拖拽结束时调用
2、目标元素

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

注释

新元素为https://www.runoob.com/html/html5-new-element.html

已移除的元素

以下的 HTML 4.01 元素在HTML5中已经被删除:

插上翅膀的天空

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html-5

html-5一、HTML5概念HTML5并不仅仅只是做为HTML标记语言的一个最新版本，更重要的是它制定了Web应用开发的一系列标准，成为第一个将Web做为应用开发平台的HTML语言。HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用，同时有令人眼花缭乱的css 3，还提供了一些Javascript API，如地理定位、重力感应、硬件访问等，可以在浏览器内实现类原生应用，制作webApp，甚至结合Canvas我们可开发网页版游戏。我们日常讨论的H5其实
复制链接

扫一扫