7.13 整理前端基础
1.简述一下你对HTML语义化的理解？
- 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
- 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
- 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页
- 便于团队开发和维护，语义化更具可读性
- HTML5 中新增加的很多语义化标签
（如：<article>、<nav>、<header>和<footer>等） 就是基于语义化设计原则
2.标签上 title 与 alt 属性的区别是什么？
- alt是img标签的属性，当图片加载出错、无法显示图像时会显示的替代文本。IE7以下IE浏览器在鼠标滑过时会展示alt属性，IE8以后不会。
- title属性适用于所有标签，规定关于元素的额外信息，通常会在鼠标移到元素上是显示一段提示文本，所有浏览器都支持。
3.iframe的优缺点？（我没用过听说拿来放广告）
优：
- iframe能够原封不动的把嵌入的网页展现出来。
- 如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
- 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
- 如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。
缺：
4.介绍一下CSS的盒子模型？
想象一个盒子，它有：外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性；
让我们俯视这个盒子，它有上下左右四条边，所以每个属性除了内容（content），都包括四个部分：上下左右；这四部分可同时设置，也可分别设置；内边距可以理解为盒子里装的东西和边框的距离，而边框有厚薄和颜色之分，内容就是盒子中间装的东西，外边距就是边框外面自动留出的一段空白。
详情： https://m.php.cn/article/418851.html
5.水平垂直居中有几种方式？
1.行内元素实现水平垂直居中：
text-align: center;（text-align: center只能实现文本的垂直居中）
line-height: 50px;（line-height不能实现多行文本的垂直居中）
padding:50px;（不固定高度的垂直居中 通过设置padding实现）
2.块级元素实现水平垂直居中：
第一种方式：使用弹性盒模型实现水平垂直居中
display: flex;
justify-content: center;
align-items: center;
第二种方式：采取绝对定位配合margin的方式实现（这种方式有缺陷 需要知道固定的宽度和高度才行）
position: absolute;
left:50%;
top:50%;
margin-left: -50px;（高度设置了100px，margin-left就是宽度的一半）
margin-top: -50px;（宽度也设置了100px，margin-top就是高度的一半）
第三种方式：可以采取借助css3的变形属性transform来实现的方式实现
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,50%);（在当前位置偏移自身宽高的一半）
第四种方式：需要盒子有宽高，但是不需要去计算偏移盒子的宽高
position: absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
height:100px;
width:100px;
6.rgba 和 opacity 的透明效果有什么不同？
rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）
7.position的值，relative 和 absolute 分别是相当于谁进行定位的
absolute定位的基准是相对于最近一级的不是默认值static的父元素(可以是absolute/relative/fixed等)来进行定位的，而不仅仅是相对于为position为relative的父级元素。父级元素还可以是absolute、fixed定位
relative 生成相对定位的元素，相对于其在普通流中的位置进行偏移。
8.HTML5 、CSS3 里面都新增了哪些新特性？
9.BFC 是什么？
块级格式化上下文，隔离的独立容器 里面的布局不会影响到外部
https://blog.csdn.net/qq_43205326/article/details/109789742
10、常见兼容性问题？
浏览器样式兼容问题
11、JS数据类型？
基本数据类型
String 字符串 Number 数字 Boolean 布尔 Null 空 Undefined ES6 （ Bigint symbol） Symbol (ES6新增，表示独一无二的值)
引用数据类型
Object
12、判断一个值是什么类型有哪些方法？
typeof：常用于判断基本数据类型，对于引用数据类型除了function返回’function‘，其余全部返回’object’。
instansof：主要用于区分引用数据类型，检测方法是检测的类型在当前实例的原型链上，用其检测出来的结果都是true，不太适合用于简单数据类型的检测，检测过程繁琐且对于简单数据类型中的undefined, null, symbol检测不出来。
13、null 和 undefined 的区别？
Null：
null是js中的关键字，表示空值，null可以看作是object的一个特殊的值，如果一个object值为空，表示这个对象不是有效对象。
Undefined:
undefined不是js中的关键字，其是一个全局变量，是Global的一个属性，以下情况会返回undefined:
相同点：
都是原始类型的值，保存在栈中变量本地
两者的区别：
1.类型不一样：
console.log(typeOf undefined);``//undefined`
console.log(typeOf ``null``);``//object
14、怎么判断一个变量arr的话是否为数组 （此题用typeof 不行）？
15、箭头函数有哪些特点？
1.箭头函数都是匿名函数
2.箭头函数没有自己的this指向
3.箭头函数不能作为构造函数使用
箭头函数不绑定arguments 取而代之用rest参数…解决
let C = (...c) => {
console.log(c);
}
C(3,82,32,11323); // [3, 82, 32, 11323]