Html5新特征

发表于 | 分类于
字数统计: 5,689

学习笔记源自：绿叶

HTML指的是HTML4.01，XHTML是HTML的过渡版，HTML5是HTML的升级版。

W3C官方地址：https://www.w3.org/TR/html5/
MDN官方地址：https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5

新增速览

新增元素

新增属性

结构元素

HTML5新增的主要结构元素有6个：header、nav、article、aside、section、footer。

在HTML5中，header元素一般用于3个地方：页面头部、文章头部（article元素）和区块头部（section元素）。

当用于页面头部时，header元素一般用于包含网站名称、页面LOGO、顶部导航、介绍信息等

当用于文章头部时（即article元素头部），header元素一般用于包含“文章标题”和“meta信息”两部分。所谓的meta信息，一般指的是作者、点赞数、评论数等

当用于区块头部时（即section元素头部），header元素一般只包含区块的标题内容

在HTML5中，nav元素一般用于3个地方：顶部导航、侧栏导航和分页导航。

一般情况下，主导航主要是使用无序列表来实现。

1
2
3
4
5
6
7
<nav id="nav">
    <ul>
        <li><a></a></li>
        <li><a></a></li>
        <li><a></a></li>
    </ul>
</nav>
article

article元素一般只会用于一个地方：文章内容部分。内部可以包含header元素、section元素和footer元素等。

aside

aside元素一般用于表示跟周围区块相关的内容

  • 如果aside元素放在article元素或section元素之中，则aside内容必须与article内容或section内容紧密相关。
  • 如果aside元素放在article元素或section元素之外，则aside内容应该是与整个页面相关的，比如相关文章、相关链接、相关广告等。
section

section元素一般用于某一个需要标题内容的区块。如果页面某个区块不需要标题，直接使用div元素就可以了。

在实际开发中，对于页面某一个区块，优先考虑语义化更好的article元素和aside元素，如果这两个都不符合，再考虑使用section元素。

footer元素一般用于两个地方：一个是“页面底部”，另一个是“文章底部”。
当用于页面底部时，footer元素一般包含友情链接、版权声明、备案信息等。
当用于文章底部时，也就是放在article元素内部时，footer元素一般包含“上一篇/下一篇导航”“文章分类”“发布信息”等。

表单元素

新增input元素类型

email类型的文本框采用了浏览器内置的验证机制，而浏览器内置的验证机制必须使用submit按钮才会触发。

tel/url类型文本框并不具备完备的验证功能，如果想要达到验证效果，则需要结合pattern属性来实现。

当type属性取值为“range”时，我们可以通过拖动滑动条获取某一个范围内的数字。<input type="range" min="最小值" max="最大值" step="间隔数"/> 在实际开发中，range类型元素都是需要结合JavaScript来操作的

number类型跟range类型功能非常相似，都是获取某一个范围内的数字。不过两者的外观不一样，其中number类型使用的是“微调按钮”，而range类型使用的是“滑块”。

当type属性取值为“color”时，我们可以直接使用浏览器自带的取色工具来获取颜色值。<input type="color" value=""/> value属性用于设置颜色初始值，格式必须是十六进制颜色值如#F1F1F1，不能是关键字

当我们点击date类型元素时，浏览器会弹出自带的日历工具，以方便直接选取日期。value属性用于设置日期初始值，格式必须如“2018-05-20”

time的value属性用于设置时间初始值，格式必须如“08:04”。

month的value属性用于设置初始值，格式必须如“2018-08”

week的value属性用于设置初始值，格式必须如“2018-W04”

其他表单元素

新增了3个表单元素：output、datalist、keygen。

使用output元素来定义表单元素的输出结果或计算结果。<output></output> output元素是一个行内元素，只不过它比span元素更具有语义化。
output元素一般放在form元素内部，并且配合其他表单元素（如文本框等）来使用。

使用datalist元素来为文本框提供一个可选的列表。

如果想要把datalist绑定到某个文本框，需要设置该文本框的list属性值等于datalist的id值。

