面试题含答案(HTML篇)

慢溺逆水清

已于 2023-03-25 18:11:43 修改

阅读量1.8k

点赞数

分类专栏：面试文章标签：面试

于 2023-03-02 22:07:05 首次发布

本文链接：https://blog.csdn.net/qq_41897351/article/details/124127870

版权

面试专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、说一下对语义化的理解？

语义化就是有特殊标记的html标签，能够更加容易的被识别的标签
比如：

<header></header>头部
<nav></nav>导航栏
<section></section>区块（有语义化的div）
<main></main>主要区域
<artical></artical>主要内容
<aside></aside>侧边栏
<footer></footer>底部

优点：

平时我们只是简单的使用 div + css 进行页面的布局。这样不利于我们自己理解也不利于浏览器的理解。
语义化的使用能够让浏览器更好的读入页面结构。
便利于团队的开发和维护。
语义化更具有可读性，遵循w3c标准的团队都遵循这个标准，减少了差异化。

2、cookies，sessionStorage 和 localStorage 的区别？

SessionStorage， LocalStorage， Cookie 这三者都可以被用来在浏览器端存储数据，而且都是字符串类型的键值对。区别在于前两者属于 HTML5 WebStorage，创建它们的目的便于客户端存储数据。而 cookie 是网站为了标示用户身份而储存在用户本地终端上的数据（通常经过加密）。cookie 数据始终在同源（协议、主机、端口相同）的 http 请求中携带（即使不需要），会在浏览器和服务器间来回传递。

存储大小：

cookie 数据大小不能超过4 k 。
sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大。

有期时间：

localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据。
sessionStorage 数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面时会在顶级浏览上下文中初始化一个新的会话。
cookie 设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭。

作用域：

sessionStorage 只在同源的同窗口（或标签页）中共享数据，也就是只在当前会话中共享。
localStorage 在所有同源窗口中都是共享的。
cookie 在所有同源窗口中都是共享的。
浏览器端常用的存储技术是 cookie 、localStorage 和 sessionStorage。

其他：

cookie 其实最开始是服务器端用于记录用户状态的一种方式，由服务器设置，在客户端存储，然后每次发起同源请求时，发送给服务器端。cookie 最多能存储 4 k 数据，它的生存时间由 expires 属性指定，并且 cookie 只能被同源的页面访问共享。
sessionStorage 是 html5 提供的一种浏览器本地存储的方法，它借鉴了服务器端 session 的概念，代表的是一次会话中所保存的数据。它一般能够存储 5M 或者更大的数据，它在当前窗口关闭后就失效了，并且 sessionStorage 只能被同一个窗口的同源页面所访问共享。
localStorage 也是 html5 提供的一种浏览器本地存储的方法，它一般也能够存储 5M 或者更大的数据。它和 sessionStorage 不同的是，除非手动删除它，否则它不会失效，并且 localStorage 也只能被同源页面所访问共享。

上面几种方式都是存储少量数据的时候的存储方式，当我们需要在本地存储大量数据的时候，我们可以使用浏览器的 indexDB 这是浏览器提供的一种本地的数据库存储机制。它不是关系型数据库，它内部采用对象仓库的形式存储数据，它更接近 NoSQL 数据库。

3、如何实现浏览器内多个标签页之前的通信？

1、WebSocket 通信的标签页连接同一个服务器，发送消息到服务器上，服务器推送消息给所有连接的客户端
2、ShareWorker（只在chrome浏览器实现了），两个页面共享一个线程，通过向线程发送和接收数据来实现标签页之间的双向通行
3、localstorage、cookies等本地存储方式
4、如果能获得对应标签页的引用，通过postMessage方法来实现多个标签页的通信。

参考：如何实现浏览器内多个标签页之间的通信?

4、常见的浏览器端的存储技术有哪些？

cookie、localStorage、sessionStorage
用于大规模数据存储，webSQL（已被废除）和indexDB
IE支持userData存储数据，基本很少用到，除非有很强的浏览器兼容需求

5、常见的行内，块级，空元素，替换元素有哪些？

