html面试题

H5结构语义化

即使用正确的标签做正确的事情。如段落用 p 标签，标题用 h 系列标签，边栏用 aside 标签，主要内容用 main 标签。

意义：

对于开发者：

• 便于团队的开发和维护。
• 在没有加载 CSS 的情况下也能呈现较好的内容结构与代码结构，易于阅读。

对于浏览器：

• 有利于 SEO ，搜索引擎的爬⾍依赖于标签来确定上下⽂和各个关键字的权重。

H5的新特性

画布： canvas

媒介： video，audio元素

存储： localStorage，sessionStorage

语义化标签： article、footer、header、nav、section

表单控件：calendar、date、time、email、url、search

地理定位，拖放，

其他技术：websocket，Web Worker

浏览器存储技术

cookie，sessionStorage，localStorage，indexedDB

cookie：是一种服务器留在用户计算机上的小文件。保存特定于特定客户端和网站的适量数据，并且可以由 Web 服务器或客户端浏览器访问。cookie 常用于识别用户。

cookie作用：记录用户的登录状态、跟踪统计用户访问该网站的习惯、识别用户身份、保存客户信息

cookie：数据始终在同源的http请求中携带（即使不需要），即会在浏览器和服务器间来回传递

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

存储大小：

cookie	sessionStorage	localStorage
4k	5M	5M

有期时间：

cookie	sessionStorage	localStorage
设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭	数据在当前浏览器窗口关闭后自动删除	存储持久数据，浏览器关闭后数据不丢失除非主动删除数据

浏览器渲染机制的几个步骤?

• 处理 HTML 并构建 DOM 树。

• 处理 CSS 构建 CSSOM 树。

• 将 DOM 与 CSSOM 合并成一个渲染树。

• 根据渲染树来布局，计算每个节点的位置。

• 调用 GPU 绘制，合成图层，显示在屏幕上。

注意：

在构建 CSSOM 树时，会阻塞渲染，直至 CSSOM 树构建完成。并且构建 CSSOM 树是一个十分消耗性能的过程，所以应该尽量保证层级扁平，减少过度层叠，越是具体的 CSS 选择器，执行速度越慢

当 HTML 解析到 script 标签时，会暂停构建 DOM，完成后才会从暂停的地方重新开始。也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载 JS 文件。

浏览器是如何渲染页面的？

1.解析文档构建DOM树 HTML/XHTML/SVG：解析这三种文件后，会生成DOM树（DOM Tree） CSS：解析样式表，生成CSS规则树（CSS Rule Tree） JavaScript：解析脚本，通过DOM API和CSSOM API操作DOM Tree和CSS Rule Tree，与用户进行交互。 2.构建渲染树 解析文档完成后，浏览器引擎会将 CSS Rule Tree 附着到DOM Tree 上，并根据DOM Tree 和 CSS Rule Tree构造 Rendering Tree（渲染树） 3.布局与绘制渲染树 解析position, overflow, z-index等等属性，计算每一个渲染树节点的位置和大小，此过程被称为reflow。最后调用操作系统的Native GUI API完成绘制（repain）。

重绘（Repaint）和回流（Reflow）*

重绘：重新绘画，当给一个元素更换颜色、更换背景，虽然不会影响页面布局，但是颜色或背景变了，就会重新渲染页面，这就是重绘。 回流：是布局或者几何属性需要改变就称为回流（需要计算它们在设备视口(viewport)内的确切位置和大小） 注意：

回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变深层次的节点很可能导致父节点的一系列回流

所以以下几个动作可能会导致性能问题：

• 添加或删除可见的DOM元素

• 元素的位置发生变化

• 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）

• 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。

• 定位或者浮动

• 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）

减少重绘和回流

• 批量修改DOM

• 对于复杂动画效果,使用绝对定位让其脱离文档流

• css3硬件加速（GPU加速）transform、opacity、filters这些动画不会引起回流重绘

xhtml和html的区别

• 功能上
  • 主要是XHTML可兼容各大浏览器、手机以及PDA，并且浏览器也能快速正确地编译网页
• 书写习惯
  • XHTML 元素必须被正确地嵌套，闭合，区分大小写，文档必须拥有根元素

行内元素和块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别

• 行内元素有：a b span img input select strong

• 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

• 空元素：br、 hr img input link meta

区别

• 行内元素不可以设置宽高，不独占一行

• 块级元素可以设置宽高，独占一行