使用keygen元素来生成页面的密钥。如果表单内部有keygen元素，则提交表单时，keygen元素将生成一对密钥：一个保存在客户端，称为“私密钥（Private Key）”；另一个发送到服务器，称为“公密钥（Public Key）”。
keygen元素主要是作为客户端安全保护的一种方法，不过它在各大浏览器中的兼容性很差

语义化元素

使用更具有语义化的address元素来为“整个页面”或者“某一个article元素”添加地址信息（电子邮件或真实地址）。
一般放在footer元素内部

<time datetime="时间"></time>datetime属性中的时间是提供给搜索引擎看的，而time标签内的时间是提供给用户看的，两者内容可以一样也可以不一样。time元素与datetime属性的关系，有点类似于img元素与alt属性的关系。

使用progress元素以进度条的形式来显示某一个任务的完成度，如上传文件、下载文件等。

<progress max="最大值" value="当前值"></progress>

<meter min="最小值" max="最大值" value="当前值"></meter>

meter元素跟progress元素非常相似，都是以进度条形式来显示数据比例。不过，两者在语义上有很大的区别：

  • meter元素一般用于显示静态数据比例。所谓的静态数据，指的是很少改变的数据，例如男生人数占全班人数的比例。
  • progress元素一般用于显示动态数据比例。所谓“动态数据”，指的是会不断改变的数据，例如下载文件的进度。

figure和figcaption这两个元素实现“图片+图注”效果

1
2
3
4
<figure>
    <img src="" alt=""/>
    <figcaption></figcaption>
</figure>

使用fieldset元素来给表单元素进行分组。其中，legend元素用于定义某一组表单的标题。

1
2
3
<fieldset>
    <legend>表单组标题</legend>
</fieldset>

使用fieldset和legend有两个作用：增强表单的语义；定义fieldset元素的disabled属性来禁用整个组中的表单元素。

改良元素

常用的是a元素的download属性，<a href="文件地址" download="新文件名"></a>

ol元素新增了一个reversed属性，用于设置列表顺序为降序显示。

使用更具有语义化的small元素来表示“小字印刷体”的文字。small元素一般用于网站底部的免责声明、版权声明等

HTML5为script元素新增了两个属性：defer和async。defer和async都是异步加载的，两者区别在于，异步加载外部JavaScript文件完成后何时执行。defer等到整个HTML文档加载完成才会执行，更符合大多数开发场景对脚本加载执行的要求。async加载完毕立即执行

html加载顺序

怎样使低版本的IE浏览器支持HTML5新元素？

新增属性

公共属性

使用hidden属性来显示或隐藏某一个元素。

使用draggable属性来定义某一个元素是否可以被拖动。draggable=”true”只能定义元素可以被拖动这一个行为，拖动后并不会改变元素的位置。

使用contenteditable属性来定义某个元素的内容是否可以被编辑。

使用data-*属性来为元素实现自定义属性。使用DOM操作中的obj.dataset.xxx来获取data-属性的值。自定义属性在JavaScript动画以及实际开发中用得是非常多的

input元素的新增属性

autocomplete属性一般都是结合datalist元素来实现自动提示功能。适用于所有文本框型的input元素，包括text、password、email、url、tel等。

使用autofocus属性来实现文本框自动获取焦点。

使用placeholder属性为文本框添加提示内容。

使用required属性来定义文本框输入内容不能为空。

使用pattern属性来为文本框添加验证功能。 <input type="text" pattern="正则表达式" />
email、url、tel这3个类型的input元素，本质上都内置了pattern属性，因此它们会自动进行相关匹配验证。

关于正则, 之前写过一篇关于java的正则 不过JS的正则还需要重新学习一下

form元素的新增属性

使用novalidate属性来禁用form元素的所有文本框内置的验证功能。然后使用JavaScript来创建更为复杂且健全的验证

元素拖放

仅给元素设置draggable=”true”，则该元素只具备可拖曳的特点，并不能改变元素的位置。如果想要拖动改变元素的位置，我们还需要结合元素拖放触发的事件来操作。

