1.语义化：让网页中不同部分表示特定的含义 更准确的标记特定类型的内容
优点：
1)结构清晰 布局合理 主体突出 可读性强 易维护
2)更容易识别元素
3)爬虫更容易分析内容
新增语义化标签常用：article、section、nav、aside、header、footer
目的：文档结构与样式分离（尽量不使用带有样式的标签b、font等）。
2.新增了多媒体元素（audio,video），避免了使用flash等第三方插件播放声音视频等
<!--audio支持格式： MP3, Wav, Ogg-->
<audio controls="controls" id="chat_get">
<source src="./music/get.mp3" type="audio/mpeg" />
</audio>
<script>
//播放声音
function openAudio(str) {
var audio = document.getElementById(str);
audio.play();
}
//关闭声音
function closeAudio(str) {
var audio = document.getElementById(str);
audio.pause();
audio.load();
}
//这两句要放到用户点击事件里去 避免程序员恶意对用户进行骚扰
openAudio('chat_get');
closeAudio('chat_get');
</script>
<!--video支持格式：MP4, WebM, Ogg-->
<!--https://www.w3school.com.cn/jsref/dom_obj_video.asp-->
<video width="320" height="240" controls="controls">
<source src="m1.mp4" type="video/mp4">
<source src="m1.ogg" type="video/ogg">
</video>
3.应用更丰富：
1)新增canvas: 直接操作图片，借助canvas对图片进行base64编码，制作游戏，动态特效等。
2)扩展API: history可以查看用户浏览网页历史 可以进行回退 前进操作
history.back() - 后退
history.forward() - 前进
history.go(-1) - 后退一页
window.location.assign(“http://www.baidu.com”) - 加载一个新的文档
3) 地理定位 navigator.geolocation.getCurrentPosition
4) web存储
window.localStorage 容量5M左右 永久存储
window.sessionStorage 容量5M左右 浏览器关闭数据丢失
Cookie 一般服务端生成 cookie 用于存放服务端session索引
Web SQL 浏览器数据库
5)Web Workers 运行在后台的js 不影响网页正常运行 使用WebWorkers需要从网页引入
<!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>Web Workers Demo</title>
</head>
<body id="result"></body>
<script>
if (!typeof Worker) {
console.log("浏览器不支持Workers");
} else {
var wb = new Worker("webworkers.js");
//当对象通过事件源接收到某些消息时 触发onmessage
//js文件中的postMessage('mes');方法用于触发网页中的onmessage
wb.onmessage = function (event) {
document.getElementById("result").innerHTML = event.data;
};
}
</script>
</html>
webworkers.js
~~这是个区别于 setInterval 的定时器
var i = 0;
function setTime() {
i = i + 1;
postMessage(i);
setTimeout("setTime()", 500);
}
setTime();
~~谷歌的安全机制：不允许通过本地文件访问Worker
试一下 通过获取服务端静态资源（nodejs）----可以实现
也可以用VSCode的Open Live Server 打开文件
26万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