标签上 title 与 alt 属性的区别

alt：

• 是给搜索引擎识别。

• 在图像无法正确显示时的替代文本。

title：

• 是关于元素的注释信息，主要是给用户解读。
• 行内元素和块级元素都可以添加

iframe(内嵌框架)的优缺点

优点：

• 解决加载缓慢的第三方内容如图标和广告等的加载问题
• 并行加载脚本

缺点：

• iframe会阻塞主页面的Onload事件
• 即使内容为空，加载也需要时间
• 没有语意
• 使用iframe作为子应用问题：1.没有路由记录 2.样式隔离严重

href 与 src

href：表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a src：source的缩写，src的内容是页面必不可少的一部分，是引入。src指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script、iframe href与src的区别

	href	src
请求资源类型	指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的联系	在请求 src 资源时会将其指向的资源下载并应用到文档中，如 JavaScript 脚本，img 图片
作用结果	用于在当前文档和引用资源之间建立联系	用于替换当前元素
浏览器解析方式		当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因

优雅降级 && 渐进增强

渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验

优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

HTTP的请求方法

常用方法：GET，POST，PUT，DELETE

• HEAD：只请求页面的首部
• OPTIONS：它用于获取当前URL所支持的方法。如果请求成功，会有一个Allow的头包含类似“GET,POST”这样的信息
• TRACE：TRACE方法被用于激发一个远程的，应用层的请求消息回路
• CONNECT：把请求连接转换到透明的TCP/IP通道

HTTP状态码*

一、临时响应

100——客户必须继续发出请求 101——客户要求服务器根据请求转换HTTP协议版本 二、成功

200——服务器成功返回网页 201——提示知道新文件的URL 202——接受和处理、但处理未完成 203——返回信息不确定或不完整 204——请求收到，但返回信息为空 205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件 206——服务器已经完成了部分用户的GET请求 三、重定向

300——请求的资源可在多处得到 301——删除请求数据 302——在其他地址发现了请求数据 303——建议客户访问其他URL或访问方式 304——客户端已经执行了GET，但文件未变化 305——请求的资源必须从服务器指定的地址得到 306——前一版本HTTP中使用的代码，现行版本中不再使用 307——申明请求的资源临时性删除 四、请求错误

400——错误请求，如语法错误 401——请求授权失败 402——保留有效ChargeTo头响应 403——请求不允许 404——请求的网页不存在 405——用户在Request-Line字段定义的方法不允许 406——根据用户发送的Accept拖，请求资源不可访问 407——类似401，用户必须首先在代理服务器上得到授权 408——客户端没有在用户指定的饿时间内完成请求 409——对当前资源状态，请求不能完成 410——服务器上不再有此资源且无进一步的参考地址 411——服务器拒绝用户定义的Content-Length属性请求 412——一个或多个请求头字段在当前请求中错误 413——请求的资源大于服务器允许的大小 414——请求的资源URL长于服务器允许的长度 415——请求资源不支持请求项目格式 416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段 417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求 五、服务器错误 500——服务器产生内部错误 501——服务器不支持请求的函数 502——服务器暂时不可用，有时是为了防止发生系统过载 503——服务器超时过载或暂停维修 504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长 505——服务器不支持或拒绝支请求头中指定的HTTP版本

DOCTYPE (⽂档类型) 的作⽤

DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明，它的目的是 告诉浏览器（解析器）应该以什么样（html或xhtml）的文档类型定义 来解析文档 ，不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析。它必须声明在HTML⽂档的第⼀⾏。

前端需要注意哪些SEO

• 合理的title、description，keywords：搜索引擎对着这项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同，keywords列举出重要关键词即可

• 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页

• 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取

• 重要内容不要用js输出：爬虫不会执行js获取内容

• 少用iframe：搜索引擎不会抓取iframe中的内容

• 非装饰性图片必须加alt

• 提高网站速度：网站速度是搜索引擎排序的一个重要指标

简述data-*属性的用法（如何设置，如何获取），有何优势？

data-* 的值的获取和设置，2种方法：

1）传统方法 getAttribute() 获取data-属性值； setAttribute() 设置data-属性值

getAttribute() 获取data-属性值；

setAttribute() 设置data-属性值

2)HTML5新⽅法

例如 data-kerwin

dataset.kerwin 获取data-kerwin属性值

dataset.kerwin = “赵钱孙李” 设置data-kerwin属性值

注意：

传统⽅法⽆兼容性问题，但是不够优雅、⽅便