一般情况下我们需要操作3个事件：ondragstart、ondragover和ondrop。

dataTransfer对象主要用于在“源元素”与“目标元素”之间传递数据。有两个最重要的方法：setData()和getData()。在整个拖曳过程中，具体操作是这样的：开始拖放源元素时（ondragstart事件），调用setData()方法保存数据；然后在放入目标元素时（ondrop事件），调用getData()方法读取数据。

setData(format, data); getData(format);

注意要调用event.preventDefault()方法来屏蔽元素的默认行为。

文件操作

文件上传是使用input元素来实现的，其中type属性取值为”file”。

文件上传input元素有两个重要属性：multiple和accept

  • multiple属性表示“是否选择多个文件”。

  • accept属性用于设置文件的过滤类型（MIME类型）

<input type="file" accept="image/jpeg, image/png" multiple/>

在文件上传元素中，将会产生一个FileList对象，它是一个类数组对象，表示所有文件的集合。其中，每一个文件就是一个File对象。有如下属性：

在HTML5中，专门提供了一个文件操作的API，即FileReader对象。我们通过FileReader对象可以很方便地读取文件中的数据。
FileReader对象有5个方法：

在HTML5以前，我们一般都是先将本地图片上传到服务器，等上传成功后再由后台返回图片的地址在前端显示。到了HTML5时代，我们使用FileReader对象的readAsDataURL()方法，可以不经过后台而直接将本地图片显示在页面中，这样可以减少前后端的频繁交互，减少服务器端的压力。

FileReader对象提供了6个事件，用于检测文件的读取状态：

在HTML5中，还新增了一个Blob对象，用于代表原始二进制数据。实际上，前面介绍的File对象也继承于Blob对象。
var blob = new Blob(dataArray, type); 常用于下载链接的创建

在实际开发中，FileReader对象的readAsText()、readAsArrayBuffer()等方法可以读取文件数据，然后结合Blob对象下载文件的功能，就可以实现将数据导出文件备份到本地。当要恢复数据时，通过input元素上传备份文件，使用readAsText()、readAsArrayBuffer()等方法读取文件，即可恢复数据。

本地存储

Cookie的限制：

  • 大小限制：大多数浏览器支持最大为4KB的Cookie。
  • 数量限制：大多数浏览器只允许每个站点存储20个Cookie，如果想要存储更多Cookie，则旧的Cookie将会被丢弃。
  • 有些浏览器还会对它们将接收的来自所有站点的Cookie总数做出绝对限制，通常为300个。
  • Cookie默认情况下都会随着HTTP请求发送到后台，但是实际上大多数请求都是不需要Cookie的。

HTML5新增了3种全新的数据存储方式：localStorage、sessionStorage和indexedDB。

localStorage用于永久保存客户端的少量数据，sessionStorage用于临时保存客户端的少量数据，而indexedDB用于永久保存客户端的大量数据。

localStorage

对于localStorage来说，每一个域名可以保存5MB数据。不同浏览器的localStorage数据是不可以共用的

方法：

统计访问数的例子：

sessionStorage

sessionStorage对象跟localStorage对象非常相似，两者有着完全相同的方法。localStorage和sessionStorage都是window对象下的子对象。也就是说，localStorage.getItem()其实是window.localStorage.getItem()的简写。

sessionStorage对象保存的是“临时数据”，用户关闭浏览器后，数据就会丢失；而localStorage对象保存的是“永久数据”，用户关闭浏览器后，数据依然存在。

在实际开发中，localStorage用得比较多

indexedDB

在本地数据库这个技术方向，最新的HTML5标准表示只支持indexedDB。该数据库是一种存储在客户端本地的NoSQL数据库

indexedDB对象是window对象下的一个子对象，我们可以使用indexedDB对象的open()方法来创建或打开一个数据库。
open()方法有两个参数：第1个参数是数据库名；第2个参数是数据库版本号。

window.indexedDB.open()方法返回一个请求对象，我们将其赋值给变量request。该请求对象有两个事件：onerror事件和onsuccess事件。onerror事件表示请求失败时触发的事件，onsuccess事件表示请求成功时触发的事件

