diff --git a/_sidebar.md b/_sidebar.md
index dd34011b8447c314e1011d705573f80c745c56ae..96aceef8ac6980de43285bcd1965d44bbce9d89d 100644
--- a/_sidebar.md
+++ b/_sidebar.md
@@ -4,6 +4,8 @@
- [Javascript](doc/javascript.md)
- [Css](doc/css.md)
- [Canvas](doc/canvas.md)
+ - [微信小程序](doc/miniprogram.md)
+ - [Vue.js](doc/vue.md)
- 后端
diff --git a/blog/demo/demo.html b/blog/demo/demo.html
new file mode 100644
index 0000000000000000000000000000000000000000..e11958a0f785087d59432e3d293b2d2b46230cfe
--- /dev/null
+++ b/blog/demo/demo.html
@@ -0,0 +1,52 @@
+
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/blog/front-edn-learn.md b/blog/front-edn-learn.md
new file mode 100644
index 0000000000000000000000000000000000000000..9ef6f12fd252e0c8b2e3fea7235127ae3ca6b159
--- /dev/null
+++ b/blog/front-edn-learn.md
@@ -0,0 +1,177 @@
+# 笔记：web 前端开发入门
+
+
+
+[](demo/demo.html ':include :type=code')
+
+[](demo/demo.html ':include height=95px')
+
+## 资源
+
+[2022 年前端学习路线图](https://www.bilibili.com/read/cv10431130)
+
+[黑马程序员 web 前端开发入门教程，前端零基础 html5+css3+前端项目视频教程](https://www.bilibili.com/video/BV1Kg411T7t9)
+
+[菜鸟教程-HTML 教程- (HTML5 标准)](https://www.runoob.com/html/html-tutorial.html)
+
+## HTML 认知
+
+1、常见 5 大浏览器
+
+- IE
+- 火狐 FireFox
+- 谷歌 Chrome
+- Safari
+- 欧朋 Opera
+
+2、渲染引擎
+
+| 浏览器 | 内核 |
+| ------------ | ------- |
+| IE | Trident |
+| FireFox | Gecko |
+| Safari | Webkit |
+| Chrome/Opera | Blink |
+
+3、Web 标准
+
+保证不同浏览器打开页面显示效果一样
+
+| 构成 | 语言 | 说明 |
+| ---- | ---------- | -------- |
+| 结构 | HTML | 页面元素 |
+| 表现 | CSS | 页面样式 |
+| 行为 | JavaScript | 页面交互 |
+
+4、HTML
+
+Hyper Text Markup Language 超文本标记语言
+
+5、hello world
+
+需要设置显示`文件扩展名`
+
+文件扩展名：`.html`
+
+index.html
+
+```html
+hello world
+```
+
+
+
+6、HTML 骨架
+
+```html
+
+
+
+
+
+
+
+```
+
+- html 最外层标签
+- head 头部
+- title 标题
+- body 主体
+
+7、开发工具
+
+- Visual Studio Code （首选）
+- WebStorm
+- Sublime Text
+- DreamWeaver
+- HBuilder
+
+8、VS Code 使用
+
+快速生成 html 网页结构：
+
+- `! + Tab` 多了一行代码``
+- `doc + Tab`
+
+快捷键
+
+- 浏览器打开：`Alt + B` / `option⌥ + B`
+- ÏLive Server 打开：`[command⌘ + L, command⌘ + O]`
+
+9、注释
+
+```html
+
+```
+
+- 浏览器中不显示注释内容
+- 添加和取消注释快捷键：`command + /`
+
+10、标签结构
+
+- 双标签 `<开始标签>内容`, 例如：`内容`
+- 单标签 `<标签 />`, 例如：`
`
+
+11、标签关系
+
+- 父子关系（嵌套关系）
+
+```html
+
+
+
+```
+
+- 兄弟关系（并列关系）
+
+```html
+
+
+```
+
+12、标题标签 Heading
+
+`h1~h6`
+
+```html
+一级标题
+二级标题
+三级标题
+四级标题
+五级标题
+六级标题
+```
+
+
+
+同时选中下一个相同字符：`command + D`
+
+特点：
+
+- 独占一行
+- 文字加粗
+- 文字变大，h1->h6 文字逐渐变小
+
+13、段落标签 paragraph
+
+```html
+内容
+```
+
+
+
+特点：
+
+- 段落之间存在间隙
+- 独占一行
diff --git a/doc/canvas.md b/doc/canvas.md
index 49d32d09e2d025ad2bea8cefc6f8c075028da809..4ebd5c10e59b3224e4f9f69f4a308a3739f1f4c4 100644
--- a/doc/canvas.md
+++ b/doc/canvas.md
@@ -1,6 +1,6 @@
# canvas
-[菜鸟教程 - HTML5