面试集合2022.12.29 HTML5 新特征总结（包括但不仅限于）语义化标签 <article>、<footer>

2022.12.29

HTML5 新特征总结（包括但不仅限于）

语义化标签 <article>、<footer>、<header>、<nav>、<section>

提升页面页面的阅读性（结构性增强），更有利于SEO，对于使用屏幕阅读器的人来说会更友好（有明显的语气差别，例如strong标签内的内容会重读）。

嵌入视频和音频<audio> 和 <video>

能够很容易的输出音频和视频流，提供更便利的获取文件信息的API。

增强表单控件类型和表单属性 calendar、date、time、email、url、search

这些新特性提供了更好的输入控制和验证。添加了placeholder、required、pattern、min、max、height、width等表单属性

placeholder 提供对输入域的提示值
required 规定表单提交前输入域是否必填
pattern 规定用于验证input域的正则表达式
min 规定输入域允许的最小值
max 规定输入域允许的最大值
multiple 输入域可以选择多个值，适用于email和file类型

DOM的扩展
HTML5增加的getElementByClassName()方法是最受人欢迎的一个方法，可以通过 document对象及所有HTML元素调用该方法

//取得类中包含"username"和"current"的元素
var allCurrentUsernames = document.getElementByClassName("username current")

//取得id为"myDiv"的元素中带有类名"selected"的所有元素
var selected = document.getElementById("myDiv").getElementsByClassName("selected")

使用这个方法可以更方便地为带有某些类的元素添加事件处理程序，而不必再局限于使用ID或标签名(getElementsByTagName)。
HTML5规定可以为元素添加非标准的属性，但要加前缀data-，为元素提供与渲染无关的信息。

<div id="div" data-age="2019" data-name="James"></div>

可以通过元素的dataset属性访问自定义属性的值。

var div = document.getElementById("div")
//取得自定义属性的值
var age = div.dataset.age;
var name = div.dataset.name;

HTML5还为DOM作了其他扩展，包括classList属性、焦点管理、HTMLDocument变化、字符集属性、插入标记等。

Web Storage API

Web Storage的目的是克服由cookie带来的一些限制，当数据需要被严格控制在客户端上时，无须持续地将数据发回服务器。

Web Storage常用的两个对象分别是localStorage和sessionStorage（5MB的限制，有的浏览器会设置2.5M的限制）。

sessionStorage（保存在session中，浏览器关闭，数据消失）
localStorage（保存在客户端本地，除非手动删除，否则一直保存）

Web Sockets API

WebSocket 使用ws或wss协议，Websocket是一个持久化的协议，相对于HTTP这种非持久的协议来说。WebSocket API最伟大之处在于服务器和客户端可以在给定的时间范围内的任意时刻，相互推送信息。WebSocket并不限于以Ajax(或XHR)方式通信，因为Ajax技术需要客户端发起请求，而WebSocket服务器和客户端可以彼此相互推送信息；XHR受到域的限制，而WebSocket允许跨域通信

// 创建一个Socket实例
var socket = new WebSocket('ws://localhost:8080');
// 打开Socket
socket.onopen = function(event) {
  // 发送一个初始化消息
  socket.send('I am the client and I'm listening!');
  // 监听消息
  socket.onmessage = function(event) {
    console.log('Client received a message',event);
  };
  // 监听Socket的关闭
  socket.onclose = function(event) {
    console.log('Client notified socket has closed',event);
  };
  // 关闭Socket....
  //socket.close()
};

Canvas绘图

<canvas>元素。这个元素负责在页面中设定一个区域，然后就可以通过JavaScript动态地在这个区域中绘制图形。
要使用<canvas>元素，必须先设置其width和height属性，指定可以绘图的区域大小。出现在开始标签和结束标签中的内容是后备信息，如果浏览器不支持<canvas>元素，就会显示这些信息。

<canvas id="drawing" width="200" height="200">A drawing of something.</canvas>

地理(Geolocation) API

通过地理定位(geolocation)API，JavaScript代码能够访问到用户的当前位置信息。当然，访问之前用户必须同意共享其地理位置信息

Geolocation API在浏览器中的实现是navigator.geolocation对象，这个对象包含3个方法。第一个方法是getCurrentPosition() ，调用这个方法就会触发请求用户共享地理定位信息的对话框。成功会接收到一个Position对象参数，该对象有两个属性：coords和timestamp。coords对象中将包含下列与位置相关的信息：

navigator.geolocation.getCurrentPosition(updateLocation,handleLocationError);
//更新位置信息
function updateLocation(position){
  //纬度
  var latitude = position.coords.latitude.
  //经度
  var longitude = position.coords.longitude.
  //准确度
  var accuracy = position.coords.accuracy.
  //时间戳
  var timestamp = position.coords.timestamp.
  }
//处理错误信息
function handleLocationError(error){
  console.log(error);
}
//监听位置更新
var watchId=navigator.geolocation.watchPostion(updateLocation,handleLocationError);
//不再接收位置更新
navigator.geolocation.clearWatch(watchId);

如果希望跟踪用户的位置，可以使用watchPosition()方法。这个方法与getCurrentPosition()方法基本相同，第一次调用，执行成功回调或者错误回调，然后，watchPosition()就地等待系统发出位置已改变的信号（它不会自己轮询位置）。

2023 1-3

iframe有哪些缺点

iframe会阻塞主页面的Onload事件。
搜索引擎的检索程序无法解读这种页面，不利于SEO。
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript。
动态给iframe添加src属性值，这样可以绕开以上两个问题。