欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

HTML5学习

程序员文章站 2022-06-12 10:32:51
...

HTML5简介

HTML5并不仅仅只是做为HTML标记语言的一个最新版本,更重要的是它制定了Web应用开发的一系列标准,成为第一个将Web做为应用开发平台的HTML语言。
HTML5定义了一系列新元素,如新语义标签、智能表单、多媒体标签等,可以帮助开发者创建富互联网应用,还提供了一些Javascript API,如地理定位、重力感应、硬件访问等,可以在浏览器内实现类原生应用,甚至结合Canvas我们可开发网页版游戏。
广义概念:HTML5代表浏览器端技术的一个发展阶段。在这个阶段,浏览器呈现技术得到了一个飞跃发展和广泛支持,它包括:HTML5,CSS3,Javascript,API在内的一套技术组合。

语法规范

HTML5在语法规范上也做了比较大的调整,去除了许多冗余的内容,书写规则更加简洁、清晰。
特点:
1、更简洁
2、更宽松,单标签不用写关闭符号,双标签省略结束标签,html、head、body、colgroup、tbody可以完全省略

语义标签

HTML5增加了大量更有意义的语义标签,更有利于搜索引擎或辅助设备理解HTML页面内容。

新增语义标签

  • <nav> 表示导航
  • <header> 表示页眉
  • <footer> 表示页脚
  • <section>表示区块
  • <article> 表示文章 如文章、评论、帖子、博客
  • <aside> 表示侧边栏 如文章的侧栏
  • <figure> 表示媒介内容分组 与 ul > li 做个比较
  • <mark> 表示标记
  • <progress> 表示进度
  • <time> 表示日期

尽量避免全局使用header、footer、aside等语义标签。

浏览器兼容性

在不支持HTML5新标签的浏览器里,会将这些新的标签解析成行内元素(inline)对待,所以我们只需要将其转换成块元素(block)即可使用,但是在IE9版本以下,并不能正常解析这些新标签,但是却可以识别通过document.createElement(‘tagName’)创建的自定义标签,于是我们的解决方案就是将HTML5的新标签全部通过document.createElement(‘tagName’)来创建一遍,这样IE低版本也能正常解析HTML5新标签了。
在开发中我们更多采用的是通过检测IE浏览器的版本来加载三方的一个JS库来解决兼容问题。

<!-- 注意:ie8以下的浏览器不支持h5标签-->
<!--解决办法: 引入html5shiv.js文件-->
<!--  条件注释 只有ie能够识别-->
<!--[if lte ie 8]>
    <script src="html5shiv.min.js"></script>
<![endif]-->

表单

输入类型

  • email 输入email格式
  • tel 手机号码
  • url 只能输入url格式
  • number 只能输入数字
  • search 搜索框
  • range 范围 滑动条
  • color 拾色器
  • time 时间
  • date 日期 不是绝对的
  • –datetime 时间日期
  • month 月份
  • week 星期

表单元素

<datalist> 数据列表,与input 配合使用。

 <input type=”text” list=”sex”>
 <datalist id=”sex”>
     <option>男</option>
     <option>女</option>
     <option>其它</option> 
</datalist>

<******> 生成加密字符串
****** 元素的作用是提供一种验证用户的可靠方法。
****** 元素是**对生成器(key-pair generator)。当提交表单时,会生成两个键,一个是私钥,一个公钥。
私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。

<output> 表示输出
<meter> 表示度量器,不建议用作进度条
<progress> 表示进度条

表单属性

  • placeholder 占位符
  • autofocus 获取焦点
  • multiple 文件上传多选或多个邮箱地址
  • autocomplete 自动完成,用于表单元素,也可用于表单自身(on/off)
  • form 指定表单项属于哪个form,处理复杂表单时会需要
  • novalidate 关闭验证,可用于<form>标签
  • required 必填项
  • pattern 正则表达式 验证表单

