html面试题

申明

这些都是来自y03l2iufsbl.feishu.cn/docx/N9ISdj…

1，什么是 DOM 和 BOM？

DOM（Document Object Model）和 BOM（Browser Object Model）是 JavaScript 中常用的两个概念，用于描述浏览器中的不同对象模型

DOM（Document Object Model）:
1，DOM 是表示 HTML 和 XML 文档的标准的对象模型。它将文档中的每个组件（如元素、属性、文本等）都看作是一个对象，开发者可以使用 JavaScript 来操作这些对象，从而动态地改变页面的内容、结构和样式
2，DOM 以树状结构组织文档的内容，其中树的根节点是 document  对象，它代表整个文档。document 对象有各种方法和属性，可以用来访问和修改文档的内容和结构。

BOM（Browser Object Model）:
1，BOM 是表示浏览器窗口及其各个组件的对象模型。它提供了一组对象，用于访问和控制浏览器窗口及其各个部分，如地址栏、历史记录等。
2，BOM 的核心对象是 window 对象，它表示浏览器窗口，并且是 JavaScript 中的全局对象。window 对象提供了许多属性和方法，用于控制浏览器窗口的各个方面，如页面导航、定时器、对话框等。
3，BOM 还提供了其他一些对象，如 navigator，location，history，screen等

总的来说，DOM 是用于访问和操作网页文档的对象模型，而 BOM 是用于控制浏览器窗口及其各个组件的对象模型。在 JavaScript 编程中，开发者通常会同时使用 DOM 和 BOM 来完成各种任务，如操作网页元素、导航控制、事件处理等。

2，一台设备的dpr，是否是可变的？

devicePixelRatio，中文名称是设备像素比。这个概念在移动开发的时候会被特别关注，因为它关系到了整个画面的观感、布局甚至是清晰度。在JavaScript BOM中，它是window全局对象下的一个属性，它的定义如下：
dpr = 设备像素 / CSS像素

1，首先说设备像素。举手机的例子来说，设备像素也就是在手机广告上经常会看到的1920 1080像素或1280 720像素，也就是常说的分辨率为1080p或720p。它所指的是设备上有多少个能够显示一种特定颜色的最小区域，在任何设备中这个数值都是不会变的
2，再说CSS像素，它的一种更广义的叫法是独立像素。CSS像素是为web开发者所打造的，是在CSS和JavaScript中使用的一个抽象的层，我们在CSS中定义的width: 100px;、font-size: 16px;等属性都是指CSS像素。而相对于CSS像素，设备像素这个概念在前端中几乎用不上（除了screen.width/height）。

3，前端该如何选择图片的格式？

1，位图
所谓位图就是用像素点拼起来的图也叫点阵图，平时我们用到的png、jpg等图片就是位图

2，矢量图
矢量图，也叫做向量图。矢量图并不纪录画面上每一点的信息，而是纪录了元素形状及颜色的算法，当你打开一幅矢量图的时候，软件对图形对应的函数进行运算，将运算结果图形的形状和颜色显示给你看。

无论显示画面是大还是小，画面上的对象对应的算法是不变的，所以，即使对画面进行倍数相当大的缩放，它也不会像位图那样会失真。

常见的就是svg格式的。

图片的压缩类型：
1，无压缩
2，有损压缩
3，无损压缩

4，前端跨页面通信，你知道哪些方法？

1，LocalStorage 或 SessionStorage：这两个 Web 存储 API 可以在不同页面之间共享数据。一个页面可以将数据存储在本地存储中，另一个页面则可以读取该数据并进行相应处理。通过监听 storage 事件，可以实现数据的实时更新

2，Cookies：使用 Cookies 也可以在不同页面之间传递数据。通过设置和读取 Cookie 值，可以在同一域名下的不同页面之间交换信息

3，PostMessage：window.postMessage() 方法允许从一个窗口向另一个窗口发送消息，并在目标窗口上触发 message 事件。通过指定目标窗口的 origin，可以确保只有特定窗口能够接收和处理消息。

