2024年最全第十三届蓝桥杯Web模拟赛题解，2024年最新前端开发面试问题

于 2024-05-14 19:44:57 发布
阅读量776 收藏 15
点赞数 24
分类专栏： 程序员 文章标签： 前端 面试 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/2301_82244607/article/details/138867473
版权

最后

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

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

前端校招面试题精编解析大全

.div7{

justify-content: space-around;

flex-direction: column

}

.div7 div{

display: flex;

justify-content: space-around;

flex-basis: auto;

}

.div6{

justify-content: space-around;

flex-direction: column

}

.div6 div{

display: flex;

justify-content: space-around;

flex-basis: auto;

}

.div5{

justify-content: space-around;

flex-direction: column

}

.div5 div{

display: flex;

justify-content: space-around;

flex-basis: auto;

}

.div4{

justify-content: space-around;

flex-direction: column

}

.div4 div{

display: flex;

justify-content: space-around;

flex-basis: auto;

}

制作网站首页

*{

padding: 0;

margin: 0;

text-decoration: none;

}

body{

background-color: black;

}

.headerbox,.banner,.tabtitle,.list,.footer{

width: 1024px;

margin: auto;

}

/* header */

.headerbox{

height: 78px;

background-color: white;

}

.navbox{

/* height: 78px; */

padding: 23px;

}

.navbox h1{

color: #0099f2;

float: left;

}

.navright{

float: right;

}

.on{

display: inline-block;

width: 120px;

height: 32px;

color: #0099f2;

background-color: #f0f9ff;

line-height: 32px;

text-align: center;

}

.on+a{

display: inline-block;

width: 120px;

height: 32px;

color:black;

line-height: 32px;

text-align: center;

}

/* banner */

.banner{

position: relative;

overflow: hidden;

height: 460px;

background-color: #008bed;

}

.container{

width: 964px;

height: 430px;

position: absolute;

bottom: 0px;

padding: 30px 30px 0px 30px;

}

.container img{

position: absolute;

bottom: -15px;

}

.content {

width: 43%;

padding-top: 100px;

float: right;

}

.content h2{

color:#fdfdfd;

font-size: 40px;

line-height: 40px;

padding-bottom: 10px;

}

.info{

width: 100%;

font-size: 16px;

line-height: 26px;

color: #99d1f8;

}

/* tabtitle */

.tabtitle{

width: 960px;

height: 100px;

padding-left: 32px;

padding-right: 32px;

background-color: rgb(249,249,249);

}

.tabtitle h3{

line-height: 100px;

font-size: 24px;

font-weight: 400;

color: #000;

float: left;

}

.tabtitle h4{

line-height: 100px;

font-weight: 500;

font-size: 24px;

color: #cccccc;

float: right;

}

/* list */

.list{

position: relative;

background-color: rgb(249,249,249);

height: 1718px;

padding-bottom: 30px;

}

.list ul{

list-style: none;

}

.list li{

/* display: inline-block; */

margin-left: 30px;

margin-bottom: 20px;

padding-top: 20px;

float: left;

background-color: white;

}

.list img{

display: block;

margin-top: 20px;

width: 260px;

height: 260px;

margin: auto;

}

.list a{

display: block;

width: 300px;

height: 374px;

}

.list p{

width: 260px;

font-size: 14px;

line-height: 25px;

color: #333333;

margin: auto;

}

.more{

position: absolute;

bottom: 30px;

width: 960px;

height: 62px;

left: 32px;

background-color: #e8eef2;

text-align: center;}

.more a{

display: block;

width: 100%;

line-height: 62px;

font-size: 20px;

color: #59abdf;

}

/* footer */

.footer{

height: 265px;

background-color: #e5e5e5;

}

.footerBox{

width: 960px;

padding: 32px;

}

.footerL{

width: 710px;

height: 210px;

float: left;

}

.footerL p{

font-size: 14px;

line-height: 25px;

margin-bottom: 15px;

color: #000;

}

.footerR{

float: right;

text-align: center;

}

.footerR img{

width: 141px;

height: 152px;

}

响应式 Gulp 中文网

天气预报查询

