常见前端基础面试题（HTML,CSS,JS）（一）

html语义化的理解

1. 代码结构: 使页面在没有css的情况下,也能够呈现出好的内容结构

2. 有利于SEO: 爬虫根据标签来分配关键字的权重,因此可以和搜索引擎建立良好的沟通,帮助爬虫抓取更多的有效信息

3. 方便其他设备解析： 如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染页面

4. 便于团体的开发和维护: 语义化使代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。遵循 W3C 标准的团队都遵循这个标准。

   常用的语义元素有：header、nav、main、footer、article、section、aside

iframe

iframe称之为嵌入式框架、嵌入式框架可以把完整的网页内容嵌入到现有的网页中。

优点

• 重载页面时不需要重载整个页面只需要重载页面中的一个框架页
• 可以使脚本、可以并行下载
• 可以实现跨子域通信

缺点

• 会产生很多页面，不容易管理
• 调用外部页面，需要额外调用 CSS，给页面带来额外的请求次数
• iframe 会阻塞主页面的 onload 事件
• 浏览器的后退按钮无效
• 无法被一些搜索引擎索引识别
• 多数小型的移动设备无法完全显示框架

BOM和DOM分别是什么

BOM是浏览器对象模型： 用来获取或设置浏览器的属性、行为。例如：新建窗口、获取屏幕分辨率、浏览器版本号等

DOM是文档对象模型： 用来获取或设置文档中标签的属性、例如获取或者设置input表单的value值

CSS盒模型

盒模型都是由四个部分组成的，分别是margin、border、padding和content

标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同：

• 标准盒模型的width和height属性的范围只包含了content，
• IE盒模型的width和height属性的范围包含了border、padding和content。

可以通过修改元素的box-sizing属性来改变元素的盒模型：

• box-sizeing: content-box表示标准盒模型（默认值）
• box-sizeing: border-box表示IE盒模型（怪异盒模型）

怎么让一个 div 水平垂直居中

1. 通过绝对定位实现垂直居中

2. 通过 transform 实现垂直居中

3. 使用弹性盒子居中

BFC

所谓 BFC，指的是一个独立的布局环境，BFC 内部的元素布局与外部互不影响。

触发 BFC 的方式有很多，常见的有：

• 设置浮动
• overflow 设置为 auto、scroll、hidden
• positon 设置为 absolute、fixed

常见BFC的应用

• 解决浮动元素令父元素高度坍塌的问题
• 解决非浮动元素被浮动元素覆盖问题
• 解决外边距垂直方向重合问题

JS 的基本数据类型有哪些？基本数据类型和引用数据类型的区别

基本数据类型

JavaScript共有八种数据类型，分别是 Undefined、Null、Boolean、Number、String、Object、Symbol、BigInt

这些数据可以分为原始数据类型和引用数据类型：

• 栈：原始数据类型（Undefined、Null、Boolean、Number、String）
• 堆：引用数据类型（对象、数组和函数）

基本数据类型和引用数据类型的区别

• 访问方式:

  • 原始值：访问到的是值
  • 引用值：访问到的是引用地址 (js不允许直接访问保存在堆中的对象、首先得到在堆中的地址，然后按照这个地址去获得对象的值)

• 比较方式:

  • 原始值：比较的是值
  • 引用值: 比较的是引用的地址

• 变量赋值:

  • 原始值赋值：赋值的是新值，与原来互不影响
  • 引用值赋值：赋值的是地址，指向原值所在堆内存中的地址

• 动态属性:

  • 原始值：赋值的是值
  • 引用值：赋值的是地址