4，Broadcast Channel：Broadcast Channel API 允许在同一浏览器下的不同上下文（例如，在不同标签页或 iframe 中）之间进行双向通信。它提供了一个类似于发布-订阅模式的机制，通过创建一个广播频道，并在不同上下文中加入该频道，可以实现消息的广播和接收

5，SharedWorker：SharedWorker 是一个可由多个窗口或标签页共享的 Web Worker，它可以在不同页面之间进行跨页面通信。通过 SharedWorker，多个页面可以通过 postMessage 进行双向通信，并共享数据和执行操作。

6，IndexedDB：IndexedDB 是浏览器提供的一个客户端数据库，可以在不同页面之间存储和共享数据。通过在一个页面中写入数据，另一个页面可以读取该数据。

7，WebSockets：WebSockets 提供了全双工的、双向通信通道，可以在客户端和服务器之间进行实时通信。通过建立 WebSocket 连接，可以在不同页面之间通过服务器传递数据并实现实时更新。

5，title与h1的区别、b与strong的区别、i与em的区别？

title 和 h1 的区别
用途不同：title 标签用于定义 HTML 文档的标题，通常会显示在浏览器的标签页上或者窗口的标题栏上，对于搜索引擎优化（SEO）也非常重要。而 h1 标签用于表示文档的主标题，通常显示在页面内容区域的顶部。

b 和 strong 的区别
b 标记用于指定文本加粗的外观效果，通常只是为了强调关键词或短语，没有特别强的语义化含义。而 strong 标记则表示文本的强调重点，具有更强的语义化含义，并且可以改变文本的语调和读音等方面。

i 和 em 的区别
b 标记用于指定文本加粗的外观效果，通常只是为了强调关键词或短语，没有特别强的语义化含义。而 strong 标记则表示文本的强调重点，具有更强的语义化含义，并且可以改变文本的语调和读音等方面。

6，script 标签为什么建议放在 body 标签的底部（defer、async）

因为浏览器在渲染html的时候是从上到下执行的，当遇到js文件的时候就会停止当前页面的渲染，转而去下载js文件。
如果将script标签放在头部，在文件很大的情况下将导致首屏加载时间延长，影响用户体验。
1，将script标签放在body的底部
2，通过defer、async属性将js文件转为异步加载

7，说说你对 SSG 的理解

SSG（Static Site Generation，静态网站生成）是指在构建时预先生成静态页面，并将这些页面部署到 CDN 或者其他存储服务中，以提升 Web 应用的性能和用户体验。

1，在开发阶段，使用模板引擎等技术创建静态页面模板；
2，将需要展示的数据从后台 API 中获取或者通过其他渠道获取，并将其填充到静态页面模板中，生成完整的 HTML 页面；
3，使用构建工具（例如 Gatsby、Next.js 等）对静态页面进行构建，生成静态 HTML、CSS 和 JavaScript 文件；
4，部署生成好的静态文件到服务器或者 CDN 上，以供用户访问。

优势：
1，加载速度快：由于不需要每次请求都动态地渲染页面，SSG 可以减少页面加载时间，从而提高用户体验和搜索引擎排名；
2，安全性高：由于没有后台代码和数据库，SSG 不容易受到 SQL 注入等攻击；
3，成本低：由于不需要动态服务器等设备，SSG 可以降低网站的运维成本和服务器负担。

8，什么是渐进增强和优雅降级？

渐进增强（progressive enhancement）：主要是针对低版本的浏览器进行页面重构，保证基本的功能情况下，再针对高级浏览器进行效果，交互等方面的改进和追加功能，以达到更好的用户体验。
优雅降级 graceful degradation： 一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容。

1，优雅降级是从复杂的现状开始的，并试图减少用户体验的供给；而渐进增强是从一个非常基础的，能够起作用的版本开始的，并在此基础上不断扩充，以适应未来环境的需要；
2，优雅降级（功能衰竭）意味着往回看，而渐进增强则意味着往前看，同时保证其根基处于安全地带。

9，Node 和 Element 是什么关系？

Node与Element的关系，从继承方面思考可能清晰很多。

