2024年前端最全html面试题，自学者福利

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

改版更方便，只需要改CSS文件。页面加载速度更快、结构化清晰、页面显示简洁。表现与结构相分离。易于优化（SEO）搜索引擎更友好，排名更容易靠前。

一、div+css布局的好处：

1.符合W3C标准，代码结构清晰明了，结构、样式和行为分离，带来足够好的可维护性。

2.布局精准，网站版面布局修改简单。

3.加快了页面的加载速度（最重要的）（在IE中要将整个table加载完了才显示内容）。

4.节约站点所占的空间和站点的流量。

5.用只包含结构化内容的HTML代替嵌套的标签，提高另外搜索引擎对网页的搜索效率。

二、table布局的好处（table布局也不是一点用的没有，这点是毋庸置疑的）

1.容易上手。

2.可以形成复杂的变化，简单快速。

3.表现上更加“严谨”，在不同浏览器中都能得到很好的兼容。

13.a：img的alt与title有何异同？b：strong与em的异同？

a:

含义不同，alt是当前图片不存在时的替代文字。而tittle是对图片的描述与进一步说明；

在浏览器中表现不同，在firefox和ie8中，当鼠标经过图片时title值会显示，而alt值不会显示；只有在ie6中，当鼠标经过图片时title和alt值都会显示；

对于网站seo优化来说，title与alt还有最重要一点：搜索引擎对图片意思的判断，主要靠alt属性。所有在图片alt属性中以简要文字说明，同时包含关键词，也是页面优化的一部分。

b:

strong粗体强调标签，强调，表示内容的重要性；

em斜体强调标签，更强烈强调，表示内容的强调点；

14.seo优化

定义：SEO（Search Engine Optimization）:汉译为搜索引擎优化。是一种方式:利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是：为网站提供生态式的自我营销解决方案，让其在行业内占据领先地位，获得品牌收益；

主要工作：通过了解各类搜索引擎 抓取互联网页面、进行索引以及确定其对特定关键词搜索结果排名等技术，来对网页进行相关的优化，使其提高搜索引擎排名，从而提高网站访问量，最终提升网站的销售或宣传的效果。

15.渐进增强和优雅降级的区别？

渐进增强（progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级（graceful degradation）:一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

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

优雅降级观点

认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作拿牌在开发周期的最后阶段，并把测试对象限定在主流浏览器（如IE、Mozilla等）的前一个版本。在这种规范下，旧版浏览器被认为仅能提供“简陋却无妨（poor,but

passable）”的浏览体验。你可以做一些小的调整来适应某个特定浏览器。但由于他们并非我们关注重点，所以除了修复较大的错误之外，其他的差异将被直接忽略。

渐进增强观点

认为应关注内容本身。内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都设计到内容。这使得渐进增强称为一种更合理的设计范例。这也是它立即被Yahoo!所采纳并用以构建其“分级式浏览器支持”策略的原因所在。

二者区别

1.）如果你采用渐进增强的开发流程，先做一个基本功能版，然后针对各个浏览器进行渐进增加，增加各种功能。相对于优雅降级来说，开发周期长，初期投入资金大。

你想一下不可能拿个基本功能版给客户看呀，多寒酸，搞不好一气之下就不找你做了，然后就炸了。但是呢，也有好处，就是提供了较好的平台稳定性，维护起来资金小，

长期来说降低开发成本。

2.）那采用优雅降级呢，这样可以在较短时间内开发出一个只用于一个浏览器的完整功能版，然后就可以拿给PM找客户谈呀，可以拿去测试，市场试水呀，对于功能尚未确定的

产品，优雅降级不失为一种节约成本的方法。

16.Src与href区别？

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。

src是souce的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。

当浏览器解析到该元素时，会暂停其他资源的下载和处理，知道将该资源加载、编译、执行完毕，图片和框架元素也如此，类似于将所有指向资源嵌入到当前标签内。这也是为什么将js脚本放到底部而不是头部。

href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加

那么浏览器会识别该css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css。而不使用@import方式。

17.网页制作用到的图片格式有？区别？

png-8，png-24，jpeg，gif，svg。 还有一个 WebP格式，谷歌（google）新推出的影像技术，它可让网页图档有效进行压缩，同时又不影响图片格式兼容与实际清晰度，进而让整体网页下载速度加快 。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。 在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%

