HTML5常用新特性

最新推荐文章于 2024-08-30 17:48:44 发布

原创最新推荐文章于 2024-08-30 17:48:44 发布 · 262 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5

HTML 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了HTML5中常见的新特性，包括新增的语义化标签如header、footer、article等，增强了网页的结构和SEO；新增多媒体标签audio和video，简化了音频和视频的集成；还讲解了浏览器的本地存储机制，如Cookie、localStorage和sessionStorage的特性和应用场景；最后提到了defer和async属性，用于优化脚本加载和执行的性能。

HTML5

声明：新增了很多的HTML5新特性，但是我们下面只专注于开发中所常用的一些新特性。

新增语义化标签

所谓语义化标签就是用合适的标签去做合适的事情。

以前布局时，我们基本用div来做，但是div只是用来装内容的，所以不利于搜索引擎的优化（即SEO）（例如：div和span只是用来装内容的容器，并没有任何语义）

语义化标签：header、footer、aside、article(内容标签)、section(定义文档某个区域)、strong、em、i、del、ins等等。

新增多媒体标签

新增的多媒体标签主要包含两个：audio（音频）、video（视频）

使用它们可以很方便的在页面中插入音频、视频，而不再需要去使用flash或其他浏览器插件。

video

目前video标签元素只支持3种视频格式：MP4(推荐使用)、webM、ogg。

常用属性：

width：设置播放器宽度。

height：设置播放器高度。

autoplay：视频就绪时自动播放。

controls：是否向用户展示播放控件。

src：视频url地址。

loop：是否循环播放视频。

preload：规定是否预加载视频（如果有了autoplay属性，就忽略该属性）。

poster：设置加载等待时显示的图片。

muted：设置是否静音播放。

以下是我当时在项目中具体使用情况：

//基本用法
<video src=""></video>

//如果为了考虑兼容性，也可以使用下面的方式
<video>
    <source src="文件地址" type="video/MP4" />
    <source src="文件地址" type="video/ogg" />
    否则就显示，您的浏览器不支持video标签
</video>

audio

目前audio元素标签只支持3种格式：MP3、wav、ogg。

常用属性（和video基本一样）：

autoplay：音频就绪时自动播放。

controls：是否向用户展示播放控件。

loop：是否循环播放视频。

muted：设置是否静音播放。

src：视频url地址。

<audio src=""></audio>

新增浏览器本地存储

浏览器的本地存储主要分为Cookie、localStorage 和 sessionStorage。

Cookie

Cookie最开始被设计出来其实并不是来做本地存储的，而是为了弥补HTTP在状态管理上的不足。因为HTTP协议是一个无状态协议，客户端向服务器发请求，服务器返回响应，故事就这样结束了，但是下次发请求如何让服务端知道客户端是谁呢？这种背景下，就产生了 Cookie。向同一个域名下发送请求时都会携带相同的 Cookie，服务器拿到 Cookie 进行解析，便能拿到客户端的状态。

cookie的不足：

（1）容量缺陷：Cookie 的体积上限只有4KB，只能用来存储很少量的信息。

（2）性能缺陷：Cookie 紧跟域名，不管域名下面的某一个地址需不需要这个 Cookie ，请求都会携带上完整的 Cookie，这样随着请求数的增多，必然会造成巨大的性能浪费。

（3）安全缺陷：由于 Cookie 是以纯文本的形式在浏览器和服务器中传递，很容易被非法用户截获，然后进行一系列的篡改，并在 Cookie 的有效期内重新发送给服务器，这是相当危险的。

cookie的常用属性：

（1）secure：只允许通过https传输。

（2）httpOnly：仅允许使用http传输（可预防XSS攻击）。

（3）sameSite：预防CSRF攻击。SameSite可以设置为三个值：Strict、Lax和None。

a：在Strict模式下，浏览器完全禁止第三方请求携带Cookie。比如请求sanyuan.com网站只能在sanyuan.com域名当中请求才能携带该 Cookie，在其他网站请求都不能。

b：在Lax模式，就宽松一点了，但是只能在get方法提交表单的情况下才可以携带 Cookie，其他情况均不能。

c：在None模式下，也就是默认模式，请求都会自动携带上 Cookie。

（需要知道以上3个属性都是为了传输安全而设置的）