行内元素 ：a、em、br、img、font、span、input、label、select、strong、textarea。
块级元素 ：p、div、h1~h6、ul(有序列表)、ol(无序列表)、li、dl(列表)
、dt、dd、form。
空元素 ：br、hr、img、input、link、meta
替换元素 ：iframe、img、object、 video 以及表单元素：如textarea、 input、select 、button。某些元素只在一些特殊情况下表现为可替换元素，例如 audio和 canvas标签。

替换元素 是浏览器根据其标签的元素与属性来判断显示具体的内容，且元素一般拥有固定的尺寸（宽高或宽高比）。其展现不由CSS来控制的。这些元素是一类外观渲染独立于CSS的对象。
它们的内容不受当前文档的样式的影响。CSS可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。
非替换元素 html中大多数都是非替换元素，他们直接将内容告诉给浏览器，直接显示出来例如，p标签，浏览器回直接显示出p标签里面的内容

替换元素和非替换元素在行内标签和块级标签中都存在。

6、行内元素和块级元素的区别？

块级元素默认占一行高度，默认情况下宽度自动填满其父元素宽度。
行内元素不会独占一行，相邻的行内元素会排在同一行，其宽度随内容的变化而变化。
块级元素可以设置宽高。
行内元素不可以设置宽高(可以设置line-height)。
块级元素可以设置 margin、padding。
行内元素水平方向的margin左右和padding左右属性设置可以生效，但竖直方向的 margin上下和padding上下属性设置是无效的。
行内元素的padding上下从显示的效果上是增加的，但其实设置是无效的，并不会对它周围的元素产生影响。
块级元素转行内元素：display:block。
行内元素转块级元素：display:inline。
行内元素或块级元素转行内块元素：display:inline-block。
行内元素内只能嵌套行内元素。
块级元素内可以嵌套行内元素和块级元素。

7、DOCTYPE的作用？严格模式和混杂模式的区别？

!DOCTYPE声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。 !DOCTYPE声明必须在 HTML 文档的第一行，这并不是一个 HTML 标签。
严格模式（标准模式）：以w3c标准解析代码
混杂模式（怪异模式或兼容模式）：浏览器用自己的方式解析代码，混杂模式通常模拟老式浏览器的行为，以防止老站点无法工作
HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的方法，实现时，已经尽可能大的实现了向后兼容(HTML5 没有严格和混杂之分)。
HTML5具体声明：<!DOCTYPE html

严格模式与混杂模式的来源
当年Netscape4（网景公司早期的浏览器）和IE4（微软公司早期的浏览器）实现CSS机制时，并没有遵循W3C提出的标准。Netscape4
提供了糟糕的支持，而IE4 虽然接近标准，但依旧未能完全正确的支持标准。尽管IE 5 修复了IE4
许多的问题，但是依然延续CSS实现中的其它故障（主要是盒模型问题）。

为了保障自己的网站在各个浏览器上显示正确，网页开发者们不得不依据各个浏览器自身的规范来使用css，因此大部分网站的css实现并不符合W3C规范的标准。

然而随着标准一致性越来越重要，浏览器开发商不得不面临一个艰难的抉择：逐渐遵循W3C的标准是前进的方向。但是改变现有的
css，完全去遵循标准，会使许多旧网站或多或少受到破坏，如果浏览器突然以正确的方式解析现存的css，陈旧的网站的显示必然会受到影响。所以，所有的浏览器都需要提供两种模式：混杂模式服务于旧式规则，而严格模式服务于标准规则。

8、常用的 meta 标签有哪些？

meta 元素可提供有关页面的元信息(meta-information)，比如针对搜索引擎和更新频度的描述和关键词。
meta 标签位于文档的头部，不包含任何内容。标签的属性定义了与文档相关联的名称/值对。

