前端面试问题 83|内联块和内联元素的区别,watch,computed,a tag,security,xss,csrf网站攻击,webpackvite,...

214.行内块和行内元素区别

行内块元素和行内元素是 HTML 元素的两种类型，它们在布局和显示上有一些区别。

行内元素（Inline Elements）

• 行内元素是指在页面中不会新起一行，而是会在同一行内显示的元素。
• 典型的行内元素包括 <span>、<a>、<strong>、<em> 等。
• 行内元素的宽度和高度由其内容决定，不可设置宽度和高度。
• 行内元素不会独占一行，多个行内元素会水平排列。
• 行内元素的 margin、padding、border 只会影响元素本身，并不会影响到其他元素的布局。

行内块元素（Inline Block Elements）

• 行内块元素结合了行内元素和块级元素的特点，可以在一行内显示，并且可以设置宽度、高度、margin、padding、border 等样式。
• 典型的行内块元素包括 <img>、<input>、<button> 等。
• 行内块元素默认情况下的排列方式是水平排列，但是如果宽度不够，也会自动换行。
• 行内块元素可以通过设置 display: inline-block; 来实现，将原本的块级元素改为行内块元素。

区别总结

1. 布局方式：

   • 行内元素在同一行内水平排列，不会新起一行。
   • 行内块元素也在同一行内水平排列，但是可以设置宽度和高度，可以独占一行或者多行。

2. 尺寸控制：

   • 行内元素的尺寸由其内容决定，不可设置宽度和高度。
   • 行内块元素可以设置宽度和高度，可以改变其尺寸。

3. 样式控制：

   • 行内元素的 margin、padding、border 只会影响元素本身，不会影响到其他元素的布局。
   • 行内块元素可以设置 margin、padding、border，并且会影响到其他元素的布局。

15.自己写个会的算法!

16.watch和computed

watch 和 computed 都是 Vue.js 中用于响应式数据处理的选项，它们可以用于监听数据变化并执行相应的操作，但在使用方式和作用上有所不同。

watch

watch 选项用于监听数据的变化，并在数据变化时执行指定的回调函数。它可以监听单个属性或者整个对象的变化，并可以执行异步操作。通常情况下，watch 更适用于监听数据的变化并执行复杂的逻辑处理。

export default {
  data() {
    return {
      message: 'Hello',
      counter: 0
    };
  },
  watch: {
    message(newValue, oldValue) {
      console.log('Message changed from', oldValue, 'to', newValue);
    },
    counter(newValue, oldValue) {
      console.log('Counter changed from', oldValue, 'to', newValue);
    }
  }
};

computed

computed 选项用于定义计算属性，它依赖于其他响应式数据，并根据其变化而变化。computed 的值会被缓存起来，只有在依赖的响应式数据发生变化时才会重新计算。通常情况下，computed 更适用于对数据进行简单的处理和计算。

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
};

在上述例子中，fullName 是一个计算属性，它依赖于 firstName 和 lastName 这两个响应式数据，当 firstName 或 lastName 发生变化时，fullName 会重新计算。但是如果 firstName 和 lastName 都没有发生变化，则 fullName 的值会直接使用缓存的结果，而不会重新计算。

综上所述，watch 主要用于监听数据的变化并执行自定义的逻辑处理，而 computed 则主要用于定义计算属性，根据其他响应式数据的变化而动态计算得到值。

17.a标签是什么类型的元素
18.web安全方面的的
19.网络攻击有哪些

17. <a> 标签是什么类型的元素

<a> 标签是 HTML 中的锚（anchor）元素，用于创建超链接。它是行内元素（inline element）的一种，通常用于将文本或图像转换为可点击的链接，从而跳转到其他页面或者位置。

<a> 标签的主要属性包括：

• href：指定链接的目标 URL。
• target：指定链接的打开方式，常见取值包括 _blank（在新窗口打开）、_self（在当前窗口打开）等。
• download：指定链接的资源是否应该下载而不是导航到它。
• rel：指定链接与当前页面之间的关系，常见取值包括 nofollow（告知搜索引擎不追踪该链接）、noopener（防止被链接的页面拥有对打开者的引用）等。

