本文详细介绍了HTML5的新特性，包括新增的语义化标签如<header>和<footer>，状态标签如<meter>和<progress>，以及多媒体标签<video>和<audio>。还讨论了canvas和svg图形绘制，地理定位，WebWorker的后台处理能力，以及HTML本地存储和WebSocket的离线和实时通信功能。此外，文章提到了兼容性和面试中常问的问题。
html5新增特性
1.HTML5简介
HTML5是新一代HTML标准，由万维网联盟（W3C）在2014年10月制定
HTML5在狭义上是指新一代的HTML标准，在广义上是指整个前端
HTML5优势：
1.针对javascript，新增了许多可操作的接口
2.新增了一些语义化标签、全局属性
3.新增了多媒体标签，可以很好的替代flash
4.更加侧重语义化，对于SEO友好
5.可移植性好，可以大量应用在移动设备上
HTML5兼容性：
支持以下主流浏览器（面试中常问！）：
- Chrom（Blink内核）
- Safari（Webkit内核）
- Opera（Blink内核）
- Firefox（Gecko内核）
【注意】IE（Trident内核）必须是9及以上版本才支持，且IE9仅支持部分HTML5新特性
2.新增语义化标签
| 标签名 | 语义 | 标签属性 |
|---|---|---|
| header | 整个页面或部分区域的头部 | 双标签,块级 |
| footer | 整个页面或部分区域的底部 | 双标签,块级 |
| nav | 导航 | 双标签,块级 |
| article | 文章、帖子、杂志、新闻、博客、评论等 | 双标签,块级 |
| section | 页面中的某段文字，或文章中的某段文字（里面文字通常会包含标题） | 双标签,块级 |
| aside | 侧边栏 | 双标签,块级 |
关于acticle和section的区别（真实面试题！）：
- article可以有多个section
- section强调分段或分块，将一块内容分成几段的时候可使用
- article比section更强调独立性，一块内容如果比较独立、比较完整、应该使用article元素
3.新增状态标签
meter标签（行内块元素，可以设置宽和高）
语义：定义已知范围内的标量测量，也被gauge（尺度），双标签
应用：电量、磁盘用量等
常用属性：
progress标签（行内块元素，可以设置宽和高）
语义：显示某个任务完成进度的指示器，一般用于标识进度条，双标签
应用：工作完成进度等
常用属性：
<span>手机电量模拟</span>
<meter max="100" min="0" value="90" low="10" high="20" optimum="90"></meter>
<br>
<span>任务完成进度</span>
<progress max="100" value="20"></ogresspr>
4.新增列表标签
<form action="#">
<input type="text" list="mydata">
<button>搜索</button>
</form>
<datalist id="mydata">
<option value="不高兴"></option>
<option value="不开心"></option>
<option value="没头脑"></option>
<option value="小脑斧"></option>
</datalist>
<br>
<details>
<summary>如何学习前端？</summary>
<span>打好基础</span>
</details>
5.新增的文本标签
文本注音（行内元素）
文本标记
【注意】W3C建议使用mark来标记搜索结果中的关键字
<ruby>
<span>功 夫 孬 不 要 打 架</span>
<rt>gōng fū nāo bù yào dǎ jià</rt>
</ruby>
<p>
<mark>前端</mark>是很难的一项工作
</p>
6.新增表单功能
表单控件新增属性
<form action="#">
账号：<input
type="text"
name="account"
placeholder="请输入六位账号"
required
autofocus
autocomplete="on"
pattern="\w{6}"
>
<br>
密码：<input type="password" name="pwd" placeholder="请输入密码" required>
<br>
性别：
<input type="radio" value="male" name="gender" required>男
<input type="radio" value="female" name="gender" required>女
<br>
爱好：
<input type="checkbox" value="bilibili" name="hobby">B站
<input type="checkbox" value="douyin" name="hobby">抖音
<input type="checkbox" value="kuaishou" name="hobby">快手
<br>
其它：<textarea name="other" placeholder="如有问题，请留言" required></textarea>
<br>
<button>提交</button>
</form>
input 新增属性值
form 标签新增属性
7.新增多媒体标签
新增视频标签
<video> 标签用来定义视频，它是双标签，行内块元素
新增音频标签
<audio> 标签用来定义音频，它是双标签，行内块元素
案例：实现一个简单遮罩层效果（前端常问题型！）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5</title>
<style>
video{
width: 200px;
}
audio{
width: 250px;
}
.mask{
position: fixed;
top: 0px;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(173, 109, 34, 0.841);
}
.dialog{
width: 400px;
height: 200px;
background-color: rgb(11, 184, 20);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
font-size: 30px;
text-align: center;
line-height: 200px;
}
span{
cursor: pointer;
color: white;
border: 1px solid white;
}
</style>
</head>
<body>
<video id="video" src="/小电影.mp4" controls></video>
<br>
<audio id="audio" src="/小曲.mp3" controls></audio>
<div class="mask" id="mask">
<div class="dialog">
<span onclick="seeVideo()">看看视频</span>
<span onclick="seeAudio()">听听音乐</span>
</div>
</div>
<script>
function seeVideo(){
video.play()
mask.style.display = 'none'
}
function seeAudio(){
audio.play()
mask.style.display = 'none'
}
</script>
</body>
</html>
8.新增全局属性（了解）
【注意】draggable需要配合js使用
在元素中直接写hidden，相当于displya:none，即不占空间位置了
data-*这样形式的数据方便js批量进行操作
9.兼容性处理
处理HTML5新增标签和属性的兼容性
- 可以引入html5shiv.js文件，
html5shiv.js是一套实现让低版本IE等浏览器支持HTML5标签的解决方案
可以搭配一个浏览器判断，看是否需要引入该js
但此方法对IE8中的媒体标签还是不行 - 让IE浏览器处于最高的渲染模式
<meta http-equiv="X-UA-Compatible" content="IE=edge"> - 针对国内双核浏览器，尽量使用webkit内核去渲染页面
<meta name="render" content="webkit">
10.新增canvas绘图
使用 <canvas> 标签在页面上创建画布元素，画布一旦创建，就可以使用Javascript提供的一套强大的Canvas API编写代码，在画布中绘制任意图形，甚至加入高级动画，行内块元素。
浏览器支持：Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari
IE8及以下不支持可以在标签内提供替代图片或文本说明
基本用法：
-
创建画布
<canvas id="canvas" width="300" height="300"></canvas>画布的默认宽度为300px，高度为150px，可以宽和高自定义
-
获取绘制上下文
var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d");先要调用getElementById( )方法获取画布的访问权，然后调用画布对象的getContext( )方法来获取画笔，传入"2d"定义画笔的种类，3d暂不支持。
画笔在canvas中被称为绘制上下文，canvas api基本上都是定义在绘制上下文对象上，而并非canvas元素上
-
定义绘制路径
context.beginPath(); context.rect(20, 40, 200, 80); context.closePath();Canvas中的所有基本图形，都是根据路径来绘制的。首先，调用beginPath()方法开始一条新的路径；然后，定义路径及子路径；最后，调用closePath()方法来关闭。
上述代码中，rect()方法绘制了一条矩形路径，该矩形路径的左上顶点坐标为x=20,y=40，矩形宽度为200px，长度为80px。
默认情况下，Canvas 的坐标系以Canvas 元素的左上角为坐标原点(0, 0)。水平方向为x轴，并向右增长；垂直方向为y轴，并向下增长。
-
设置图像属性
context.strokeStyle = '#f00'; // 设置线条样式 context.fillStyle = "#ccc"; // 设置填充样式上述代码设置矩形路径的轮廓线条的颜色为红色（#f00），填充颜色为灰色（#ccc）。该步骤为可选，如果省略，则使用Canvas提供的默认属性绘图。
-
绘制图像
Canvas默认提供两种绘制方法：stroke()方法和fill()方法。stroke()方法沿着路径的坐标点依次绘制线条，fill()方法填充路径形成的闭合区域。这两个方法都作用在当前路径的所有子路径上，并且都不更改当前路径，所以它们可以被同时调用。
context.stroke(); context.fill();如果存在多条路径，则每条路径都要分别调用stroke()方法或fill()方法，否则，该路径不会被绘制，该路径所定义的图形不会显示在画布中。
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5</title>
<style>
canvas{
width:300px;
height:300px;
background-color: orange;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
//获取绘制上下文
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
//定义绘制路径
context.beginPath();
context.rect(20, 40, 200, 80);
context.closePath();
//设置图像属性(可省略)
context.strokeStyle = '#f00'; // 设置线条样式
context.fillStyle = "#ccc"; // 设置填充样式
//绘制图像
context.stroke();
context.fill();
</script>
</body>
</html>
11.新增svg标签
SVG（Scalable Vector Graphics）指可伸缩矢量图形，通常在 html 中使用 xml 格式来定义用于网络的基于矢量的图形。使用 svg 定义的矢量图形在放大或改变尺寸的情况下其图形的质量不会受到损伤，行内块元素
浏览器支持：Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari
IE8及以下不支持可以在标签内提供替代图片或文本说明
SVG 图像与其他图像格式（JPEG 或 GIF）相比的优势在于： SVG 图像可通过文本编辑器来创建和修改； SVG
图像可被搜索、索引、脚本化或压缩； SVG 图像是可伸缩的； SVG 图像可在任何的分辨率下被高质量地打印； SVG
图像质量不受放大或缩小的改变。
基本用法：
-
创建svg元素
<svg style="background:pink;width:400px;height:400px;"> -
绘制图形
<circle cx="100" cy="100" r="100" fill="pink" />circle为绘制圆，cx和cy是圆心坐标，r是圆的半径
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5</title>
<style>
svg{
width:300px;
height:300px;
background-color: orange;
}
</style>
</head>
<body>
<svg>
<circle cx="100" cy="100" r="100" fill="red" />
<line x1="150" y1="187" x2="100" y2="100" stroke="black" stroke-width="10"></line>
</svg>
</body>
</html>
12.canvas和svg比较
面试常问！
SVG 是一种使用 XML 描述 2D 图形的语言
Canvas 通过 JavaScript 来绘制 2D 图形
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。 在 SVG中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas 是逐像素进行渲染的。在 canvas中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
13.新增地理定位
使用getCurrentPosition()方法来获取用户的位置以实现“LBS服务”
鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的
浏览器支持：Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5</title>
<style>
#demo{
width: 200px;
height: 200px;
background-color: orange;
}
</style>
</head>
<body>
<div id="demo">点击我，获得您的坐标：</div>
<script>
var x=document.getElementById("demo");
x.onclick = function(){
getLocation()
}
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude(维度): " + position.coords.latitude +
"<br />Longitude(经度): " + position.coords.longitude;
}
</script>
</body>
</html>
14.新增Web Worker
当在 HTML 页面中执行脚本时，页面是不可响应的，直到脚本已完成。
Web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 运行在后台。
因为是独立的线程，Worker 线程与 js 主线程能够同时运行，互不阻塞。所以，在我们有大量运算任务时，可以把运算任务交给 Worker 线程去处理，当 Worker 线程计算完成，再把结果返回给 js 主线程。这样，js 主线程只用专注处理业务逻辑，不用耗费过多时间去处理大量复杂计算，从而减少了阻塞时间，也提高了运行效率，页面流畅度和用户体验自然而然也提高了。
浏览器支持：Internet Explorer 10+, Firefox, Opera, Chrome, 和 Safari
15.新增HTML 本地存储
通过本地存储（Local Storage），web 应用程序能够在用户浏览器中对数据进行本地的存储。
在 HTML5 之前，应用程序数据只能存储在 cookie 中，包括每个服务器请求。本地存储则更安全，并且可在不影响网站性能的前提下将大量数据存储于本地。
与 cookie （4K）不同，存储限制要大得多（至少5MB），并且信息不会被传输到服务器。
浏览器支持：Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari
HTML 本地存储提供了两个在客户端存储数据的对象：
- window.localStorage ： 本地存储，存储的数据没有过期时间
- window.sessionStorage ： 会话存储，存储的数据会在浏览器会话结束时被清除（即浏览器关闭时）
- session： 在一定时间内保存在服务器上
- cookie：存储量小受到限制，设置过期时间删除，前后端同步，存放在客户的浏览器上，不是很安全
（面试常问！localStorage、sessionStorage、session和cookie区别）
16.新增应用程序缓存
使用应用程序缓存，通过创建 cache manifest 文件，可轻松创建 web 应用的离线版本
HTML5 引入了应用程序缓存，这意味着可对 web 应用进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源
浏览器支持：Internet Explorer 10+, Firefox, Opera, Chrome, 和 Safari
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
文档内容 ......
</body>
</html>
17.新增WebSocket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。（面试常问！和三次握手的区别）
在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。
HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。
基本用法：
- 浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求
- 连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据
- 获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据
- 通过 onmessage 事件来接收服务器返回的数据
如有错误，请留言指正，谢谢！
985
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
