HTML5新特性

1.语义化:让网页中不同部分表示特定的含义 更准确的标记特定类型的内容
优点:
1)结构清晰 布局合理 主体突出 可读性强 易维护
2)更容易识别元素
3)爬虫更容易分析内容
新增语义化标签常用:article、section、nav、aside、header、footer
目的:文档结构与样式分离(尽量不使用带有样式的标签b、font等)。
2.新增了多媒体元素(audio,video),避免了使用flash等第三方插件播放声音视频等


 <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 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左右 永久存储
HTML5新特性_第1张图片
window.sessionStorage 容量5M左右 浏览器关闭数据丢失
HTML5新特性_第2张图片
Cookie 一般服务端生成 cookie 用于存放服务端session索引
Web SQL 浏览器数据库
HTML5新特性_第3张图片HTML5新特性_第4张图片
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 Demotitle>
  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 打开文件
HTML5新特性_第5张图片

你可能感兴趣的:(前端笔记,html5,前端)