高频面试题之HTML篇

不定期更新，欢迎指正。

1 HTML5新增特性与废除特性

HTML5新增了27个元素，废弃了16个元素。现有规范把HTML5元素按优先等级定义为结构性元素、级块性元素、行内语义性元素、交互性元素。
新增特性举例
(1) 结构性元素：header头部、footer底部、nav导航栏、article主体、section章节
(2) 级块性元素：aside侧边栏
(3) 行内语义性元素：time时间、progress进度条、video视频、audio音频
(4) API：
web worker
参考这两篇博客即可，第二篇有可运行demo
http://www.ruanyifeng.com/blog/2018/07/web-worker.html
https://blog.youkuaiyun.com/lqlqlq007/article/details/79824122
概述：为了解决长时间运行的Javascript进程导致浏览器用户页面冻结的问题，使用web worker把需要复杂计算的工作放在子线程中进行。同时注意，worker读取的文件必须来自网络，而不是本地。web worker虽然是新启动的子线程，运行不会阻塞页面，但与主线程的交互会。
web storage(localStorage sessionStorage)、geolocation获取地理位置
废除特性举例
(1) 纯表现元素：可以用css替代的元素。比如center、font、big
(2) 三个框架元素frame、frameset、noframes，只支持iframe

2 浏览器内核

1、IE浏览器内核：Trident内核，也被称为IE内核；
2、Firefox浏览器内核：Gecko内核，也被称Firefox内核；
3、Safari浏览器内核：Webkit内核；
4、Chrome浏览器内核：Chromium内核 → Webkit内核 → Blink内核；
5、Opera浏览器内核：最初是自主研发的Presto内核，后跟随谷歌，从Webkit到Blink内核

3 DOCTYPE

声明位于文档中的最前面的位置，处于标签之前，告诉浏览器按照何种文档类型解析页面。
文档类型：HTML5，HTML 4.01 / XHTML 1.0(Transitional Strict Frameset)，XHTML 1.1

4 cookie、localStorage、sessionStorage区别

参考 https://jerryzou.com/posts/cookie-and-web-storage/
sessionStorage、localStorage、cookie都是浏览器端存储的数据。
其中sessionStorage引入了“浏览器窗口”的概念，是指在同源同窗口(tab)中始终存在的数据。即只要这个tab没有关闭，即使刷新页面或进入同源另一页面，数据依然存在。关闭tab后，sessionStorage即被销毁。就算是同时独立打开的同一页面，不同窗口的sessionStorage对象也是不同的。

5 HTML语义化

HTML语义化指的是根据内容的语义，选择合适的标签，便于开发者阅读和编写代码的同时让浏览器和爬虫更好解析。
语义化的原因：
在没有CSS的情况下也能呈现良好的内容结构
用户体验：比如title、alt用于解释名词或图片信息
有利于SEO搜索引擎优化，有利于爬虫爬取更加有效的信息
方便其他设备解析：比如屏幕阅读器、移动设备等
方便团队开发和维护，更具可读性，减少差异化
语义化标签：
head.footer.nav.article.section等

6 link标签与@import的区别

<link rel='stylesheet' rev='stylesheet' href='CSS文件 ' type='text/css' media='all' />
<style type='text/css' media='screen'>
@import url('CSS文件 ');
</style>

两者都是外部引用CSS的方式，但是存在一定的区别：
(1) 加载内容： link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务； @import 属于 CSS 范畴，只能加载 CSS 。
(2) 加载时机： link 引用 CSS 时，在页面载入时同时加载； @import 需要页面完全载入以后加载。
(3) 兼容性：link 是 XHTML 标签，无兼容问题； @import 是在 CSS2.1 提出的，低版本的浏览器不支持。
(4) 样式修改： link 支持使用 Javascript 控制 DOM 去改变样式；而 @import 不支持。

7 HTML全局属性

参考 https://www.nowcoder.com/questionTerminal/5505ebcd04df48dd91e32977cb9a9b11

accesskey 规定激活元素的快捷键；
id 规定元素的唯一 id。
class 规定元素的一个或多个类名（引用样式表中的类）。
lang 规定元素内容的语言。
data-* 自定义数据属性，data-test-value 可通过 HTMLElement.dataset.testValue ( 或是 HTMLElement.dataset[“testValue”] ) 访问。不支持该属性的浏览器可通过 getAttribute访问。
当没有合适的属性和元素时，自定义的 data 属性能够存储页面或 App 的私有自定义数据。
style 规定元素的CSS行内元素。