<!DOCTYPE html> H5 标准声明，使用 HTML5 doctype，不区分大小写
<head lang="en"> 标准的 lang 属性写法
<meta charset="utf-8"> 声明文档使用的字符编码
<meta name="renderer" content="webkit"/> 强制Chromium内核，作用于360浏览器、QQ浏览器等国产双核浏览器
<meta name="force-rendering" content="webkit"/> 强制Chromium内核，作用于其他双核浏览器
<meta http-equiv="X-UA-Compatible” content=”IE=edge,chrome=1"/> 优先使用 IE 最新版本和 Chrome
<meta http-equiv='X-UA-Compatible' content='IE=edge'> 避免 IE 使用兼容模式
<meta name=”description” content="不超过 150 个字符"/> 页面描述
<meta name="keywords" content=""/> 页面关键词者
<meta name="author" content="name, email@gmail.com"/> 网页作者
<meta name="robots" content="index,follow"/> 搜索引擎抓取
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1,
user-scalable=no"> 为移动设备添加 viewport
<meta base=/test/> 前端服务加项目路径相关修改
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> http升级https
<meta http-equiv="Cache-Control" content="no-siteapp" />    不让百度转码
<!--设置页面不缓存-->
<meta http-equiv="pragma" content="no-cache"> 禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从Cache中再调出
<!--清除缓存(再访问这个网站要重新下载
    no-cache指示请求或响应消息不能缓存
    no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。-->
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
<!--设定网页的到期时间,一旦网页过期,必须到服务器上重新传输-->
<meta http-equiv="expires" content="0">

参考：
前端入门须知：meta标签的应用
 代码meta http-equiv=”Cache-Control” content=”no-siteapp”啥意思有什么作用?

9、title 与 h1 的区别？

title 属性没有明确意义只表示是个标题，h1 则表示层次明确的标题，对页面信息的抓取也有很大的影响。

10、img的srcset作用？alt与title区别？

响应式页面中经常用到根据屏幕密度设置不同的图片。
这时就用到了 img 标签的srcset属性。
srcset属性用于设置不同屏幕密度下，img 会自动加载不同的图片。
alt 是图片加载失败时，显示在网页上的替代文字。
title是鼠标放上面时显示的文字。
这些都是表面上的区别，alt是img必要的属性，而title不是。

11、HTML5的离线存储？

指的是没有网络连接的时候，可以正常访问应用，与网络连接时更新缓存文件
原理：HTML5 的离线存储是基于一个新建的 .appcache文件的缓存机制（不是存储技术），通过这个文件上的解析清单离线存储资源，这些资源就会像 cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器就直接使用离线存储的资源。
在离线状态时，操作 window.applicationCache 进行离线缓存的操作。
如何更新缓存：
1、更新 manifest 文件
2、通过 javascript 操作
3、清除浏览器缓存

如何使用：
创建一个和 html 同名的 manifest 文件，然后在页面头部像下面一样加入一个 manifest 的属性。

<html lang="en" manifest="index.manifest">

在如下 cache.manifest 文件的编写离线存储的资源。

CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html

CACHE: 表示需要离线存储的资源列表，由于包含 manifest 文件的页面将被自动离线存储，所以不需要把页面自身也列出 来。

NETWORK: 表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在 CACHE 和 NETWORK 中有一个相同的资源，那么这个资源还是会被离线存储，也就是说 CACHE 的优先级更高。

FALLBACK: 表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问 offline.html 。

注意事项：

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

12、b和strong，i和em的区别？

默认效果：i和em都是斜体。b和strong都是加粗。没有太多的区别。
但是em和strong的语义性更强烈，搜索引擎更重视，能让它知道你这里面的内容的语义效果，b和i只对视觉效果进行了强调，而语义上没有帮助。

13、canvas和svg的区别？

Canvas和SVG是html5中支持2种可视化技术，都是可以在画布上绘制图形和放入图片。

1、什么是Canvas？
Canvas 是H5新出来的标签。
Canvas画布，利用JavaScript在网页绘制图像。
在标签中给上宽高：不用加单位。
如果在css中给宽高会对图像造成拉伸（默认宽高300px*150px）。
通过过去绘制工具 .getContext(“2d”)来在画布中绘制图形。
2、什么是SVG？
SVG 可缩放矢量图形（Scalable Vector Graphics），基于可扩展标记语言XML 出来的时间比较老 SVG 用来定义用于网格的基于矢量的图形。

Canvas 的工具getContext 绘制出来的图形或传入的图片都依赖分辨率，能够以 .png 和 .jpg格式保存存储图像，可以说是位图。
SVG 可以在H5中直接绘制，但绘制的是矢量图。
canvas是画布，是逐像素进行渲染的，适合图形密集型的游戏，不支持事件处理。
svg是矢量图，不依赖分辨率，通过DOM操作来显示的，不适合游戏，适合大型渲染区域（地图），支持事件处理。
参考：https://blog.csdn.net/qq_40850839/article/details/108926290

14、src和href的区别？

src用于替换当前元素，href用于在当前文档和引用资源之间建立联系。
src是引入外部资源下载到文档，会暂停其他资源的下载。
href是链接外部资源，不会暂停其他资源的下载。

15、drag api？

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

参考：HTML5 新特性drag API 实现图片拖拽功能（原生JS，Vue， React）

16、label标签？

作用： 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。当我们鼠标点击 label标签里面的文字时，光标会定位到指定的表单里面。
如何绑定元素？
第一种用法就是用label直接包括input表单。

<label> 用户名： <input type="radio" name="usename" value="请输入用户名">   </label>

适合单个表单选择
第二种用法 for 属性与表单的id关联，用于规定 label 与哪个表单元素绑定。

<label for="sex">男</label>
<input type="radio" name="sex"  id="sex">

17、渐进增强和优雅降级的区别？

渐进增强是针对低版本浏览器也能保证基础功能，然后对高级浏览器改进追加功能。
优雅降级是一开始构建完整功能，再对低版本进行兼容。

18、音视频标签的使用？

video:Html5提供的播放视频的标签。
支持的三种常见格式：mp4、webm、ogv。

标签的属性：
src:要嵌到页面的视频的URL
controls:显示或隐藏用户控制界面
width :视频显示区域的宽度，单位是CSS像素
height :视频展示区域的高度，单位是CSS像素
poster :一个海报帧的URL，用于在用户播放或者跳帧之前展示
autoplay : 媒体是否自动播放
loop : 媒体是否循环播放
muted : 是否静音

audio:Html5提供的播放音频的标签。

标签的属性：
src:要嵌到页面的音频的URL
controls:显示或隐藏用户控制界面
autoplay: 媒体是否自动播放
loop : 媒体是否循环播放
muted : 是否静音

各个浏览器差异
safari只支持mp4
IE8（包含）以下不支持video标签
IE9支持video、但是只支持mp4
欧朋、火狐、谷歌支持mp4、webm、ogv
怎样解决浏览器兼容问题？写法：
// 方法一，如果不支持的话，提示用户换浏览器
<video src="xxx.mp4">
	// 如果浏览器不支持，会提示以下文字
	您的浏览器不支持，请使用其他浏览器
</video>

// 方法二，用video下的source标签，如果浏览器对第一个source不兼容，那么会依次往下查找，直到兼容为止
<video controls>
	<source src="xxx.webm">// 如果不支持webm格式文件，就会往下查找
    <source src="xxx.mp4">// 如果mp4也不支持，那么就会显示下方文字
    // 如果浏览器不支持，会提示以下文字
	您的浏览器不支持，请使用其他浏览器
</video>

参考：HTML5音视频标签介绍和使用

19、怎么做好seo（搜索引擎优化）？

合理的title、description、keywords
语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
非装饰性图片必须加alt
友情链接，好的友情链接可以快速的提高你的网站权重
外链，高质量的外链，会给你的网站提高源源不断的权重提升
重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，保证重要内容一定会被抓取
少用iframe：搜索引擎不会抓取iframe中的内容
提高网站速度：网站速度是搜索引擎排序的一个重要指标

参考：前端如何进行seo优化

20、HTTP的几种请求方式用途？

GET方法
发送一个请求来取得服务器上的某一资源
POST方法
向URL指定的资源提交数据或附加新的数据
PUT方法
跟POST方法很像，也是想服务器提交数据。但是，它们之间有不同。PUT指定了资源在服务器上的位置，而 POST没有
HEAD方法
只请求页面的首部
DELETE方法
删除服务器上的某资源
OPTIONS方法
它用于获取当前URL所支持的方法。如果请求成功，会有一个Allow的头包含类似“GET,POST”这样的信息
TRACE方法
TRACE方法被用于激发一个远程的，应用层的请求消息回路
CONNECT方法
把请求连接转换到透明的TCP/IP通道
个人理解一般是post增、delete删、put改、get查

参考：
HTTP的几种请求方法及其用途
 put和post的区别

21、从浏览器地址栏输入url到页面的步骤？

输入url --> 解析url的主机ip --> 三次握手建立tcp连接 --> 服务器响应请求 --> 关闭tcp连接4次握手 --> 浏览器对响应报文解码，再根据资源类型决定如何处理,html文档则构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树

参考：
前端面试 | 从浏览器地址栏输入URL到显示页面的步骤
 通俗易懂理解TCP协议三次握手和四次挥手及其常见问题

22、如何进行网站性能优化？

网站性能检测：Yslow或者PageSpeed
前端层面：

减少一个页面访问所产生的http连接次数
使用gzip压缩网页内容
css放在页面顶端，JS文件放在页面底端
将js文件内容最小化
尽量减少外部脚本的使用，减少DNS查询时间
使用cdn分发机制
利用用户浏览器的cache缓存
1、在header中添加过期时间
2、将css和js文件放在独立外部文件中引用
3、去掉重复的脚本
4、避免重定向的发生
避免css表达式
等等

后端层面

apache、mysql等软件的配置的优化
应用程序环境加速
将静态内容和动态内容分开处理
基于反向代理的前端访问负载均衡
应用缓存技术提高数据库效能，文件缓存和分布式缓存
服务器运行状态的检测，找到影响性能的瓶颈所在
良好的扩展架构是稳定和性能的基础

参考：如何优化Web网站性能

23、HTTP状态码及其含义？

1xx:信息状态码
2xx：成功状态码
3xx:重定向
4xx：客户端错误（403 权限不够、404 资源找不到）
5xx：服务器错误

24、对浏览器的理解(浏览器架构)？

分为shell和内核。
shell指浏览器的外壳，它是调用内核来实现各种功能的，内核是基于标记语言显示内容的程序或模块，也有一些浏览器不区分外壳和内核。

参考：
浏览器简单理解
 浏览器组成与架构
 浏览器-架构

25、介绍一下你对浏览器内核的理解？

主要分成两部分：渲染引擎(layout engineer或 Rendering Engine) 和 JS 引擎。

渲染引擎：负责取得网页的内容（HTML、 XML 、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS引擎：解析和执行 javascript 来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎

26、HTML5有哪些新特性？

十大新特性
1、Canvas绘图；2、表单元素；3、语义化标签；4、媒体元素；5、地理定位；
6、拖放API；7、Web Worker；8、Web Storage；9、Web Socket；10、SVG绘图

参考：HTML5的十大新特性

27、web标准以及w3c标准是什么？

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

28、xhtml和html的区别？

基础语言不同
html是超文本标记语言，创建可以在浏览器上显示网页的主要标记语言。
xhtml是可扩展超文本标记语言，扩展了广泛使用的html(超文本标记语言)的版本，也是html页面的编写语言。
文件扩展名不同
html扩展名包含 .html .htm
xhtml文件扩展名包含 .xhtml .xht .xml .html .htm
语法严格意义上不同
html不区分大小写，属性值可不加引号，有空标签，语法比较松散，对于开发者来说比较方便。
xhtml区分大小写，属性值必须加引号，标签必须闭合，语法严格，可以被所有浏览器支持。
混合使用不同
html不能混合其他xml应用。
xhtml可以混合各种xml应用。
出处不同
html是W3C和WHATWG，由Tim Berners-Lee于1987年提出。
xhtml是万维网联盟，2000年万维网联盟建议书。

ps:
html 如何转 xhtml ？
写好的html为什么费时费力转xhtml呢？因为xhtml是一种更加严格和纯净的html版本，是由xml和html组成的，xml是装载数据的，html是显示数据，两者结合起来就有了xhtml。由于html比较松散，不利于文档的维护，而xhtml是w3c的一种标准，目标就是逐步替代html，现在浏览器完全支持xhtml。

参考：XHTML与HTML区别？

29、html 全局属性有哪些？

class、id、lang（元素内容的语言）、style、title

参考：HTML的全局属性

30、怎么让一个不定宽高的div垂直水平居中？

1、绝对值定位 2、flex 定位 3、css方法

参考：怎么让一个不定宽高的div，垂直水平居中

31、position有几个属性？

static、relative、absolute、fixed、sticky

参考：position四个属性详解

32、px、em、rem的区别？

px（屏幕分辨率） em（当前对象内字体尺寸） rem（根元素字体尺寸）

参考：px、em、rem三者的区别

33、什么是BFC？

块级格式化上下文。指浏览器中创建了一个独立的渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。

参考：css中的BFC

34、表格自动换行怎么实现？

word-break：normal
word-wrap：normal（浏览器默认换行规则）
break-all 允许单词内换行

35、box-sizing、transition、translate分别是什么？

box-sizing：计算盒模型大小（有border-box从边框固定盒子大小和conten-box从内容固定盒子大小）。
transition 元素属性变化、平滑过渡。
translate：通过移动改变元素的位置，有x、y、z三个属性。

36、选择器优先级是怎样的？

！important>行内样式>id选择器>类选择器>标签选择器>通配符>继承

37、iframe的作用iframe有哪些缺点？

iframe用来在页面嵌入其他页面

优点:

页面和程序分离,几乎不会受到外界任何js或者css的影响, 便于使用
可以通过iframe嵌套通用的页面, 提高代码的重用率, 比如页面的头部样式和底部版权信息
重新加载页面时, 不需要重载iframe框架页的内容, 增加页面重载速度.
iframe可以解决第三方内容加载缓慢的问题.

缺点：

不利于seo
影响页面的并行加载（共享连接池）
会阻塞主页面的onload事件

参考：什么是iframe及作用是什么？

38、有一个导航栏在chrome里面样式完好？在ie里文字都聚到一起了，是哪个兼容性问题？

用来display：flex属性，在ie10以下都是无效的。

39、在新窗口打开链接的方法是？

target：_blank。

40、display:none;与visibility:hidden;的区别是什么？

使用display:none; 文档中元素的宽高都丢失
而visibility:hidden;元素的宽高都在。

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

都是外部引用css
区别：
1、link是xhtml标签，@import是css，link还可以做更多是
2、link无兼容问题,@import是css2.1提出了的，低版本的浏览器不支持
3、link支持js改变样式，@import不支持
4、link的样式权重高于@import
5、@import还需要在html里< style type=“text/css”>
6、link 页面加载css加载；@import页面加载后加载，并且需要引用的css文件被加载完后加载。

42、无样式内容闪烁（FOUC Flash of Unstyle Content)

