HTML面试复习总结（持续更新中）

HTML面试复习总结（持续更新中）

1.src和herf区别

同：应用外部资源

异：

src:解析时，会暂停其他资源加载处理，直到src资源加载、编译、执⾏完毕，所以⼀般js脚本会放在页面底部.

href:解析时，不会暂停其他资源加载处理。与其他资源加载并行执行

---

2.对HTML语义化的理解

• 对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，有利于SEO。除此之外，语义类还支持读屏软件，根据文章可以自动生成目录；
• 对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护

<header><main><footer><article><aside>

---

3.defer和async区别

defer和async:异步加载，defer执行会放在html解析完成后，async加载后直接执行，阻断html解析直到执行完毕。

sciprt:加载和执行都会阻断html的解析

---

4.html新元素

（1）新增语义化标签：nav、header、footer、aside、section、article ，main

（2）音频、视频标签：audio、video

（3）数据存储：localStorage、sessionStorage

（4）canvas（画布）、Geolocation（地理定位）、websocket（通信协议）

（5）input标签新增属性：placeholder、autocomplete、autofocus、required

（6）history API：go、forward、back、pushstate

移除的元素：

• 纯表现的元素：basefont，big，center，font, s，strike，tt，u;
• 对可用性产生负面影响的元素：frame，frameset，noframes；

---

5.iframe优缺点

优点:

• 可以原封不动的展示 界面
• 多界面调用iframe,只需要修改iframe的内容，即可完成对每个界面修改
• 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来[嵌套(https://so.csdn.net/so/search?q=嵌套&spm=1001.2101.3001.7020)，可以增加代码的可重用性。

缺点：

• 会产生很多页面，不容易管理
• 很多的移动设备（PDA手机）无法完全显示框架，设备兼容性差
• iframe框架页面会增加服务器的http请求，对于大型网站是不可取的

---

6.行级元素和块级元素区别

*块级元素：*

• 独占一行
• 高度和宽度，外边距，内边距可单独设置
• 可容纳行级元素和块级元素

常见块级标签：

<h1>~<h2> ,<p>,<div>,<ul>,<ol>,<li>

*行级元素*：靠自己字体大小和图片大小来支持结构

• 多个行级元素占一行,中间会有间隙
• 设置高度和宽度无效，水平方向上padding和margin可以设置，垂直方向无效
• 只能容纳纯文本和其他行内元素

常见行内标签：

<a>,<strong>,<b>,<em>,<span>

*行内块级元素：*

• 相邻行内块元素在同一行上，中间会有空白间隙*
• 默认宽度内容本身宽
• 可设置宽高，内边距，外边距

常见行内块标签：

导致间隙原因：换行或其他格式不可见字符

解决间隙：

• 写在一行

  <div><span>yanan1<span><span>yanan2<span><span>yanan3<span><div>
  

• 改变html结构

  <div>
  <span>yanan1<span
    ><span>yanan2<span
      ><span>yanan3<span>
  <div>
  

• margin负值

   margin-left:-0.33333333em;
  

• 设置浮动

  float：left
  

转换：

块转行内：display：inline；

行内转块：display：block；

块，行内元素转换为行内块：display：inline-block

---

7.web worker

出现原因：javascript的执行是单线程的，页面上的javascript在执行时会阻塞浏览器的响应，这非常影响用户体验，web worker另开一个js线程，处理比较费时复杂运算，避免界面导致阻塞

本质：数据刷新与页面渲染两个动作拆开执行， postMessage 将结果回传到主线程。

---

8.Canves和SVG区别

svg:是基于可扩展标记语言XML描述的2D图形的语言，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形

特点：

• 不依赖分辨率
• 支持事件处理器
• 最适合带有大型渲染区域的应用程序（比如谷歌地图）
• 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
• 不适合游戏应用

Canves: Canvas是画布，通过Javascript来绘制2D图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制。

特点：

• 依赖分辨率
• 不支持事件处理器
• 弱的文本渲染能力
• 能够以 .png 或 .jpg 格式保存结果图像
• 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

---

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

1.在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问

app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过

app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的

manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么

就会重新下载文件中的资源并进行离线存储。

2.离线的情况下，浏览器就直接使用离线存储的资源

---

10.cookies,sessionStorage,localStorage区别

cookie:存储大小在4K左右，只能存储字符串。主要用于保存登录信息，过期时间前内有效。只能传输字符数据，容易被盗取信息，不安全。数据在所有同源窗口中都是共享的

sessionStorage:存储大小在5M左右，保存某个界面会话数据，存储在客户端。关闭页面后，失效（临时存储），数据只能在目前浏览器窗口共享

localStorage:存储大小在5M,长久存储会话数据，除非自行删除。存储在客户端。数据在所有同源窗口中都是共享的

---

11.websocket：实现服务器端推送信息

目的：解决通信只能由客户端发起和轮询带来的资源浪费

ps:轮询是间隔一段时间，发出一个询问。导致不停建立TCP连接，导致资源浪费。

特点:

• 建立在 TCP 协议之上，服务器端的实现比较容易;
• HTTP兼容性良好
• 数据格式轻，性能开销小
• 可以发送文本和二进制数据
• 没有同源限制
• 协议表示符是ws(加密：wss) 如：ws://example.com:80/some/path

简单用法：

var ws = new WebSocket("wss://echo.websocket.org");//创建WebSocket实例，建立连接

ws.onopen = function(evt) { //连接打开的回调函数
  console.log("Connection open ..."); 
  ws.send("Hello WebSockets!");
};

ws.onmessage = function(evt) {//服务器接收信息的回调函数
  console.log( "Received Message: " + evt.data);
  ws.close();
};

ws.onclose = function(evt) {//关闭连接的回调函数
  console.log("Connection closed.");
};   

这个系列还会持续更新，内容来源于总结，如果对你有帮助，点个👍吧。