备战腾讯20240902

# 为什么会接触前端

本人虽然本科与研究生为经济学专业，接触了大量的经济学模型和数理推导，也有一定的编程实践，但是市面上没有足够的就业面。这个时候我特别希望能找到一份自己喜欢的编码工作，希望能在这个过程中能学到很多东西，也能与大家一起交流。

# HTML标签可以分为几类

提示

找一个记忆顺序，快速记忆

文档和元数据：元

文本和语义元素：语元

链接：链

图像和媒体：媒

列表：列

表格：表格

表单：表单

样式和布局：式

语义标签：语标

元链媒列式表格和表单语元与语签

文档和元数据：用于定义文档的结构和元数据，如<html>, <head>, <title>, 和 <meta>。

文本和语义元素：用于显示文本内容和提供文档结构，如<p>, <h1>-<h6>, <em>, <strong>, <blockquote>, <span>, 等。

链接：用于创建超链接，如<a>。

图像和媒体：用于插入图像、音频、视频等多媒体内容，如<img>, <audio>, <video>等。

列表：用于创建列表，如<ul>, <ol>, <li>等。

表格：用于创建表格，如<table>, <tr>, <td>等。

表单：用于创建表单元素，如<form>, <input>, <textarea>, <select>, <button>等。

样式和布局：用于控制文档的样式和布局，如<style>, <div>, <span>等，它们通常结合CSS使用。

语义标签：用于提供更多关于文档内容的语义信息，如<header>, <nav>, <main>, <aside>, <article>, <footer>等。

# HTML中的 `<head>` 标签中一般会写什么

在HTML的 <head>标签中，通常会包含以下内容：

<title> 标签：定义文档的标题，这通常会显示在浏览器的标题栏上。

<meta> 标签：提供有关文档的各种元数据，例如字符编码、作者、描述、关键词等。

<link> 标签：用于链接到外部样式表，以便为文档应用CSS样式。

<script> 标签：可以包含脚本，无论是内联脚本还是链接到外部脚本文件。

<style> 标签：如果有内联样式（虽然不推荐），可以放在这里。

<base> 标签：指定文档中所有相对链接的默认URL。

其他元数据：可能包括搜索引擎优化（SEO）相关的标签，如<meta name="description"> 和<meta name="keywords">，以及社交媒体集成相关的标签。

以下是一个简单的<head>标签示例，其中包含了上述部分元素：

<head>
  <title>我的网页标题</title>
  <meta charset="UTF-8">
  <meta name="description" content="这是我的网页描述">
  <meta name="keywords" content="关键字1, 关键字2, 关键字3">
  <link rel="stylesheet" type="text/css" href="styles.css">
  <script src="script.js"></script>
  <style>
    /* 任何内联样式可以放在这里 */
  </style>
  <base href="https://www.example.com/">
</head>
<head>

1
2
3
4
5
6
7
8
9
10
11
12
13

标签中的内容对于文档的正确渲染和SEO很重要，因为搜索引擎会索引<title>和<meta>标签中的信息，而样式和脚本会影响页面的外观和行为。

# 引入 CSS 的标签叫什么

<link> 标签用于引入外部样式表，它的作用是将外部的 CSS 文件链接到当前的 HTML 文件中，从而使页面的样式更加灵活和可定制。

# JS的引入过程发生了什么

与外界交互：遇到跨域的资源，会使用ajax进行资源下载

与HTML交互：插入CSS，为HTML元素绑定事件，按照需求进行html元素增删改

内部：执行脚本，生成应用程序上下文

# 判断元素 50% 在可视区域内

使用getBoundingClientRect方法

function isElementPartiallyInView(element) {
  const rect = element.getBoundingClientRect();
  const viewportWidth = document.documentElement.clientWidth;
  const viewportHeight = document.documentElement.clientHeight;

  const isTopInView = rect.top >= 0 && rect.top < viewportHeight / 2;
  const isBottomInView = rect.bottom > viewportHeight / 2 && rect.bottom <= viewportHeight;

  return isTopInView || isBottomInView;
}

1
2
3
4
5
6
7
8
9
10

使用IntersectionObserver方法

function isElementPartiallyInView(element, percentage = 50) {
  let observer = null;

  function handleIntersection(entries, observer) {
    entries.forEach(entry => {
      if (entry.intersectionRatio >= percentage / 100) {
        console.log(`${element.id} 的 ${percentage}% 在可视区域内`);
        observer.unobserve(element);
      } else {
        console.log(`${element.id} 的 ${percentage}% 不在可视区域内`);
      }
    });
  }

  observer = new IntersectionObserver(handleIntersection, { threshold: percentage / 100 });
  observer.observe(element);

  return observer;
}

let myElement = document.getElementById('myElement');
isElementPartiallyInView(myElement, 50);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 最长连续字符

笔记

字母序连续字符串是由字母表中连续字母组成的字符串。换句话说，字符串 "abcdefghijklmnopqrstuvwxyz" 的任意子字符串都是字母序连续字符串。

例如，"abc" 是一个字母序连续字符串，而 "acb" 和 "za" 不是。给你一个仅由小写英文字母组成的字符串 s ，返回其最长的字母序连续子字符串的长度。

示例 1：

输入：s = "abacaba" 输出：2 解释：共有 4 个不同的字母序连续子字符串 "a"、"b"、"c" 和 "ab" 。 "ab" 是最长的字母序连续子字符串。

示例 2：

输入：s = "abcde" 输出：5 解释："abcde" 是最长的字母序连续子字符串。

提示：

1 <= s.length <= 105

s 由小写英文字母组成

var longestContinuousSubstring = function(s) {
  let cur = 1, max = 1
  const len = s.length
  for (let i = 1; i < len; ++i) {
    const pre = s.charCodeAt(i - 1)
    const c = s.charCodeAt(i)
    if (c - pre === 1) {
      cur++
      max = Math.max(cur, max)
    } else {
      cur = 1
    }
  }
  return max
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 从浏览器地址栏输入 url 到显示页面的步骤

判断是否为合法 url，如果不是，则使用默认搜索引擎搜索
为合法 url，则根据对应的协议建立与服务器之间的联系，通过DNS解析domain为ip地址，并建立TCP连接
简历TCP连接之后，向特定服务器发送HTTP请求，获取对应的资源
服务器接收到请求后，根据请求的资源类型，返回对应的资源给浏览器
浏览器接收到资源后，解析HTML，生成DOM树和CSSOM树
浏览器根据DOM树和CSSOM树，生成渲染树
浏览器根据渲染树，将渲染树绘制到屏幕上
资源加载完毕后，会进行TCP四次挥手过程，关闭TCP连接

# 宏任务有哪些

宏任务：setTimeout、setInterval、I/O、UI rendering

# js字符串length的物理意义是什么

字符串的length属性表示字符串的长度，它是一个只读属性，用于获取字符串的长度。

在JavaScript中，字符串的长度是指字符串中字符的个数，而不是字节数。例如，字符串"Hello"的length属性值为5，因为它包含5个字符。

#查漏补缺

最近更新～: 2024/09/02, 15:15:58

← 好用工具