使用了@import
解决方案：使用link

参考：什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？

43、HTML5的form如何关闭自动完成功能（输入框输入时会展示之前输入内容列表）？

方法：
1、在ie的internet选项菜单中里的自动完成里设置
2、autocomplete为on或off
tip:
在 input 标签中，可以设置 autocomplete=“off” 来关闭自动完成。
但这个属性在不同的浏览器上兼容并不好，因此需要配合 type=“newpassword” 等其他属性来关闭自动完成。

密码输入框
<input type="text" onfocus="this.type='password'">

44、WebSocket 如何兼容低浏览器？

引用WebSocket .js 这个文件来兼容低浏览器

参考：webSocket 开发如何实现兼容低浏览器？

45、页面可见性（Page Visibility） API可以有哪些用途？

1、通过visibility state的值来检测页面是否可见，以及打开网页的时间
2、在页面被切换到其他后台进程时，自动暂停音乐或视频的播放
3、可以节省资源，减缓电能的消耗。

46、如何在页面上实现一个圆形的可点击区域？

1、纯html实现，map+area 或者svg
2、border-redius
3、纯js实现，一个点不在圆上的算法

参考：如何在页面上实现一个圆形的可点击区域？

47、实现不使用border画出1px高的线，在不同浏览器的Quirks mode和CSS Compat模式下都能保持同一效果？

