前端基础手册（面试基础篇）Html+CSS+JS

MCM Code

于 2024-03-14 01:29:07 发布

阅读量1k

点赞数 21

文章标签：前端 html css javascript html5 css3 bootstrap

本文链接：https://blog.csdn.net/mcm0115/article/details/136687545

版权

文章目录

1.HTML
2. CSS
3. JavaScript

1.HTML

1.1 meta标签

元数据（meta）标签在HTML中用于提供关于文档的元信息，包括页面的描述、关键字、作者、字符编码等。常用的元数据标签包括

1. <meta charset="utf-8"> - 定义⽂档的字符编码
2. <meta name="description" content="⽹页描述"> - 定义⽹页的描述
3. <meta name="keywords" content="关键词1, 关键词2"> - 定义⽹页的关键词
4. <meta name="author" content="作者名称"> - 定义⽹页的作者
5. <meta http-equiv="refresh" content="5;url=https://example.com"> - ⾃动刷新页⾯并跳转⾄指定URL
6.  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 控制移动设备上页面的视口设置，并且初始的缩放比例为1.0。这样可以确保页面在移动设备上以合适的宽度展示，并且不会因为默认的缩放而使内容变得模糊或不清晰。

1.2 HTML中的表单元素

input：用于文本输入、密码输入、邮箱输入等
textarea：用于多行文本输入
select：用于下拉选择
checkbox：用于复选框
radio：用于单选按钮
button：用于触发事件或提交表单

1.3 HTML5中的语义化元素

HTML5中的语义化元素是指使用具体特定含义和目的HTML元素来描述文档的内容，这些元素不仅仅⽤于呈现内容，还带有内在的含义和语义，可以让浏览器、开发者和搜索引擎更好地理解和解释⽂档的结构和内容。

1. <header>：表⽰⽂档或节的页眉，通常包含⽹站标志、导航链接等。
2. <nav>：表⽰导航链接的部分，⽤于包含⽹站的主要导航。
3. <article>：表⽰独⽴的内容区块，如⼀篇新闻⽂章、博客帖⼦等。
4. <section>：表⽰⽂档的某个区域或部分，通常带有⼀个标题。
5. <footer>：表⽰⽂档或节的页脚，通常包含版权信息、联系⽅式等。
//例子
<header>
<h1>⽹站标题</h1>
<nav>
<ul>
<li><a href="#">⾸⻚</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>
</header>
<article>
<h2>⽂章标题</h2>
<p>⽂章内容...</p>
</article>
<footer>
<p>© 2021 公司名称</p>
<p>联系⽅式：info@example.com</p>
</footer>

1.4 HTML5中的新表单元素

datalist：为input元素提供预定义的选项列表
output：用于表示计算的结果
keygen：用于生成密钥对
这些新表单元素在表单设计中具有以下应⽤和优势：

提供更多输⼊选项：datalist元素可以提供⽤户预定义的输⼊选项，使输⼊更加⽅便和准确。
实时计算和展⽰结果：output元素可以实时计算和展⽰⽤户输⼊的结果，为⽤户提供及时反馈
。
安全密钥⽣成：keygen元素⽤于⽣成密钥对，提供了更安全的数据传输和存储。
示例：

<form>
<label for="browser">选择⼀个浏览器：</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
</datalist>
<br>
<label for="number">输⼊⼀个数字：</label>
<input type="number" id="number" name="number">
<output name="result"></output>
<br>
<keygen name="key">
<input type="submit">
</form>

2. CSS

2.1 CSS盒模型及其组成部分

CSS盒模型指的是在⽹页布局中，使⽤CSS对元素的呈现⽅式进⾏控制时所采⽤的模型。CSS盒模型由
以下⼏个组成部分：

内容(content): 元素的实际内容，可以包括⽂本、图像等。
填充(padding): 内容与边框之间的空⽩区域，可以使⽤padding属性控制。
边框(border): 填充与边缘之间的边框，可以使⽤border属性控制。
边距(margin): 边框与相邻元素之间的空⽩区域，可以使⽤margin属性控制。
这些部分组合在⼀起，形成了⼀个盒⼦，它决定了元素在页⾯上的位置、⼤⼩和间距。

如果设置一个值，则将其应用于所有四个侧面
如果指定了两个值，则第一个值将应用于顶部和底部，第二个值将应用于右侧和左侧
如果指定了三个值，则第一个值应用于顶部，第二个值应用于左侧和右侧，最后一个值应用于底部
如果指定了四个值，则为上右下左

2.2 用CSS实现渐变

使⽤CSS实现渐变背景⾊的效果
要实现渐变背景⾊的效果，可以使⽤CSS的渐变属性和值。在CSS中，可以使⽤linear-gradient()或radial-gradient()函数来定义⼀个渐变背景⾊。其中linear-gradient()函数⽤于创建线性渐变，radial-gradient()函数⽤于创建径向渐变。
示例：