表单事件

  • oninput 用户输入内容时触发,可用于移动端输入字数统计
  • oninvalid 验证不通过时触发

多媒体

在HTML5之前,在网页上播放音频/视频的通用方法是利用Flash来播放,但是大多情况下,并非所有用户的浏览器都安装了Flash插件,由此使得处理音频/视频播放变的非常复杂,并且移动设备的浏览器并不支持Flash插件。

音频

标签:<audio>
属性:
- autoplay 自动播放
- controls 是否显不默认播放控件
- loop 循环播放
- preload 预加载 同时设置autoplay时些属性失效

播放格式:
HTML5学习

推荐的兼容写法:

 <audio controls loop autoplay>
    <source src="music/yinyue.mp3">
    <source src="music/yinyue.ogg">
    <source src="music/yinyue.wav">
    抱歉,你的浏览器不支持改功能,请升级浏览器!
</audio>

视频

标签:<video>
属性:
- autoplay 自动播放
- controls 是否显示默认播放控件
- loop 循环播放
- preload 预加载,同时设置了autoplay,此属性将失效
- width 设置播放窗口宽度
- height 设置播放窗口的高度

支持播放的格式:
HTML5学习

推荐的兼容写法:

<video controls autoplay>
    <source src="video/movie.mp4">
    <source src="video/movie.ogg">
    <source src="video/movie.webm">
    抱歉,浏览器不支持该功能!
</video>

DOM扩展

获取元素

1、document.getElementsByClassName (‘class’) 通过类名获取元素,以类数组形式存在。
2、document.querySelector(‘div’) 通过CSS选择器获取元素,符合匹配条件的第1个元素。
3、document.querySelectorAll(‘selector’) 通过CSS选择器获取元素,以类数组形式存在。

类名操作

1、Node.classList.add(‘class’) 添加class
2、Node.classList.remove(‘class’) 移除class
3、Node.classList.toggle(‘class’) 切换class,有则移除,无则添加
4、Node.classList.contains(‘class’) 检测是否存在class
Node指一个有效的DOM节点,是一个通称。

自定义属性

  • 格式:data-*=”“,例如data-info=”我是自定义属性”。
  • 取值:通过Node.dataset[‘info’] 我们便可以获取到自定义的属性值。Node.dataset是以类对象形式存在的。
  • 注意事项:当我们如下格式设置时,则需要以驼峰格式才能正确获取。
  • 案例:data-my-name=”zhangsan”,获取Node.dataset[‘myName’]

新增API

多媒体

方法:load() 加载、play() 播放、pause() 暂停
属性:
- currentTime 视频播放的当前进度
- duration:视频的总时间
- paused:视频播放的状态

事件:
- oncanplay: 事件在用户可以开始播放视频/音频(audio/video)时触发。
- ontimeupdate:通过该事件来报告当前的播放进度.
- onended:播放完时触发

全屏:video.webkitRequestFullScreen();

拖拽

在HTML5的规范中,我们可以通过为元素增加draggable=”true”来设置此元素是否可以进行拖拽操作,其中图片、链接默认是开启的。

拖拽元素:页面中设置了draggable=”true”属性的元素。
目标元素:页面中任何一个元素都可以成为目标元素。
事件监听:
- 拖拽元素
- ondrag 应用于拖拽元素,整个拖拽过程都会调用
- ondragstart 应用于拖拽元素,当拖拽开始时调用
- ondragleave 应用于拖拽元素,当鼠标离开拖拽元素时调用
- ondragend 应用于拖拽元素,当拖拽结束时调用
- 目标元素
- ondragenter 应用于目标元素,当拖拽元素进入时调用
- ondragover 应用于目标元素,当停留在目标元素上时调用
- ondrop 应用于目标元素,当在目标元素上松开鼠标时调用
- ondragleave 应用于目标元素,当鼠标离开目标元素时调用

历史

window.history,对象我们可以管理历史记录,可用于单页面应用,Single Page Application,可以无刷新改变网页内容。