18. Web 安全方面的内容

Web 安全是指保护 Web 应用程序和用户信息免受各种威胁和攻击的措施和技术。Web 安全方面的内容主要包括以下几个方面：

• 身份认证和授权：确保用户身份的合法性，并根据用户的身份和权限控制对资源的访问。
• 输入验证：对用户输入的数据进行验证和过滤，防止恶意输入和代码注入攻击。
• 数据加密：对敏感数据进行加密处理，保护数据在传输和存储过程中的安全性。
• 会话管理：管理用户会话状态，包括会话的建立、维护和销毁，防止会话劫持和伪造攻击。
• 跨站脚本（XSS）攻击防范：通过对输入数据进行过滤和转义，以及设置合适的 HTTP 头部来防止恶意脚本注入。
• 跨站请求伪造（CSRF）攻击防范：使用 CSRF 令牌和验证 Referer 头等方式来防止第三方网站对用户进行恶意操作。
• 安全头部设置：设置合适的 HTTP 安全头部，如 Content-Security-Policy、X-Frame-Options、X-XSS-Protection 等，来增强 Web 应用程序的安全性。
• 安全编码实践：采用安全的编程实践，如避免使用已知的漏洞和弱点，定期更新依赖库，及时修复安全漏洞等。

19. 网络攻击有哪些

网络攻击是指针对计算机网络和网络系统的恶意行为，旨在窃取、修改、破坏或者拒绝服务。常见的网络攻击包括以下几种：

• DDoS 攻击：分布式拒绝服务攻击，通过大量虚假请求使目标服务器资源耗尽，导致服务不可用。
• SQL 注入攻击：通过在 Web 表单或 URL 中注入恶意 SQL 代码，从而执行未经授权的数据库查询操作。
• 跨站脚本（XSS）攻击：通过在网页中注入恶意脚本代码，盗取用户信息或者劫持用户会话。
• 跨站请求伪造（CSRF）攻击：利用用户已登录的状态下发起恶意请求，实现非法操作。
• 网络钓鱼：通过伪造合法的网站或者电子邮件，诱骗用户提供个人信息、密码等敏感信息。
• 中间人攻击：攻击者劫持网络通信过程中的数据，窃取或篡改通信内容。
• 恶意软件攻击：通过恶意软件感染用户设备，窃取个人信息、密码等敏感信息，或者加密用户文件要求赎金。
• 密码破解：通过暴力破解、字典攻击等手段获取用户密码，进而盗取用户账号或者权限。
• 社会工程学攻击：通过诱骗、欺骗等手段获取用户敏感信息，如密码、银行账号等。

为了防范这些网络攻击，需要采取一系列安全措施，包括加强网络安全意识教育、使用安全的软件和协议、及时修复安全漏洞、加强网络监控和日志记录等。 20.webpack
21.vite
22.promise怎么实现的
23.async实现原理
24.正则匹配

20. Webpack

Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。它主要用于将各种资源，如 JavaScript、样式表、图片等，打包成一个或多个静态资源文件，以便在浏览器中加载。

Webpack 的主要特性包括：

• 支持模块化开发，能够识别并处理各种类型的模块。
• 支持多种资源类型的打包和优化，如 JavaScript、CSS、图片等。
• 支持开发服务器，能够实时监视文件的变化并自动重新编译。
• 支持代码分割、按需加载，提高页面加载性能。
• 支持插件系统，可以通过插件来扩展其功能。

21. Vite

Vite 是一个基于现代浏览器原生 ES 模块的开发服务器，用于快速构建 Vue.js 单页应用（SPA）和网站。它的特点是快速启动、快速热更新、按需编译，主要通过利用浏览器原生 ES 模块加载的速度优势来实现。

Vite 的主要特点包括：

