饿了么一面 1.3

1. 自我介绍
2. 你自己做的项目，后端是自己写的吗
3. 系统学习前端的方法

4. checkbox：实现点击关联文案选中checkbox：纯CSS怎么实现；JS怎么实现

使用纯 CSS 实现点击关联文本选中复选框可以通过标签的 :checked 伪类和相邻选择器实现。以下是一个示例代码：

<style>
/* 隐藏原始复选框 */
input[type="checkbox"] {
    display: none;
}

/* 显示文本 */
label {
    cursor: pointer;
}

/* 点击文本选中复选框 */
label::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    margin-right: 10px;
}

/* 选中状态下的样式 */
input[type="checkbox"]:checked + label::before {
    background-color: #007bff;
}

/* 选中状态下的样式 */
input[type="checkbox"]:checked + label::after {
    content: "✓";
    display: inline-block;
    color: white;
    font-size: 16px;
    line-height: 20px;
    width: 20px;
    text-align: center;
}
</style>

<!-- HTML 代码 -->
<input type="checkbox" id="checkbox">
<label for="checkbox">点击我选中复选框</label>

如果要使用 JavaScript 实现，可以通过事件监听器在点击文本时选中复选框。以下是一个示例代码：

<!-- HTML 代码 -->
<input type="checkbox" id="checkbox">
<label for="checkbox" id="label">点击我选中复选框</label>

<script>
// JavaScript 代码
document.getElementById('label').addEventListener('click', function() {
    var checkbox = document.getElementById('checkbox');
    checkbox.checked = !checkbox.checked; // 切换复选框的选中状态
});
</script>

这段代码通过事件监听器，在点击文本标签时切换与之关联的复选框的选中状态。

6. form表单：不依赖JS情况下，我点击一个表单的按钮，就可以触发一个表单的提交，也是在不依赖JS的情况下

你可以使用表单元素中的按钮和表单元素的 action 属性来实现在不依赖 JavaScript 的情况下点击按钮提交表单。以下是一个示例代码：

<!-- HTML 代码 -->
<form action="/submit-url" method="post">
    <input type="text" name="inputField" placeholder="输入内容">
    <button type="submit">提交</button>
</form>

在这个示例中，当用户点击提交按钮时，浏览器会自动将表单中的数据提交到 action 属性指定的 URL 地址，不需要使用 JavaScript。

8. 行内元素与块级元素

行内元素（Inline Element）和块级元素（Block-level Element）是HTML中常见的两种元素类型，它们在页面布局和样式上有着不同的表现和特点。

行内元素（Inline Element）：

特点：
- 行内元素在页面中按照水平方向排列，一般只占据它所包含内容的大小。
- 它们不会强制换行，而是在需要时自动换行。
- 行内元素不能设置宽度和高度，宽度和高度由内容决定。
- 典型的行内元素包括span、a、img、strong、em等。
示例用法：
- 用于包裹文本中的一部分，如强调、超链接等。
- 用于在文本中插入图片、图标等。

块级元素（Block-level Element）：

特点：
- 块级元素会独占一行，从上至下排列。
- 每个块级元素都会新起一行，并且可以设置宽度和高度。
- 块级元素可以容纳内联元素和其他块级元素。
- 典型的块级元素包括div、p、h1-h6、ul、li、table等。
示例用法：
- 用于页面结构的布局，如分区、区块。
- 用于显示大段的文本内容。
- 用于包裹其他元素，以实现特定的布局效果。

区别总结：

行内元素和块级元素在页面布局和排列方式上有明显的不同。
块级元素独占一行，可以设置宽度和高度，而行内元素则水平排列，并且宽度和高度由内容决定。
行内元素可以在行内包含其他行内元素，但不能包含块级元素；而块级元素可以包含任何类型的元素，包括其他块级元素和行内元素。
块级元素在默认情况下会换行，而行内元素不会。
常见的HTML元素有特定的默认显示方式，例如div是块级元素，而span是行内元素，但是通过CSS可以改变元素的显示方式。

10. 你们移动端站点的高清模式的适配方案是怎么做的（讲一下Taro的实现原理）

移动端站点的高清模式适配通常涉及到像素密度（Pixel Density）和视网膜屏幕（Retina Display）等概念。Taro是一款基于React的多端统一开发解决方案，它可以将代码编译成小程序、H5、RN等多端运行。下面是使用Taro实现移动端高清模式适配的一般步骤和原理：