function getweather() {

//TODO：请补充代码

$.ajax({

type: “get”,

url: “js/weather.json”,

data: {},

dataType: “json”,

success: function (data) {

console.log(data.result)

$(“#Monday img”).attr(‘src’,data.result[0].weather_icon);

$(“#Monday .item-mess div:nth-child(1)”).prepend(data.result[0].weather);

$(“#Monday .item-mess div:nth-child(2)”).prepend(data.result[0].temperature);

$(“#Monday .item-mess div:nth-child(3)”).prepend(data.result[0].winp);

$(“#Monday .item-mess div span:nth-child(1)”).prepend(data.result[0].days);

$(“#Monday .item-mess div span:nth-child(2)”).prepend(data.result[0].week);

$(“#Tuesday img”).attr(‘src’,data.result[1].weather_icon);

$(“#Tuesday .item-mess div:nth-child(1)”).prepend(data.result[1].weather);

$(“#Tuesday .item-mess div:nth-child(2)”).prepend(data.result[1].temperature);

$(“#Tuesday .item-mess div:nth-child(3)”).prepend(data.result[1].winp);

$(“#Tuesday .item-mess div span:nth-child(1)”).prepend(data.result[1].days);

$(“#Tuesday .item-mess div span:nth-child(2)”).prepend(data.result[1].week);

$(“#Wednesday img”).attr(‘src’,data.result[2].weather_icon);

$(“#Wednesday .item-mess div:nth-child(1)”).prepend(data.result[2].weather);

$(“#Wednesday .item-mess div:nth-child(2)”).prepend(data.result[2].temperature);

$(“#Wednesday .item-mess div:nth-child(3)”).prepend(data.result[2].winp);

$(“#Wednesday .item-mess div span:nth-child(1)”).prepend(data.result[2].days);

$(“#Wednesday .item-mess div span:nth-child(2)”).prepend(data.result[2].week);

$(“#Thursday img”).attr(‘src’,data.result[3].weather_icon);

$(“#Thursday .item-mess div:nth-child(1)”).prepend(data.result[3].weather);

$(“#Thursday .item-mess div:nth-child(2)”).prepend(data.result[3].temperature);

$(“#Thursday .item-mess div:nth-child(3)”).prepend(data.result[3].winp);

$(“#Thursday .item-mess div span:nth-child(1)”).prepend(data.result[3].days);

$(“#Thursday .item-mess div span:nth-child(2)”).prepend(data.result[3].week);

$(“#Friday img”).attr(‘src’,data.result[4].weather_icon);

$(“#Friday .item-mess div:nth-child(1)”).prepend(data.result[4].weather);

TCP协议

  • TCP 和 UDP 的区别？
  • TCP 三次握手的过程？
  • 为什么是三次而不是两次、四次？
  • 三次握手过程中可以携带数据么？
  • 说说 TCP 四次挥手的过程
  • 为什么是四次挥手而不是三次？
  • 半连接队列和 SYN Flood 攻击的关系
  • 如何应对 SYN Flood 攻击？
  • 介绍一下 TCP 报文头部的字段
  • TCP 快速打开的原理(TFO)
  • 说说TCP报文中时间戳的作用？
  • TCP 的超时重传时间是如何计算的？
  • TCP 的流量控制
  • TCP 的拥塞控制
  • 说说 Nagle 算法和延迟确认？
  • 如何理解 TCP 的 keep-alive？

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

浏览器篇
  • 浏览器缓存?
  • 说一说浏览器的本地存储？各自优劣如何？
  • 说一说从输入URL到页面呈现发生了什么？
  • 谈谈你对重绘和回流的理解
  • XSS攻击
  • CSRF攻击
  • HTTPS为什么让数据传输更安全？
  • 实现事件的防抖和节流？
  • 实现图片懒加载？

2)").prepend(data.result[3].week);

$(“#Friday img”).attr(‘src’,data.result[4].weather_icon);

$(“#Friday .item-mess div:nth-child(1)”).prepend(data.result[4].weather);

TCP协议

  • TCP 和 UDP 的区别？
  • TCP 三次握手的过程？
  • 为什么是三次而不是两次、四次？
  • 三次握手过程中可以携带数据么？
  • 说说 TCP 四次挥手的过程
  • 为什么是四次挥手而不是三次？
  • 半连接队列和 SYN Flood 攻击的关系
  • 如何应对 SYN Flood 攻击？
  • 介绍一下 TCP 报文头部的字段
  • TCP 快速打开的原理(TFO)
  • 说说TCP报文中时间戳的作用？
  • TCP 的超时重传时间是如何计算的？
  • TCP 的流量控制
  • TCP 的拥塞控制
  • 说说 Nagle 算法和延迟确认？
  • 如何理解 TCP 的 keep-alive？

[外链图片转存中…(img-4ZnUIZUe-1715687073553)]

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

浏览器篇
  • 浏览器缓存?
  • 说一说浏览器的本地存储？各自优劣如何？
  • 说一说从输入URL到页面呈现发生了什么？
  • 谈谈你对重绘和回流的理解
  • XSS攻击
  • CSRF攻击
  • HTTPS为什么让数据传输更安全？
  • 实现事件的防抖和节流？
  • 实现图片懒加载？

[外链图片转存中…(img-tbSW24Nu-1715687073553)]

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值