HTML学习笔记（3）：HTML5

October 06, 2021 8272

HTML5的发展

什么是 HTML5

HTML5并不仅仅只是做为HTML标记语言的一个最新版本，更重要的是它制定了Web应用开发的一系列标准，成为第一个将Web做为应用开发平台的HTML语言。

HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用，还提供了一些Javascript API，如地理定位、重力感应、硬件访问等，可以在浏览器内实现类原生应用。我们甚至可以结合Canvas开发网页版游戏。

HTML5的广义概念：HTML5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器的呈现技术得到了飞跃发展和广泛支持，它包括：HTML5、CSS3、Javascript API在内的一套技术组合。因此HTML5不等于 HTML next version。

HTML5是新一代开发Web富客户端应用程序整体解决方案。富客户端即具有很强的交互性和体验的客户端程序。比如说，浏览博客，是比较简单的客户端；一个在线听歌的网站、即时聊天网站就是富客户端。

单纯地从技术的角度讲，兼容性问题只会让开发者徒增烦恼。如果网页端的程序能做到PC客户端的体验，就会对后者构成威胁。

应用场景

HTML5 的几个应用场景：

  • 极具表现力的网页。
  • 网页应用程序：
    • 代替PC端的软件：iCloud、百度脑图、Office 365等。
    • APP端的网页：淘宝、京东、美团等。
  • 微信端：公众号、小程序等。
  • 混合式本地应用。
  • 简单的游戏。

新增内容

HTML5新增的主要内容有：

  • 标签
    • 更语义化的标签
    • 应用程序标签
  • 属性
    • 链接关系描述
    • 结构数据标记
    • ARIA
    • 自定义属性
  • 智能表单
    • 新的表单类型
    • 虚拟键盘适配
  • 网页多媒体
    • 音频
    • 视频
    • 字幕
  • Canvas
    • 2D
    • 3D (WebGL)
  • SVG

HTML5新内容

新增语义标签

HTML5中增加的新标签有：

  • <section>：表示区块。
  • <article>：表示文章。如文章、评论、帖子、博客。
  • <header>：表示页眉。
  • <footer>：表示页脚。
  • <nav>：表示导航。
  • <aside>：表示侧边栏。如文章的侧栏。
  • <figure>：表示媒介内容分组。
  • <mark>：表示标记（不常用）。
  • <progress>：表示进度（不常用）。
  • <time>：表示日期。

本质上新语义标签与<div>、<span>没有区别，只是其具有表意性，使用时除了在HTML结构上需要注意外，其它和普通标签的使用无任何差别，可以理解成<div class=”nav”> 相当于<nav>。

并且注意HTML5中单标签不需要写关闭符号了。

兼容性问题

新标签在不支持HTML5的浏览器中可能出现兼容性问题，解决方式是通过条件语句判断IE版本，然后引入html5shiv.js文件：

1
2
3
4
<!--  条件注释 只有ie能够识别-->
<!--[if lte ie 8]>
    <script src="html5shiv.min.js"></script>
<![endif]-->

在测试IE浏览器的兼容的时候，使用软件ietest，可以模拟IE6-IE11。

表单

input的新类型

传统的Web表单已经越来越不能满足开发的需求，HTML5 在 Web 表单方向做了很大的改进，如拾色器、日期/时间组件等，使表单处理更加高效：

  • email：只能输入email格式。自动带有验证功能。
  • tel：手机号码。
  • url：只能输入url格式。
  • number：只能输入数字。
  • search：搜索框。
  • range：滑动条。
  • color：拾色器。
  • time：时间。
  • date：日期。
  • datetime：时间日期。
  • month：月份。
  • week：星期。

上面的部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中可选择性的使用。

数据列表

即新的表单元素<datalist>数据列表：

1
2
3
4
5
6
<input type="text" list="myData">
<datalist id="myData">
    <option>本科</option>
    <option>研究生</option>
    <option>不明</option>
</datalist>

代码效果：





将输入框input的list属性与数据列表的id绑定，可以给输入框加入下拉菜单提供一些提示值。

keygen元素

keygen 元素的作用是提供一种验证用户的可靠方法。

keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键：一个公钥，一个私钥。

私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

度量器

即新的表单元素<meter>元素，其实就是一个进度条一样的东西，比如可以用它来表示表单的填写进度：

1
<meter value="81" min="0" max="100" low="60" high="80"/>

代码效果：

value是当前值，min是最小值也就是左端点，max是最大值也就是右端点，low表示低于这个值将会警告，high则是高于这个值将会警告。

度量器标签可以作为单标签，可以作为成对的标签中间加入文本，但这个文本似乎不显示。

新的表单元素属性