e.target.result获取的是一个IDBDatabase对象。通过IDBDatabase对象，我们可以获取数据库的各种信息如数据库名、版本号等。数据库的增删查改操作，都是基于这个对象的

在indexedDB中，一个对象仓库就是一张表。

使用IDBDatabase对象的createObjectStore()方法来创建一个新的对象仓库。创建对象仓库，都是在onupgradeneeded事件中执行的。因此，我们必须更新数据库版本号，以便触发onupgradeneeded事件。

createObjectStore()方法有两个参数：第1个参数是“对象仓库名”；第2个参数用于设置对象仓库的主键。如果你想要让主键是一个递增的数字，可以使用下面这一句代码：
var store = db.createObjectStore("对象仓库名",{autoIncrement:true});

凡是对象仓库的增删查改，都是在请求对象request的onsuccess事件中操作的。当想要使用对象仓库进行增删查改操作时，我们都需要开始一个事务。
使用IDBDatabase对象的transaction()方法开启一个事务，返回的是一个事务对象，即transaction对象。transaction()方法有两个参数：第1个参数是“对象仓库名”，它是“字符串数组”；第2个参数是“事务模式”，有两个取值。

  • “read”：只读；
  • “readwrite”：可读写。

使用ObjectStore对象的add()方法往对象仓库中添加数据
调用objectStore对象的delete()方法来为对象仓库删除数据
使用get()方法来查询对象仓库的数据
使用put()方法来更新对象仓库的数据
使用clear()方法来清空对象仓库的数据

音频视频

audio和video这两个元素大多数的属性和方法都是相同的

video元素autoplay、controls和loop属性无须多说。而preload属性表示是否预加载，它有3个取值：

一定要使用width和height这两个属性来定义视频的宽度和高度。如果没有定义，则浏览器显示的是视频原来的大小。如果视频本身过于大，则会影响页面布局。

对于HTML5视频格式，主要有3种，分别是ogg、mp4和webm。

兼容：

1
2
3
4
5
<video>
    <source type="vdieo/ogg" src="文件路径" />
    <source type="video/mp4" src="文件路径" />
    <source type="video/webm" src="文件路径" />
</video>

视频的默认样式一般比较难看，用户体验并不好。在自定义视频中，我们不仅需要使用CSS重新制作外观样式，还需要借助JavaScript来将播放、暂停、进度条显示、音量控制等功能实现才行。

audio元素的属性跟video元素的属性几乎是一样的

对于HTML5音频格式，主要有3种，分别是ogg、mp3和wav。

离线应用

HTML5离线存储是基于一个新建的.appcache文件的缓存机制（不是存储技术），通过这个文件来解析清单中的离线存储资源，这些资源就会像Cookie一样被存储下来。之后当网络处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

所谓“离线存储”，指的是建立一个URL列表，该列表可以包含HTML文件、CSS文件、JavaScript文件和图片等。离线存储的容量上限为5MB，不适合用来大量存储图片文件，只适合用来保存静态图片，比如LOGO。

页面头部加入manifest属性：manifest属性的取值是cache.manifest文件的路径。网站根目录下新建一个cache.manifest文件，文件格式如下：

更新方式：

  • 自动更新，指的是通过改变cache.manifest文件的内容来触发更新缓存。最有效的方法是修改cache.manifest文件内部的版本注释version xx.xx.xx
  • 手动更新，指的是通过JavaScript事件来操作更新缓存。如使用applicationCache对象的update()方法来更新缓存

多线程

JavaScript的执行环境是单线程的。

在HTML5中，我们可以使用Web Worker创建一个“后台线程”来执行某一段耗时较长的JavaScript程序，而不会影响页面响应。

Web Worker技术基本原理就是：在当前JavaScript的主线程中，使用Worker()构造函数新建一个worker实例，然后加载某一个JavaScript文件，发送给一个后台线程来处理（注意，这里是后台线程）。

