面试题：被问的几率最大的前端面试题！！

解释一下什么是 HTML？

1. HTML (超文本标记语言)

定义：HTML (HyperText Markup Language) 是一种用于创建网页的标准标记语言。
作用：HTML 被用来定义网页的结构和内容，是前端开发的基础。
地位：HTML 与 CSS 和 JavaScript 组成了现代 Web 开发的"三剑客"。
形象比喻：如果把一个网页比作一个人的话，HTML 就像是这个人的骨骼和肌肉，提供了基本的结构；CSS 则像是衣服和化妆，负责外观和样式；而 JavaScript 就像是大脑和神经系统，赋予网页动态行为和交互能力。

HTML 的基本结构

文件扩展名：HTML 文件通常使用 .html 作为扩展名。
根标签：所有 HTML 文档都必须包含一个根标签 <html>，所有的其他 HTML 标签都必须位于此标签内。
标签类型：如 <div>，它通常独占一行，可以包含其他块级元素或行内元素，如<span>，它不会独占一行，通常与其他行内元素并排显示。
语义化标签：

html 复制代码

<header>
  页面头部，例如logo、搜索栏等
  <nav>
    导航模块，例如菜单栏
    <main>
      主要内容区域
      <article>
        独立的内容区块
        <section>
          独立且与主体相关的，例如页眉、章节
          <aside>
            与主要内容相关的辅助信息，例如侧边栏、注释
            <footer>某个页面或者区域的底部，例如版权信息、联系方式</footer>
          </aside>
        </section>
      </article>
    </main>
  </nav>
</header>

这些标签不仅提高了网页的可读性和可访问性，还帮助搜索引擎更好地理解页面结构和内容。

HTML 在框架中的使用

Vue.js：Vue 使用 <template> 标签来定义模板结构，通常在单文件组件 (SFC) 中使用。
React.js:
1. React 使用 JSX（一种 JavaScript 的语法扩展）来定义组件结构，但在实际编译后的代码中会转换为标准的 HTML。
2. 在 React 中，<></> 代表的是一个 Fragment，也称为片段。它是一种特殊的 React 元素，用于包裹一组子元素，而不会在 DOM 中生成额外的节点。这使得你可以在返回多个元素时不引入额外的 DOM 结构，从而保持组件的输出干净且高效。

CSS 有哪些盒模型？它们之间的区别是什么？

css 的盒子模型分为标准盒子模型和怪异盒子模型

标准盒子模型:
1. 这是 W3C 定义的盒模型，也是默认的盒模型。
2. 标准盒模型是现代浏览器默认采用的模型。
3. box-sizing:content-box;使用标准盒模型。
4. 宽度只包括内容区。例如：向外计算，宽度 100px + 内边距 10px = 当前宽度（120px）
怪异盒子模型（IE 盒子模型）：
1. 这个盒模型最初是由 Internet Explorer 5 实现的，在一些特定情况下使用。
2. IE 盒模型主要用于处理一些旧版浏览器的兼容性问题，例如在某些 IE 版本中的非严格模式。
3. box-sizing: border-box;使用 IE 盒模型。
4. 宽度包括内容区、边框、内边距。例如：向内计算，宽度 100px + 内边距 10px = 当前宽度（100px）

JavaScript 中 var, let, const 的区别是什么？

var 具有函数作用域，可以被提升，可以在同一作用域声明多次
1. var 声明的函数作用域，在函数内部声明的只能在函数内部访问；函数外部声明的变量是全局作用域
2. var 的变量会提升到作用域的顶部，意味着可以在声明之前引用
3. 可以在同一作用域多次声明相同的 var，但是这会导致 var 的值会更新
4. 在全局作用域声明 var 变量会变成全局对象（window）的属性
let 具有块作用域，意味着只在当前声明的代码块中有效，例如在{...}
1. let 声明的变量不会提升，如果在声明之前访问会抛出一个 ReferenceError
2. 不能在同一作用域声明多个相同的 let，这样做会导致 SyntaxError
3. let 的变量可以重新被赋值
const 常量，声明后不可修改，但是声明的值为对象和数组时，其中的值可修改

具有块作用域，不会被提升，不能在同一作用域多次声明，不能被重新赋值
1. 不能在同一作用域内多次使用 const 重新声明同一个变量。

解释一下什么是 BOM 和 DOM？

BOM（浏览器对象模型）

BOM 并不是一个具体的标准，而是浏览器厂商方便开发者更好的操作浏览器窗口提供的 API。BOM 允许 javascript 访问浏览器的各种特性，可以进行一些基本的浏览器操作，例如打开新的窗口，修改浏览器状态栏等等

BOM 的主要组成部分是：
1. window：浏览器的窗口，是 BOM 的核心，几乎所有的 BOM 都是 window 的属性。
2. location：提供当前页面 URL 的访问和控制，例如读取 URL 中携带的参数
3. navigator：提供浏览器的信息，例如平台、版本号
4. history：运行脚本操作浏览器的历史记录，例如回退到上一页、下一页
5. screen：提供用户的的屏幕信息、分辨率
DOM（文档对象模型）