/* 创建⽔平渐变 */
.gradient {
background: linear-gradient(to right, red, yellow);
}
/* 创建垂直渐变 */
.gradient {
background: linear-gradient(yellow, green);
}
/* 创建对⻆线渐变 */
.gradient {
background: linear-gradient(to bottom right, red, blue);
}

2.3 CSS选择器

在这里插入图片描述
CSS选择器的优先级规则是根据选择器的特定性和重要性来确定的。特定性越⾼的选择器，优先级越⾼。在特定性相同的情况下，后定义的选择器拥有更⾼的优先级。如果选择器具有!important标记，它将具有最⾼的优先级。具体规则如下：

！important标记的优先级最⾼。
⾏内样式（内联样式）的特定性最⾼。
ID选择器的特定性为100，类选择器和属性选择器的特定性为10，元素选择器的特定性为1。
组合选择器的特定性将根据包含的选择器类型和个数进⾏叠加。

优先级由以下因素决定（按重要性递减）
!important声明
内联样式
ID选择器
类选择器、伪类、属性选择器
元素选择器、伪元素选择器

⽰例：

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: blue; /* 标签选择器 */
    }
    
    .special {
      color: red !important; /* 类选择器，带有!important */
    }
    
    #unique {
      color: green; /* ID选择器 */
    }
  </style>
</head>
<body>
  <p class="special" id="unique">Hello, world!</p>
</body>
</html>
//根据CSS的优先级规则，!important 的声明优先级最高，接着是ID选择器，然后是类选择器，最后是标签选择器。因此，在这个例子中，color: red !important; 将会被应用到 <p> 元素上，使文本颜色变为红色，而不会受到其他规则的影响。

2.4 使用CSS实现一个响应式布局的方法是什么

使⽤CSS媒体查询是实现响应式布局的常见⽅法。通过在CSS中使⽤@media规则，可以根据屏幕宽度和其他媒体特性来应⽤不同的样式。例如，在移动设备上，可以通过媒体查询设置元素的宽度和布局。

