2023最新Web前端面试题精选大全及答案（一）

第一阶段基础题

1.什么是WEB开发

web ：网，在浏览器上运行的网页 所以web开发就是网页开发是基于b/s架构、

b/s：主要是由浏览器和服务器构成；浏览器不需要维护升级，不分担服务器计算压力

前端：用户看的界面。

(34条消息) 什么是web开发？_M_Enthusiasm的博客-CSDN博客_web开发

2. 网站开发的基本流程是什么，每个环节的职位是

需求分析 --明白要做什么？ （重点） 产品经理 / 需求工程师 / 功能顾问

设计 --做成什么样？ UI 设计师 , 框架师 (数据库设计，架构设计)

编码 --具体实现 前端工程师，后端工程师 （java,c++, c, 算法工程师, net 工程师）,

测试 -- 测试实现的效果(测试工程师- 测试)

维护 -- 维护应用，更新版本（运维/售后工程师）

3.H4和H5的区别

1.声明部分的变化

简化了声明部分，h4还有三种文档类型的声明，过渡，严格，框架定义类型。

2.指定字符编码部分不同

3.H5更加统一规范，更加适应时代需求，在HTML5中视频、音频、图像、动画都会标准化，会解决浏览器兼容问题。

4.新增了标签和属性，优化了结构，增加结构标签

在标签的书写方面的改变。

5.简化语法：HTML5的语法兼容HTML4和XHTML1，但不兼容SGML。

4.H5新加了哪些标签

绘画 canvas

用于媒介回放的 video 和audio 元素

本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失

sessionStorage 的数据在浏览器关闭后自动删除

语意化更好的内容元素，比如article、footer、header、nav、section

表单控件，calendar、date、time、email、url、search

新的技术webworker, websocket, Geolocation

5.什么叫做语义化，为什么要语义化

HTML5中加入了一些语义化标签，来更清晰的表达文档结构，标签具有一些内在的含义。离开css也有结构。

指对文本内容的结构化（内容语义化），选择合乎语义的标签（代码语义化），便于开发者阅读，维护和写出更优雅的代码的同时，让浏览器的爬虫和辅助技术更好的解析，索引擎优化

6.如何让一个div垂直水平居中

定位，flex布局。

7.如何让一个span垂直水平居中

定位，flex布局，或者在固定宽高盒子进行文本垂直居中，因为内容大小包裹文字

8. 一个img和span并排，如何让span在img中间对其

Vertrial-align:middle

9.行内元素有哪些？块级元素

行内元素有哪些：a,img,span,strong,slecte,section.

块级元素：div,p,ul,li,ol,dt,h1-h6,able.

10.行内，块，行内块区别

行内元素（内联元素）：不占有独立的区域，仅仅依靠自己的字体大小或者是图像大小来支撑结构。 一般不可以设置宽度，高度以及对齐等属性。

行内块级元素，它既具有块级元素的特点，也有行内元素的特点，它可以自由设置元宽度和高度，

块级元素：

通常都会独占一行或者是多行，可以对其单独设置高度,宽度以及对齐等属性。

11.Ifram使用时必须要加的属性

Src width height

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>

<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>

12.浮动的原理

浮动元素脱离文档流，不占据空间。

13.浮动会出现问题

（1）父元素的高度无法被撑开

（2）浮动元素前同级非浮动元素：

（3）浮动元素对浮动元素的影响

14. 如何清除浮动，有几种方式

额外标签，overflow;hidden,伪元素标签法，双伪元素，为父盒子添加高度

15.什么是盒子模型

网页设计中经常用到的一种思维模型：标准模式和怪异模式