前端
UI:
-
astro:https://docs.astro.build/zh-cn/tutorial/0-introduction/
-
nuxt-ui:https://ui.nuxt.com/getting-started/installation/nuxt
-
vuetifyjs-ui:https://vuetifyjs.com/zh-Hans/getting-started/installation/
-
material-ui:https://mui.com/material-ui/guides/responsive-ui
-
饿了么UI:https://element-plus.org/zh-CN/guide/installation.html
-
Bootstrap:https://v5.bootcss.com/docs/getting-started/introduction
-
daisyUI原生UI库:https://daisyui.com/docs/cdn/?lang=zh_hans
原生前端库 | 推荐库 | 官方地址 |
---|---|---|
工具类(数组/对象/日期) | 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 官网 |
GO语言学习:
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 |
根据不同的条件执行不同的操作 |
前端JS
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> |
定义网页的根标签 | 用于包裹整个网页的内容,是 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> |
在多语言文本中保持文本方向独立,避免语言之间的文本方向干扰。 |
❤️转载请注明出处❤️