html面试题大全

以下题目是根据网上多份面经收集而来的，题目相同意味着被问的频率比较高，有问题欢迎留言讨论，喜欢可以点赞关注。

HTML5新特性，新标签新特性

image.png

WEB标准以及W3C标准是什么?

image.png

Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

image.png

HTML全局属性(global attribute)有哪些

image.png

html语义化的理解，SEO和语义化

image.png

Html4，html5是建立在http上的，http的下一代要解决什么问

HTML5的离线储存怎么使用，工作原理能不能解释一下？

HTML5离线存储存储功能非常强大，它的作用是：在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，自动更新缓存数据。

原理：
HTML5的离线存储是基于一个新建的.appcache文件的，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

怎么用：

首先，在html页面头部加入一个manifest的属性:

<!DOCTYPE HTML>
<html manifest = "cache.manifest">
...
</html>

然后书写cache.manifest文件：

CACHE MANIFEST
#v0.11

CACHE:
js/app.js
css/style.css

NETWORK:
resourse/logo.png

FALLBACK:
/ /offline.html

manifest （即 .appcache 文件）文件是简单的文本文件，可分为三个部分：

CACHE ：
在此标题下列出的文件将在首次下载后进行缓存。（由于包含manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来）

NETWORK ：
在此标题下列出的文件需要与服务器的连接，且不会被缓存，离线时无法使用。
可以使用 “*” 来指示所有其他资源/文件都需要因特网连接：

NETWORK

如果在CACHE和NETWORK中有一个相同的资源，那么这个资源还是会被离线存储，也就是说CACHE的优先级更高。

FALLBACK：
在此标题下列出的文件规定当页面无法访问时的回退页面。比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问offline.html。

浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢

在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。离线的情况下，浏览器就直接使用离线存储的资源。

如何设计一个localStorage，保证数据的实效性

https://blog.csdn.net/weixin_41610178/article/details/81216914
思路存储的时候设置一个时间起和有效时间段，获取的时候new一个当前时间，对比存储时间，超过了有效时间段，删除存储。

Canvas动画
SVG
Canvas和SVG有什么区别？

image.png

canvas优化绘制性能

https://www.jianshu.com/p/891cce4c2baf

serviceworker如何保证离线缓存资源更新

https://blog.csdn.net/weixin_40920953/article/details/102460557

<b>和<strong>的区别

image.png

input和textarea的区别

image.png

用一个div模拟textarea的实现

如上

移动设备忽略将页面中的数字识别为电话号码的方法

如果忽略页面中的数字识别为电话号码, 只要把这个默认行为关闭就行，只要一行代码:

<meta name = "format-detection" content = "telephone=no">

Web Worker

web worker 是运行在后台的 JavaScript，不会影响页面的性能。
现代浏览器为JavaScript创造的多线程环境。可以新建并将部分任务分配到worker线程并行运行，两个线程可独立运行，互不干扰，可通过自带的消息机制相互通信。

基本用法:
// 创建 worker
const worker = new Worker('work.js');

// 向主进程推送消息
worker.postMessage('Hello World');

// 监听主进程来的消息
worker.onmessage = function (event) {
  console.log('Received message ' + event.data);
}

限制:

同源限制
无法使用 document / window / alert / confirm
无法加载本地资源

介绍service worker

https://www.jianshu.com/p/768be2733872

https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API

Service workers 本质上充当Web应用程序与浏览器之间的代理服务器，也可以在网络可用时作为浏览器和网络间的代理。它们旨在（除其他之外）使得能够创建有效的离线体验，拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作。他们还允许访问推送通知和后台同步API

Websocket

Websocket 是一个持久化的协议，基于 http ， 服务端可以主动 push

兼容：
FLASH Socket
长轮询： 定时发送 ajax
long poll： 发送 --> 有消息时再 response

new WebSocket(url)
ws.onerror = fn
ws.onclose = fn
ws.onopen = fn
ws.onmessage = fn
ws.send()