Vuetify (Vue生态): https://vuetifyjs.com/zh-Hans/getting-started/installation/
Element Plus (Vue生态): https://element-plus.org/zh-CN/guide/installation.html
Inspira UI (Vue生态现代组件集): https://inspira-ui.com/docs/cn/components
shadcn-vue (Vue生态): https://shadcn-vue.com/
Lew UI (Vue生态): https://app.tngeek.com/web/lew_ui/#/
Material Web (Google安卓原生风格): https://material-web.dev/
MUI (React生态, Google Material Design): https://mui.com/material-ui/getting-started/
Fluent UI (React生态，微软风格): https://react.fluentui.dev/
shadcn/ui (React生态): https://www.shadcn-ui.cn/docs/installation
coss ui (React生态，开发中): https://coss.com/ui/docs
HeroUI (React生态): https://heroui.com/
| 原生前端库 | 推荐库 | 官方地址 |
|---|---|---|
| 工具类（数组/对象/日期） | lodash 、 day.js | lodash 官网 / day.js 官网 |
| AJAX 数据请求 | axios | axios 官网 |
| 轻量级动画 | anime.js | anime.js 官网 |
| 复杂动画 | GSAP | GSAP 官网 |
| 简单 UI 组件 | Shoelace | Shoelace 官网 |
| 轻量前端框架 | Alpine.js | Alpine.js 官网 |
| 模板渲染 | Mustache.js | Mustache.js 官网 |
| 数据可视化 | Chart.js 、 D3.js | Chart.js 官网 / D3.js 官网 |
| 3D 渲染 | Three.js | Three.js 官网 |
| 播放器 | videojs | videojs 官网 |
| 在线UI设计 | pixso | pixso 官网 |
BootCDN：https://www.bootcdn.cn/
七牛云：https://www.staticfile.org/
jsDelivr国内镜像(非官方)：https://cdn.jsdmirror.com/
Gcore jsDelivr镜像：https://gcore.jsdelivr.net/
NPM 全库镜像：https://unpkg.com/
tailwindcss淘宝镜像：https://registry.npmmirror.com/tailwindcss-cdn/3.4.10/files/tailwindcss.js
| Go语言语法 | 中文理解 |
|---|---|
if |
如果...，则... |
else if |
否则如果...，则... |
else |
否则... |
for |
对于...，执行... |
range |
遍历... |
switch |
根据不同情况，选择执行... |
case |
情况...，执行... |
default |
默认情况下，执行... |
break |
跳出循环或 switch |
continue |
跳过本次循环，继续下一次循环 |
select |
在多个渠道中选择一个进行通信 |
defer |
延迟执行，直到函数结束时才执行 |
return |
返回函数结果 |
func |
定义一个...的功能 |
var |
定义一个变量 |
const |
定义一个常量 |
type |
定义一个新的类型 |
interface |
定义一个接口 |
struct |
定义一个结构体 |
map |
一个东西对应另一个东西 |
chan |
用于在 goroutine 之间传递数据 |
go |
启动一个新的 goroutine（轻量级线程） |
select |
监听多个通道的操作 |
make |
创建一个切片、映射或通道 |
new |
创建一个对象并返回其指针 |
len |
获取数据的长度 |
cap |
获取切片的容量 |
append |
向切片添加元素 |
copy |
复制切片 |
panic |
抛出运行时错误，通常会导致程序崩溃 |
recover |
捕获 panic 引发的异常 |
import |
从...拿... |
open |
打开...，然后读/写... |
:= |
简短声明并初始化变量 |
& |
获取变量的地址 |
* |
获取指针指向的值 |
interface{} |
任意类型的接口 |
switch |
根据不同的条件执行不同的操作 |
| JavaScript语法 | 通俗理解 |
|---|---|
let |
定义一个可以改变的东西 |
const |
定义一个不能改变的东西 |
箭头函数 (=>) |
更简洁地定义一个做事的方法 |
模板字符串 (反引号) |
可以更方便地做一串话，里面可以插入其他信息 |
解构 |
从一个大盒子里拿出我们需要的东西 |
展开/收集 |
把东西放开（复制）或收起来（合并成一个） |
async/await |
让你等某件事完成后再继续做，写法更简洁 |
Promise |
承诺过一会儿会告诉你事情是否完成 |
for...of |
一个个处理列表中的每一项 |
for...in |
检查一个东西里面的每个部分 |
map |
遍历列表中的每个元素，做相同的事情并返回新列表 |
filter |
从列表中挑选符合条件的元素，留下合适的部分 |
reduce |
把列表中的每一项合并成一个结果 |
Set |
只有不同的东西才能放进去的集合 |
Map |
存放一对一的关系（像名字和电话号码） |
Symbol |
定义独一无二的东西，避免重复的东西 |
Object.assign() |
把好几个东西放到一起合并成一个新东西 |
Object.entries() |
把东西的名字和值变成列表 |
Object.values() |
只取出东西的值，放成一个列表 |
Array.from() |
把类数组的东西变成真正的数组 |
Array.includes() |
判断某个东西是否在列表里 |
Array.find() |
找到符合条件的第一个东西 |
Array.findIndex() |
找到符合条件的第一个东西的位置 |
Array.some() |
判断列表里有没有符合条件的东西 |
Array.every() |
判断列表里每一项是否都符合条件 |
String.startsWith() |
判断一段话是否以某个词开头 |
String.endsWith() |
判断一段话是否以某个词结尾 |
String.includes() |
判断一段话是否包含某个词 |
import |
从其他地方拿来一些有用的东西 |
export |
把自己做的东西分享给别人使用 |
default |
设置一个默认的值，别人不特别指定就使用这个值 |
dynamic import |
按需加载东西，只有在需要的时候才去拿 |
BigInt |
处理非常大的数字 |
Nullish Coalescing |
只有当值是空的或没有时，才用后面的默认值 |
Optional Chaining |
如果中间某个部分不存在，不会报错，直接跳过 |
| 标签 | 用途 | 通俗解释 |
|---|---|---|
<html> </html> |
定义网页的根标签 | 用于包裹整个网页的内容，是 HTML 文档的起始和结束标签。 |
<head> </head> |
定义网页的头部信息 | 包含网页的一些元信息，比如标题、样式、字符集等，不会直接显示在页面上。 |
<body> </body> |
定义网页的主体内容 | 网页的主要内容区域，用户在浏览器中看到的文字、图片等都在这个区域。 |
<h1> </h1> 到 <h6> </h6> |
定义标题，级别从1到6 | 用来定义网页的标题，h1 是最重要的，h6 是最不重要的标题。 |
<p> </p> |
定义段落 | 用来表示网页中的一段文字，通常是段落内容。 |
<a> </a> |
定义超链接 | 用来创建超链接，用户点击链接后可以跳转到其他页面或资源。 |
<img> </img> |
用来插入图片 | 在网页中显示图片，src 属性指定图片的路径，alt 属性提供图片的描述。 |
<ul> </ul> |
定义无序列表 | 用来表示一个无序列表，每个列表项用 <li> 标签包裹。 |
<ol> </ol> |
定义有序列表 | 用来表示一个有序列表，每个列表项用 <li> 标签包裹，列表项会自动编号。 |
<div> </div> |
用来创建块级容器 | 用于将页面中的内容分成多个部分，常用于布局和结构化网页。 |
<span> </span> |
用来创建行内容器 | 用来包裹一小段文本或元素，通常用于样式处理或在不影响布局的情况下处理部分内容。 |
<form> </form> |
定义表单 | 用来创建用户输入的表单，通常包含各种输入框、按钮等。 |
<input> </input> |
定义输入框 | 用于创建各种类型的输入框，比如文本框、密码框、单选框等。 |
<table> </table> |
创建表格 | 用来创建表格，<tr> 用于行，<td> 用于单元格，<th> 用于表头单元格。 |
<style> </style> |
定义内嵌 CSS 样式 | 用于在 HTML 文档中写 CSS 样式，通常放在 <head> 标签内。 |
<script> </script> |
定义 JavaScript 脚本 | 用于在网页中插入 JavaScript 代码，通常用于交互、动态效果等。 |
<br> </br> |
换行符 | 用于强制换行，通常用于段落中需要换行的地方。 |
<hr> </hr> |
水平线 | 用于在网页中插入一条水平分隔线，常用于分隔不同内容区域。 |
<meta> |
提供网页的元数据 | 用于设置网页的字符集、描述、关键词等信息，通常放在 <head> 标签中。 |
<link> </link> |
引入外部资源 | 用于链接外部资源，比如外部 CSS 文件、网站图标等。 |
<iframe> </iframe> |
嵌入其他网页 | 用于在当前页面中嵌入另一个网页或内容。 |
<audio> </audio> |
嵌入音频 | 用于在网页中插入音频文件，controls 属性显示音频控制按钮。 |
<video> </video> |
嵌入视频 | 用于在网页中插入视频文件，controls 属性显示视频控制按钮。 |
<strong> </strong> |
强调文本 | 用来强调某段文本，通常显示为加粗。 |
<em> </em> |
强调文本 | 用来强调某段文本，通常显示为斜体。 |
<blockquote> </blockquote> |
引用内容 | 用来表示引用的文本，通常显示为缩进的格式。 |
<code> </code> |
显示代码 | 用来显示代码片段，通常显示为等宽字体。 |
<pre> </pre> |
保持文本格式 | 用来显示格式化的文本，保留空格和换行，通常用于显示源代码。 |
<id> |
唯一标识符 | 用于为页面元素指定唯一的标识符，可以在 JavaScript 或 CSS 中精确引用该元素。 |
<class> |
类名 | 用于为多个页面元素指定类名，可以对具有相同类名的元素应用统一的样式。 |
| HTML5 语法 | 效果 |
|---|---|
<!DOCTYPE html> |
使浏览器识别这是一个 HTML5 页面，按 HTML5 标准解析文档。 |
<html lang="en"> |
设置页面的语言为英语，浏览器会根据语言显示页面内容或选择语言特定的格式。 |
<meta charset="UTF-8"> |
确保网页正确显示中文及其他语言字符，避免出现乱码。 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
网页在手机等设备上自动调整大小，确保页面适应各种屏幕宽度，不会出现横向滚动条。 |
<header> |
页面顶部区域，通常包含网站的标题、导航菜单、logo 等，帮助用户了解页面主题。 |
<footer> |
页面底部区域，通常包含版权信息、联系方式等，提供网站的额外信息。 |
<section> |
页面中的一个内容区域，通常用于分隔不同主题的内容，提高页面结构的清晰度。 |
<article> |
显示独立的内容块，如一篇文章、博客或新闻，通常可以独立阅读或共享。 |
<nav> |
显示网站的导航菜单，通常包括链接，方便用户在页面间跳转。 |
<aside> |
页面旁边的辅助区域，常显示广告、推荐文章或其他与主要内容相关但不太重要的内容。 |
<figure> |
显示图片、图表等，通常带有说明文字，帮助用户理解图像内容。 |
<figcaption> |
为 <figure> 中的图片或图表添加描述性文字，帮助用户理解图像的含义或提供相关信息。 |
<video> |
页面内嵌视频播放器，允许用户播放视频内容，支持控制播放、暂停、音量等功能。 |
<audio> |
页面内嵌音频播放器，允许用户播放音频，支持控制音量、播放等功能。 |
<canvas> |
在页面上显示绘制的图形，可以用 JavaScript 动态绘制图形，如画图、游戏等。 |
<progress> |
显示一个进度条，帮助用户看到任务的完成进度，如文件上传、下载等。 |
<meter> |
显示一个测量结果的条形图，比如表示温度、湿度或其他数值范围的测量结果。 |
<mark> |
突出显示页面中的一部分文本，通常用来标记搜索结果中的关键词。 |
<output> |
显示用户输入或计算后的结果，通常用来显示表单计算或动态数据的输出结果。 |
<datalist> |
提供一个输入框的选项列表，用户在输入时可以选择列表中的建议内容，方便填写。 |
<input type="email"> |
在表单中创建一个电子邮件输入框，浏览器会验证输入是否符合电子邮件格式。 |
<input type="url"> |
在表单中创建一个网址输入框，浏览器会验证输入是否符合 URL 格式。 |
<input type="date"> |
在表单中创建一个日期选择框，用户可以点击选择器选择日期。 |
<input type="color"> |
在表单中创建一个颜色选择器，用户可以选择颜色并显示颜色值。 |
<input type="range"> |
创建一个滑动条，用户可以通过拖动滑块选择一个数值范围，常用于音量、亮度等控制。 |
<textarea> |
创建一个多行文本框，用户可以输入多行文字，适合长文本输入。 |
<select> |
创建一个下拉选择框，用户可以从下拉列表中选择一个选项。 |
<option> |
在 <select> 下拉框中显示一个选项，用户可以从中选择。 |
<button> |
创建一个按钮，用户可以点击按钮执行操作或提交表单。 |
<details> |
创建一个可展开的内容区域，用户点击后会展开或收起内容。 |
<summary> |
配合 <details> 使用，显示可展开区域的标题，点击后会展开/收起内容。 |
<output> |
显示计算或表单输入后的结果，通常用于动态交互应用。 |
localStorage |
将数据保存在用户浏览器中，页面刷新或关闭后数据依然存在，适合存储用户偏好设置等信息。 |
sessionStorage |
将数据保存在当前会话中，页面刷新或标签页关闭时数据会丢失，适合存储临时信息。 |
navigator.geolocation |
获取用户的地理位置信息，如经纬度，常用于地图、定位等功能。 |
canvas.getContext("2d") |
获取 2D 绘图上下文，允许在 <canvas> 元素上绘制图形，常用于绘制游戏、图表等。 |
fetch() |
发起网络请求，获取服务器数据，通常用于与后台交互，获取数据进行动态更新。 |
WebSocket |
实现浏览器与服务器之间的实时双向通信，常用于实时聊天、在线游戏等应用。 |
video.play() |
控制 <video> 元素播放视频，用户点击播放按钮后，视频会开始播放。 |
audio.play() |
控制 <audio> 元素播放音频，用户点击播放按钮后，音频会开始播放。 |
input.files |
获取用户在 <input type="file"> 中选择的文件，方便上传或处理文件数据。 |
target="_blank" |
设置 <a> 标签中的链接在新标签页或窗口中打开，而不是当前页面。 |
<bdi> |
保证特定文本部分的方向独立，通常用于多语言环境中，防止文本方向混乱。 |
<wbr> |
在文本中插入换行机会，浏览器会根据需要在指定的位置换行。 |
<time> |
显示日期或时间，浏览器可以将其格式化为标准的日期/时间格式，适合事件和日志展示。 |
<svg> |
在页面上创建矢量图形，支持动态修改和互动，常用于图标、图表等展示。 |
<source> |
在 <video> 或 <audio> 中提供多种格式的媒体文件，浏览器会选择支持的格式进行播放。 |
<track> |
提供视频或音频的字幕、描述等附加信息，常用于国际化字幕显示。 |
<bdi> |
在多语言文本中保持文本方向独立，避免语言之间的文本方向干扰。 |
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。