HTML5增加了一些表单属性：

  • placeholder：占位符（提示文字，比如提示这个框该怎么填写）。
  • autofocus：自动获取焦点。不需要值的属性。
  • multiple：文件上传多选或多个邮箱地址。不需要值的属性。
  • autocomplete：自动完成。on 开启（默认），off 取消。用于表单元素，也可用于表单自身。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。
  • form：指定表单项属于哪个form，处理复杂表单时会需要。
  • novalidate：关闭默认的验证功能（只能加给form）。
  • required：表示必填项。
  • pattern：自定义正则，验证表单。
  • oninput：事件，用户输入内容时触发，可用于输入字数统计。
  • oninvalid：事件，验证不通过时触发。比如，如果验证不通过时，想弹出一段提示文字，就可以用到它。

多媒体

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

H5里面提供了视频和音频的标签。

音频

HTML5通过<audio>标签来解决音频播放的问题：

1
<audio src="/media/巷子和树.mp3" controls> </audio>

这是一首我喜欢的歌：

其属性主要有：

  • autoplay：自动播放。写成autoplay 或者 autoplay = “”，都可以。
  • controls：控制条。（建议把这个选项写上，不然都看不到控件在哪里）
  • loop：循环播放。
  • preload：预加载。同时设置 autoplay 时，此属性将失效。

当然要注意浏览器的兼容性问题，不同浏览器因为版权问题，兼容的音频文件格式不一样，此时可以采用如下写法：

1
2
3
4
5
6
<audio controls loop>
    <source src="music/yinyue.mp3"/>
    <source src="music/yinyue.ogg"/>
    <source src="music/yinyue.wav"/>
    抱歉，你的浏览器暂不支持此音频格式
</audio>

视频

HTML5通过<video>标签来解决视频播放的问题：

1
<video src="video/movie.mp4" controls autoplay></video>

其主要属性有：

  • autoplay：自动播放。写成autoplay或者autoplay = “”，都可以。
  • controls：控制条。
  • loop：循环播放。
  • preload：预加载 同时设置 autoplay 时，此属性将失效。
  • width：设置播放窗口宽度。
  • height：设置播放窗口的高度。

同样由于播放格式的兼容性问题，推荐兼容性写法：

1
2
3
4
5
6
<video controls autoplay>
    <source src="video/movie.mp4"/>
    <source src="video/movie.ogg"/>
    <source src="video/movie.webm"/>
    抱歉，不支持此视频
</video>

新增功能

拖拽

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

在给元素增加了draggable=”true” 属性之后，发现其是可以拖拽的，但是拖拽之后要做什么事情呢？这就涉及到事件监听：

  • ondragstart：当拖拽开始时调用。
  • ondragleave：当鼠标离开拖拽元素时调用。
  • ondragend：当拖拽结束时调用。
  • ondrag：整个拖拽过程都会调用。

为元素设置以上的事件监听即可实现拖拽元素时要做的事。

如果你想把元素A拖拽到元素B里，那么元素B就是目标元素，我们可以对目标元素设置这样的事件监听：

  • ondragenter：当拖拽元素进入时调用。
  • ondragover：当拖拽元素停留在目标元素上时，就会连续一直触发，不管拖拽元素此时是移动还是不动的状态。
  • ondrop：当在目标元素上松开鼠标时调用。
  • ondragleave：当鼠标离开目标元素时调用。

要格外注意在编写ondragover事件监听时，一定要阻止拖拽事件的默认行为，否则，后面的方法ondrop事件将无法触发：

1
2
3
4
5
6
// 当拖拽元素在目标元素上时，连续触发
tar.ondragover = function (e) {
    // 阻止拖拽事件的默认行为
    e.preventDefault();
    // ……
}

历史记录

界面上的所有JS操作不会被浏览器记住，就无法回到之前的状态。在HTML5中可以通过 window.history 操作访问历史状态，让一个页面可以有多个历史状态。window.history对象可以让我们管理历史记录，可用于单页面应用，以实现无刷新改变网页内容：

1
2
3
4
5
window.history.forward(); // 前进
window.history.back(); // 后退
window.history.go(); // 刷新
window.history.go(n); //n=1 表示前进；n=-1 后退；n=0 刷新。如果移动的位置超出了访问历史的边界，会静默失败，但不会报错
history.pushState; //放入历史中的状态数据

获取地理位置

JS获取地理位置的方式：

  • navigator.getCurrentPosition(successCallback, errorCallback, options)：获取当前地理信息。
  • navigator.watchPosition(successCallback, errorCallback, options)：重复获取当前地理信息。

当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position：

  • position.coords.latitude：纬度。
  • position.coords.longitude：经度。

coords即坐标。可选参数 options 对象可以调整位置信息数据收集方式。

当获取地理信息失败后，会调用errorCallback，并返回错误信息error。

全屏

HTML5规范允许用户自定义网页上任一元素全屏显示。