Element 继承于 Node，具有Node的方法，同时又拓展了很多自己的特有方法。

在Element的一些方法里，是明确区分了Node和Element的。比如说：childNodes与 children, parentNode与parentElement等方法。

Node的一些方法，返回值为Node，比如说文本节点，注释节点之类的，而Element的一些方法，返回值则一定是Element。

Node是一个基类，DOM中的Element，Text和Comment都继承于它。Element，Text，Comment是三种特殊的Node

10，导致页面加载白屏时间长的原因有哪些，怎么进行优化？

白屏的过程：
1、首先，在浏览器地址栏中输入url
2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。
3、在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址。
4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。
5、握手成功后，浏览器向服务器发送http请求，请求数据包。
6、服务器处理收到的请求，将数据返回至浏览器
7、浏览器收到HTTP响应
8、读取页面内容，浏览器渲染，解析html源码
9、生成Dom树、解析css样式、js交互,渲染显示页面

白屏-性能优化：
1，DNS解析优化
	DNS缓存优化
	DNS预加载策略
	稳定可靠的DNS服务器
2，TCP网络链路优化
3，服务端处理优化
	服务端的处理优化，是一个非常庞大的话题，会涉及到如Redis缓存、数据库存储优化或是系统内的各种中间件以及Gzip压缩等
4，浏览器下载、解析、渲染页面优化
	尽可能的精简HTML的代码和结构
	尽可能的优化CSS文件和结构
	一定要合理的放置JS代码，尽量不要使用内联的JS代码
	将渲染首屏内容所需的关键CSS内联到HTML中，能使CSS更快速地下载。在HTML下载完成之后就能渲染了，页面渲染的时间提前，从而缩短首屏渲			     染时间；
	延迟首屏不需要的图片加载，而优先加载首屏所需图片（offsetTop<clientHeight）	

11，假设我要上传图片，怎么在选择图片后，通过浏览器预览待上传的图片？

1，window.URL.createObjectURl
2，FileReader

12，怎么实现“点击回到顶部”的功能？

1、锚点
该实现主要在页面顶部放置一个指定名称的锚点链接，然后在页面下方放置一个返回到该锚点的链接，用户点击该链接即可返回到该锚点所在的顶部位置

2、scrollTop
scrollTop属性表示被隐藏在内容区域上方的像素数。
元素未滚动时，scrollTop的值为0，如果元素被垂直滚动了，scrollTop的值大于0，且表示元素上方不可见内容的像素宽度

3、scrollTo
scrollTo(x,y)方法滚动当前window中显示的文档，让文档中由坐标x和y指定的点位于显示区域的左上角
设置scrollTo(0,0)可以实现回到顶部的效果

4、scrollBy()
scrollBy(x,y)方法滚动当前window中显示的文档，x和y指定滚动的相对量
只要把当前页面的滚动长度作为参数，逆向滚动，则可以实现回到顶部的效果

5、scrollIntoView()
Element.scrollIntoView方法滚动当前元素，进入浏览器的可见区域　

13，如何实现SEO优化

SEO主要分为内部和外部两个方向
一、内部优化
	META 标签优化：例如：TITLE，KEYWORDS，DESCRIPTION （TDK）等的优化
	内部链接的优化，包括相关性链接（Tag 标签），锚文本链接，各导航链接，及图片链接
	网站内容更新：每天保持站内的更新(主要是文章的更新等)
	服务器端渲染（SSR）

二、外部优化
	外部链接类别：博客、论坛、B2B、新闻、分类信息、贴吧、知道、百科、相关信息网等尽量保持链接的多样性
	外链运营：每天添加一定数量的外部链接，使关键词排名稳定提升。
	外链选择：与一些和你网站相关性比较高,整体质量比较好的网站交换友情链接,巩固稳定关键词排名

14，HTML5 有哪些 drag 相关的 API ？

1，dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。
2，darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
3，dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
4，dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
5，dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
6，drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
7，dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。

15，浏览器乱码的原因是什么？如何解决？