1倍图和2倍图准备： 在项目中，通常会准备两种不同像素密度的图片，即1倍图和2倍图。1倍图用于标准密度屏幕，而2倍图则用于高清屏幕。
配置Taro项目： 在Taro项目中，可以通过配置webpack来处理高清模式的适配。可以使用Taro提供的webpack配置选项，或者直接修改webpack配置文件。
CSS像素设置： 在CSS中，可以使用px作为单位来定义元素的大小和位置。对于高清模式的适配，通常将CSS像素设置为逻辑像素的一半，以使元素在高清屏幕上显示为1倍图的大小。
Viewport设置： 在HTML文档中，可以通过设置Viewport元标签来指定页面的缩放比例和宽度。在高清模式适配中，Viewport通常会设置为与设备像素比（Device Pixel Ratio）相关的值，以确保页面在高清屏幕上显示正确。
图片引入： 在Taro项目中，可以使用require引入图片资源，Taro会根据设备像素比自动选择合适的图片。
适配代码： 在编写页面和组件时，需要根据不同设备的像素密度来调整元素的大小和位置，以确保在不同屏幕上显示一致。

综上所述，使用Taro实现移动端高清模式适配的原理主要是通过配置webpack和CSS像素设置来处理不同像素密度的屏幕，并且根据设备像素比来选择合适的图片资源，从而保证页面在高清屏幕上显示清晰。

11. 水平垂直居中：分别说一下块级；文字怎么实现水片居中，垂直呢

水平垂直居中是前端开发中常见的布局需求。下面分别介绍如何实现块级元素和文字的水平垂直居中：

块级元素的水平垂直居中：

方法一：使用Flexbox布局（推荐）：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

方法二：使用绝对定位和transform（适用于已知宽高的情况）：

.container {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 水平和垂直居中 */
}

方法三：使用表格布局（不推荐，但兼容性较好）：

.container {
  display: table-cell;
  text-align: center; /* 水平居中 */
  vertical-align: middle; /* 垂直居中 */
}

文字的水平垂直居中：

方法一：使用line-height和height（适用于单行文字）：

.container {
  height: 100px; /* 容器高度 */
  line-height: 100px; /* 与容器高度相同 */
  text-align: center; /* 水平居中 */
}

方法二：使用Flexbox布局：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

方法三：使用绝对定位和transform（适用于已知宽高的情况）：

.container {
  position: relative;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 水平和垂直居中 */
}

以上是常用的几种实现水平垂直居中的方法，根据具体情况选择最适合的方法进行布局。Flexbox布局是现代前端开发中推荐的方式，因为它简单、灵活且易于维护。

13. JS的基础数据类型引申：那你了解复合类型吗（其实就是引用类型）

是的，复合类型（Composite Type）也被称为引用类型（Reference Type），它是JavaScript中的一种数据类型，与基本数据类型（如字符串、数字、布尔等）不同。复合类型是由多个值或其他复合类型组成的数据结构，它们存储的是对象的引用而不是实际的值。

在JavaScript中，以下是常见的复合类型/引用类型：

对象（Object）： 对象是键值对的集合，其中每个键都是字符串类型，对应一个值。对象可以包含各种数据类型的值，包括基本数据类型和其他复合类型。对象通过{}中的列表表示，例如{ key1: value1, key2: value2 }。
数组（Array）： 数组是一组有序的值的集合，每个值可以是任意类型。数组通过[]中的列表表示，例如[value1, value2, value3]。
函数（Function）： 函数是一段可执行的代码块，它可以接受参数并返回结果。函数在JavaScript中也是一种复合类型，可以像其他对象一样被赋值给变量，作为参数传递给其他函数等。
日期（Date）： 日期对象用于表示日期和时间，它包含了一系列方法用于处理日期和时间。
正则表达式（RegExp）： 正则表达式对象用于匹配字符串的模式，它也是一种复合类型，具有一系列方法用于在字符串中查找和替换模式。

复合类型在JavaScript中是通过引用进行传递和操作的，这意味着当一个复合类型的值被赋值给另一个变量时，实际上是将引用传递给了这个变量，而不是复制了整个对象。因此，在操作复合类型时需要注意引用的问题，特别是在涉及对象的修改时。

前端面试题详解整理96|form表单：不依赖JS情况下，我点击一个表checkbox：实现点击关联文案选中checkbox：纯CSS怎么实现；JS怎么实现 ,

饿了么 一面 1.3