HTML基础知识
文章目录
CSS 选择器的权重与优先级
盒子模型
浮动 Float
CSS 选择器的权重与优先级对于一个元素，如果存在多个选择器,那么会通过各个类选择器的权重来计算其优先级。
权重分为 4 级，分别是：
代表内联样式，如 style=”xxx”，权值为 1000；
代表 ID 选择器，如#content，权值为 100；
代表类、伪类和属性选择器，如.content、:hover、[attribute]，权值为 10；
代表元素选择器和伪元素选择器，如 div、p，权值为 1。
需要注意的是：通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为 0。 权重值大的选择器其优先级也高，相同权重的优先级又遵循后定义覆盖前面定义的情况。
盒子模型
盒子宽度
在盒子模型中，我们设置的宽度都是内容宽度，不是整个盒子的宽度。而整个盒子的宽度是：内容宽度 + padding 宽度 + border 宽度 + margin 宽度。
为盒子指定样式box-sizing:border-box可以让盒子内容宽度变为：实际内容宽度 + pad ...
BEM命名规范
什么是 BEM 命名规范？Bem 是块（block）、元素（element）、修饰符（modifier）的简写，由 Yandex 团队提出的一种前端 CSS 命名命名约定。让你的前端代码更容易阅读和理解，更容易协作，更容易控制，更加健壮和明确，而且更加严密。
中划线-: 仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。
双下划线__: 用来连接块和块的子元素。
双中划线--: 用来描述一个块或者块的子元素的一种状态。
什么时候应该用 BEM 格式当需要明确关联性的模块关系时，应当使用 BEM 格式。比如只是一条公共的单独的样式，就没有使用 BEM 格式的意义：
123.hide { display: none !important; /* 没必要用 */}
命名实例:1234567<div class="article"> <div class="article__body"> <div class="tag"></div& ...
Vue3 学习笔记
因为写这篇文章的时候，发现vuepress解析含有Vue3代码片段的 markdown 文档有些问题，所以我把这篇博客放掘金上了，地址如下：
Vue3 学习笔记
网页回到页面指定位置的三种方式
在 web 的开发过程中，有时我们需要实现当点击一个按钮或超链接时，立刻滚动跳转到本页面中指定的位置。对此有很多的实现方式，但大体可以分为以下两类：
通过 html 锚点实现
通过 js 实现
通过 scrollTo() 实现
通过 Element.scrollIntoView()实现
今天的这篇文章，将讨论上述两类的实现原理与各自的优缺点。鉴于各种实现的 html 结构与 css 样式是共有的，所以我先将实现示例的共有的 html 结构与 css 样式列出来。
html 结构：
12345678910111213141516171819202122<html> <ul class="list"> <a name="topAnchor"></a> <li class="list__item" id="top">我是顶部</li> <li class="list__item">& ...
搜索引擎使用技巧
技巧 1：排除干扰项方式：关键词 1+空格+减号+关键词 2，即 关键词1 -关键词2
功能：排除一些不想要的关键词
示例：
1锤子 -锤子手机
示例中将在搜索结果排除与锤子手机相关的，只显示锤子本来的样子。
经过百度搜索的测试，有的关键词能排除掉，有的并不好使
技巧 2：精确搜索方式：给关键词加双引号，"关键词"
功能：只搜索引号里的字，少一个字或者把字拆开都不行
示例：
1"达拉不崩吧"
注意是英文的双引号
技巧 3：指定网站内搜索方式：site:域名 关键词
功能：只搜索指定域名的内容
示例：
1site:zhihu.com 前端
有一些站内自带的搜索并不好用，可以尝试这个搜索技巧。
技巧 4：指定文件格式方式：filetype:文件格式 关键词
示例：
1filetype:avi 你懂的
常见文件格式有doc、pdf、ppt等
技巧 5：指定在标题搜索方式：intitle:关键词
功能：搜索的关键词要出现在标题当中
技巧 6：指定在内容中搜索方式：intext:关键词、allintext:关键词1 关键词2、inurl:关 ...
网站
个人收藏夹一位大佬的收藏夹
码力全开资源库 很全很强大，独立开发者/设计干货/优质利器/工具资源…
文档
MDN | MDN-JS 标准内置对象 Web 技术权威文档
现代 JavaScript 教程 以最新标准为基准的 JS 教程
ES5 教程 阮一峰的 JS 教程
ES6 教程 阮一峰的 ES6 教程
Bash 脚本教程 阮一峰编写
ECMA ECMA 官网
菜鸟教程 涵盖多种语言的初级教程
腾讯云开发者手册
社区
Github 程序员同性交友社区
掘金 一个帮助开发者成长的社区
简书 有很多频道的创作社区
思否 解决技术问题的社区
stack overflow 同上，外网的
InfoQ
V2EX
鱼塘热榜 划水网站，收集了很多网站，当天热门文章
博客
阮一峰的网络日志
samanthaming 对前端小知识点的总结，并为每个知识点制作精美的小卡片。
css-tricks css 技巧文章
You-need-to-know-css CSS 的各种 DEMO，很全
animista CSS 动画可视化工具
电子书
前端电子书收集
SoBooks 免 ...
资源
收集一些常用的库、插件等资源，正在整理中…
前端常用
待整理
Vue
Vuesax 一个优质的 vue 的组件库
移动端
fastclick 解决移动端点击延迟 300ms 问题
better-scroll 移动端滚动插件
工具 & 插件
codota AI 代码智能提示（应用于代码编辑器）
Node
commander 提供了用户命令行输入和参数解析的强大功能
inquirer 与命令行进行交互
chalk 美化命令行打印样式
建站
Hexo 快速、简单且强大的网志框架
文章
跟着老司机玩转 Node 命令行
npm packageJson属性详解
概述package.json必须是一个严格的 json 文件，而不仅仅是 js 里边的一个对象。其中很多属性可以通过npm-config来生成
namepackage.json中最重要的属性是name和version两个属性，这两个属性是必须要有的，否则模块就无法被安装，这两个属性一起形成了一个 npm 模块的唯一标识符。模块中内容变更的同时，模块版本也应该一起变化。name属性就是你的模块名称，下面是一些命名规则:
name必须小于等于 214 个字节，包括前缀名称在内（如 xxx/xxxmodule）。
name不能以”_“或”.”开头
不能含有大写字母
name会成为 url 的一部分，不能含有 url 非法字符
下面是官网文档的一些建议：
不要使用和 node 核心模块一样的名称
name中不要含有”js”和”node”。 It’s assumed that it’s js, since you’re writing a package.json file, and you can specify the engine using the “engines ...
如何根据系统主题自动响应CSS深色模式
CSS 深色模式 (Dark Mode)在:root根元素中定义变量来设置主题的颜色。我建议你也这样做，因为这样会使这个过程容易得多。我定义的变量如下:
12345:root { --bg: #fff; --textColor: #004050; --borderColor: rgba(0, 0, 0, 0.15);}
:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，**:root** 表示 <html>元素，除了优先级更高之外，与 html 选择器相同。
如果希望在样式表中使用这些变量，可以这样做
123body { color: var(--bg);}
这样，如果你想改变你的主题颜色，所需要做的就是修改你定义的变量，所有使用这个变量的样式都会被更新。
现在我们需要定义一组新的变量，这些变量将在调用 CSS 深色模式时使用。对我来说，深色模式的变量是这样的:
123456/* 定义深色模式的颜色 */:root { --bg: rgb(30, 30, 34); --textCol ...
防抖与节流函数
防抖和节流的作用都是在高频事件中防止函数被多次调用，是一种性能优化的方案。
区别在于，防抖函数只会在高频事件结束后 n 毫秒调用一次函数，节流函数会在高频事件触发过程当中每隔 n 毫秒调用一次函数。
防抖函数触发高频事件后一段时间（wait）只会执行一次函数，如果指定时间（wait）内高频事件再次被触发，则重新计算时间。
封装123456789101112// 防抖函数function debounce(func, wait) { let timeout = null; return function() { let context = this; let args = arguments; if (timeout) clearTimeout(timeout); timeout = setTimeout(() => { func.apply(context, args); }, wait); };}
节流函数规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次 ...