产生乱码的原因：
	网页源代码是 gbk 的编码，而内容中的中文字是 utf-8 编码的，这样浏览器打开即会出现 html 乱码，反之也会出现乱码；
	thml 网页编码是 gbk ，而程序从数据库中调出呈现是 utf-8 编码的内容也会造成编码乱码；
	浏览器不能自动检测网页编码，造成网页乱码。
解决办法：
	使用软件编辑HTML网页内容；
	如果网页设置编码是 gkb ，而数据库储存数据编码格式是 utf-8 ，此时需要程序查询数据库数据显示数据前进程序转码；
	如果浏览器浏览时候出现网页乱码，在浏览器中找到转换编码的菜单进行转换。

16，Canvas和SVG有什么区别？

（1）SVG： SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言XML描述的2D图形的语言，SVG基于XML就意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
	不依赖分辨率
	支持事件处理器
	最适合带有大型渲染区域的应用程序（比如谷歌地图）
	复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
	不适合游戏应用

（2）Canvas： Canvas是画布，通过Javascript来绘制2D图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制。
	依赖分辨率
	不支持事件处理器
	弱的文本渲染能力
	能够以 .png 或 .jpg 格式保存结果图像
	最适合图像密集型的游戏，其中的许多对象会被频繁重绘

17，浏览器是如何对 HTML5 的离线储存资源进行管理和加载？

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

离线的情况下，浏览器会直接使用离线存储的资源。

18，HTML5的离线储存怎么使用，它的工作原理是什么

**原理：**HTML5的离线存储是基于一个新建的 .appcache  文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示
使用方法：
1，创建一个和 html 同名的 manifest 文件，然后在页面头部加入 manifest 属性：
<html lang="en" maifest="index.mainfest">

2，在 cache.manifest 文件中编写需要离线存储的资源：
CACHE MANIFEST
	#v0.11
	CACHE:
		js/app.js
		css/style.css
	NETWORK:
		resource/logo.png
	FALLBACK:
		/ /offline.html

CACHE: 表示需要离线存储的资源列表，由于包含 manifest 文件的页面将被自动离线存储，所以不需要把页面自身也列出来。
NETWORK: 表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在 CACHE 和 NETWORK 中有一个相同的资源，那么这个资源还是会被离线存储，也就是说 CACHE 的优先级更高。
FALLBACK: 表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问 offline.html 

3，在离线状态时，操作 window.applicationCache  进行离线缓存的操作。

如何更新缓存：
1，更新 manifest 文件
2，通过 javascript 操作
3，清除浏览器缓存

注意事项：
（1）浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。
（2）如果 manifest 文件，或者内部列举的某一个文件不能正常下载，整个更新过程都将失败，浏览器继续全部使用老的缓存。
（3）引用 manifest 的 html 必须与 manifest 文件同源，在同一个域下。
（4）FALLBACK 中的资源必须和 manifest 文件同源。
（5）当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
（6）站点中的其他页面即使没有设置 manifest 属性，请求的资源如果在缓存中也从缓存中访问。
（7）当 manifest 文件发生改变时，资源请求本身也会触发更新。

19，img的srcset属性的作⽤？

响应式页面中经常用到根据屏幕密度设置不同的图片。这时就用到了 img 标签的srcset属性。srcset属性用于设置不同屏幕密度下，img 会自动加载不同的图片。用法如下：
<img src="image-128.png" srcset="image-256.png 2x" >

使用上面的代码，就能实现在屏幕密度为1x的情况下加载image-128.png, 屏幕密度为2x时加载image-256.png。
按照上面的实现，不同的屏幕密度都要设置图片地址，目前的屏幕密度有1x,2x,3x,4x四种，如果每一个图片都设置4张图片，加载就会很慢。所以就有了新的srcset标准。代码如下：
<img src="image-128.png" srcset="image-128.png 128w, image-256.png 256w" sizes="(max-width: 360px) 340px, 128px" >

其中srcset指定图片的地址和对应的图片质量。sizes用来设置图片的尺寸零界点。对于 srcset 中的 w 单位，可以理解成图片质量。如果可视区域小于这个质量的值，就可以使用。浏览器会自动选择一个最小的可用图片。
sizes="[media query] [length]"
sizes就是指默认显示128px, 如果视区宽度大于360px, 则显示340px。