DOM 是一个跨平台（不同操作系统、不同设备、不同浏览器）和语言中立（不同编程语言，例如 Python、PHP）的接口，它将 HTML 和 XML 文档表现为树结构，使程序和脚本能更轻松的更改文档的结构、样式和内容。DOM 规范由 W3C 维护的一个标准。
DOM 的主要概念
1. node（节点）：DOM 中的基本构建单元，包括元素节点、属性节点、文本节点等。
2. element（元素）：HTML 或 XML 文档中的标签，每个标签都是一个元素节点。
3. attribute（属性）：附加在元素上的键值对，用于指定元素的特性。
4. document（文档）：整个 HTML 或 XML 文档的顶级节点。
DOM 的主要功能是对元素的选删改查。
1. 选取：使用 getElementById、getElementsByClassName 等方法获取节点。
2. 修改：改变元素的内容、属性、样式
3. 添加：向文档中添加元素
4. 删除：将文档中现有的元素移除
BOM 和 DOM 的区别在哪里？

BOM 关注的是浏览器: 它提供了一种与浏览器交互的方式，如窗口弹出、关闭等。DOM 关注的是文档: 它关注文档本身，即 HTML 或 XML 文档的结构和内容，允许开发者通过 JavaScript 操作这些文档。

什么是 JSON？它与 XML 有何不同？

JSON 是一种轻量级的数据交换格式，易于阅读和编写，也易于机器解析和生成。
JSON 和 XML 的不同有哪些？
1. JSON 是键值对的形式表示数据，XML 是标签形式表示数据的。
2. JSON 不支持添加注释，XML 支持。
3. JSON 轻量级、解析深度块、易读性强，适合现代 Web 开发（例如在前端开发中有着广泛的应用，从数据交换、配置管理到数据存储，都是非常有用的工具）。XML 语法复杂、支持注释，适用于一些特定领域及场景（企业级应用和传统系统、技术文档和出版物、需要层次结构和注释的配置）。

CSS 如何清除浮动？

使用 clear 属性，在浮动元素之后添加一个清除浮动的元素。

这种方法通过在浮动元素之后添加一个空的 div 或其他元素，并设置其 clear 属性为 both，来确保浮动元素不会影响其后的元素布局。
html 复制代码
```
  <style>
    .box {
      width: 400px;
      height: 400px;
      background-color: #efe388;
    }

    .float1,
    .float2 {
      width: 100px;
      height: 100px;
      background-color: #ffadad;
      float: left; /* 添加浮动 */
    }

    .float1 {
      background-color: #8beecf;
      margin: 20px 0 0 0;
    }

    .clear {
      clear: both;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="float1"></div>
    <div class="float2"></div>
    <div class="clear"></div>
  </div>
</body>
```
为什么有效?
1. 浮动元素：.float1 和 .float2 由于设置了 float: left;，会脱离正常的文档流，导致 .box 容器的高度塌陷。
2. 清除浮动：.clear 元素通过设置 clear: both;，确保其之前的浮动元素不会影响其后的元素布局。这样，.box 容器的高度会包含浮动元素的高度，避免了高度塌陷的问题。
使用 overflow 属性，将包含浮动元素的容器的 overflow 属性设置为 auto 或 hidden。

优点：简单易用（直接设置）、兼容性好（ie8 以上都支持）、自动调整高度
缺点：可能引起滚动条（auto 内容超出容器的高度时）、隐藏溢出内容（hidden 超出容器会裁剪）、可能影响其他样式
使用 ::after 伪元素，通过在包含浮动元素的容器上使用 ::after 伪元素，并设置 content 属性为空字符串，可以清除浮动。（推荐）

最好的解决方法

html 复制代码

 <style>
      .box {
        width: 400px;
        height: 400px;
        background-color: #efe388;
      }

      /* 使用 .clearfix 类来清除浮动 */
      .clearfix::before,
      .clearfix::after {
        content: "";
        display: table;
      }

      /* 真正清除浮动的伪元素 */
      .clearfix::after {
        clear: both;
      }

      /* 额外的处理，防止 IE6/7 的兼容性问题 */
      .clearfix {
        zoom: 1; /* 仅在 IE6/7 下生效 */
      }

      .float1,
      .float2 {
        width: 100px;
        height: 100px;
        background-color: #ffadad;
      }

      .float1 {
        background-color: #8beecf;
        margin: 50px 0 0 0;
      }
    </style>
  </head>
  <body>
    <div class="box clearfix">
      <div class="float1"></div>
      <div class="float2"></div>
    </div>
  </body>

.clearfix::before 和 .clearfix::after：
这两个伪元素的作用是创建一个匿名表格单元格（display: table;），这有助于解决某些情况下可能出现的外边距塌陷问题。
content: ''; 用于生成一个空的内容，这是伪元素存在的必要条件。
display: table; 使得这些伪元素像表格单元格一样行为，这有助于它们在布局中正确地占据空间，主要是为了兼容性和保险起见。
.clearfix::after：{clear: both;} clear: both：这是清除浮动的关键。它确保了 .clearfix 容器内的所有浮动元素都被正确地包含在其父容器中，防止父容器的高度塌陷。换句话说，clear: both 告诉浏览器："从这个点开始，不要再让任何元素绕过前面的浮动元素"。

使用 Flexbox 布局可以避免使用浮动，从而自然地解决浮动带来的问题

简单粗暴，直接给父元素添加display: flex;即可

CSS 选择器的优先级是如何计算的？

优先级由四个部分组成，按照从高到低的顺序分别是：

内联样式：直接写在 HTML 元素的 style 属性中的样式。
ID 选择器：每个 ID 选择器增加一个计数。
类选择器、属性选择器和伪类：每个类选择器、属性选择器和伪类增加一个计数。
标签选择器和伪元素：每个标签选择器和伪元素增加一个计数。

!important 可以覆盖任何优先级。