Web前端面试宝典
Web前端面试宝典
[TOC]
resume部分
1. 自我介绍一
面试官好，我叫XXX，有半年前端开发实习经验。目前主要用Vue框架做项目，最近也在学React框架准备进行项目开发。在之前公司参与过3个实际的项目，其中一个让我特别有成就感—就是采用uni-app开发了一个电商app并且已经上线。
技术能力部分：
日常工作中我主要做这些事：
- 用
Vue开发页面，把重复的功能做成可复用的组件 - 优化项目打包速度（之前有个项目打包要
3分钟，优化后只要40秒） - 和后台同事配合调接口，处理数据展示和性能问题
- 用
Git管理代码，每周都会写技术总结，记录遇到的问题和解决方法
未来规划：
现在除了继续深耕Vue，我在学前端工程化相关的东西，比如自动化测试和持续集成。希望未来能参与更复杂的项目，成为既懂业务又会技术优化的全流程开发者。
2. 自我介绍二
面试官好，我是计算机专业的面试者XXX，我此次应聘的职位是web前端开发工程师，这份工作不仅与我的专业对口，同时也是我的特长与兴趣所在。现在我就从以下三个方面介绍自己：
学习能力： 我具备快速将新技术落地到项目的能力，当前主要技术栈为：
核心开发：基于Vue3+TypeScript完成过电商管理后台开发，独立封装10个高复用业务组件
工程实践：在小程序开发中采用uni-app跨端方案，实现核心代码复用率85%
**持续成长：**正在通过开源项目深入React技术栈，使用React Router v6实现动态路由分割，结合代码分割技术，将SPA应用首屏加载速度提升35%
**实践能力：**我的专长是软件开发，我希望能从事这方面的工作经验，并且我曾经发过多个系统，如校园考试系统，电商中后台管理系统等等。
**交际能力：**我的性格沉稳，能坐得住，对IT行业的工作，具有非常好的适应能力，而且为人谦和，具有很强的组织和协调能力，富有的事业心和责任感使我能够面对任何困难和挑战。
从以上的简单自我介绍，我希望公司能给我一个展示自己能力的机会，让我我可以学以致用，同时我也很欣赏XX公司的企业文化与工作环境。我愿意成为企业一员，为企业的发展贡献自己的一份力量。我的职业生涯目标是，做一个既懂技术，又懂业务的复合型人才。
3. 自我介绍三
我叫XXX，来自于南昌理工计算机软件工程专业。从考入大学那天起我一直努力学习，在大学生活中培养了良好的学习习惯，所学的课程包括了从计算机的基础知识到运用等许多方面。通过对这些知识的学习，我对这个领域的相关知识有了一定程度的理解和掌握。并做了大量的实践，进一步加深了对计算机的认识。在学好基础知识的同时还注重多方面全面发展，多次参加了学校的各种活动，在实习过程中将理论与实践结合起来，深受学校老师和同学的欢迎。
大学生涯中，我吸取了丰富的专业知识并锻炼了自己的能力。通过大学里的苦读，我掌握了c语言，汇编语言，编译原理，powerbuilder，数据库原理， 并对c++v，c++，windows 编程等有一定了解。课外我还自学了delphi编程，asp动态网页及flash动画，并在大二下学期获得“数据库”考试证书。
随着知识经济的诞生，社会将更加需要“专业突出，素质全面”的复合性 人才 。因此，课外我还积极投身于各种班级、学院及社交活动。从不同层次、不同角度锻炼自己，自己的组织、管理能力及团队合作精神有很大提高。
回顾大学几年来，我学到的最有用的知识是：自信与自学！体会最深的一句话就是：天下无难事，只怕有心人!
4. 自我介绍四
你好，我叫XXX，我的上一家公司是做XXX。所以我们公司做的项目都是和XXX相关的。
刚进公司的那时候，什么交互啊，项目需求，测试，代码编写，优化，我都有是积极的参与，因为是新人，所以好好把握住每个学习的机会，我的本职工作，前端这块，我都是认真负责完成。那时候虽然很忙，压力很大，但真的是学到了不少东西，后期项目都不断的在完善，我也不断的在参与。
在上一家公司中，我最的收获不单单是技术方面，主要还有业务能力，自学能力和同事的沟通能力，这都是我学到的，而且我认为很重要的.。
技术方面我一直从事于web方面的工作，掌握的前端技术有html5 & css3、js、vue、小程序等，同时我也了解java语言和数据库表结构这块，跟后台人员能更有效的沟通。
我的性格方面不算外向，也不算内向，跟朋友，同事相处，比较外向，在工作中，代码开发时，我是比较内向的，我喜欢全心全意的投入工作中。我也喜欢交朋友，偶尔跟朋友聚聚，聊聊。对于工作我总是抱着认真负责，有责任心，吃苦耐劳的态度工作。
谢谢，以上是我的自我介绍。
5. 自我介绍五
面试官：
您好！
我叫XXX，您可能会联想起琼瑶小说，字的确就是那两个字，差别就是人没有那么美丽，呵呵。其实，我的同学更都喜爱称呼我的英文名字，叫june，六月的意思，是君的谐音。
我来自广东的市，可能您没有去过，是一个很小的县级市，这几年刚刚开发了温泉业，我想将来会有更多的.人了解这个小城市。
在20xx年我以恩平市全市第一名的成果考上了中山高校，学的是计算机科学专业。不过，在中大，我没法再像高中一样总是名列前茅了，到目前为止，我的综合学分排名是40%左右。在专业课程方面，我c++的编程力量比较强，一年以前就开头自学java，在班级里是最早开头学java的。
我参加过我们老师领导的一个项目，叫做lan谈天室，我负责开发了其中的准时通信系统的编写。在我们班，老师只选择了我一个女生参加这个项目，主要是我写程序的效率比较高，态度也特别仔细。(点评：假如你的编程力量不如男生强，至少你要告知面试官，我比多数女生要强。假如贵公司考虑选择一名女生，那么，选择我吧!)
除了学习和项目实习以外，我在同学会工作了两年，第一年做干事，其次年被提升为秘书长。大家对我的评价是考虑问题很周全，令人放心。
在我的求职清单上，ibm是我的首选单位，缘由和您面试过的许多同学都一样，出于对大品牌的信任。究竟，大品牌公司意味着许多我们需要的东西，比如培训和薪资，能和优秀的高素养的人在一起工作等等。
技术支持工程师也刚好是我的首选职位，由于我有技术背景，也有作为女性和和客户沟通的自然 优势。还有，我不担忧频繁出差，由于我身体素养很好，我已经坚持晨跑两年多了。在ibm专业技术方面，我信任公司的培训体系和我自己的快速学习力量!盼望能有机会加入ibm团队
感谢!
6. 自我介绍六
考官好，我是计算机专业的面试者XX，我此次应聘的职位是IT行业的软件工程师，这份工作不仅与我的专业对口，同时也是我的特长与爱好所在。现在我就从以下三个方面介绍自己：
**学习力量：**我有较强的科研力量，能娴熟的进行LINUX操作，并能使用VB，DELPHI等语言编程。能运用网页三剑客Photoshop软件进行相关工作。
**实践力量：**我的专长是软件开发，我盼望能从事这方面的工作阅历，并且我曾经发过多个系统，如人事档案管理系统，工资管理系统等等。
**交际力量：**我的性格沉稳，能坐得住，对IT行业的工作，具有特别好的`适应力量，而且为人谦和，具有很强的组织和协调力量，富有的事业心和责任感使我能够面对任何困难和挑战。
从以上的简洁自我介绍，我盼望公司能给我一个展现自己力量的机会，让我我可以学以致用，同时我也很观赏XX公司的企业文化与工作环境。我情愿成为企业一员，为企业的进展贡献自己的一份力气。我的职业生涯目标是，做一个既懂技术，又懂业务的复合型人才。
7. 自我介绍七
在这四年里，我在学习上比较仔细，成果也比较好，每年都能拿到学校的奖学金，在班里也始终能保持在前五名。特殊是在专业课方面，尽量做到学好用好。乐观参与各种广告方面的竞赛，并且获得过全国高校生广告艺术大赛江苏赛区三等奖。无论是平常的作业，还是论文，还是考试，都能仔细对待，盼望做到最好。假如要说这四年在学习上最大的圆满是什么，那就是英语，以前在高中时我的英语成果还，但是进了高校以后，我对英语怠慢了，没有花太多的时间去学，导致现在要毕业了还没有考过六级。
在社会实践方面，我觉得我的阅历还是蛮丰富的。20xx年下半年，我在一家广告公司做实习策划的工作，尽管刚开头什么都不会，很辛苦，很累，但是当我作为一个歌迷见面会的策划者和执行者在舞台后和花儿乐队沟通的时候，当我撰写的伊奈陶瓷公司广告效果测评报告获得客户认可的时候，当我看到自己策划的奠基仪式、开业典礼胜利实施的时候，当我设计的logo被企业采纳的时候，当我在路演现场独挡一面的时候，我是快乐的。我靠着自己的努力完成了一项项任务。在广告公司的实习，让我学到了许多书本上学不到的东西，接触了各行各业的客户，同时，也在工作中对印刷业、媒体、礼仪服务机构等有了肯定的了解，为以后能够很快适应工作岗位奠定了基础。
回顾自己高校四年的工作学习生活，感受很深，但觉的收获还是颇丰的。把握了专业学问，培育了自己各方面的力量，这些对今后的工作都将产生重要的关心。除此之外，也应当看到我的一些缺点，如有时候做事情比较急于求成，在工作中实际阅历不足等等。但“金无足赤，人无完人”每个人都不行避开的存在他的缺点，有缺点并不行怕，关键的是如何看待自己的缺点，只有正视它的存在，通过不断的努力学习才能改正自己的缺点。今后我将更严格要求自己，努力工作，刻苦学习，发扬优点，改正缺点，开拓前进。
曾担当院同学会成员、副班长等职，现任计算机系团总支组织部部长。多次组织系部、班级联欢会、春游等活动，受到老师、同学们的全都好评。思想修养上，我品质优秀，思想进步，笃守诚、信、礼、智的做人原则。
这次我选择这个职位除了专业对口以外，我觉的我也非常喜爱这个职位，信任它能让我充分实现我的社会抱负和体现自身的价值。我认为我有力量也有信念做好这份工作盼望大家能够认可我，给我这个机会！
8. 自我介绍八
各位领导好，我叫XXX，我的老家在是河南省，父母都健在身体都很健康，我还有一个 姐姐在武汉工作。我是12年大学毕业的，所学的专业也是计算机Javar软件技术。记得当时还没毕业就来上海找工作了，当时就在xx公司实习，半年后 就转正到卫生服务事业部，从事于医疗卫生项目方面的程序员开发工作。大概一共是待了一年半吧，就辞职了。原因大概是当时的工作氛围让我觉得没什么意思再加 上当时还自我感觉良好就跳到一家日企里上班，正好那时候公司在过CMMI3，做的项目都严格按照CMMI流程走的，什么文档、Coding、测试的我都有 参与。那时候真的是让学到不少项目上的东西，可能正好是金融危机吧，公司原先承诺的工资没有兑现然后我就走了。去的’是上海XX信息公司，从刚开始的项目主 力开发到项目组长，在上农信近三年的工作中我最大的收获就是公司放手让我在项目独挡一面跟客户面对面自由的沟通好需求，项目后期给客户提供项目培训然后通 过客户的反馈知道项目的得与失。可能是我不太适应公司的人事变化吧，然后就提出离职走了。
技术方面我一直都是从事于J2ee Web方面的工作，一般开源的框架Struts1、Struts2、Hibernate、Ibatis、Spring都有项目开发使用。掌握前端Ajax、Jquery、Dwr、包括CSS、HTML。
数据库方面能写复杂的SQL查询统计包括视图、存储过程的开发，有postgre，Oracle，Sql Server项目开发经验。
我的性格方面不算外向好像也不内向，喜欢交朋友，也喜欢有挑战性的。闲暇时间打打羽毛球，下象棋。
**性格缺点：**说话太直，做事情缺少魄力想的太多会犹豫不决。
**性格优点：**工作方面自我感觉做事比较认真、负责，能吃苦耐劳。
9. 自我介绍九
我喜欢篮球和羽毛球，曾担任大学校篮球队队员。在篮球队中深刻体会到在大家共同努力下击败对手的成就感!
对于计算机有着狂热的喜爱，虽掌握软件众多，但对编程情有独钟!在每一次解决了问题后都有一种成就感!我喜欢这种感觉，让我能沉迷于我的代码的世界中!
爱好前端等程序设计，喜欢开发自已小型产品，追求技术上的满足感;稳固的架构，健壮的代码，团结的合作，是我的不懈追求。
有良好的编程习惯，以及程序错误控制和解决能力，我爱程序员这个岗位，当每天敲着代码，听着音乐，是很快乐的
用心工作，用心生活!我可能不是最好的`，最合适的，我觉得我是最有潜力的!
10. 自我介绍十
各位考官：
大家好！
我叫xxx，今年x岁，是x高校x专业20x届应届毕业生，应聘的职位是xx。
我曾先后在xx有限公司、x公司、xx有限公司调研或实习，了解x业务流程、xx操作及生产管理等。
正直和努力是我做人的原则，镇静和冷静是我遇事的态度，钻研和尽职是我从业的要求。回顾高校四年的学习生活，感受很深、收获颇丰，把握了专业学问，培育了自己各方面的素养和力量。我也存在一些不足之处，但我正视缺点和不足，不断的努力，使自己得到更大提高。
这次我选择这个职位除了专业对口以外，我觉的我也非常喜爱这个职位，信任它能让我充分实现我的社会抱负和体现自身的价值，我也认为我有力量有信念做好这份工作。
特别感谢xx赐予我这次面试学习的机会。感谢！
11. 自我介绍十一
回首三年的高校校内生活生涯和社会实践生活，有渴望、有追求、有胜利也有失败，我孜孜不倦，不断地挑战自我，充实自己，为实现人生的价值打下坚实的基础。 在思想品德上，本人有良好道德修养。本人遵纪守法、爱惜公共财产、关怀和关心他人，并以务实求真的精神热心参加学校的公益宣扬和爱国活动。
在学习上，我喜爱自己的专业，还利用课余时间专修计算机专业学问，使我能轻松操作各种网络和办公软件。曾多次获得学金，在书法和体育运动都获得好成果。英语、电脑、一般话等方面的等级考试已达标。除了在专业学问方面精益求精外，平常我还涉猎了大量网络编程、网络管理与维护、网页设计等学问。并且信任在以后理论与实际结合当中，能有更大提高。
在工作上，对工作热忱，任劳任怨，责任心强，具有良好的组织交际力量，和同学团结全都，注意协作其他同学干部精彩完成各项工作，得到了大家的全都好评。
在生活上，我最大的特点是诚恳守信，热心待人，勇于挑战自我，时间观念强，有着良好的生活习惯和正派作风。由于平易近人待人友好，所以始终以来与人相处甚是融洽，连续担当了分院的.乒协的秘书长一职。有广泛爱好的我特殊擅长于网页设计和网站管理与维护方面。曾独立完成一个中型网站的设计，以及大型综合网站的策划与修改工作。
身为平面设计专业的同学，我在修好学业的同时也注意于社会实践。本着学以致用，实践结合理论发挥。暑假期间我到Xx网吧等大型网吧里工作，管理阅历与软硬件维护得到了极大的积累。
三年的高校生活，使自己的学问水平、思想境界、工作力量等方面都迈上了一个新的台阶。在这即将挥手告辞美妙高校生活、踏上社会征途的时候，我整军待发，将以饱满的热忱、坚决的信念、高度的责任感去迎接新的挑战，攀登新的高峰。
12. 自我介绍十二
你好，我叫xxx，我上一家公司是做XXX。所以我们公司做的项目都是和XXX相关的。
刚进公司的那时候，什么交互啊，项目需求，测试，代码编写，优化，我都有积极的参与，因为是新人，所以好好把握住每个学习的机会，我的本职工作，前端这块，我都是认真负责完成。那时候虽然很忙，压力很大，但真的`是学到了不少东西，后期项目都不断的在完善，我也不断的在参与。
在上一家公司中，我的收获不单单是技术方面，主要还有业务能力，自学能力和同事的沟通能力，这都是我学到的，而且是我认为很重要的。
技术方面我一直从事于web方面的工作，掌握的前端技术有ajax，js，vue，html，css，我也了解java语言和数据库表结构这块，与后台人员能更有效的沟通。
我的性格方面不算外向，也不算内向，跟朋友，同事相处，比较外向，在工作中，代码开发时，我是比较内向的，我喜欢全心全意的投入工作中。我也喜欢交朋友，偶尔跟朋友聚聚，聊聊。对于工作我总是抱着认真负责，有责任心，吃苦耐劳的态度工作。
谢谢，以上是我的自我介绍。
git部分
1. 如何创建git仓库并提交版本？（ 高 ）
1 | # 初始化仓库 |
2.如何解决合并冲突？（ 中 ）
合并冲突发生在合并分支时，当两个分支的相同部分产生了不同的更改时，解决合并冲突一般步骤如下：
使用git status命令查看冲突的文件。
打开冲突文件，手动解决冲突并选择要保留的更改。
使用git add命令将解决冲突后的文件标记为已解决。
使用git commit命令提交解决冲突的结果。
3. 如何恢复还原到上一个版本？（ 低 ）
1 | # 回退到上一个版本 |
4. 请介绍推送本地仓库到远程的过程？（ 高 ）
1 | # 添加暂存盘 |
5. 请介绍git多人远程协作的流程？（ 高 ）
1. 克隆远程仓库
首先，每个开发者需要将远程仓库克隆到本地：
1 | git clone <远程仓库URL> |
2. 创建分支
为了隔离开发工作，开发者应基于主分支（如 main 或 master）创建新分支：
1 | git checkout -b <分支名> |
3. 开发与提交
在本地分支上进行开发，完成后提交更改：
1 | git add . |
4. 推送分支
将本地分支推送到远程仓库：
1 | git push origin <分支名> |
5. 创建 Pull Request (PR)
在远程仓库（如 GitHub、GitLab）上，基于推送的分支创建 PR，请求将更改合并到主分支。
6. 代码审查
团队成员审查 PR，提出修改建议。开发者根据反馈更新代码，并推送新的提交。
7. 合并 Pull Request (PR)
审查通过后，将 PR 合并到主分支。
8. 同步主分支
合并后，开发者应拉取最新的主分支到本地，保持同步：
1 | git checkout main |
9. 删除已合并的分支
合并完成后，可以删除远程和本地的已合并分支：
1 | git push origin --delete <分支名> |
10. 处理冲突
如果多人修改了同一文件，可能会产生冲突。解决冲突后，标记冲突已解决并提交：
1 | git add <冲突文件> |
11. 持续集成
许多团队使用 CI/CD 工具（如 Jenkins、GitHub Actions）自动测试和部署代码，确保每次合并后的代码质量。
12. 定期同步
开发者应定期拉取主分支，保持本地代码与远程仓库同步，减少冲突。
总结
多人协作的关键在于：
使用分支隔离开发
通过 PR 进行代码审查
定期同步主分支
及时解决冲突
这些步骤能有效提升团队协作效率，减少代码冲突。
开启新对话
6. git 和 svn的区别？（ 低 ）
git是分布式的，svn是集中式git把内容按元数据方式存储，而svn是按文件存储git分支和svn的分支不同git没有一个全局的版本号，而svn有全局版本git的内容完整性要优于svn
7. git rebase 和 git merge的区别？（ 中 ）
git merge
作用：
将两个分支的代码合并，生成一个新的合并提交，保留两个分支的历史记录。
特点：
保留分支的完整历史（包括分叉和合并的上下文）。
会产生一个额外的合并提交（Merge Commit）。
适合在团队协作中合并公共分支（如 main/develop）。
git rebase
作用：将当前分支的提交“移动”到目标分支的最新提交之后，形成一条线性的历史。
特点：
重写提交历史，使历史记录更清晰（无分叉）。
不会生成合并提交，但会修改原提交的哈希值（历史被改写）。
适合在本地整理提交记录，不推荐用于已推送到远程的分支。
如何选择？
如果分支是本地的，且想保持历史线性 → 用 rebase。
如果分支是公共的（已推送到远程）→ 用 merge。
推荐工作流：本地开发时用 rebase 保持整洁，合并到主分支时用 merge。
一句话总结
git merge：保留历史，适合协作。
git rebase：线性历史，适合本地优化。
8. 如何解决提交版本产生冲突？（ 高 ）
**发现冲突：**合并或变基时，Git 提示 CONFLICT。
**手动修改文件：**打开冲突文件，删除冲突标记（<<<<<<<、>>>>>>>），保留需要的代码。
**标记解决：**执行 git add <file> 告诉 Git 冲突已处理。
完成操作：
合并用 `git commit 。
变基用
git rebase --continue。
关键区别：
git merge：保留分支历史，适合公共分支（如团队协作）。
git rebase: 线性历史，适合本地分支整理（别对已推送的分支用！）。
html部分
1. html5新增什么新特性？（ 高 ）
新元素：比如新增了表单标签、音视频标签、绘图标签、语义化标签
新属性：比如有autocomplete 自动完成、required 必填、pattern 正则表达式和 placeholder 提示占位文字
完全支持CSS3：比如新增了CSS圆角、盒阴影、文字阴影、颜色 hsl 和 rgba、媒体查询、webfont和CSS动画等
本地应用：本地数据存储、本地SQL数据、离线存储、worker多线程和xmlHttpRequest 2
2. 主流浏览器以及引擎有那些？（ 中 ）
chrome 谷歌 , 引擎以前是Webkit，现在是Blink内核firefox 火狐，引擎是 Gecko 内核ie 微软（测试兼容性 IE9-），引擎是Trident内核（IE、360、搜狗）opera 欧鹏，引擎以前是Presto内核，后来是Webkit内核，现在是Blink内核safari 苹果，引擎是 Webkit内核360 安全，引擎是IE+Chrome双内核，Trident（兼容模式），+Webkit（高速模式）
3. SEO优化有那些方面？（ 中 ）
- 设置窗口标题
- 设置
meta描述 - 设置
meta关键字，多个关键字用英文逗号分割 - 一个页面只用一个
h1，要合理的使用标题级别 - 内链和外链优化
- 软文推广，就是写一篇看似很有营养的文章，这些文章被大流量网站收录，文章里面植入了你网站链接，属于外链优化
- 代码要语义化和代码结构简练
- 少用图片、视频、音频，因为搜索引擎无法采集图片、视频等富媒体上的内容
4. 块级、行级和行块级的区别？（ 中 ）
块级标签特点：
独占一行
宽度是自适应的
具有盒子属性（宽、高、边框、边距、填充）
内联（行级）标签特点：
内联标签之间可以并排
可以设置边框、外边距（仅支持左和右）内填充支持，但是渲染有问题，由此可见内 联再盒子默写渲染方案存在问题，不准确。
行块级标签特点：
具有块级标签的特点，比如可以很好的渲染盒子属性，又具有内联标签的特点，比如并排。
行块之间有间隙
5. BFC是什么有什么用？（ 低 ）
BFC（Block Formatting Context，块级格式化上下文） 是 CSS 中一个重要的布局概念，它决定了元素如何对其子元素进行布局，以及子元素如何与外部元素交互。BFC 可以看作是一个独立的渲染区域，内部元素的布局不会影响到外部元素。
BFC 的触发条件：
满足以下任一条件即可创建 BFC：
- 根元素（
<html>标签）。 float不为none。position为absolute或fixed。display为inline-block、table-cell、table-caption、flex、inline-flex、grid等。overflow不为visible（如hidden、auto、scroll）。contain值为layout、content或strict。
BFC 的核心作用：
防止外边距合并
**问题：**垂直相邻块级元素的外边距会合并（取最大值）。
**解决：**将其中一个元素包裹在 BFC 容器中，阻止外边距合并。
清除浮动
- 问题：父元素高度塌陷（子元素浮动后，父元素高度为
0）。 - 解决：父元素触发
BFC，包裹浮动子元素。
阻止元素被浮动覆盖
- 问题：非浮动元素可能被浮动元素覆盖。
- 解决：非浮动元素触发
BFC，形成独立区域。
隔离布局，避免外部干扰
- BFC 内部元素的布局（如浮动、定位）不会影响外部元素。
6. 语义化有什么用？（ 中 ）
结构更清晰，html语义化让页面的内容结构化，便于对浏览器、搜索引擎解析。
方便SEO优化，搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重。
便于阅读维护理解，使阅读源代码的人对网站更容易将网站分块。
7. html5新增什么语义化标签？（ 中 ）
header 头部
footer 脚部
main 主体
section 区块
aside 侧边栏
article 文章
details 详细
figure 图文
nav 导航
menu 菜单
8. 块级、行级和行块级有哪些？（ 中 ）
块级标签：
div布局p段落form表单h1-h6标题pre预处理ul、ol、dl项目列表
行级标签：
span文本a超级链接img图像b加粗i倾斜u下划线
行块级标签：
input输入框select下拉列表框textarea多行输入框button按钮
9. 从输入URL到显示页面经历了什么？（ 高 ）
输入URL发生以下步骤：
DNS域名解析（域名解析成IP地址，走UTP协议，因此不会有握手过程），浏览器将URL解
析出相对应的服务器的IP地址，具体搜索过程如下：1.1 本地浏览器的
DNS缓存中查找1.2 再向系统
DNS缓存发送查询请求1.3 再向路由器
DNS缓存1.4 网络运营商
DNS缓存1.5 递归搜索
1.6 并从
URL中解析出端口号浏览器与目标服务器建立一条
TCP连接（三次握手）浏览器向服务器发送一条
HTTP请求报文服务器返回给浏览器一条
HTTP响应报文浏览器进行渲染
关闭
TCP连接（四次挥手）
10. title与alt属性的区别是什么？（ 中 ）
alt是给搜索引擎识别，在图像无法显示时的替代文本title是关于元素的注释信息，主要是给用户解读
11. get和post的区别是？（ 高 ）
GET是不安全的，因为在传输过程，数据被放在请求的URL中，而POST的所有操作对用户来说都是不可见的。GET传送的数据量较小，这主要是因为受URL长度限制，而POST传送的数据量较大，一般被默认为不受限制。GET限制表单数据集的值必须为ASCII字符，而POST支持整个ISO10646字符集。GET执行效率却比POST方法好，GET是表单提交的默认方法。
GET默认有缓存，解决缓存可以再URL挂载一个时间戳或者随机数作为参数。
12. canvas 和 svg的区别？（ 中 ）
canvas是通过JavaScript代码来绘制2d图形的svg是通过XML来描述2d图形的svg是矢量图，放大不失真，而canvas是位图，放大失真出现锯齿效果svg里面的每个节点都可以单独添加事件，而canvas只可以给画布添加事件svg渲染速度慢；而canvas渲染速度快，适合游戏场景制作
13. jpg、png、gif、svg和webp的区别？（ 高 ）
jpg：有损压缩格式图片，是位图，通常用于产品、风景、人物等色彩丰富的图片。png：无损格式图片，图片画质清晰，支持alpha通道透明，通常用于小图标、或者产品图片。gif：以8位色重现真色彩的图像，所以一般用于图标，或者颜色单一的图片，其次它可以做动图。svg：svg是矢量图片，支持js事件，同事支持图片动画。webp：这是谷歌发明的一款优于jpg的图片压缩格式，压缩率只有jpg的2/3。
14. 行块之间存在间隙，是什么造成的？如何解决？（ 中 ）
间隙是元素之间存在空格造成的，解决方法有两种：
将父容器设置font-size：0，这样可以将空格间距去掉，兼容性一般，代码易读
将元素首尾紧密相连不要有任何间隙，兼容性最好，代码不易读
15. 请描述下SEO中的TDK？（ 中 ）
在SEO中，所谓的TDK其实就是title、description和keywords这三个标签，这三个标签在网站的优化过程中title标题标签，description描述标签，keywords关键词标签。
css部分
1. 什么是盒子模型？它的区别？（ 高 ）
CSS盒子模型主要有两种：标准盒子模型和替代（IE）盒子模型。
标准盒子模型（W3C Box Model）
组成： 内容（content）、内边距（padding）、边框（border）、外边距（margin）。
宽度和高度计算： 仅包含内容的宽度和高度，内边距、边框和外边距不包含在内。
设置方式： 默认情况下，浏览器使用标准盒子模型。
IE盒子模型（IE Box Model）
组成： 内容（content）、内边距（padding）、边框（border）、外边距（margin）。
宽度和高度计算： 包含内容、内边距和边框的宽度和高度，外边距不包含在内。
设置方式： 通过 box-sizing: border-box 启用。
区别
宽度和高度计算：
标准盒子模型： width 和 height 仅指内容区域。
IE盒子模型： width 和 height 包含内容、内边距和边框。
布局影响： IE盒子模型更直观，尤其在处理内边距和边框时，布局更易控制。
总结
标准盒子模型： 宽度和高度仅指内容区域。
替代盒子模型： 宽度和高度包含内容、内边距和边框。
通过 box-sizing 属性可以切换盒子模型类型。
2. CSS有哪些选择器？（ 高 ）
- 标签选择器（如：
div,p） - 类选择器（如：
class="logo"） - ID选择器（如：
id="box"） - 通配符选择器（如：星号）
- 组合选择器（如：空格、大于号、加号、反折号）
- 属性选择器（如：
[name="box"]） - 伪类选择器（如：
:active、:hover、:first-child等） - 伪元素选择器（如：
::before、::after）
3. CSS的权重优先级是什么？（ 高 ）
!important > 行内样式 > id样式 > （class = 属性 = 伪类） > 标签 > 默认
按大小顺序排序是：
!important权重为10000，!important会带来性能开销style行内样式，权重为1000id选择器，权重为100- 类选择器
=属性选择器=伪类选择器，权重为10 - 伪元素选择器
=标签选择器，权重为1 - 通配符选择器，权重为
0 - 默认样式，权重为
0
4. px、em和rem单位的区别？（ 高 ）
px 相对长度单位，像素px是相对于显示器屏幕分辨率而言的。em 相对长度单位，会继承父级元素的字体大小，若父元素字体大小为14px。rem 是相对于根元素html字体大小的单位。
5. 相对、绝对和固定定位的区别？（ 高 ）
relative、fixed 和 absolute 是 CSS 中的三种定位方式，主要区别如下：
relative（相对定位）：
- 相对于元素自身在文档流中的原始位置进行偏移。
- 不影响其他元素的布局，原始空间仍保留。
fixed（固定定位）：
- 相对于浏览器视口定位，不随页面滚动而移动。
- 脱离文档流，不保留原始空间。
absolute（绝对定位）：
- 相对于最近的已定位（非
static）祖先元素定位，若无则相对于视口。 - 脱离文档流，不保留原始空间。
总结：
relative：相对自身偏移，保留空间。fixed：相对视口定位，不随滚动移动。absolute：相对最近已定位祖先元素定位，脱离文档流。
6. CSS3的新特性有哪些？（ 低 ）
新增伪类伪元素选择器
::before弹性盒模型
display: flex媒体查询
media screen个性化字体
webfont颜色透明度
rgba圆角、渐变、阴影、文字溢出、背景效果、边框效果和变形
动画（过渡和自定义动画）
7. 用代码画三角形有几种方式？（ 中 ）
1. CSS Border 方式
1 | .triangle { |
2. CSS Clip-path 裁剪
1 | .triangle { |
3. SVG 绘制
1 | <svg width="100" height="100"> |
4. Canvas 绘图
1 | <svg width="100" height="100"> |
一句话总结
主要方式：CSS 边框法（兼容性好）、Clip-path（灵活）、SVG（矢量无损）、Canvas（动态绘制）。
8. 左边固定200px，右边自适应，有几种方法?（ 高 ）
1. Flex 布局
原理：父容器设为 flex，右侧设置 flex:1 自动填充剩余空间。
1 | <div class="container"> |
1 | .container { |
2. Grid 布局
原理：父容器用 grid-template-columns 定义两列。
1 | .container { |
浮动布局
1 | .left { |
3. 绝对定位
原理：左侧绝对定位，右侧通过 margin-left 留出空间。
1 | .container { |
9. 块水平垂直居中有多少种方法？（ 高 ）
以下是实现块元素水平垂直居中的常见方法，分为 已知元素尺寸 和 未知元素尺寸 两类：
一、已知元素宽高
1. 绝对定位 + Margin 偏移
1 | .parent { |