使用Worker()构造函数新建一个worker实例，其中，参数url表示需要发送到后台线程处理的JavaScript文件的路径。
worker.postMessage()表示发送数据给worker线程，其中参数yourdata可以是数字、字符串、对象等。
worker.onmessage = function(e){};表示接收worker发过来的数据，然后进行处理。在处理函数内部，我们可以使用e.data来获取发过来的数据。

一个例子：

  • Web Worker由于使用的是后台线程，发送给后台线程的那个JavaScript文件的使用有一定的限制，例如无法访问DOM、无法访问全局变量或全局函数等。
  • Web Worker依然可以使用定时器的4个函数：setTimeout()、clearTimeout()、setInterval()、clearInterval()。
  • Web Worker不支持跨域加载JavaScript。

地理位置

window.navigator.geolocation 获取用户的地理位置信息。HTML5定位是针对手机端的

geolocation对象有3个方法：

navigator.geolocation.getCurrentPosition(function(position){ ……}, error, option);

getCurrentPosition()方法有3个参数：第1个参数是一个回调函数，表示在成功获取到当前地理位置后才会执行；第2个参数也是一个回调函数，表示在获取当前地理位置失败时才会去执行；第3个参数是一些可选属性的列表，它包含多个属性。大多数情况下，我们只会用到第1个参数。

如果想要获取当前位置的信息，都是在回调函数中利用position对象来获取。position对象有很多属性

watchPosition()跟getCurrentPosition()方法非常相似，两者有着共同的参数。它会定期地自动获取位置信息，不需要我们手动刷新页面。
实际上，对于watchPosition()的效果，也可以使用getCurrentPosition()结合setInterval()来实现。

watchPosition()方法会返回一个数字，我们可以把它保存在变量watchID中。当想要停止监视用户位置时，把这个watchID作为参数传递给clearWatch()方法就可以实现。

百度地图API

借助百度地图API来实现驾车线路规划

桌面通知

Notification API通知属于桌面性质的通知，它跟浏览器是脱离的，消息是置顶的。

var notice = new Notification(title, options);

title是必选参数，表示通知框的标题内容；options是一个对象，用来设置一些可选参数。
其中options对象中的参数有很多

Notification.permission表示调用Notification对象下的permission属性，这个属性用于获取用户的确认信息，也就是确认提示框返回的值。

Canvas

HTML5有两个主要的2D图形技术：Canvas和SVG。

  • Canvas是使用JavaScript动态生成的，SVG是使用XML静态描述的。
  • Canvas是基于“位图”的，适用于像素处理和动态渲染，图形放大会影响质量；SVG是基于“矢量”的，图形放大不会影响质量。使用Canvas绘制出来的是一个“位图”，而使用SVG绘制出来的是一个“矢量图”。
  • 每次发生修改，Canvas需要重绘，而SVG不需要重绘。

Canvas技术，指的就是使用Canvas元素结合JavaScript来绘制各种图形的技术。需要以下3步：

①获取Canvas对象。
②获取上下文环境对象Context。
③开始绘制图形。

即，使用document.getElementById()方法来获取Canvas对象（这是一个DOM对象），然后使用Canvas对象的getContext(“2d”)方法获取上下文环境对象Context，最后使用Context对象的属性和方法来绘制各种图形。

Canvas是一个行内块元素（即inline-block），我们一般需要指定其3个属性：id、width和height。默认情况下，Canvas的宽度为300px，高度为150px。对于Canvas的宽度和高度，我们一定要在HTML属性中定义，而不是在CSS样式中定义。

低版本兼容问题：可以在低版本IE浏览器引入excanvas.js来使用Canvas，但是在功能上也会有很多限制，例如无法使用fillText()方法等。

W3C坐标系的y轴正方向是向下的。

在Canvas中，使用moveTo()和lineTo()方法可以画各种多边形，包括三角形、矩形、多边形等。moveTo的含义是“将画笔移到该点的位置，然后开始绘图”。lineTo的含义是“从起点开始画直线，一直画到终点坐标”。再用笔连线，即stroke()。

哎，这块内容有点多，看不动了，以后再专门找时间看吧。。