<div style="height:1px;overflow:hidden;background:red"></div>

参考：浏览器Quirksmode(怪异模式)与CSScompat

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

1、区分用户是人还是电脑
2、可以防止恶意破解密码、刷票、论坛灌水

49、网页制作会用到的图片格式有哪些？

png-8、png-24、jpeg、gif、svg、Webp

50、前端页面有哪三层构成，分别是什么？作用是什么(合理的页面布局中常听说结构与表现分里，那么结构是什么？表现是什么)？

结构层html 表示层css 行为层js
HTML属于结构层,负责描绘出内容的结构,CSS属于表示层,负责“如何显示有关内容”,JavaScript属于行为层,负责“内容应如何对事件做出反应”。

51、HTML元素的显示优先级？

帧元素（iframe）>HTML元素，表单元素总>非表单元素

52、浏览器的渲染原理？

一个完整的渲染流程大致可总结如下:

渲染进程将HTML内容转换为浏览器能够读懂的DOM树结构。
渲染引擎将CSS样式表转化为浏览器能够理解的CSS树,计算出DOM节点的样式。
DOM树 + CSS树创建布局树，并计算元素的布局信息。
对布局树进行分层，并生成图层树。
对每个图层生成绘制列表，并将其提交给合成线程。
对每个图层进行单独的绘制
合并图层

