网页设计前端面试题（含详细落地答案·真实职场版）.docxVIP

网页设计前端面试题（含详细落地答案·真实职场版）

一、HTML基础面试题

1、HTML5新增了哪些常用语义化标签？实际项目中你怎么用？

参考答案：

常用语义化标签：header、nav、main、section、article、aside、footer、figure、figcaption。

项目实操用法：

1.header：包裹网站头部，包含logo、导航、搜索框；

2.nav：专门放主导航、面包屑导航，方便爬虫识别页面导航结构；

3.main：包裹页面核心主体内容，一个页面只出现一次；

4.section：按功能模块划分页面区域，比如产品模块、资讯模块；

5.article：独立完整的内容区块，比如文章详情、商品卡片；

6.aside：侧边栏、推荐内容、广告位等辅助内容；

7.footer：页面底部，包含版权、备案、联系方式。

核心作用：替代传统div堆砌，提升代码可读性，利于SEO爬虫抓取，同时适配屏幕阅读器，提升网页无障碍访问性。

2、div、span、p标签的区别是什么？各自使用场景？

参考答案：

1.div：块级元素，独占一行，默认无内外边距、无默认样式。主要用来做页面布局、分区块包裹内容，是最常用的布局容器，不适合放纯文本段落。

2.span：行内元素，不独占一行，只能包裹文本、行内内容，无法设置宽高。主要用来给局部文字、图标、小字内容单独设置