HTML5新⽅法很优雅、⽅便，但是有兼容性问题。

优势：⾃定义的数据可以让⻚⾯拥有更好的交互体验（不需要使⽤ Ajax 或去服务端查询数据）

script标签中defer和async的区别 ？

注意： 如果没有defer或async属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。

区别：

执行顺序：多个带async属性的标签，不能保证加载的顺序。多个带有defer属性的标签会按照加载顺序执行 脚本是否并行： async属性，表示后续文档的加载和执行与js脚本的加载和执行是并行进行的即文档加载与js加载同时进行。defer属性，js脚本需要等待文档所有元素解析完成后执行 ，DOMContentLoaded事件触发执行之前。

常用meta标签有哪些

meta标签由name和content属性定义，用来描述网页文档的属性

常用的meta标签：

charset：用来描述HTML文档的编码类型 keywords:页面关键词 description:页面描述 refresh:页面重定向和刷新 viewport:适配移动端，可以控制视口大小和比例 content参数详情： width viewport:宽度(数值/device-width) height viewport:高度(数值/device-height) initial-scale：初始缩放比例 maximum-scale:最大缩放比例 minimum-scale:最小缩放比例 user-scalable：是否允许用户缩放(yes/no)

一次完整的HTTP事务是怎么一个过程*

• 浏览器的地址栏输入URL并按下回车。

• 浏览器查找当前URL是否存在缓存，并比较缓存是否过期。

• DNS解析URL对应的IP。

• 根据IP建立TCP连接（三次握手）。

• HTTP发起请求。

• 服务器处理请求，浏览器接收HTTP响应。

• 渲染页面，构建DOM树。

• 关闭TCP连接（四次挥手）。

HTTP和HTTPS区别-*

http:超文本传输协议，是一个客户端和服务器端请求和应答的标准(TCP),用于从www服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更高效，是网络传输减少

https：可以理解为http的安全版，在http下加入SSL层。https协议的主要作用是建立一个安全的信息通道，来确保数组的传输，确保网站的真实性。

区别：

• Https 协议需要 ca 证书，费用较高。

• http 是超文本传输协议，信息是明文传输，https 则是具有安全性的 ssl 加密传输协议。

• 使用不同的连接方式，端口也不同，一般而言，http 协议的端口为 80，https 的端口为443

• http 的连接很简单，是无状态的；HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 http 协议安全。

HTTPS是如何实现加密-*

HTTPS在传输数据之前需要客户端（浏览器）与服务端（网站）之间进行一次握手，在握手过程中将确立双方加密传输数据的密码信息。

TLS/SSL中使用了非对称加密，对称加密以及HASH

算法

img的srcset属性作用

响应式页面中经常用到根据屏幕密度设置不同的图片。这时就用到img标签的srcset属性，srcset属性用于设置不同屏幕密度下，img加载图片不同

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

标签闭合、标签小写、不乱嵌套、使用外链css和js、结构行为表现的分离

HTML5的离线存储怎么使用？工作原理？

离线存储指的是:在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。

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

使用方法：

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

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

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

Canvas和SVG区别

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

区别：

• svg绘制出来的每一个图形的元素都是独立的DOM节点，SVG基于XML就意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器，能够方便的绑定事件或用来修改。

• canvas输出的是一整幅画布

• svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会是出现锯齿。而canvas输出标量画布，就像一张图片一样，放大会失真或者锯齿

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

严格模式:又称为标准模式，指浏览器按照 w3C 标准解析代码;

混杂模式: 又称怪异模式、兼容模式，是指浏览器用自己的方式解析代码。混杂模式通常模拟老式浏览器的行为，以防止老站点无法工作;

区分：

如果文档包含严格的 DOCTYPE，那么它一般以严格模式呈现 (严格 DTD 一一严格模式) 包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI (统一资源标识符，就是声明最后的地址) 会导致页面以混杂模式呈现 (有 URI 的过渡 DTD --严格模式;没有 URI 的过渡 DTD --混杂模式) DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现 (DTD不存在或者格式不正确一一混杂模式); HTML5 没有 DTD，因此也就没有严格模式与混杂模式的区别，已经尽可能大的实现了向后兼容(HTML5 没有严格和混杂之分)。

CSS定位方式

static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

尽可能多的写出浏览器兼容性问题？解决