示例

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
      box-sizing: border-box;
    }

    .item {
      float: left;
      width: 100%;
      padding: 10px;
      box-sizing: border-box;
    }

    @media (min-width: 768px) {
      .item {
        width: 50%; /* 当屏幕宽度大于等于768px时，变为两列布局 */
      }
    }

    @media (min-width: 992px) {
      .item {
        width: 33.33%; /* 当屏幕宽度大于等于992px时，变为三列布局 */
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item" style="background-color: #f2dede;">Item 1</div>
    <div class="item" style="background-color: #fcf8e3;">Item 2</div>
    <div class="item" style="background-color: #dff0d8;">Item 3</div>
    <div class="item" style="background-color: #d9edf7;">Item 4</div>
  </div>
</body>
</html>

使用了两个媒体查询 @media (min-width: 768px) 和 @media (min-width: 992px)，分别在屏幕宽度达到或超过768px和992px时应用，将.item类的宽度分别设置为50%和33.33%，实现了在不同屏幕尺寸下的布局变化。

2.5 CSS Flexbox布局及其主要属性

Flexbox是⼀种⽤于⽹页布局的弹性盒⼦模型，它使⽹页设计者能够创建灵活的和⾃适应的布局。Flexbo
x布局主要通过容器和项⽬两个部分来实现。容器定义了⼀个弹性侧轴和⼀个主轴，项⽬是容器内的直
接⼦元素，它们沿主轴或侧轴排列。主要属性包括：

display: 定义元素为⼀个弹性容器
flex-direction: 定义主轴的⽅向
flex-wrap: 定义项⽬在轴线上的换⾏⽅式
justify-content: 定义项⽬在主轴上的对齐⽅式
align-items: 定义项⽬在侧轴上的对齐⽅式
align-content: 定义多根轴线的对齐⽅式

水平居中：display: flex; justify-content:center; align-items:center
垂直居中：通过align-items:center和justify-content:center设置容器的垂直和⽔平⽅向上为居中对⻬

示例

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 200px;
      background-color: #f2f2f2;
    }

    .item {
      flex: 1;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item" style="background-color: #b3d9ff;">Item 1</div>
    <div class="item" style="background-color: #ffcc99;">Item 2</div>
    <div class="item" style="background-color: #cc99ff;">Item 3</div>
  </div>
</body>
</html>

在这个示例中，我们创建了一个包含三个项目的Flexbox容器，并使用了justify-content和align-items属性来定义项目在主轴和交叉轴上的对齐方式。每个项目都使用了flex: 1;来平均占据可用空间。运行这个示例后，您将看到这三个项目均匀分布在父容器中，并且垂直居中对齐。

2.5.1 用媒体查询和Flexbox实现响应式栅格系统

可以使用媒体查询和Flexbox来创建响应式栅格系统，使得在不同屏幕尺寸下能够灵活地调整布局。

<!DOCTYPE html>
<html>
<head>
  <style>
    .row {
      display: flex;
      flex-wrap: wrap;
      margin: -10px; /* 为了抵消列内边距 */
    }

    .col {
      box-sizing: border-box;
      padding: 10px; /* 列内边距 */
      flex: 1 0 0; /* 列的初始宽度为0，即自适应 */
    }

    @media (min-width: 768px) {
      .col {
        flex: 0 0 50%; /* 当屏幕宽度大于等于768px时，变为两列布局 */
      }
    }

    @media (min-width: 992px) {
      .col {
        flex: 0 0 33.33%; /* 当屏幕宽度大于等于992px时，变为三列布局 */
      }
    }
  </style>
</head>
<body>
  <div class="row">
    <div class="col" style="background-color: #f2dede;">Column 1</div>
    <div class="col" style="background-color: #fcf8e3;">Column 2</div>
    <div class="col" style="background-color: #dff0d8;">Column 3</div>
    <div class="col" style="background-color: #d9edf7;">Column 4</div>
  </div>
</body>
</html>
在这个示例中，我们定义了一个 .row 类来创建一个flex容器，并通过 .col 类来定义每一列的样式。使用flex-wrap: wrap;允许项目换行，而flex: 1 0 0;表示每列的初始宽度为0，即自适应布局。
接着，我们使用媒体查询来根据不同的屏幕宽度应用不同的列布局。当屏幕宽度大于等于768px时，列变为两列布局；当屏幕宽度大于等于992px时，列变为三列布局。

2.6 CSS Grid布局及其主要属性

CSS Grid 是一种用于网页布局设计的强大工具，它允许您创建二维网格布局，能够精确地控制元素在网格容器中的位置和大小。以下是 CSS Grid 的主要属性以及它们的作用：

display: grid;：定义一个容器为网格布局。
grid-template-columns 和 grid-template-rows：指定列和行的大小和数量。
grid-gap：设置网格行和列之间的间距。
grid-column 和 grid-row：指定元素占据的列和行范围。
justify-items 和 align-items：设置项目在单元格内水平和垂直方向上的对齐方式。
justify-content 和 align-content：设置整个网格内容在容器内的水平和垂直方向上的对齐方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            display: grid;
            grid-template-columns: 1fr 2fr 1fr; /* 定义三列，第二列比其他两列宽度为两倍 */
            grid-template-rows: 100px 200px; /* 定义两行，高度分别为 100px 和 200px */
            gap: 10px; /* 设置网格间距 */
            justify-items: center; /* 水平居中对齐 */
            align-items: center; /* 垂直居中对齐 */
        }
        .item {
            background-color: lightgray;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Header</div>
        <div class="item">Main Content</div>
        <div class="item">Sidebar</div>
        <div class="item">Footer</div>
    </div>
</body>
</html>

在这里插入图片描述

2.6.1 用媒体查询和Grid实现响应式栅格系统

当我们使用媒体查询和 CSS Grid 来创建响应式栅格系统时，可以根据不同的屏幕尺寸来调整网格布局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            display: grid;
            grid-template-columns: 1fr 1fr; /* 默认情况下，两列平分 */
            gap: 20px; /* 设置网格间距 */
        }
        .item {
            background-color: lightgray;
            padding: 20px;
            text-align: center;
        }

        @media (max-width: 768px) {
            .container {
                grid-template-columns: 1fr; /* 在小屏幕尺寸下变为一列 */
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
    </div>
</body>
</html>

2.7 BFC

概念：bfc是块级格式化上下文，实现一个独立的容器，里面的子元素与外面的元素不会相互影响
哪些元素会生成bfc：
对父元素设置overflow: hidden
元素设置绝对定位或固定定位
元素设置浮动
flex或行内块元素布局
特点：
BFC就是一个块级元素，一行只能有一个
BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签
垂直方向的距离由margin控制， bfc内部的元素外边距会发生重叠，实际距离取值更大的
解决的问题：
⾼度塌陷的问题：如对⼦元素设置浮动后，⽗元素的⾼度变为0。只需对⽗元素触发BFC，如设置溢出隐藏
解决margin的重叠问题：BFC是⼀个独⽴的区域，内部的元素不受外部影响，将两个元素都设为BFC，就解决了margin重叠的问题，如两个p标签之间的margin有重叠：在p外面包裹一层容器，并触发这个容器生成一个BFC，那么两个p就不属于同一个BFC
创建⾃适应两栏布局：左侧设置 float:left ，右侧设置 overflow: hidden 。这样右边就触发了BFC，BFC的区域不会与浮动元素发⽣重叠，所以两侧就不会发⽣重叠

2.8 如何设计⼀个可定制的 CSS 栅格系统，使开发⼈员可以轻松地定义列宽、间距和媒体查询断点

为了设计⼀个可定制的 CSS 栅格系统，使开发⼈员可以轻松地定义列宽、间距和媒体查询断点，必须
遵循以下步骤：

使用 CSS 变量

:root {
  --column-width: 100px;
  --gutter-width: 20px;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
}

创建栅格布局类
为了使开发人员能够轻松地定义栅格布局，可以创建通用的栅格布局类，使其接受变量作为参数。

/* 使用 CSS 变量 */
.col {
  flex-basis: var(--column-width);
  padding: 0 var(--gutter-width);
  box-sizing: border-box;
}

媒体查询断点
允许开发人员定义媒体查询断点，以便在不同尺寸的屏幕上自动调整布局。可以创建一个类，使其接受断点参数，并将具体的媒体查询规则放入其中。

/* 使用 CSS 变量 */
@media (min-width: var(--breakpoint-sm)) {
  /* 样式规则 */
}

使用示例
开发人员可以直接使用这些类，按照自己的需求定义栅格系统的样式。例如：

/* 使用 CSS 变量 */
.my-grid {
  display: flex;
  flex-wrap: wrap;
}

.my-grid .col {
  @apply --column-width var(--gutter-width);
}

总结例子

/* 定义 CSS 变量 */
:root {
  --column-width: 100px;
  --gutter-width: 20px;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
}

/* 栅格容器样式 */
.my-grid {
  display: flex;
  flex-wrap: wrap;
}

/* 创建栅格布局类，应用栅格布局到列 */
.col {
  flex-basis: var(--column-width);
  padding: 0 var(--gutter-width);
  box-sizing: border-box;
}

/* 媒体查询断点 */
@media (min-width: var(--breakpoint-sm)) {
  .col {
    /* 在小屏幕以上应用的样式规则 */
  }
}

@media (min-width: var(--breakpoint-md)) {
  .col {
    /* 在中等屏幕以上应用的样式规则 */
  }
}

@media (min-width: var(--breakpoint-lg)) {
  .col {
    /* 在大屏幕以上应用的样式规则 */
  }
}

2.9 在响应式设计中如何处理图⽚的适配和显示

使用 CSS 实现图像的响应式适配
设置最大宽度：使用 max-width: 100%; 让图像的宽度不超过其容器的宽度，从而使图像随着父元素的大小自适应调整。
使用媒体查询：根据不同屏幕尺寸或设备类型，使用媒体查询为图像应用不同的样式规则，以适应不同的显示情况。
使用元素
元素允许您为不同的环境条件（如屏幕尺寸、分辨率等）提供不同的图像来源，并且可以根据条件选择最佳的图像源。

<picture>
  <source media="(min-width: 650px)" srcset="large.jpg">
  <source media="(min-width: 465px)" srcset="medium.jpg">
  <img src="small.jpg" alt="description">
</picture>

3.使用背景图像
对于背景图像，可以使用 background-size 属性来控制图像在容器中的大小，同时也可以使用媒体查询来针对不同尺寸的屏幕应用不同的背景图像。

.element {
  background-image: url('image.jpg');
  background-size: cover;
}

@media (max-width: 768px) {
  .element {
    background-image: url('small-image.jpg');
  }
}

2.10 如何利⽤媒体查询创建响应式导航栏？

在前端开发中，可以利⽤媒体查询来创建响应式导航栏，以适应不同屏幕尺⼨和设备。

<!DOCTYPE html>
<html>
<head>
<style>
/* 默认导航栏样式 */
.navbar {
display: flex;
background-color: #333;
color: #fff;
}
.navbar li {
padding: 10px 15px;
}
/* 媒体查询：在⼩屏幕上显示下拉菜单 */
@media screen and (max-width: 600px) {
.navbar li {
display: none;
}
.navbar .icon {
display: block;
margin-left: auto;
padding: 10px 15px;
}
.navbar.show {
flex-direction: column;
}
.navbar.show li {
display: block;
text-align: center;
}
}
</style>
</head>
<body>
<ul class="navbar">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li class="icon">&#9776;</li>
</ul>
<script>
// JavaScript 代码以处理下拉菜单的显示与隐藏
document.querySelector('.icon').addEventListener('click', function(
) {
document.querySelector('.navbar').classList.toggle('show');
});
</script>
</body>
</html>
在上⾯的⽰例中，通过媒体查询检测屏幕宽度，当屏幕宽度⼩于或等于 600px 时，将导航栏的列表项隐
藏，并显⽰⼀个下拉菜单图标。⽽点击下拉菜单图标时，通过JavaScript代码将隐藏的列表项显⽰出来
，从⽽实现响应式导航栏的效果

2.11 浏览器前缀

浏览器前缀是指在CSS属性名称前加上特定浏览器的标识符，⽤来指定特定浏览器⽀持的CSS属性。在
前端开发中，浏览器前缀的作⽤是确保在不同浏览器中正确地显⽰样式，以提供⼀致的⽤户体验。例如
，为了兼容不同浏览器的渐变效果，可以使⽤以下浏览器前缀： -webkit-linear-gradient() ⽀持WebKit内
核的浏览器 -moz-linear-gradient() ⽀持Gecko内核的浏览器 -ms-linear-gradient() ⽀持IE浏览器 -o-linear-gr
adient() ⽀持Opera浏览器这样就可以确保渐变效果在各种浏览器中都能正常显⽰。
示例

.button {
  background-color: #008cba;
  transition: background-color 0.3s ease;
}

/* 不同浏览器的前缀 */
.button {
  -webkit-transition: background-color 0.3s ease; /* Chrome, Safari, Opera */
  -moz-transition: background-color 0.3s ease; /* Firefox */
  -o-transition: background-color 0.3s ease; /* Opera */
  -ms-transition: background-color 0.3s ease; /* Internet Explorer */
}

2.12 浏览器兼容问题

浏览器兼容性是指Web页⾯在不同浏览器中的显⽰和执⾏效果是否⼀致的情况。在前端开发中需要考虑
浏览器兼容性是因为不同浏览器（如Chrome、Safari、Firefox、Edge、IE等）采⽤不同的渲染引擎和规
范，导致它们在解释和执⾏HTML、CSS和JavaScript时表现不同。
5种常见的浏览器兼容性问题及解决⽅案

CSS盒模型问题
问题描述：不同浏览器对盒模型的解析存在差异，导致布局错乱。
解决⽅案：使⽤CSS reset或者CSS normalize来统⼀各浏览器的盒模型。

/* 使用CSS Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 统一盒模型，让宽度和高度包括内容和内边距，而不包括边框 */
}

/* 或者使用CSS Normalize */
/* 可以选择性地重置特定元素的样式，而不是全部重置 */

/* 示例：重置h1元素的margin和font-size */
h1 {
  margin: 0;
  font-size: 2em;
}

/* 示例：重置列表元素的内外边距 */
ul, ol {
  margin: 0;
  padding: 0;
}

JavaScript API兼容性问题
问题描述：某些JavaScript API在不同浏览器中的⽀持程度不同。
解决⽅案：使⽤Polyfill或者Feature detection来修复并兼容不同浏览器的API。

/* 使用 Polyfill */
// 示例：使用 fetch API 的 Polyfill 进行兼容处理
if (!window.fetch) {
  // 如果浏览器不支持 fetch API，则加载对应的 Polyfill
  // 例如可以使用 "whatwg-fetch" 或 "fetch-everywhere" 等库
  // 通过引入 Polyfill 来为不支持 fetch API 的浏览器提供该功能
  // 例如：https://github.com/github/fetch
  // 具体用法根据所选的 Polyfill 库来进行相应配置和引入
  var script = document.createElement('script');
  script.src = 'path/to/fetch-polyfill.js';
  document.head.appendChild(script);
}

/* 或者使用 Feature Detection */
// 示例：检测浏览器是否支持某个 API，然后做出相应处理
if (window.Promise) {
  // 浏览器支持 Promise API，可以直接使用
} else {
  // 浏览器不支持 Promise API，需要使用其他方式处理异步操作
  // 可以手动实现 Promise 的功能，或者使用类似 es6-promise 的 Polyfill 库
  // 例如：https://github.com/stefanpenner/es6-promise
  var script = document.createElement('script');
  script.src = 'path/to/promise-polyfill.js';
  document.head.appendChild(script);
}

Flexbox布局兼容性问题
问题描述：旧版本的浏览器对Flexbox布局的⽀持不完善。
解决⽅案：使⽤Autoprefixer等⼯具⾃动添加浏览器前缀，或者使⽤Flexbox布局的替代⽅案，例如Grid。
字体兼容性问题
问题描述：不同浏览器对字体的解析⽅式不同，导致页⾯显⽰效果不⼀致。
解决⽅案：使⽤web字体（Web Font）或者特定字体的替代⽅案，并合理设置字体栈以兼容多个平台。

/* 使用 Web Font */
/* 示例：使用 Google Fonts 提供的 Roboto 字体作为 Web Font */
@import url('https://fonts.googleapis.com/css2?family=Roboto');

body {
  font-family: 'Roboto', sans-serif; /* 指定使用 Roboto 字体，若无法加载则使用系统默认 sans-serif 字体 */
}

/* 或者使用特定字体的替代方案 */
/* 示例：定义一个合理的字体栈以兼容多个平台 */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

事件兼容性问题
问题描述：某些事件在不同浏览器上触发的⽅式不同。
解决⽅案：使⽤事件委托（Event Delegation）或者兼容性⽅法来统⼀不同浏览器上的事件触发。

/* 使用事件委托 */
// 示例：使用事件委托来统一处理不同浏览器上的事件触发
var parentElement = document.getElementById('parent-element');

// 添加事件监听器到父元素，利用事件冒泡机制处理子元素的事件
parentElement.addEventListener('click', function(event) {
  if (event.target.classList.contains('specific-element')) {
    // 对特定子元素的事件进行处理
  }
});

/* 或者使用兼容性方法 */
// 示例：使用跨浏览器的兼容性方法来处理事件触发
function addEventHandler(element, event, handler) {
  if (element.addEventListener) {
    element.addEventListener(event, handler, false);
  } else if (element.attachEvent) {
    element.attachEvent('on' + event, handler);
  } else {
    element['on' + event] = handler;
  }
}

// 调用兼容性方法添加事件处理程序
var specificElement = document.getElementById('specific-element');
addEventHandler(specificElement, 'click', function(event) {
  // 处理点击事件
});

2.13 CSS预处理器 Sass

Sass（Syntactically Awesome Stylesheets）是一种基于CSS的扩展语言，旨在提供更简洁、结构化和可维护的样式表编写方式。

特性

变量：Sass允许定义变量来存储颜色、尺寸等重复使用的数值，方便统一管理和修改。
嵌套：可以使用嵌套来组织样式规则，提高样式表的可读性和可维护性。
混合器：混合器允许将一组CSS属性集合成一个可重用的代码块，并在需要时引入。
继承：通过@extend指令可以实现样式的继承，从而减少重复的CSS代码。
函数：支持自定义函数，可以进行计算、操作颜色、处理字符串等操作。

举例：利用Sass实现响应式布局

scss
// 定义变量
$breakpoint-small: 576px;
$breakpoint-medium: 768px;
$breakpoint-large: 992px;

// 响应式样式示例
.container {
  width: 100%;
  max-width: 1200px; // 设置最大宽度为1200px
  margin: 0 auto; // 水平居中

  @media (min-width: $breakpoint-small) { // 小屏幕及以上
    padding: 0 20px; // 左右内边距为20px
  }

  @media (min-width: $breakpoint-medium) { // 中等屏幕及以上
    padding: 0 40px; // 左右内边距为40px
  }

  @media (min-width: $breakpoint-large) { // 大屏幕及以上
    padding: 0 60px; // 左右内边距为60px
  }
}

// 示例媒体查询混合器
@mixin respond-to($breakpoint) {
  @media (min-width: $breakpoint) {
    @content;
  }
}

// 使用响应式样式
.element {
  font-size: 16px;

  @include respond-to($breakpoint-small) {
    font-size: 18px; // 在小屏幕及以上字体变为18px
  }

  @include respond-to($breakpoint-medium) {
    font-size: 20px; // 在中等屏幕及以上字体变为20px
  }

  @include respond-to($breakpoint-large) {
    font-size: 24px; // 在大屏幕及以上字体变为24px
  }
}

3. JavaScript

3.1 JavaScript的闭包

JavaScript中的闭包是指函数内部定义的函数，它可以访问并操作其外部函数的变量，即使外部函数已
经执⾏完毧并返回了。闭包的作⽤包括：

保存变量状态：闭包可以使得函数保持对定义它时的作⽤域的引⽤，从⽽可以访问和修改定义时的变量。
封装私有变量和⽅法：闭包可以创建私有作⽤域，从⽽隐藏函数内部的变量和⽅法，只暴露外部需要调⽤的接口。
延长变量的⽣命周期：闭包可以使得变量在函数执⾏完毧后继续存在，从⽽实现对变量的持续操作。

function outerFunction() {
let outerVariable = 'I am outer';
function innerFunction() {
console.log(outerVariable);
}
return innerFunction;
}
let innerFunc = outerFunction();
innerFunc(); // 输出：I am outer

在这个例⼦中，innerFunction是⼀个闭包，它可以访问外部函数outerFunction的局部变量outerVariable。
即使在outerFunction执⾏完毕后，innerFunction仍然可以访问和操作outerVariable变量。

3.2 JavaScript中的数据类型有哪些？请详细解释每种数据类型的特点。

JavaScript中的数据类型
JavaScript中的数据类型包括原始数据类型和引⽤数据类型。
原始数据类型

String（字符串）：⽤于表⽰⽂本数据，使⽤单引号或双引号表⽰。
Number（数字）：⽤于表⽰数值，包括整数和浮点数。
Boolean（布尔值）：⽤于表⽰逻辑值，包括true和false。
Null（空值）：⽤于表⽰空值。
Undefined（未定义）：⽤于表⽰未定义的值。
Symbol（符号）：⽤于表⽰唯⼀的标识符。
引⽤数据类型
Object（对象）：⽤于表⽰复杂数据结构，包括对象、函数和数组等。
Array（数组）：⽤于表⽰有序集合的数据结构。
Function（函数）：⽤于表⽰可执⾏的代码块。
Date（⽇期）：⽤于表⽰⽇期和时间。
RegExp（正则表达式）：⽤于匹配⽂本的模式。
特点

原始数据类型是不可变的，可直接访问和操作。
引⽤数据类型是可变的，存储在堆内存中，通过引⽤访问和操作。
原始数据类型的⽐较是按值⽐较。
引⽤数据类型的⽐较是按引⽤⽐较。
JavaScript中的变量并不具体指定数据类型，数据类型是变量的值决定的。

3.3 JavaScript中的变量声明⽅式有哪些？分别介绍它们的使⽤场景

JavaScript中的变量声明⽅式有var、let和const。

var：使⽤var关键字声明的变量是函数作⽤域的，可以在函数内部任何位置使⽤。它适⽤于需要在
函数内部共享的变量。
let：使⽤let关键字声明的变量是块级作⽤域的，只能在声明的块内部使⽤。它适⽤于需要在特定
块内定义的变量。
const：使⽤const关键字声明的变量也是块级作⽤域的，且其值不能被重新赋值。适⽤于需要定义
常量的场景。

3.4 请解释⼀下函数声明和函数表达式的区别。

函数声明和函数表达式的区别在于定义的⽅式和作⽤域的提升。

函数声明：函数声明是通过关键字 function 来定义的，它可以在任何地⽅声明，即使在调⽤函数之前，函数声明也会被提升到作⽤域顶部。例如：

function myFunction() {
// 函数体
}

函数表达式：函数表达式是将函数赋值给⼀个变量或作为⼀个匿名函数的定义，它的作⽤域提升
⾏为不同于函数声明。例如：

var myFunction = function() {
// 函数体
};

总结：函数声明会被提升到作⽤域顶部，可以在声明之前调⽤；函数表达式在代码执⾏阶段赋值给变
量，只能在赋值之后调⽤。

3.5 在 JavaScript 中，如何使⽤ call、apply 和 bind ⽅法来改变函数执⾏时的上下⽂和参数传递⽅式？

call ⽅法
使⽤ call ⽅法可以⽴即执⾏⼀个函数，并且可以指定函数内部 this 的值，以及传⼊的参数列表。
示例

function sayHello() {
console.log('Hello, ' + this.name);
}
const person = { name: 'John' };
sayHello.call(person);

apply ⽅法
apply ⽅法与 call ⽅法类似，不同之处在于参数的传递⽅式。apply 接受两个参数，第⼀个参数是要绑定的 this 值，第⼆个参数是⼀个数组，包含传⼊函数的参数列表。
示例

function greet(greeting) {
console.log(greeting + ', ' + this.name);
}
const person = { name: 'Alice' };
greet.apply(person, ['Good morning']);

bind ⽅法
bind ⽅法不会⽴即执⾏函数，⽽是返回⼀个新的函数，可以通过该函数在指定的上下⽂中调⽤原始函数，同时固定部分参数的值。
示例

function greeting(greeting) {
console.log(greeting + ', ' + this.name);
}
const person = { name: 'Bob' };
const greetBob = greeting.bind(person, 'Hi');
greetBob();

3.6 JavaScript中数组的map()⽅法的⼯作原理。

JavaScript中的map()⽅法是⽤于创建⼀个新数组，该数组的元素是原始数组经过处理后的结果。在map()⽅法中，我们可以传⼊⼀个回调函数，该回调函数会对数组中的每个元素进⾏处理并返回处理后的结果。这样，原始数组中的每个元素都会被回调函数处理，并将处理后的结果放⼊新数组中。map()⽅法不会改变原始数组，⽽是返回⼀个新的数组，保持原始数组不变。

// 使用 map() 方法将数组中的每个元素乘以2，构建一个新的数组
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((num) => num * 2);
console.log(doubledNumbers); // 输出 [2, 4, 6, 8, 10]

3.7 使⽤JavaScript，如何在对象中添加新的属性？

要在JavaScript对象中添加新属性，可以使⽤点运算符或⽅括号表⽰法。例如：

// 使⽤点运算符
const person =
{
firstName: "John",
lastName: "Doe"
};
person.age = 30;
// 使⽤⽅括号表示法
person["job"] = "Developer";

3.8 JavaScript DOM操作与事件处理

使⽤JavaScript实现⼀个点击页⾯任意位置，显⽰当前⿏标坐标的功能。

<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener('click', function(event) {
const x = event.clientX;
const y = event.clientY;
alert(`⿏标坐标：(${x},${y})`);
});
</script>
</head>
<body>
</body>
</html>

编写⼀个函数，实现在页⾯加载时⾃动获取当前浏览器窗⼜的宽度和⾼度，并在页⾯标题中显⽰。

// JavaScript 函数示例
function displayWindowSize() {
let width = window.innerWidth;
let height = window.innerHeight;
document.title = `Width: ${width} - Height: ${height}`;
}
displayWindowSize();

创建⼀个函数，实现⼀个简单的拖放功能，使页⾯上的元素可以被拖动并放置到指定位置。

<!DOCTYPE html>
<html>
<head>
<style>
#box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
}
</style>
<script>
function dragElement(element) {
  let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  element.onmousedown = dragMouseDown; // 当鼠标按下时触发拖动函数
  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault(); // 阻止默认的拖动事件
    pos3 = e.clientX; // 获取鼠标相对于可视窗口的水平位置
    pos4 = e.clientY; // 获取鼠标相对于可视窗口的垂直位置
    document.onmouseup = closeDragElement; // 当鼠标松开时停止拖动
    document.onmousemove = elementDrag; // 当鼠标移动时触发拖动函数
  }
  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    pos1 = pos3 - e.clientX; // 计算鼠标移动时水平方向上的位移
    pos2 = pos4 - e.clientY; // 计算鼠标移动时垂直方向上的位移
    pos3 = e.clientX;
    pos4 = e.clientY;
    element.style.top = (element.offsetTop - pos2) + "px"; // 设置元素新的垂直位置
    element.style.left = (element.offsetLeft - pos1) + "px"; // 设置元素新的水平位置
  }
  function closeDragElement() {
    document.onmouseup = null;
    document.onmousemove = null;
  }
}
</script>
</head>
<body>
<h1>拖放功能</h1>
<div id="box" onmousedown="dragElement(this)"></div> <!-- 在鼠标按下时调用拖动函数 -->
</body>
</html>