三种格式的图片的区别如下：

JPEG图片不象GIF图片那样只能有256种颜色，它可以包含数百万种颜色，而且有极高的压缩率。这使得JPEG图片比较适合用来保存相片。JPEG是一种有损压缩的格式,JPEG不支持透明度。

GIF是一种调色板型，含有多达256种的颜色。每一个象素点都有一个对应的颜色值。是一种无损压缩的格式。

PNG是一种无损压缩的格式，而且它有很多种类。1.PNG8 2.真彩色PNG

在网站建设中到底应该用JPEG格式还是GIF格式？

方便记忆的简易准则：

1．如果图片是扫描的图画或照片时就用JPEG格式。

2．在你的电脑上制作的水平形式的条例、按钮以及动画图片，这些图片应该用GIF格式。

最后，我们总结一下：

1.JPEG格式比较适合用来存储照片

2.GIF格式可以用来做动画

3.PNG可以用来做小图标（icons），按钮，背景等。

18.大型网站优化图片加载有什么方法？

图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。

什么是图片懒加载？

对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不加载，等到滚动到可视区域后再去加载。这样子对于页面加载性能会有很大的提升，也提高了用户体验。

如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。

如果图片为css图片，可以使用CSSsprinte，SVGsprite,Iconfont、Base64等技术。

如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。

如果图片展示区域小于图片的真实大小，则应在服务端根据业务需要先进行图片压缩，图片压缩后大小与展示一致。

19.如何理解HTML结构的语义化？

去掉或丢失样式的时候，能让页面呈现清晰的结构：html本身是没有表现的，我们看到例如<h1>是粗体、<strong>是加粗的。不要认为这是htl的表现，这些其实html默认的css样式起的作用。浏览器都有默认样式，默认样式的目的也是为了更好的表达html的语义。

搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。过去你可能还没有考虑搜索引擎的爬虫也是网站的“访客”，但现在它们实际上是极其宝贵的用户。没有它们的话，搜索引擎将无法索引你的网站，然后一般用户很难过来访问。

你的页面对爬虫容易理解非常重要，因为爬虫很大程度上会忽略用于表现的标记，而只注重语义标记。SEO主要还是靠你网站的内容和外部链接的。

20.为什么用多个域名存储网站资源更有效？

CDN缓存更方便。静态内容和动态内容分服务器存放，使用不同的服务器处理请求。处理动态内容的不处理静态内容。提高效率。

突破浏览器并发限制。节约主域名的链接数，从而提升客户端网络带宽的利用率，优化页面响应。因为老的浏览器（IE6是典型），针对同一个域名值允许同时保持两个HTTP链接。将图片等资源请求分配到其他域名商，避免大图片之类的并不一定重要的内容阻塞主域名上的其他资源链接。

节约cookie带宽。例如twitter的主战twitter.com每次访问，都会带上自己的cookie，挺大的。加入图片也放在主域名下，那么每次访问图片时，请求头也会携带cookie，而图片是不需要知道用户的cookie的，所有者部分带宽白白浪费了。

节约主域名的链接数，优化页面响应速度。

防止不必要的安全问题。对于UGC（user generated content）的内容和主站隔离，防止安全问题（上传js窃取主站cookie之类的）。正是这个原因要求用户内容的域名必须不是自己主站的子域名，而是一个完全独立的第三方域名。

（前端缓存分为浏览器缓存和cdn缓存，

cdn可以理解为一个普通缓存，如代理缓存或者说边缘缓存，即便不关心用户的具体地理位置，也应该考虑使用cdn的代理缓存来提高用户体验。

简单而言，代理缓存会缓存你网站的一些页面，通过缓存来传输静态内容非常的快

详细https://blog.csdn.net/guoyunyuhou/article/details/76664960）

21.请描述一下cookies，sessionStorage和localStorage的区别？

sessionStorage用于本地存储一个回话（session）中的数据，这个数据只有在同一个回话中的页面才能访问并且当回话结束后数据也随之销毁。

因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是用于不会过期的。

web storage和cookie区别

最后

推荐一些系统学习的途径和方法。

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML 和 CSS：