contenteditable 规定元素内容是否可编辑；
contextmenu 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。
dir 规定元素中内容的文本方向。
draggable 规定元素是否可拖动。
dropzone 规定在拖动被拖动数据时是否进行复制、移动或链接。
hidden 样式上会导致元素不显示，但是不能用这个属性实现样式。
spellcheck 规定是否对元素进行拼写和语法检查。
tabindex 规定元素的tab键次序。
title 规定有关元素的额外信息。
translate 规定是否应该翻译元素内容。

8 iframe缺点

(1) iframe会阻塞主页面的 Onload 事件，因为window 的 onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发。
(2) 搜索引擎的检索程序无法解读这种页面，“frame/frameset/iframe标签,会导致百度爬虫的抓取困难,建议不要使用”，不利于 SEO。
(3) iframe和主页面共享连接池，而浏览器对相同域的连接有限制。这意味着 iframe 在加载资源时可能用光了所有的可用连接，从而阻塞了主页面资源的加载。

如果需要使用 iframe ，最好是通过 javascript动态给iframe添加 src 属性值，这样可以绕开以上两个问题。

9 浏览器标签页通信方式

9.1 方式一：cookie+setInterval

关于cookie
cookie最初是在客户端用于存储用户的会话信息的。cookie实际上是一小段文本信息，客户端请求服务器，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个cookie。客户端会把cookie保存起来，当浏览器再次请求该网站时，把请求的网址和cookie一同提交给服务器。服务器检查该cookie以此来辨认用户状态。服务器也可根据需要修改cookie的内容。
document.cookie可以读取、写入、删除cookie。
cookie的特性：一个页面产生的cookie能被与这个页面同一目录或其他子目录下的页面访问，由此产生了一个共享的存储空间。通常把cookie的path设置为一个更高级别的目录从而使更多页面共享。cookie所在的域默认为请求的地址，也可以设置document。domain为父域等方式扩大cookie可被访问的域。
实现原理
需求：新闻详情页修改数据提交后，列表页可显示

//列表页 间隔1s检测tid字段是否更新
window.onload=function(){
  var tid='';
  setInterval(function(){
    if(tid!=QQ.cookie.get('tid')){
      alert('数据更新');
      tid=QQ.cookie.get('tid');
    }
  },1000);
}

//详情页 有数据修改时 写入cookie
<input id='content' type='text'>
<button id='btn'></button>
<script>
window.onload=function(){
  var oBtn=document.getElementById('btn');
  var oInput=document.getElementById('content');
  oBtn.onclick=function(){
    var val=oInput.value;
    QQ.cookie.set('tid',val);
  }
}
</script>

不足
1 cookie空间有限，浏览器在每一个域名下最多能设置30-50个cookie，容量最多4K左右
2 每次HTTP请求会把当前域的cookie发送到服务器上，而有些cookie只是浏览器才能用到，浪费网络带宽
3 setInterval的频率设置，过大影响浏览器性能，过小影响时效性
优点
兼容性好 几乎所有浏览器都支持

9.2 方式二：localStorage

HTML5中加入了一个localStorage特性，主要是用来作为本地存储使用的，解决了cookie存储空间不足的问题。一般浏览器支持的是5M大小，不同浏览器中localStorage也会有所不同。
localStorage提供了JS的读写操作。

if(！window.localStorage){
  alert('浏览器不支持localStorage');
  return false;
}else{
  var storage=window.localStorage;
  storage.a=1;
  storage.setItem('b',2);
  storage.clear();
}

除了读写之外，比cookie多了一个优点，提供了onstorage以及storage事件，可以绑定一个回调函数。

window.onstorage=function(e){
  console.log(e);
}
window.addEventListener('storage',function(e){
  console.log(e);
});

localStorage是Storage对象的实例，对Storage事件进行任何修改都会触发storage事件。属性/setItem保存数据 delete/removeItem删除数据 clear都会触发，通过这个事件我们可以实现页卡之间的变动监听。
实现原理

//列表页
<script>
window.addEventListener('storage',function(event){
  console.log('newValue is'+localStorage.getItem('tid'));
  console.log('oldValue is'+event.oldValue);
  alert('数据更新');
},false);
</script>
//详情页
<input id="content" type="text"/>
<button id="btn">Click</button>
<script>
    window.onload=function(){
        var oBtn=document.getElementById("btn");
        var oInput=document.getElementById("content");
        oBtn.onclick=function(){
            var val=oInput.value;
            localStorage.setItem("tid",val);
        }
    }
</script>

注意
onstorage以及storage事件都是针对非当前页面对localStorage进行修改时才会触发。并且，在对原有的数据的值进行修改时才会触发，比如原本有一个key为a，value为1的localStorage，再执行localStorage.setItem(‘a’,1)是不会触发监听函数的
不足
浏览器对于localStorage的容量大小不统一，并且高版本浏览器才支持localStorage这个属性
目前所有浏览器中都会把localStorage的值类型限定为string类型，需要JSON转换
localStorage本质上是对字符串的读取，存储内容多的话会消耗内存空间，导致页面变卡
只能监听非己页面的数据变化，这一点严重影响使用
优点
解决了cookie容量小和时效性不足的问题