使⽤JavaScript实现图⽚轮播功能，即在页⾯上展⽰多张图⽚并实现⾃动切换效果

<!DOCTYPE html>
<html>
<head>
<style>
.slideshow-container {
  position: relative; /* 设置轮播容器的定位方式为相对定位 */
  /* 其他样式 */
}
.mySlides {
  display: none; /* 初始时隐藏所有轮播图片 */
  /* 其他样式 */
}
</style>
</head>
<body>

<div class="slideshow-container">
  <div class="mySlides fade"> <!-- 每张轮播图片都有mySlides类和fade类 -->
    <img src="image1.jpg"> <!-- 图片1 -->
  </div>
  <div class="mySlides fade"> <!-- 另一张轮播图片，同样有mySlides类和fade类 -->
    <img src="image2.jpg"> <!-- 图片2 -->
  </div>
  <!-- 可以添加更多的轮播图片 -->
</div>

<script>
var slideIndex = 0; // 初始化一个变量用来追踪当前显示的轮播图片索引

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides"); // 获取所有轮播图片
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none"; // 隐藏所有轮播图片
  }
  slideIndex++; // 移动到下一张轮播图片
  if (slideIndex > slides.length) { 
    slideIndex = 1; // 如果达到最后一张，则从第一张重新开始
  }
  slides[slideIndex - 1].style.display = "block"; // 显示当前轮播图片
  setTimeout(showSlides, 2000); // 设定2秒后再次调用showSlides函数，实现自动轮播
}