20，label标签有什么用？

label标签来定义表单控制间的关系。当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
<label for="Name"> Number: </label>
<input type="text" name="Name" id="Nmae" />

21，async和defer区别：

async：脚本并行加载，加载完成之后立即执行，执行时机不确定，仍有可能阻塞HTML解析，执行时机在load事件派发之前。

defer：脚本并行加载，等待HTML解析完成之后，按照加载顺序执行脚本，执行时机DOMContentLoaded事件派发之前。

22，说说你对以下几个页面生命周期事件的理解：DOMContentLoaded，load，beforeunload，unload

HTML 页面的生命周期包含三个重要事件：
DOMContentLoaded —— 浏览器已完全加载 HTML，并构建了 DOM 树，但像 <img> 和样式表之类的外部资源可能尚未加载完成。
load —— 浏览器不仅加载完成了 HTML，还加载完成了所有外部资源：图片，样式等。
beforeunload/unload —— 当用户正在离开页面时。camera 相机

每个事件都是有用的：
DOMContentLoaded 事件 —— DOM 已经就绪，因此处理程序可以查找 DOM 节点，并初始化接口。
load 事件 —— 外部资源已加载完成，样式已被应用，图片大小也已知了。
beforeunload 事件 —— 用户正在离开：我们可以检查用户是否保存了更改，并询问他是否真的要离开。
unload 事件 —— 用户几乎已经离开了，但是我们仍然可以启动一些操作，例如发送统计数据。

23，使用input标签上传图片时，怎样触发默认拍照功能？

capture 属性用于指定文件上传控件中媒体拍摄的方式。
1，user 前置
2，environment 后置
3，camera 相机
4，camcorder 摄像机
5，microphone 录音

24，input

input上传文件可以同时选择多张吗?
通过给input标签设置multiple属性。

如何禁止input展示输入的历史记录？
autocomplete=“off”

25，能否使用自闭合script标签引入脚本文件?

自闭合标签来自于XML语法，而不是HTML语法。

26，iconfont是什么？有什么优缺点？

顾名思义，IconFont 就是字体图标。严格地说，就是一种字体，但是，它们不包含字母或数字，而是包含符号和字形。您可以使用 CSS 设置样式，就像设置常规文本一样，这使得 IconFont 成为 Web 开发时图标的热门选择。

优点：
1，可以方便地将任何 CSS 效果应用于它们。
2，因为它们是矢量图形，所以它们是可伸缩的。这意味着我们可以在不降低质量的情况下伸缩它们。
3，我们只需要发送一个或少量 HTTP 请求来加载它们，而不是像图片，可能需要多个 HTTP 请求。
4，由于尺寸小，它们加载速度快。
5，它们在所有浏览器中都得到支持（甚至支持到 IE6）。

不足：
1，不能用来显示复杂图像
2，通常只限于一种颜色，除非应用一些 CSS 技巧
3，字体图标通常是根据特定的网格设计的，例如 16x16, 32×32, 48×48等。如果由于某种原因将网格系统改为25×25，可能不会得到清晰的结果

27，页面统计数据中，常用的 PV、UV 指标分别是什么？

PV(页面访问量)
即页面浏览量或点击量，用户每1次对网站中的每个网页访问均被记录1个PV。
用户对同一页面的多次访问，访问量累计，用以衡量网站用户访问的网页数量。

UV(独立访客)
是指通过互联网访问、浏览这个网页的自然人。访问您网站的一台电脑客户端为一个访客。

28，mete标签中的viewport 有什么用？

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

设置 Viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">

width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。

29，style标签写在body后与body前有什么区别？

页面加载自上而下 当然是先加载样式。

写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）

30，webSocket如何兼容低浏览器

1，Adobe Flash Socket
2，ActiveX HTMLFile (IE) 
3，基于 multipart 编码发送 XHR
4，基于长轮询的 XHR

31，说说 HTML、XML、XHTML 的区别

