Web前端笔试题库及答案.docxVIP

Web前端笔试题库及答案

一、HTML基础（5题）

题干：什么是HTML语义化标签？列举3个常用语义化标签并说明实际应用场景。

答案：

语义化标签是指具有明确含义、能让浏览器/开发者快速理解内容用途的标签（而非仅靠CSS样式定义外观），核心作用是提升代码可读性、SEO友好性与无障碍访问。

常用标签及场景：

header：页面头部（如导航栏、Logo、标题），例：headernav导航菜单/nav/header；

article：独立完整的内容块（如博客正文、新闻详情），例：articleh2文章标题/h2p文章内容/p/article；

footer：页面底部（如版权信息、联系方式），例：footer?2025公司名称/footer。

题干：form表单中，input的type属性有哪些常用值？列举5个并说明用途。

答案：

text：单行文本输入（如用户名），例：inputtype=textplaceholder=请输入用户名；

password：密码输入（输入内容隐藏），例：inputtype=passwordplaceholder=请输入密码；

radio：单选按钮（互斥选择，需同name属性），例：inputtype=radioname=gendervalue=male男；

checkbox：多选按钮（可多选，同name属性分组），例：inputtype=checkboxname=hobbyvalue=reading阅读；

submit：表单提交按钮，点击触发表单提交，例：inputtype=submitvalue=提交表单。

题干：HTML5新增了哪些多媒体标签？如何实现视频播放的兼容性？

答案：

新增多媒体标签：video（视频）、audio（音频）。

视频兼容性实现：通过source标签提供多种格式（MP4、WebM、Ogg），适配不同浏览器；同时添加降级提示（如浏览器不支持时显示文字），示例：

videocontrolswidth=600

sourcesrc=video.mp4type=video/mp4!--主流浏览器支持--

sourcesrc=video.webmtype=video/webm!--Firefox/Chrome支持--

您的浏览器不支持视频播放，请更新浏览器。

/video

题干：什么是data-*自定义属性？如何在JS中获取/设置它？

答案：

data-*是HTML5允许开发者自定义的属性，用于存储元素相关的额外数据（如ID、状态），命名规则：以data-开头，后续字母小写（多词用连字符，如data-user-id）。

JS操作方式：

divid=boxdata-user-id=123data-user-name=张三/div

script

constbox=document.getElementById(box);

console.log(box.dataset.userId);//123（dataset自动转驼峰）

console.log(box.getAttribute(data-user-name));//张三

box.dataset.userAge=25;//设置data-user-age=25

box.setAttribute(data-user-gender,男);//设置data-user-gender=男

/script

获取：通过element.dataset（推荐，返回对象，连字符会转为驼峰名）或element.getAttribute()；

设置：通过element.dataset.属性名或element.setAttribute()；

示例：

题干：iframe标签的作用是什么？使用时需要注意哪些问题？

答案：

作用：在当前页面嵌入另一个独立页面（如嵌入第三方地图、视频、子系统），形成“页面中的页面”，示例：iframesrc=width=800height=400/iframe。

注意问题：

性能问题：iframe会阻塞主页面加载，建议延迟加载（如滚动到可视区再创建）；

样式隔离：iframe内页面样式与主页面完全隔离，需单独编写；

跨域限制：主页面与iframe页面若不同域，无法直接操作对方DOM（需通过postMessage通信）；

安全性：避免嵌入不可信页面（可能包含恶意代码），可添加sandbox属性限制权限（如iframesandbox=allow-scriptssrc=.../iframe）。

二、CSS基础与布局（6题）

题干：什么