• 不同浏览器的标签默认的margin和padding不同 在CSS文件开头，加*{margin: 0; padding: 0;}，把所有标签的margin和padding设置为0
• 块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大 可以将块级元素display设置为inline
• 设置较小高度标签（一般小于10px），在IE6，IE7， 实际的高度会超出设置的高度，这是因为浏览器给标签设置了一个默认的最小高度 设置{overflow: hidden;}，或者设置line-height小于你设置的高度。
• 在某些浏览器中，图片有默认的间距(所有有文字属性的标签都会有边距，除非两个标签连在一起没有隔开)； 使用float为img布局，因为所有标签设置float之后都会变成块级元素，块级元素浮动时会紧挨在一起，没有边距
• IE9以下浏览器不能使用opacity； {opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);}。

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

class:为元素设置类标识 data-*: 为元素增加自定义属性 draggable: 设置元素是否可拖拽 id: 元素id，文档内唯一 lang: 元素内容的的语言 style: 行内css样式 title: 元素相关的建议信息

网页验证码是干嘛的，是为了解决什么安全问题

区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水 有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试

为什么利用多个域名来存储网站资源会更有效？

CDN缓存更方便 突破浏览器并发限制 节约cookie带宽 节约主域名的连接数，优化页面响应速度 防止不必要的安全问题

一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

图片懒加载，在页面上的未可视区域可以添加一个滚动事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。 如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。 如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。 如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

web开发中会话跟踪的方法有哪些

cookie session url重写 隐藏input ip地址

title与h1的区别、b与strong的区别、i与em的区别

title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响 strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：会重读，而是展示强调内容 i内容展示为斜体，em表示强调的文本

浏览器的内核有哪些？分别有什么代表的浏览器？

IE: trident内核 Firefox：gecko内核 Safari:webkit内核 Opera:以前是presto内核，Opera现已改用Google - Chrome的Blink内核 Chrome:Blink(基于webkit，Google与Opera Software共同开发)

TCP为什么需要三次握手和四次挥手

三次握手是为了建立可靠的数据传输通道，四次挥手则是为了保证等数据完成的被接收完再关闭连接。

TCP三次握手

TCP四次挥手

data-属性的作用？

data-为H5新增的为前端开发者提供自定义的属性， 这些属性集可以通过对象的 dataset 属性获取， 不支持该属性的浏览器可以通过 getAttribute 方法获取 : 需要注意的是：data-之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。 所有主流浏览器都支持 data-* 属性。 即：当没有合适的属性和元素时，自定义的 data 属性是能够存储页面或 App 的私有的自定义数据

web worker的理解？如何创建？

在 HTML 页面中，如果在执行脚本时，页面的状态是不可相应的，直到脚本执行完成后，页面才变成可相应。web worker 是运行在后台的 js，独立于其他脚本，不会影响页面的性能。 并且通过 postMessage 将结果回传到主线程。这样在进行复杂操作的时候，就不会阻塞主线程了。

创建：

检测浏览器对于 web worker 的支持性 创建 web worker 文件 (js，回传函数等) 创建 web worker 对象

说下HTML5 drag API

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

Http 短轮询、长轮询

轮询：是由由客户端每隔一段时间(如每隔5s) 向服务器发出HTTP请求，服务端接收到请求后向客户端返回最新的数据。

客户端轮循：短轮询，长轮询

短轮询：一般是由客户端每隔一段时间(如每隔5s) 向服务器发起一次普通 HTTP 请求 。服务端查询当前接口是否有数据更新，若有数据更新则向客户端返回最新数据，若无则提示客户端无数据更新 长轮询： 一般是由客户端向服务端发出一个设置较长网络超时时间的 HTTP 请求，并在Http连接超时前，不主动断开连接；待客户端超时或有数据返回后，再次建立一个同样的Http请求，重复以上过程

TCP和HTTP区别？

TCP对应于传输层，HTTP对应于应用层，从本质上来说，二者没有可比性。

Http协议是建立在TCP协议基础之上的，当浏览器需要从服务器获取网页数据的时候，会发出一次Http请求。Http会通过TCP建立起一个到服务器的连接通道，当本次请求需要的数据完毕后，Http会立即将TCP连接断开，这个过程是很短的。所以Http连接是一种短连接，是一种无状态的连接

TCP是底层协议，定义的是数据传输和连接方式的规范。

HTTP是应用层协议，定义的是传输数据的内容的规范。

HTTP协议中的数据是利用TCP协议传输的，所以支持HTTP就一定支持TCP