地理定位

获取用户地理信息的API,这样使得可以基于用户位置开发互联网应用,即基于位置服务 (Location Base Service)。

获取地理信息方式

1、IP地址
2、三维坐标
- GPS
- Wi-Fi
- 手机信号

3、用户自定义数据

HTML5学习

隐私

HTML5 Geolocation(地理位置定位) 规范提供了一套保护用户隐私的机制。必须先得到用户明确许可,才能获取用户的位置信息。

API

navigator.getCurrentPosition(successCallback, errorCallback, options) 获取当前地理信息。
navigator.watchPosition(successCallback, errorCallback, options) 重复获取当前地理信息。
1、当成功获取地理信息后,会调用succssCallback,并返回一个包含位置信息的对象position。
- Coords(坐标)
- position.coords.latitude纬度
- position.coords.longitude经度

2、当获取地理信息失败后,会调用errorCallback,并返回错误信息error
3、可选参数 options 对象可以调整位置信息数据收集方式

Web存储

h5中提供两种web存储方式 :
- window.sessionStorage,session(会话,会议) 5M 当窗口关闭是数据销毁 内存
- window.localStorage,20M 永久生效 ,除非手动删除 清理垃圾 硬盘上

特性

1、设置、读取方便
2、容量较大,sessionStorage约5M、localStorage约20M
3、只能存储字符串,可以将对象JSON.stringify() 编码后存储

window.sessionStorage
1、生命周期为关闭浏览器窗口
2、在同一个窗口下数据可以共享

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

方法

  • setItem(key, value) 设置存储内容
  • getItem(key) 读取存储内容
  • removeItem(key) 删除键值为key的存储内容
  • clear() 清空所有存储内容
  • key(n) 以索引值来获取存储内容

全屏

HTML5规范允许用户自定义网页上任一元素全屏显示。
requestFullscreen() 开启全屏显示
cancleFullscreen() 关闭全屏显示

var docElm = document.documentElement;
if (docElm.requestFullscreen) {
   docElm.requestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
   docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
   docElm.webkitRequestFullScreen();
}

网络状态

window.online用户网络连接时被调用
window.offline用户网络断开时被调用

    window.addEventListener('online',function () {
        alert('网络连接已建立!');
  });
    window.addEventListener('offline',function () {
        alert('网络连接已断开!');
    });

应用缓存

HTML5中我们可以轻松的构建一个离线(无网络状态)应用,只需要创建一个cache manifest文件。

优势

1、可配置需要缓存的资源
2、网络无连接应用仍可用
3、本地读取缓存资源,提升访问速度,增强用户体验
4、减少请求,缓解服务器负担

缓存清单

一个普通文本文件,其中列出了浏览器应缓存以供离线访问的资源,推荐使用.appcache为后缀名,添加MIME类型。
例如创建了一个名为demo.appcache的文件,然后在需要应用缓存在页面的根元素(html)添加属性manifest=”demo.appcache”。

manifest文件格式

1、顶行写CACHE MANIFEST
2、CACHE: 换行 指定我们需要缓存的静态资源,如.css、image、js等
3、NETWORK: 换行 指定需要在线访问的资源,可使用通配符
4、FALLBACK: 当前页面无法访问时退回的页面(回退;  后退)

其它

1、CACHE: 可以省略,这种情况下将需要缓存的资源写在CACHE MANIFEST
2、可以指定多个CACHE: NETWORK: FALLBACK:,无顺序限制
CACHE:需要缓存那些资源.
NETWORK:不需要缓存那些资源,必须在网络下面才能访问.
FALLBACK:当访问不到某个资源时,自动由另外一个资源替换.
3、#表示注释,只有当demo.appcache文件内容发生改变时或者手动清除缓存后,才会重新缓存。
4、chrome 可以通过chrome://appcache-internals/工具和离线(offline)模式来调试管理应用缓存