showSlides(); // 开始轮播
</script>

</body>
</html>

编写⼀个事件处理函数，实现当⽤户点击页⾯某个元素时，改变该元素的样式并弹出提⽰框。

// HTML⻚⾯中的元素
const element = document.getElementById('exampleElement');
// 事件处理函数
function handleElementClick() {
element.style.color = 'red';
element.style.backgroundColor = 'yellow';
alert('您点击了这个元素！');
}
// 将事件处理函数绑定到元素上
element.addEventListener('click', handleElementClick);

创建⼀个函数，实现通过JavaScript向页⾯中动态添加和移除CSS样式

// 添加CSS样式
function addStyle() {
var elem = document.createElement('style');
elem.innerHTML = '.new-style { color: red; }';
document.head.appendChild(elem);
}
// 移除CSS样式
function removeStyle() {
var styles = document.getElementsByTagName('style');
for (var i = 0; i < styles.length; i++) {
if (styles[i].innerText.includes('.new-style { color: red; }')) {
document.head.removeChild(styles[i]);
}
}
}

3.9 如何使⽤ jQuery 实现数据的异步加载？请描述⼀下过程。

可以使⽤ jQuery 的 AJAX ⽅法来实现数据的异步加载。

$.ajax({
url: 'https://api.example.com/data',
method: 'GET',
success: function(data) {
// 在这⾥处理返回的数据
// 示例：更新⻚⾯内容
$("#result").html(data);
},
error: function(err) {
// 在这⾥处理错误情况
}
});

3.10 Axios封装接口

创建一个名为 api.js 的文件，用于封装接口：

import axios from "axios";

const baseURL = "https://api.example.com"; // 设置接口的基础URL

const api = axios.create({
  baseURL,
  headers: {
    "Content-Type": "application/json",
  },
});

// 封装一个函数用于发送 GET 请求
export const getExampleData = () => {
  return api.get("/example");
};

// 封装一个函数用于发送 POST 请求
export const postExampleData = (data) => {
  return api.post("/example", data);
};

// 可以根据需要添加更多的接口封装函数

export default api;

在项目的其他文件中引入这些封装函数并使用：

import { getExampleData, postExampleData } from "./api";

// 发送 GET 请求
getExampleData()
  .then((response) => {
    console.log("GET请求结果：", response.data);
  })
  .catch((error) => {
    console.error("GET请求错误：", error);
  });

// 发送 POST 请求
postExampleData({ name: "John", age: 30 })
  .then((response) => {
    console.log("POST请求结果：", response.data);
  })
  .catch((error) => {
    console.error("POST请求错误：", error);
  });