Web前端基础试题及详细答案

Web前端基础试题及详细答案适用范围：前端零基础入门、初学者考核、基础面试摸底考试时长：90分钟满分：100分题型说明：选择题、填空题、简答题、代码实操题一、单项选择题（共20题，每题2分，共40分）1.以下不属于前端三层结构的是（）A.HTMLB.CSSC.JavaScriptD.Java2.HTML中，用来定义网页主体内容的标签是（）A.<head>B.<body>C.<html>D.<title>3.以下哪个标签是HTML5新增的语义化标签（）A.<div>B.<span>C.<section>D.<font>4.CSS中，设置元素文字颜色的属性是（）A.background-colorB.colorC.text-colorD.font-color5.CSS盒子模型中，从内到外的正确顺序是（）A.内容、内边距、边框、外边距B.内边距、内容、边框、外边距C.内容、边框、内边距、外边距D.外边距、边框、内边距、内容6.以下哪个CSS属性可以让元素水平居中（块级元素）（）A.text-align:centerB.margin:0autoC.float:centerD.position:center7.不属于CSS定位方式的是（）A.staticB.relativeC.floatD.absolute8.JavaScript中，以下哪个是正确的变量命名（）A.123nameB.name_123C.name@123D.var9.JavaScript中，用来声明常量的关键字是（）A.varB.letC.constD.define10.console.log(typeofnull)的输出结果是（）A.nullB.undefinedC.objectD.number11.以下哪种循环可以遍历数组的每一个元素（）A.forinB.forofC.whileD.dowhile12.HTML中，<a>标签的target属性值中，在新窗口打开页面的是（）A._selfB._blankC._topD._parent13.CSS中，display:none和visibility:hidden的核心区别是（）A.无区别B.display:none不占页面空间C.visibility:hidden不占空间D.兼容性不同14.JavaScript中，==和===的区别是（）A.无区别B.===严格匹配，需数值和类型都一致C.==严格匹配D.===只匹配数值15.以下哪个不是JavaScript基本数据类型（）A.stringB.numberC.arrayD.boolean16.HTML中，实现换行且不产生段落间距的标签是（）A.<p>B.<br>C.<hr>D.<span>17.CSS中，flex布局中设置子元素水平居中的属性是（）A.justify-content:centerB.align-items:centerC.flex:centerD.text-align:center18.JavaScript中，数组方法push()的作用是（）A.删除数组最后一项B.在数组末尾添加元素C.删除数组第一项D.在数组开头添加元素19.以下标签中，属于行内元素的是（）A.<div>B.<p>C.<a>D.<ul>20.网页的渲染顺序中，浏览器默认的解析顺序是（）A.从上到下、从左到右B.从下到上C.从右到左D.随机解析二、填空题（共10空，每空1分，共10分）1.网页三剑客分别是______、______、______。2.HTML文档的根标签是______。3.CSS中，设置元素圆角的属性是______。4.JavaScript中，获取页面id元素的方法是______。5.块级元素默认______独占一行，行内元素默认______独占一行。（填“会/不会”）6.CSS权重中，!important>______>类选择器>标签选择器。7.JavaScript中，终止循环的关键字是______。三、简答题（共5题，每题6分，共30分）1.简述HTML、CSS、JavaScript三者的作用和区别。2.什么是语义化标签？使用语义化标签的好处有哪些？3.简述CSS盒子模型的组成，以及标准盒模型和怪异盒模型的区别。4.简述JavaScript中var、let、const的区别。5.简述行内元素、块级元素、行内块元素的特点。四、代码实操题（共2题，每题10分，共20分）1.编写完整HTML代码，实现一个简单页面：包含标题、一段文字、一张图片、一个超链接，要求样式简单美化（字体居中、文字大小14px）。2.编写JavaScript代码，完成两个功能：（1）定义一个数组，存储5个学生姓名；（2）遍历数组，在控制台依次打印出所有姓名。参考答案及详细解析一、单项选择题答案及解析1.D解析：前端三层结构为HTML（结构）、CSS（样式）、JavaScript（行为），Java是后端开发语言，不属于前端基础技术。2.B解析：<body>标签包裹网页所有可见主体内容，<head>为头部配置区域，<html>是整个文档根标签。3.C解析：<section>是HTML5新增语义化区块标签，<div>、<span>是传统通用标签，<font>已被HTML5废弃。4.B解析：CSS文字颜色专属属性为color，无text-color、font-color属性，background-color为背景色属性。5.A解析：标准盒子模型从内到外依次为：内容区（content）、内边距（padding）、边框（border）、外边距（margin）。6.B解析：margin:0auto专门实现块级元素水平居中；text-align:center仅用于居中行内内容，无法居中块级元素。7.C解析：CSS定位方式包含static（默认）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）、sticky（粘性定位），float是浮动布局，不属于定位。8.B解析：变量命名规则：不能以数字开头、不能包含特殊符号、不能使用关键字，仅name_123符合规则。9.C解析：const用于声明常量，声明后不可修改；let声明块级变量，var声明全局/函数变量。10.C解析：这是JS经典bug，null的typeof检测结果为object，属于语言底层设计遗留问题。11.B解析：forof专门用于遍历数组、字符串等可迭代对象；forin主要用于遍历对象属性，不适合纯数组遍历。12.B解析：_blank为新窗口打开，_self为当前窗口打开（默认），_top、_parent用于框架页面跳转。13.B解析：display:none隐藏元素，不占用页面空间；visibility:hidden隐藏元素，但保留元素原有页面空间。14.B解析：==宽松相等，会自动转换数据类型后对比；===严格相等，要求数值、数据类型完全一致才返回true。15.C解析：JS基本数据类型包含string、number、boolean、undefined、null、symbol；array属于引用数据类型。16.B解析：<br>为强制换行标签，无间距；<p>是段落标签，自带上下间距，会产生段落间隔。17.A解析：flex布局中，justify-content控制主轴（默认水平）对齐方式，align-items控制侧轴（默认垂直）对齐方式。18.B解析：push()在数组末尾添加元素，pop()删除末尾元素，unshift()开头添加，shift()开头删除。19.C解析：<a>、<span>等属于行内元素；<div>、<p>、<ul>均为块级元素。20.A解析：浏览器默认按照从上到下、从左到右的顺序解析、渲染网页代码。二、填空题答案及解析1.HTML、CSS、JavaScript解析：前端核心三大技术，分别负责页面结构、样式美化、交互行为。2.<html>解析：所有HTML文档的最外层根标签，包裹整个网页的所有代码。3.border-radius解析：CSS专属圆角属性，可设置统一圆角或单个角圆角。4.document.getElementById()解析：原生JS通过元素id精准获取DOM元素的方法，兼容性最好。5.会、不会解析：块级元素独占一行空间，行内元素宽度由内容决定，可同行排列。6.id选择器解析：CSS权重优先级：!important>内联样式>id选择器>类/伪类选择器>标签选择器。7.break解析：break终止整个循环，continue仅终止当前单次循环，进入下一次循环。三、简答题详细答案1.简述HTML、CSS、JavaScript三者的作用和区别三者是前端开发的核心基础，分工明确、相互配合，缺一不可：（1）HTML：超文本标记语言，负责搭建网页结构骨架，定义网页的标题、段落、图片、链接等基础内容，只有结构没有样式和交互，页面会单调简陋；（2）CSS：层叠样式表，负责网页样式美化，控制页面的颜色、字体、大小、布局、间距、动画等视觉效果，让结构化的页面变得美观规整；（3）JavaScript：脚本语言，负责网页交互行为，实现页面动态效果，比如点击事件、表单验证、数据渲染、轮播切换、弹窗提示等，让静态页面具备动态交互能力。核心区别：HTML管“结构内容”，CSS管“视觉样式”，JS管“动态交互”。2.什么是语义化标签？使用语义化标签的好处有哪些？语义化标签是HTML5推出的、自带明确含义的标签，标签名称可以直观体现内容的作用和位置，区别于<div>、<span>这类无意义的通用标签。常见语义化标签：<header>、<nav>、<main>、<section>、<footer>、<article>等。好处：（1）代码可读性高，开发者可快速区分页面不同模块，便于团队维护；（2）有利于搜索引擎优化，爬虫可精准识别页面结构和核心内容，提升网页收录和排名；（3）适配设备兼容性更好，方便屏幕阅读器等辅助设备识别页面内容，提升网页无障碍性。3.简述CSS盒子模型的组成，以及标准盒模型和怪异盒模型的区别（1）盒子模型组成：所有HTML元素都可以看作一个盒子，由四部分组成，分别是内容区（content）、内边距（padding）、边框（border）、外边距（margin）。content：元素存放内容的区域；padding：内容与边框之间的距离；border：元素的边框线条；margin：元素与其他元素之间的距离。（2）两种盒模型核心区别（元素实际宽度计算方式不同）：标准盒模型（box-sizing:content-box）：元素实际宽度=内容宽度+padding+border，设置的width仅代表内容区宽度；怪异盒模型（box-sizing:border-box）：元素实际宽度=设置的width，padding和border会向内压缩内容区，不会撑大元素整体宽度，日常开发最常用。4.简述JavaScript中var、let、const的区别三者均用于声明变量/常量，核心区别体现在作用域、变量提升、重复声明、修改特性：（1）var：ES5语法，函数级作用域，存在变量提升，允许重复声明，可随意修改变量值，缺点是容易造成变量污染；（2）let：ES6语法，块级作用域（大括号内为独立作用域），无变量提升，不允许重复声明，可修改变量值，解决了var的变量污染问题；（3）const：ES6语法，块级作用域，无变量提升，不允许重复声明，声明后无法直接修改常量值（引用类型可修改内部属性），用于固定不变的数据。5.简述行内元素、块级元素、行内块元素的特点（1）块级元素：独占一行，默认宽度100%铺满父级容器，可设置宽高、内外边距、浮动，常用于页面布局，代表标签：<div>、<p>、<h1>-<h6>、<ul>；（2）行内元素：不独占一行，可多个元素同行排列，宽度由自身内容决定，无法设置宽高、上下内外边距，仅用于文本修饰，代表标签：<a>、<span>、<i>、<b>；（3）行内块元素：兼具两者优点，可同行排列，同时可以设置宽高、内外边距，代表标签：<img>、<input>，日常可通过display:inline-block手动转换。四、代码实操题参考答案1.简单美化页面代码html

<!DOCTYPEhtml>

<htmllang="zh-CN">

<head>

<metacharset="UTF-8">

<title>前端基础测试页面</title>

<style>

/*全局样式统一*/

body{

text-align:center;

font-size:14px;