web开发基础试题及答案

上周给大一学生出了一套web开发基础测试题，发基60个人里只有3个满分。础试错的题及不是flex布局，也不是答案闭包，而是发基最基础的标签语义化。第7题问<b>和<strong>的础试区别，一半人写“都是题及加粗”。行吧，答案那这篇文章就把这套题里最有价值的发基几道拎出来，配上答案和踩坑说明。础试

一、题及HTML部分

试题1：写出<input>标签至少5种type属性值，答案并说明各自用途。发基

答案：text（单行文本）、础试password（密码遮蔽）、题及radio（单选）、checkbox（多选）、file（文件上传）、email（邮箱格式校验）、number（数字输入）、date（日期选择器）。写对5个就给分，但没人写全8个。有个学生写“hidden”，我追问用途，他说“隐藏输入框”——方向对了，但准确说法是“隐藏字段，用于提交不需要用户看到的数据”，比如CSRF token。

试题2：下面哪段代码更利于SEO？

<div class="nav">首页</div> <nav>首页</nav>

答案：第二种。<nav>是HTML5语义化标签，搜索引擎爬虫能直接识别导航区域，而div只是普通容器。实际工作中，我见过很多老项目整页都是div嵌套，改起来要命——这不只是SEO问题，屏幕阅读器用户也分不清哪里是主要内容。

二、CSS部分

试题3：两个并排的div，一个固定宽度200px，另一个要占满剩余空间，怎么写？

答案：给固定宽度的加float:left或flex-shrink:0，另一个用overflow:hidden或flex:1。但最推荐的写法是flex容器：

.container {  display:flex; } .fixed {  flex: 0 0 200px; } .fluid {  flex: 1; }

这题错得最多的写法是给第二个div设置width: calc(100% - 200px)——没毛病，但遇到box-sizing没设成border-box时，padding会撑破布局。上次改一个后台管理系统，就是这种问题，排查了半小时。

试题4：position: sticky在什么情况下会失效？

答案：父元素有overflow: hidden或overflow: auto时失效。另一个常见坑是父元素高度不够——sticky元素只能在父元素范围内“粘”。有个学生答“没有设置top值”，这算对一半，因为没top值它确实不粘，但更本质的是父级overflow问题。

三、JavaScript部分

试题5：下面代码输出什么？

for (var i = 0; i < 3; i++) {  setTimeout(() => console.log(i), 100); }

答案是3, 3, 3。但有一半学生写0, 1, 2——他们把var当成let了。改成let后输出0, 1, 2，因为let有块级作用域，每次循环都生成新的i。这个知识点在面试里出现频率极高，但真正写业务代码时，我更喜欢用const + forEach，彻底避开这类问题。

试题6：如何判断一个变量是数组？

答案：Array.isArray(arr)。用typeof会返回"object"，用instanceof Array在跨iframe时可能出错。有个学生写arr.constructor === Array，我给了半分，因为如果原型被修改过就不准了。实际开发中，处理接口返回的数据结构时，我习惯写一个isArray工具函数，内部用Array.isArray兜底。

四、HTTP与浏览器

试题7：GET和POST有什么区别？

这题看似送分，但高分答案很少。标准答法是：GET参数在URL上，有长度限制；POST在请求体，相对安全。但真正有经验的开发者会补充：GET会被浏览器缓存，POST不会；GET后退无害，POST后退会重新提交表单。有个学生答“GET比POST快”——这不一定，HTTP协议本身没这规定，只是GET通常不携带body，网络传输少一点而已。

试题8：浏览器地址栏输入URL到页面显示，中间发生了什么？

这题考的是整体理解，答案分五步：DNS解析、建立TCP连接、发送HTTP请求、服务器处理并返回响应、浏览器渲染。但有个细节90%的人漏掉：在解析HTML时遇到<script>标签会阻塞渲染，所以一般把脚本放在body底部或加defer属性。这题满分答案里，有个学生写了“浏览器会先解析HTML生成DOM树，遇到CSS再生成CSSOM树，两者合并成渲染树”——说明他真看过渲染原理。

这套题考完，我在课上说了句实话：“标签背不熟无所谓，但flex和闭包必须手写出来。”web开发基础就这些，坑踩多了自然就记住了。下次再考，我打算加一道手写防抖函数的题——那才是真刀真枪的活儿。