（4）path：访问Cookie路径。

（5）domain：可以访问该Cookie的域名。

（需要知道：domain和path两个属性，使得可以在发送请求前检查域名和路径如果不匹配，便不会携带cookie）

（6）Expires：cookie过期时间（http1.0版本使用）。

（7）Cache-Control：max-age=3600（http1.1版本使用）。

（8）name：该Cookie的名称。Cookie一旦创建，名称便不可更改。

（9）version：该Cookie使用的版本号。

localStorage

和Cookie异同：localStorage有一点跟Cookie一样，就是在同一个域名下，会存储相同的一段localStorage。

相对Cookie的区别：

（1）容量：localStorage 的容量上限为5M，相比于Cookie的4Kb大大增加。当然这个 5M 是针对一个域名的，并且对于一个域名是持久存储的。

（2）只存在客户端，默认不参与与服务端的通信。这样就很好地避免了 Cookie 带来的安全问题。

（3）接口封装：通过localStorage暴露在全局，并通过它的 setItem 和 getItem等方法进行操作，非常方便。

接下来我们来看看如何来操作localStorage。

let obj = { name: "sanyuan", age: 18 };
localStorage.setItem("name", "sanyuan"); 
localStorage.setItem("info", JSON.stringify(obj));

接着进入相同的域名时就能拿到相应的值:

let name = localStorage.getItem("name");
let info = JSON.parse(localStorage.getItem("info"));

localStorage的应用场景：

可以利用localStorage的大容量存储和持久特性来存储一些静态资源，比如官网的logo，存储Base64格式的图片资源。

sessionStorage

sessionStorage以下方面和localStorage一致:

（1）容量：容量上限也为 5M。

（2）只存在客户端，默认不参与服务端的通信。

（3）接口封装。除了sessionStorage名字有所变化，存储方式、操作方式均和localStorage一样。

但二者有一个本质的区别：前者只是会话级别的存储，并不是持久化存储。会话结束，也就是页面关闭，这部分sessionStorage就不复存在了。

sessionStorage的应用场景：

（1）可以用它对表单信息进行维护，将表单信息存储在里面，可以保证页面即使刷新也不会让之前的表单信息丢失。

（2）如果关闭页面后不需要这些记录，用sessionStorage就再合适不过了。

新增defer和async属性

默认情况下，脚本的下载和执行将会按照写在文档中的先后顺序同步进行。当脚本下载和执行的时候，文档解析就会被阻塞，在脚本下载和执行完成之后文档才能往下继续进行解析。那么有时打开一个网页上会出现空白一段时间，浏览器显示是刷新请求状态(也就是一直转圈)，这就会给用户很不好的体验，defer和async的合理使用就可以避免这个情况，而且通常script的位置建议写在页面底部(移动端应用的比较多，这两个都是html5中的新属性)

所以相对于默认的script引用，这里配合defer和async就有两种新的用法，它们之间有什么区别呢？

1.默认引用 　script type=“text/javascript” src=“x.min.js”

当浏览器遇到 script 标签时，文档的解析将停止，会立即下载并执行脚本，脚本下载并执行完毕后才会继续解析文档。

2.async模式 　script type=“text/javascript” src=“x.min.js” async=“async”

当浏览器遇到 script 标签时，文档的解析将不会停止，其他线程将下载脚本，脚本下载完成后开始执行脚本，脚本执行的过程中文档将停止解析，直到脚本执行完毕才会再次继续文档的解析。

3.defer模式 　script type=“text/javascript” src=“x.min.js” defer=“defer”

当浏览器遇到 script 标签时，文档的解析不会停止，其他线程将下载脚本，待到文档解析完成，脚本才会执行。

4.同时设置了defer和async

当script同时有async和defer属性时，执行效果和async一致（所以最好不要同时设置）。

综上：async和defer的最主要的区别就是：

async模式下：脚本的下载过程和文档解析的过程是异步的，等脚本下载结束后会立即执行同时文档解析便会停止，直到脚本执行结束。

defer模式下：脚本的下载过程和文档解析的过程也是异步的，区别就在于：defer模式下，只有等到文档解析完成，才会去再次继续执行脚本；而async模式下，一旦js脚本下载完成后便立马执行js脚本此时文档解析停止。