参考：浏览器渲染原理

53、渲染过程中遇到js文件怎么处理？（浏览器解析过程）

暂停文档的解析，来等待js引擎的执行完毕。

54、async和defer的作用是什么？有什么区别？（浏览器解析过程）

defer 延迟执行引入的js，不阻塞文档的解析，多个脚本按顺序执行
async 异步引入js，会阻塞文档的解析，js的加载过程不会阻塞。多个脚本的执行顺序无法保证。

参考：JS script脚本中async和defer区别详解

55、什么是文档的预解析？（浏览器解析过程）

Webkit 和 Firefox 都做了这个优化，当执行 JavaScript 脚本时，另一个线程解析剩下的文档，并加载后面需要通过网络加载的资源。这种方式可以使资源并行加载从而使整体速度更快。需要注意的是，预解析并不改变 DOM 树，它将这个工作留给主解析过程，自己只解析外部资源的引用，比如外部脚本、样式表及图片。

参考：HTML文档是边加载边解析、预解析

56、CSS如何阻塞文档解析？（浏览器解析过程）

由于js有可能会请求样式，为了避免出现问题，所以浏览器会先下载和构建css树，然后执行js，最后再继续文档的解析

参考：前端常见问题以及处理方式 - - - (四) 关于CSS阻塞篇