• 快速启动：利用浏览器原生 ES 模块加载的速度，不需要预先编译整个应用，启动速度非常快。
• 快速热更新：使用 HMR（热模块替换）技术，支持在开发过程中快速更新代码，无需刷新浏览器。
• 按需编译：在生产环境中，会将代码预编译为静态资源，提高页面加载性能。
• 支持 TypeScript：内置了对 TypeScript 的支持，可以直接编写 TypeScript 代码。
• 支持插件系统：支持插件系统，可以通过插件来扩展其功能。

22. Promise 的实现原理

Promise 是 JavaScript 提供的一种异步编程解决方案，用于解决回调地狱和异步代码的可读性问题。Promise 主要包括三个状态：pending（进行中）、fulfilled（已成功）和rejected（已失败），并且状态只能从 pending 转变为 fulfilled 或者 rejected，转变后不可再改变。

Promise 的实现原理主要包括以下几点：

1. Promise 是一个构造函数，可以通过 new Promise() 创建一个 Promise 实例。
2. Promise 实例具有 then() 方法，用于注册状态改变时的回调函数，并返回一个新的 Promise 实例。
3. 在 Promise 内部，使用一个状态变量和两个回调函数数组来管理状态和注册的回调函数。
4. 当调用 resolve() 方法时，将状态改变为 fulfilled，并依次调用已注册的成功回调函数。
5. 当调用 reject() 方法时，将状态改变为 rejected，并依次调用已注册的失败回调函数。
6. 在链式调用中，通过 then() 方法返回一个新的 Promise 实例，以实现链式调用。

23. async 的实现原理

async/await 是 ES2017（ES8）引入的异步编程语法糖，用于简化 Promise 的使用。async 函数是异步函数的一种，它会自动将函数的返回值包装成一个 Promise 对象，并且内部可以使用 await 来等待 Promise 对象的状态。

async 函数的实现原理主要包括以下几点：

1. async 函数会被转换成一个普通的函数，返回值是一个 Promise 对象。
2. 函数内部使用的 await 关键字会暂停函数的执行，等待 Promise 对象的状态改变。
3. 如果 await 后面的表达式是一个 Promise 对象，async 函数会将其等待的结果作为返回值。
4. 如果 await 后面的表达式是一个非 Promise 对象，async 函数会将其包装成一个 resolved 的 Promise 对象。
5. 如果

await 后面的 Promise 对象状态变为 fulfilled，则继续执行后面的代码；如果状态变为 rejected，则抛出异常。

6. async 函数内部的代码是顺序执行的，可以像同步代码一样使用 try/catch 来捕获异常。

24. 正则匹配

正则表达式是一种用于描述字符模式的字符串，可以用于匹配、查找、替换字符串中的字符。在 JavaScript 中，可以使用 RegExp 对象或者直接使用字面量来创建正则表达式。

正则匹配主要包括以下几个步骤：

1. 创建正则表达式：可以使用 RegExp 构造函数或者直接使用正则表达式字面量来创建正则对象。
2. 匹配字符串：使用正则对象的 test() 方法或者字符串的 match()、search()、replace()、split() 方法来进行匹配操作。
3. 获取匹配结果：如果匹配成功，可以通过正则对象的 exec() 方法或者匹配结果数组来获取匹配的结果。
4. 处理匹配结果：根据需要对匹配结果进行进一步的处理，如提取匹配的子串、替换匹配的字符串等。

正则表达式的语法非常灵活，可以用于各种复杂的匹配需求，包括字符匹配、字符类、重复匹配、边界匹配、分组捕获等。熟练掌握正则表达式可以在字符串处理方面提高效率。 目前能回忆起来的就这些了
反问：因为我没投实习基地，这个和实习基地有啥区别，对方说，其实没区别，都是一样的
总结：学了3个月，还有好多只会用一点，还不懂底层，后面还要好好沉淀!

作者：无语的鲸鱼在评审
链接：www.nowcoder.com/feed/main/d…
来源：牛客网