HTML5经典面试题汇总
高频重点HTML语义化非语义元素例子：<div> 和 <span>
语义元素例子：form、table、<nav> 和 <header>有明确定义其内容
语义化的作用：
更好的内容结构：当页面在没有 CSS 的情况下也能呈现出很好地代码结构，易于阅读；
提升用户体验，如 title、alt 属性用于名词解释或图片内容说明，以及 label 标签的灵活运用等；
有利于SEO优化，与搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息，爬虫依赖于标签来确定上下文和各个关键字的权重；
可访问性：帮助屏幕阅读器等辅助技术更好的阅读和转译网页，利于无障碍阅读；
国际化：遵循 W3C 标准通用的语义化标签可以让各国开发者更容易弄懂你网页的结构；
可维护性：增强可读性，减少网页间的差异性，方便后期开发和维护；
语义化时注意事项：
少使用无语义的标签 div 和 span；
在语义不明显时，既可以使用 div 或者 p 时，尽量用 p，因为 p 在默认情况下有上下间距，对兼容特殊终端有利；
不要使用纯样式标签，如：b、font、u 等，改用 css ...
FastApi+Vue实现后台管理系统（登录功能）
前端退出登录功能1.在index.vue中定义一个<el-button>按钮，并且绑定一个点击事件@click="handlelogout"事件，、
2.然后在下方定义一个handlelogout()函数
12345function handlelogout () { showModel("是否要退出登录？").then(res => { console.log("退出登录"); })}
3.在util.js中封装一个提示框方法
12345678910111213import { ElMessageBox } from 'element-plus'export function showModel (content = "提示内容", type = "warning", title = ""){ return ElMessageBox.conf ...
FastApi+Vue实现后台管理系统（登录功能）
前端登录功能创建Vite项目官方文档：Vite
Vite是一个web开发构建工具，由于其原生ES模块导入方式，可以实现闪电般的冷服务器启动，
通过在终端中运行以下命令，可以使用Vite快速构建Vue项目。
12345678# npm 7+npm init vite@latest <project-name> -- --template vuecd <project-name>npm installnpm run dev
引入element-plus组件库官方文档：element-plus
1.在vscode中打开命令行终端输入npm install element-plus --save引入组件库
2.在src文件下的main.js中引入
12import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'
引入后结果：
1234567891011import { createApp } from 'vue ...
实用的JavaScript开发技巧
Number使用技巧取整
代替正数的Math.floor()，代替负数的Math.ceil()
1234const num1 = ~~3.14;const num2 = 3.14 | 0;const num3 = 3.14 >> 0;console.log(num1, num2, num3); // 3 3 3
补零123const FillZero = (num, len) => num.toString().padStart(len, "0");const num = FillZero(688, 5);console.log(num); // 00688
转数值
只对null、""、false、数值字符串有效
12345const num1 = +null;const num2 = +"";const num3 = +false;const num4 = +"688";console.log(num1, num2, num3, num4); // 0 0 0 688
时间戳1 ...
JavaScript核心基础和常用方法
Js核心基础字符串的常用方法
方法名称
描述
charAt()
获取指定位置的字符
substring()
提取字符串中，介于两个指定下标之间的字符
substr()
在字符串中指定的位置处，提取指定数目的字符
slice()
提取字符串的某个部分，类似于 substring() ，不同之处： 1、substring() 可以自动交换参数的位置，而 slice()不行 2、slice()的第一个参数可以是负数，而 substring()不行
toUpperCase()
把字符串转换为大写
toLowerCase()
把字符串转换为小写
indexOf
返回字符串中指定字符首次出现的索引
数据类型转换
方法名称
描述
Number()
将其他类型的值转换为数字
parseInt()
可以将参数转成整数
parseFloat()
可以将参数转成浮点数
String()
将其他类型的值转换成字符串 例如：String(123)
toString()
将其他类型的值转换成字符串 ，例如：(5).toString() 和 Strin ...
CSS/CSS3样式基础知识
CSS 4种书写位置特点与区别
引入方式
书写位置
作用范围
优先级
使用场景
内嵌样式
写在<style>标签中
当前页面
由书写位置和选择器优先级来共同决定
小案例 对网站首页首次打开速度要求很高的网页需要 如：百度、腾讯首页
行内样式
css 样式写在标签的 style 属性中
当前标签
最高
配合 JS 或特殊需求
外链样式
css 样式写在单独 css 文件中，通过 link 标签引入
多个页面
由书写位置和选择器优先级来共同决定
项目开发中高频使用
导入式样式
把@import 放在style标签中或 CSS 文件中，用于导入外部 CSS 样式文件
被导入的页面
最低
项目开发中几乎不用（用作了解即可）
CSS选择器的权重计算层叠性
TIP
CSS 全名叫 层叠式样式表 ，层叠性是它很重要的性质
层叠性：多个选择器可以同时作用于同一个标签，效果叠加
层叠性的冲突处理
TIP
多个选择器定义同一元素的冲突问题
CSS 有严密的处理冲突的规则
id 权重 > class权重 > 标签权重 > 通配符权重
复杂选择 ...
前端CSS易忘样式和属性记录
盒模型box-sizing：规定计算一个元素实际宽高的方式
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
值
描述
content-box
这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
border-box
为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit
规定应从父元素继承 box-sizing 属性的值。
CSS的书写位置
属性名称
描述
style
① 内嵌式，书写在 head 标签对中，使用<style></style>标签对，里面书写 css 样式。例如： <head> <style type="text/css"> h1 {color:red;} p {color:blue;} < ...
Git项目管理快速入门
Git是什么
Git的理解：
Git 是目前世界上最先进的分布式版本控制系统（没有之一），用于敏捷高效地处理任何或小或大的项目。
简单理解就是代码管理工具。使用 Git 一般处于以下 3 中原因：
1、代码管理
在本地写完代码后需要将代码备份到一个地方，Git 就给我们提供了一个仓库来进行存储和管理；
2、版本控制
如：我们开发一个项目，发布了很多个版本，想要查看之前某一个版本都更新了哪些内容 或 做版本回滚，就会非常的方便和快捷；
3、团队协作
当项目达到一定规模，会有多个人一起开发同一个项目（UI，前端，后端，运维），文件或代码都是放到同一个仓库的，这么多人同时操作仓库里的文件很容易造成混乱，Git 也提供了团队协作的支持。
Git的安装配置
在使用 Git 前我们得需要先安装 Git
Git 目前支持 Linux/Unix、Solaris、Mac 和 Windows 平台上运行。
Git 各平台安装包下载地址为：http://git-scm.com/downloads(opens new window)
完成安装之后，就可以使用命令行的 git 工具（已经自带了 s ...
CodeTop字节跳动前端算法
无重复字符的最长子串难度：中等 频度：41
题目：给定一个字符串 s ，请你找出其中不含有重复字符的 最长子串 的长度。
示例：
123输入: s = "abcabcbb"输出: 3 解释: 因为无重复字符的最长子串是 "abc"，所以其长度为 3。
1.思路：利用 数组 解法
代码：
123456789101112var lengthOfLongestSubstring = function(s) { let res=0; let arr = []; for(let i=0;i<s.length;i++){ if(arr.includes(s[i])){ arr.splice(0,arr.indexOf(s[i])+1)//如果重复了就删除前面所有的字符 } arr.push(s[i])//如果不重复就添加 res = Math.max(res,arr.length)//记录最长的长度 } return res//返回长度结果 利用数组 ...
代码随想录—JS算法学习
数组概念：数组是存放在连续内存空间上的相同类型数据的集合。
Tips:
数组下标都是从0开始的。
数组内存空间的地址是连续的。
数组的元素是不能删的，只能覆盖。
二分查找题目：给定一个 n 个元素有序的（升序）整型数组 nums 和一个目标值 target ，写一个函数搜索 nums 中的 target，如果目标值存在返回下标，否则返回 -1。
示例：
123输入: nums = [-1,0,3,5,9,12], target = 9 输出: 4 解释: 9 出现在 nums 中并且下标为 4
思路：这道题目的前提是数组为有序数组，同时题目还强调数组中无重复元素，因为一旦有重复元素，使用二分查找法返回的元素下标可能不是唯一的，这些都是使用二分法的前提条件。写二分法，区间的定义一般为两种，左闭右闭即[left, right]，或者左闭右开即[left, right)。
答案解析：
① 定义 target 是在一个在左闭右闭的区间里，即[left, right]。
因为定义target在[left, right]区间，所以有如下两点：
while ( ...