网页制作领域的题目通常涵盖HTML结构、CSS样式、JavaScript交互、网页布局、响应式设计以及网站发布与优化等核心知识点。以下从基础到进阶整理出具有代表性的专业题目及参考答案，供学习者与从业者参考。
题目一：简述HTML5中语义化标签的作用，并列举至少5个常用的语义化标签。
答案：语义化标签能够清晰描述文档结构，提升页面的可读性、可维护性和无障碍访问能力，同时有利于搜索引擎优化（SEO）。常用的语义化标签包括：<header>（页面或区块头部）、<nav>（导航区域）、<main>（页面主体内容）、<article>（独立文章内容）、<section>（通用章节）、<aside>（侧边栏或补充信息）、<footer>（页面或区块底部）。使用这些标签替代无意义的div，可使代码结构更加清晰。
题目二：CSS中的盒子模型包括哪些部分？如何通过box-sizing属性控制盒子宽度的计算方式？
答案：标准盒子模型由内容区（content）、内边距（padding）、边框（border）和外边距（margin）组成。在标准模式下，元素的width和height只包含内容区；而在怪异模式（IE模型）下，width和height包含内容、padding和border。通过box-sizing: content-box（默认）或box-sizing: border-box可以切换计算方式。实际开发中，常用border-box使布局更直观、更易控制元素总尺寸。
题目三：请写出CSS中实现水平垂直居中的至少三种方法，并说明各自适用场景。
答案：方法一，使用flex布局：父容器设置“display:flex; justify-content:center; align-items:center;”，适用于子元素尺寸不固定的现代布局。方法二，使用position+transform：子元素设置“position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);”，适用于绝对定位子元素的居中。方法三，使用grid布局：父容器设置“display:grid; place-items:center;”，代码简洁，适用于网格容器内的居中。此外，若子元素是行内元素或行内块元素，可在父容器上使用“text-align:center”配合“line-height”实现水平垂直居中，但受限于文本场景。
题目四：什么是JavaScript的闭包？请举例说明闭包的作用。
答案：闭包是指函数能够访问其词法作用域外部变量的能力，即使该函数在其定义作用域之外被调用。闭包由“函数”和“创建该函数时的环境”共同组成。典型示例：
function createCounter() {
let count = 0;
return function() {
count++;
return count;
};
}
const counter = createCounter();
console.log(counter()); // 输出1
console.log(counter()); // 输出2
闭包的作用包括：封装私有变量、实现函数柯里化、维持状态以及在回调函数中保留环境。但闭包会常驻内存，使用不当可能造成内存泄漏，因此需要合理管理。
题目五：如何利用CSS实现一个响应式三栏布局，左右固定宽度，中间自适应？
答案：推荐使用Flexbox或Grid。Flexbox实现方式：父容器设置“display:flex; justify-content:space-between;”，左栏和右栏设置固定宽度（如200px），中间栏设置“flex:1”即可自动占据剩余空间。Grid实现方式：父容器设置“display:grid; grid-template-columns:200px 1fr 200px;”，来达到完全相同的效果。同时，配合媒体查询（@media），在屏幕宽度较小时可以将三栏改为上下堆叠布局，以提升移动端体验。
题目六：请解释DOM事件流，并说明如何阻止事件冒泡和默认行为。
答案：DOM事件流分为三个阶段：捕获阶段（capture）、目标阶段（target）和冒泡阶段（bubble）。事件从window开始向下传递到目标元素（捕获），再从目标元素向上传递回window（冒泡）。当使用addEventListener添加事件时，第三个参数为true时在捕获阶段触发，为false（默认）时在冒泡阶段触发。可以使用event.stopPropagation()阻止事件继续传播，从而阻止冒泡或捕获；使用event.preventDefault()阻止浏览器默认行为，例如阻止表单提交、阻止链接跳转等。
题目七：在网页制作中，如何优化图片加载性能？请列出至少四种具体方法。
答案：第一，使用现代图片格式，如WebP或AVIF，在保持画质的前提下显著减小文件体积；第二，进行图片压缩，通过工具或服务降低分辨率、调整压缩质量；第三，使用懒加载（lazy loading），给img标签添加“loading="lazy"”属性，使页面进入视口时才加载图片，减少首屏请求量；第四，使用响应式图片（srcset和sizes属性），根据设备屏幕尺寸加载不同尺寸的图片；第五，将小图标合并为雪碧图或改用SVG矢量图标，减少HTTP请求次数。
题目八：请描述CSS中position属性的取值及其定位参考点。
答案：position属性有五个主要取值：static（默认值，元素按正常文档流排列，不受top、left等属性影响）；relative（元素保留原占位，相对于自身正常位置偏移）；absolute（元素脱离文档流，相对于最近的非static定位祖先元素定位，若无则相对于初始包含块html）；fixed（元素脱离文档流，相对于浏览器视口固定定位）；sticky（元素根据滚动位置在relative和fixed之间切换，相对于最近的滚动容器）。理解这些取值对实现复杂UI布局至关重要。
题目九：编写一个JavaScript函数，实现数组去重，并说明去重方法的兼容性。
答案：可以使用Set实现简洁去重：
function uniqueArray(arr) {
return [...new Set(arr)];
}
该法兼容ES6环境（现代浏览器）。若需兼容旧浏览器，可使用indexOf或includes遍历判断：
function uniqueArray(arr) {
var result = [];
for (var i = 0; i < arr.length; i++) {
if (result.indexOf(arr[i]) === -1) {
result.push(arr[i]);
}
}
return result;
}
去重时还需注意NaN、对象引用以及类型严格相等（===）等边界问题。
题目十：什么是CSS预处理器？简述Sass/LESS的主要优势。
答案：CSS预处理器是一种扩展CSS语言的脚本工具，它允许开发者使用变量、嵌套规则、混合（Mixin）、函数和继承等编程特性，最终编译生成纯CSS文件。Sass和LESS是两种主流预处理器。主要优势包括：提高代码复用性，减少重复样式；通过变量统一管理颜色、字体、间距等设计令牌；支持嵌套书写，使层级结构更直观；使用混合宏可以封装常用样式，如清除浮动、按钮样式等，从而提升开发效率和可维护性。
题目十一：请列举HTML表单中常用输入类型，并说明如何实现前端表单验证。
答案：常用输入类型包括text（单行文本）、password（密码）、email（邮箱）、number（数字）、tel（电话）、url（网址）、date（日期）、checkbox（复选框）、radio（单选按钮）、select（下拉菜单）等。前端验证可通过HTML5内置属性实现，如required（必填）、minlength、maxlength、pattern（正则模式）、min和max（数值范围）。同时也可使用JavaScript进行自定义校验，通过监听submit事件，检查各字段值，并使用setCustomValidity或DOM操作显示错误信息。注意前端验证只是辅助，后端验证仍然不可缺失。
题目十二：请解释“渐进增强”与“优雅降级”的区别。
答案：渐进增强（Progressive Enhancement）是从基础功能出发，先为所有用户提供可用的核心内容和功能，再针对支持更高级环境的浏览器逐步增加增强样式或交互。例如先编写纯HTML语义化结构，再添加CSS美化，最后添加JavaScript增强。优雅降级（Graceful Degradation）则相反，首先构建完整、现代的功能，然后为旧浏览器提供备用方案或简化版本，确保在低版本环境中页面不会崩溃。现代前端开发更推荐渐进增强策略，它注重内容优先和通用可用性，更符合Web的核心理念。
题目十三：网页中常见的中文乱码问题是如何产生的？如何解决？
答案：乱码通常由字符编码不一致引起。页面文件保存时的编码与HTTP响应头、HTML中meta声明的编码不一致时，浏览器会按错误编码解析，导致乱码。例如文件以UTF-8保存，但meta声明为GB2312，或服务器响应头未指明charset。解决方法：确保HTML文档头部包含<meta charset="UTF-8">；同时让服务器发送正确的Content-Type头，如“Content-Type: text/html; charset=UTF-8”；统一所有文件（HTML、CSS、数据库、连接脚本）的编码为UTF-8，并在连接数据库时设置字符集。此外，避免使用非标准的编码名称，减少混淆。
题目十四：请写出使用CSS Grid创建三行两列布局的代码，并设置第一行高度为100px。
答案：代码如下：
.container {
display: grid;
grid-template-columns: 1fr 1fr; /* 两列等宽 */
grid-template-rows: 100px 200px 1fr; /* 第一行100px,第二行200px,第三行自适应 */
gap: 10px;
}
HTML结构示例：
<div class="container">
<div>单元格1</div>
<div>单元格2</div>
...
</div>
grid-template-rows定义了三个行轨道，第一行固定100px，第二行200px，第三行占据剩余空间。gap设置行列间距。Grid布局非常适用于构建页面框架，如顶部导航、头部、主体和底部栏。
题目十五：如何理解Web标准中的“表现与结构分离”？请举例说明。
答案：结构由HTML负责，表现由CSS负责，行为由JavaScript负责。结构层定义内容语义，如标题、段落、列表、链接；表现层定义外观，如颜色、字体、间距、布局；行为层定义交互，如鼠标点击、键盘输入、动画效果。例如，一个导航菜单，HTML部分使用ul和li构建菜单结构；CSS部分设置菜单的横排样式、背景色和悬停效果；JavaScript部分实现点击展开子菜单。若在HTML中直接使用font标签或style属性设置样式，则违背了分离原则，降低可维护性和复用性。
题目十六：什么是跨域？列举几种常见的跨域解决方案。
答案：跨域指的是浏览器对于同源策略的限制，一个源（协议、域名、端口）的网页资源不能随意访问另一个源的资源。常见解决方案包括：CORS（跨源资源共享），在服务器端设置Access-Control-Allow-Origin等响应头，指定允许的源；JSONP，利用script标签不受同源限制的特点，通过动态创建script标签加载远程数据，但仅支持GET请求；代理服务器，通过同源的后端服务器转发请求到目标服务器，例如开发环境下使用webpack-dev-server的proxy配置；postMessage，用于iframe或window之间的跨窗口通信；WebSocket，协议本身不受同源限制。实际开发中，CORS是主流方案。
题目十七：网页性能优化中，如何减少首屏白屏时间？请给出具体建议。
答案：可以从以下几个方面优化：第一，优化关键渲染路径，内联首屏必需的CSS和JavaScript，减少外链请求；第二，异步加载非关键资源，使用async或defer属性加载脚本，避免阻塞DOM解析；第三，压缩并合并文件，减少HTTP请求次数和传输体积；第四，使用CDN加速静态资源，缩短用户与服务器之间的距离延迟；第五，优先加载首屏可见内容，对图片使用懒加载，并采用骨架屏或loading指示；第六，开启HTTP缓存，设置合理的Cache-Control和ETag；第七，使用服务端渲染（SSR）或静态化，让首屏HTML直接携带完整内容，而非依赖客户端渲染。
题目十八：请解释CSS的层叠（cascade）规则，并说明优先级计算方式。
答案：CSS层叠是指多个样式规则应用于同一元素时，根据来源、优先级和顺序决定最终生效的样式。优先级（Specificity）按以下等级计算：内联样式（style属性）优先级最高，记作1,0,0,0；其次为ID选择器，记作0,1,0,0；再次为类选择器、属性选择器和伪类，记作0,0,1,0；最低为元素选择器和伪元素，记作0,0,0,1。通配符*优先级为0。当优先级相同时，后出现的样式覆盖先出现的样式；!important声明优先于普通声明，但如果同一个属性多个!important，仍按优先级和顺序处理。了解层叠规则是解决样式冲突的基础。
题目十九：如何在网页中嵌入视频和音频？请写出HTML5代码示例。
答案：HTML5提供了<video>和<audio>标签。视频示例：
<video controls width="640">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
您的浏览器不支持video标签。
</video>
音频示例：
<audio controls>
<source src="music.mp3" type="audio/mpeg">
<source src="music.ogg" type="audio/ogg">
您的浏览器不支持audio标签。
</audio>
controls属性显示播放控件；多个source用于提供不同格式的备选资源，浏览器会选择第一个支持的格式播放。为了避免浏览器兼容差异，还应当为视频设置poster封面，以及提供width/height属性防止布局抖动。
题目二十：请简述网页制作的基本流程，并说明各阶段的主要任务。
答案：典型流程包括：需求分析（了解目标用户、功能需求、内容定位）；原型设计（使用Axure、Figma等工具绘制线框图，确定信息架构和页面结构）；视觉设计（设计UI界面，包括配色、字体、图标、动效）；前端开发（将设计稿转化为HTML/CSS/JavaScript代码，确保浏览器兼容性和响应式布局）；后端对接（如果需要，通过Ajax/Fetch与服务器接口交互，处理业务逻辑）；测试与优化（进行功能测试、性能测试、跨浏览器测试，并优化加载速度和可访问性）；部署上线（将文件上传至服务器，配置域名和HTTPS，并持续监控维护）。每一步都影响最终网页的质量。
以上题目涵盖了从基础语法到工程实践的核心考点。在实际制作和面试中，还常出现关于“Flex与Grid对比”、“浏览器渲染原理”、“CSS动画性能”、“作用域与提升”、“异步编程”等进阶内容。掌握这些题目及其答案，有助于建立系统的网页制作知识体系。真正专业的网页制作能力不仅需要理解概念，更重要的是实践中的编码规范、调试技巧与项目经验。建议学习者在完成理论习题后，动手编写完整的响应式网站，将知识内化为实际技能。
查看详情
查看详情