开启/关闭全屏显示：

1
2
dom.requestFullscreen()   //让元素开启全屏显示
dom.cancleFullscreen()    //让元素关闭全屏显示

为考虑兼容性问题，不同的浏览器可能需要在此基础之上，添加私有前缀，如webkitRequestFullScreen、 webkitCancleFullScreen、mozRequestFullScreen、mozCancleFullScreen等。（注意有无前缀时screen中的s的大小写不一样）

检测当前是否处于全屏状态：document.fullScreen。同样可能需要私有前缀。

全屏的伪类：

  • :full-screen {}
  • :-webkit-full-screen {}
  • :moz-full-screen {}

用于CSS中，当元素处于全屏状态时，改变它的样式。

Web存储

传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出了两种解决方案：

window.sessionStorage会话存储：

  • 保存在内存中。
  • 生命周期为关闭浏览器窗口。也就是说，当窗口关闭时数据销毁。
  • 在同一个窗口下数据可以共享。

window.localStorage本地存储：

  • 有可能保存在浏览器内存里，有可能在硬盘里。
  • 永久生效，除非手动删除（比如清理垃圾的时候）。
  • 可以多窗口共享。

Web 存储的特性：

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

使用方法：

1
2
3
4
5
setItem(key, value);// 设置存储内容
getItem(key);       // 读取存储内容
removeItem(key);    // 根据键，删除存储内容
clear();            // 清空所有存储内容
key(n);             // 根据索引值来获取存储内容

使用时需要指明调用的是哪一种存储的方法，如：

1
window.sessionStorage.setItem('userName', txt.value);

网络状态

我们可以检测用户当前的网络状况，通过事件监听来实现，事件返回一个布尔值：

  • window.online：用户网络连接时被调用。
  • window.offline：用户网络断开时被调用（拔掉网线或者禁用以太网）。

使用方法：

1
2
3
4
5
6
window.addEventListener('online', function () {
    alert('网络连接建立！');
});
window.addEventListener('offline', function () {
    alert('网络连接断开！');
})

应用缓存

HTML5中我们可以轻松的构建一个离线（无网络状态）应用，只需要创建一个cache manifest缓存清单文件。

缓存清单文件的格式

缓存清单文件中列出了浏览器应缓存，以供离线访问的资源。推荐使用.appcache作为后缀名，另外还要添加MIME类型。

缓存清单文件里的内容格式：

  • 顶行写CACHE MANIFEST。
  • CACHE: 换行，指定我们需要缓存的静态资源，如.css、image、js等。
  • NETWORK: 换行，指定需要在线访问的资源，可使用通配符（也就是不需要缓存的、必须在网络下面才能访问的资源）。
  • FALLBACK: 换行，当被缓存的文件找不到时的备用资源（当访问不到某个资源时，自动由另外一个资源替换）。

如以下例子：

1
2
3
4
5
6
7
8
9
10
11
12
CACHE MANIFEST
#要缓存的文件
CACHE:
    images/img1.jpg
    images/img2.jpg
#指定必须联网才能访问的文件
NETWORK:
     images/img3.jpg
     images/img4.jpg
#当前页面无法访问是回退的页面
FALLBACK:
    404.html

缓存清单文件的使用

假如我们创建一个缓存清单文件叫做demo.appcache，在需要应用缓存的页面根元素（即html标签）里，添加属性manifest=”demo.appcache”。路径要保证正确。如：

1
<html manifest="01.appcache"> </html>

优势

使用缓存的优势：

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

其他小tips

元素的嵌套关系

HTML5的嵌套关系：

  • 块级元素可以包含行内元素。
  • 块级元素不一定能包含块级元素。比如 div 中可以包含 div，但 p 标签中不能包含 div。
  • 行内元素一般不能包含块级元素。比如 span 中不能包含 div。但有个特例：在 HTML5 中， a 标签中可以包含 div。

注意：在 HTML5 中 a > div 是合法的， div > a > div是不合法的 ；但是在 html 4.0.1 中， a > div 是不合法的。

CSS Reset

比如下拉框这种比较复杂的元素，是自带默认样式的。如果没有这个默认样式，则该元素在页面上不会有任何表现，则必然增加一些工作量。

同时，默认样式也会带来一些问题：比如，有些默认样式我们是不需要的；有些默认样式甚至无法去掉。

如果我们不需要默认的样式，这里就需要使用CSS Reset。
常见的 CSS Reset 方案：

可以直接通过CDN引入：

1
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">

当然还有一种会影响性能、不建议使用但是简单粗暴的方式：

1
2
3
4
*{
    margin: 0;
    padding: 0;
}

几种CSS reset的解决思路都是将所有的默认样式清零。



* 你好，我是大森。如果文章内容帮到了你，你可通过下方付款二维码支持作者 *