57、渲染页面时常见哪些不良现象？（浏览器渲染过程）

样式闪烁（FOUC）： 先渲染了html,样式尚未加载出来。原因是css加载时间过长，或者css被放在了文档底部
白屏： 有些浏览器渲染机制（比如chrome）要先构建DOM树和CSSOM树，构建完成后再进行渲染，如果css部分放在html尾部，由于css未加载完成，浏览器迟迟未渲染，从而导致白屏。也有可能是把js文件放在头部，脚本的加载会阻塞后面文档内容的解析，从而页面迟迟未渲染出来，出现白屏问题。

58、如何优化关键渲染路径？（浏览器渲染过程）

最大限度减少：

关键资源的数量
关键字节的数量
关键路径长度
即减少关键资源数量，降低资源大小，减少关键路径的往返次数

参考：前端不止：Web性能优化 - 关键渲染路径以及优化策略

59、什么是重绘和回流？（浏览器绘制过程）

重绘： 在渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，不影响布局，就称为重绘
回流： 在渲染树中的一部分（或者全部）因为元素的规模尺寸、布局、显隐等改变而需要重新构建，这就称为回流
回流必定会引起重绘，重绘一定不会引起回流

参考：前端面试题 | 什么是回流和重绘？它们的区别是什么？

60、如何减少回流？（浏览器绘制过程）