9.3 方式三：WebSocket

WebSocket API是下一代客户端-服务器的异步通信方法，双向实时通信。WebSocket并不局限于以Ajax(或XHR)方式通信，因为Ajax技术需要客户端发起请求，而WebSocket两端可以彼此相互推送。XHR受到域的限制，而WebSocket允许跨域通信。

//使用方式
var socket=new WebSocket('ws://localhost:8080');
socket.onopen=function(event){
  //发送
  socket.send('I am the client..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();
}

send和onmessage用于发送、接收数据。onmessage事件提供了一个data属性，包含消息的body部分。body部分必须是一个字符串，可以进行序列化/反序列化操作，以便传递更多数据。
实现原理

//列表页通过onmessage监听socket服务器发送过来的消息
<script>
var socket=new WebSocket('ws://localhost:8080');
socket.onopen=function(event){
  socket.onmessage=function(event){
    console.log('Client received a message',event);
  };
};
</script>
//详情页有数据修改时，通过socket连接，通知列表页更新数据
<input id="content" type="text"/>
<button id="btn">Click</button>
<script>
var socket=new WebSocket('ws://localhost:8080');
window.onload=function(){
  var oBtn=document.getElementById("btn");
  var oInput=document.getElementById("content");
  oBtn.onclick=function(){
    var val=oInput.value;
    socket.onopen=function(event){
      socket.event('数据更新');
    }
  }
}
</script>

WebSocket的语法简单，不过需要IE10+浏览器才支持WebSocket通信。如果需要兼容IE8、9，通常使用第三方库来解决这个问题，比如Socket.IO。
不足
需要浏览器端支持才能完成任务。如果socket数据量比较大的话，会严重消耗服务器的资源。
优点
简单 可实时

9.4 方式四：BroadcastChannel

BroadcastChannel即广播频道，是window下面的一个API，用于同源不同页面之间完成通信。postmessage传递数据，onmessage监听消息。只要初始化实例时传入相同的频道值，就会被接入到一个相同的广播频道中。
实现原理

//详情页传递数据
let listCast=new BroadcastChannel('mychannel');
myObj={tid:'123',title:'更改后的标题'};
listCast.postMessage(myObj);
//列表页接收广播
let articleCast=new BroadcastChannel('mychannel');
articleCast.onmessage=function(e){
  console.log(e.data);
}

不足
兼容性差 只支持最新版Chrome和Firefox,完全不支持IE和Safari。
优点
简单 单一

9.5 方式五：SharedWorker

SharedWorker是HTML5新提供的浏览器API，叫做共享工作线程。允许多个页面共享使用线程，每个页面都链接到该共享工作线程的某个端口号上。页面通过该端口与共享工作进程进行通信。
参考 https://juejin.im/post/5acdba01f265da23826e5633#heading-2
实现原理

//列表页
<script>
var s=new SharedWorker('x.js');
s.port.addEventListener('message', (e) => {
    console.log('来自worker的数据：', e.data)
 }, false)
s.port.postMessage('get');
s.port.start();
</script>
//详情页 通过SharedWorker通知列表页更新数据
<input id="content" /><input type="button" id="btn" value="发送"/>
<script>
var s=new SharedWorker('x.js');
btn.onclick=function(){
  s.port.postMessage(document.getElementById('content').value);
  s.port.start();
}
</script>
//共享线程x.js 双向 每一个页面都能用来发送和接收数据
// sharedWorker所要用到的js文件，不必打包到项目中，直接放到服务器即可
let data = ''
onconnect = function (e) {
  let port = e.ports[0]
  port.onmessage = function (e) {
    if (e.data === 'get') {
      port.postMessage(data)
    } else {
      data = e.data
    }
  }
}

SharedWorker可以被多个window同时使用，但是必须保证这些标签页同源。
不足
兼容性差，不支持IE
API简单，配置繁琐
优点
另启一个新线程，不影响主线程代码业务，无需借助服务器。

10 src与href区别

(1) 用途区别：src和href都指向外部资源的位置，但src用于替换当前元素，href主要是建立链接跳转关系。
(2) 场景区别：src一般用于js脚本、img和frame等元素，href一般用于link、a等元素。
(3) 加载区别：浏览器解析到src时会暂停其他资源的下载和处理，所以将js脚本放在底部而不是头部。浏览器解析到href时会并行下载资源，所以建议使用link加载css而不是@import。