HTML：超文本标记语言，是语法较为松散的、不严格的Web语言

XML：可扩展的标记语言，主要用于存储数据和结构，可扩展

XHTML：可扩展的超文本标记语言，基于XML，作用与HTML类似，但语法更严格

32，标签上title属性与alt属性的区别是什么？

alt 是为了在图片未能正常显示时（屏幕阅读器）给予文字说明。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短

title 属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息

33，页面导入样式时，使用link和@import有什么区别？

link属于HTML标签，而@import是css提供的

页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载
@import只在IE5以上才能识别，而link是XHTML标签，无兼容问题

link方式的样式的权重高于@import的权重

34，HTML5 有哪些新特性？

新增语义化标签：nav、header、footer、aside、section、article
音频、视频标签：audio、video
数据存储：localStorage、sessionStorage
canvas（画布）、Geolocation（地理定位）、websocket（通信协议）
input标签新增属性：placeholder、autocomplete、autofocus、required
history API （go、forward、back、pushstate）

35，HTML 标签中的 src 和 href 有什么区别

href 是超文本引用，它是指向资源的位置，建立与目标文件的联系；
src 目的是把资源下载到页面中；

浏览器解析 href 不会阻塞对文档的处理（这就是官方建议使用 link 引入而不是 @ import 的原因），src 会阻塞对文档的处理。

36，iframe是什么？有哪些优缺点？

iframe 可以在一个网站里面嵌入另一个网站的内容。
iframe的优点
1，iframe能够原封不动的把嵌入的网页展现出来。
2，如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
3，网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
4，如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。

iframe的缺点
1，会产生很多页面，不容易管理。
2，iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。 * 代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。
3，很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。
4，iframe 里面的样式、脚本资源，会增加请求次数，对于大型网站是不可取的。
5，iframe 会阻碍页面的 onload 事件，给用户页面加载很慢的感觉。

37，canvas在标签上设置宽高，与在style中设置宽高有什么区别？

canvas标签的width和height是画布实际宽度和高度，绘制的图形都是在这个上面。
而style的width和height是canvas在浏览器中被渲染的高度和宽度。
如果canvas的width和height没指定或值不正确，就被设置成默认值。

38，canvas在标签上设置宽高，与在style中设置宽高有什么区别？

canvas标签的width和height是画布实际宽度和高度，绘制的图形都是在这个上面。
而style的width和height是canvas在浏览器中被渲染的高度和宽度。
如果canvas的width和height没指定或值不正确，就被设置成默认值。

39，如何禁用a标签跳转页面或定位链接?

当页面中a标签不需要任何跳转时，从原理上来讲，可分如下两种方法：

标签属性href，使其指向空或不返回任何内容。如：
<a href="javascript:void(0);" >点此无反应javascript:void(0)</a>
<a href="javascript:;">点此无反应javascript:</a>

从标签事件入手，阻止其默认行为。如：
html方法：
<a href="" onclick="return false;">return false;</a>
<a href="#" onclick="return false;">return false;</a>

或者在js文件中阻止默认点击事件：
Event.preventDefault()

还可以在css文件中处理点击，不响应任何鼠标事件：
pointer-events: none;

40，常用的 meta 元素有哪些？

<meta> 元素标签是提供有关HTML文档的元数据，元数据不会显示在页面上，但是能够被机器识别。
总而言之, meta标签是用来让机器识别的，同时它对SEO起着重要的作用。

charset
指定了html文档的编码格式，常用的是utf-8(Unicode的字符编码)，还有ISO-8859-1(拉丁字母的字符编码)。当然还有其他的，但是一般不常用也就不介绍了
<meta charset="utf-8">

name & content
指定元数据的名称(这部分对SEO非常有用)
author——定义了页面的作者
<meta name="author" content="Tony">

keywords——为搜索引擎提供关键字
<meta name="keywords" content="HTML, CSS, JavaScript">

description——对网页整体的描述
<meta name="description" content="123">

viewport——对页面视图相关进行定义

generator——包含生成页面软件的标识符

theme-color——定义主题颜色

http-equiv & content

refresh——每30s刷新一次文档