（1）使用 transform 替代 top，实现动画性能更好，因为使用transform页面没有回流了。（原因：可以阅读这篇文章：深入理解为什么应该使用transform来替代top）
（2）不要把节点的属性值放在一个循环里当成循环里的变量
（3）不要使用table布局，可能很小的一个小改动会造成整个 table 的重新布局
（4）把DOM离线后修改。如：使用 documentFragment 对象在内存里操作DOM
（5）不要一条一条地修改 DOM 的样式。与其这样，还不如预先定义好css的 class，然后修改 DOM 的 className。

参考：
页面性能优化，如何减少回流
 如何减少回流（重排）和重绘

61、为什么操作DOM慢？（浏览器绘制过程）

一些DOM操作容易引起页面的重绘和回流，从而引起性能的消耗。

62、DOMContentLoaded事件和Load事件的区别？window.onload

当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像和子框架的加载完成。
Load事件是当所有资源加载完成后触发。

63、attribute和property的区别是什么？

attribute是dom元素在文档中作为html标签拥有的属性
property是dom元素在js中作为对象拥有的属性
对于html的标准属性来说，attribute和property是同步的，是会自动更新的，但是对于自定义的属性来说，他们是不同步的。

参考：attribute和property的区别

64、web标准—可用性、可维护性、可访问性？

可用性：产品是否容易上手，用户能否完成任务，效率如何，以及这过程中用户的主观感受可好，是从用户的角度来看产品的质量。可用性好意味着产品质量高，是企业的核心竞争力。
可维护性：一是当系统出现问题时，快速定位并解决问题的成本，成本低则可维护性好。二是代码是否容易被人理解，是否容易修改和增强功能。可维护性和可复用性、可扩展性等有交叉的地方。构建可维护性好的代码，对企业的长期发展非常重要。
可访问性：Web内容对于残障用户的可阅读和可理解性

参考：web标准—可用性、可维护性、可访问性

65、IE各版本和Chrome可以并行下载多少个资源？

IE6 2个并发
IE7升级之后 6 个并发，之后版本也是6个
Firefox、Chrome也是6个

66、css reset和normalize.css有什么区别？

都是重置浏览器css样式。
reset的目的是将所有的浏览器的自带样式重置掉，这样更易于保持各浏览器渲染的一致性。
normalize的理念则是尽量保留浏览器的默认样式，不进行太多的重置，而尽力让这些样式保持一致并尽可能与现代标准相符合。
normalize.css有下面这几个目的：

保护有用的浏览器默认样式而不是完全去掉它们
一般化的样式：为大部分HTML元素提供
修复浏览器自身的bug并保证各浏览器的一致性
优化CSS可用性：用一些小技巧
解释代码：用注释和详细的文档来

参考：Normalize.css与CSS reset区别

67、用于预格式化文本的标签是？

pre标签
pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

68、::before 和:after中双冒号和单冒号有什么区别？

单冒号（:）用于CSS3伪类，双冒号（::）用于CSS3伪元素（伪元素由双冒号和伪元素名称组成），为了兼容已有的伪元素写法，在一些浏览器中也可以使用单冒号，来表示伪元素，比如:first-line、:first-letter、:before、:after等。
在新的CSS3中引入的伪元素不允许再支持旧的单冒号是写法
想让插入的内容出现在其它内容前，使用::before，反之使用::after，在代码顺序上，::after生成的内容也比::before生成的内容靠后
伪类一般匹配的是元素的一些特殊状态，如hover、link等，而伪元素一般匹配的是特殊位置，比如after、before等。

参考：::before和:after中的的双冒号和单冒号有什么区别及这两个伪元素的作用

慢溺逆水清

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
面试题含答案(HTML篇)

面试题含答案(HTML篇)1、说一下对语义化的理解？2、cookies，sessionStorage 和 localStorage 的区别？3、如何实现浏览器内多个标签页之前的通信？4、DOCTYPE的作用？严格模式和混杂模式的区别？5、常用的 meta 标签有哪些？6、img的srcset作用？alt与title区别？7、::before 和:after中双冒号和单冒号有什么区别？共68个问题
复制链接

扫一扫