diff --git a/blog/front-edn-learn.md b/blog/front-edn-learn/basic.md
similarity index 53%
rename from blog/front-edn-learn.md
rename to blog/front-edn-learn/basic.md
index 9ef6f12fd252e0c8b2e3fea7235127ae3ca6b159..a2b8ec8f1ea9480fa25569a05de25b6d46cf2b15 100644
--- a/blog/front-edn-learn.md
+++ b/blog/front-edn-learn/basic.md
@@ -1,22 +1,6 @@
-# 笔记：web 前端开发入门
+# HTML 基本认知
-
-
-[](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 大浏览器
+## 1、常见 5 大浏览器
- IE
- 火狐 FireFox
@@ -24,7 +8,7 @@
- Safari
- 欧朋 Opera
-2、渲染引擎
+## 2、渲染引擎
| 浏览器 | 内核 |
| ------------ | ------- |
@@ -33,7 +17,7 @@
| Safari | Webkit |
| Chrome/Opera | Blink |
-3、Web 标准
+## 3、Web 标准
保证不同浏览器打开页面显示效果一样
@@ -43,11 +27,11 @@
| 表现 | CSS | 页面样式 |
| 行为 | JavaScript | 页面交互 |
-4、HTML
+## 4、HTML
Hyper Text Markup Language 超文本标记语言
-5、hello world
+## 5、hello world
需要设置显示`文件扩展名`
@@ -63,7 +47,7 @@ index.html
hello world
-6、HTML 骨架
+## 6、HTML 骨架
```html
@@ -80,7 +64,7 @@ index.html
- title 标题
- body 主体
-7、开发工具
+## 7、开发工具
- Visual Studio Code （首选）
- WebStorm
@@ -88,7 +72,7 @@ index.html
- DreamWeaver
- HBuilder
-8、VS Code 使用
+## 8、VS Code 使用
快速生成 html 网页结构：
@@ -100,7 +84,7 @@ index.html
- 浏览器打开：`Alt + B` / `option⌥ + B`
- ÏLive Server 打开：`[command⌘ + L, command⌘ + O]`
-9、注释
+## 9、注释
```html
@@ -109,12 +93,12 @@ index.html
- 浏览器中不显示注释内容
- 添加和取消注释快捷键：`command + /`
-10、标签结构
+## 10、标签结构
- 双标签 `<开始标签>内容`, 例如：`内容 `
- 单标签 `<标签 />`, 例如：`一级标题
-二级标题
-三级标题
-四级标题
-五级标题
-六级标题
-```
-
-
- 一级标题
- 二级标题
- 三级标题
- 四级标题
- 五级标题
- 六级标题
-
-
-同时选中下一个相同字符：`command + D`
-
-特点：
-
-- 独占一行
-- 文字加粗
-- 文字变大，h1->h6 文字逐渐变小
-
-13、段落标签 paragraph
-
-```html
-内容
-```
-
-
- 内容
-
-
-特点：
-
-- 段落之间存在间隙
-- 独占一行
diff --git a/blog/front-edn-learn/demo/table-1.html b/blog/front-edn-learn/demo/table-1.html
new file mode 100644
index 0000000000000000000000000000000000000000..8e830d69d840ef76d68f28b0bb0af28bd408ce11
--- /dev/null
+++ b/blog/front-edn-learn/demo/table-1.html
@@ -0,0 +1,18 @@
+
+
+ 表格大标题
+
+
+
+ 姓名
+ 年龄
+
+
+ Tom
+ 23
+
+
+ Jack
+ 24
+
+
\ No newline at end of file
diff --git a/blog/front-edn-learn/demo/table-2.html b/blog/front-edn-learn/demo/table-2.html
new file mode 100644
index 0000000000000000000000000000000000000000..a1dd6c07c7af664eb84b2bef0b609d31233fe449
--- /dev/null
+++ b/blog/front-edn-learn/demo/table-2.html
@@ -0,0 +1,30 @@
+
+
+ 表格大标题
+
+
+
+
+ 姓名
+ 年龄
+
+
+
+
+
+ Tom
+ 23
+
+
+ Jack
+ 24
+
+
+
+
+
+ 求和
+ 57
+
+
+
\ No newline at end of file
diff --git a/blog/front-edn-learn/demo/table-3.html b/blog/front-edn-learn/demo/table-3.html
new file mode 100644
index 0000000000000000000000000000000000000000..56752d450287c1b5fb55e4fb8782f67665c4f72c
--- /dev/null
+++ b/blog/front-edn-learn/demo/table-3.html
@@ -0,0 +1,28 @@
+
+
+ 表格大标题
+
+
+
+
+ 姓名
+ 年龄
+
+
+
+
+
+ Tom
+ 23
+
+
+ Jack
+
+
+
+
+
+ 求和: 57
+
+
+
\ No newline at end of file
diff --git a/blog/front-edn-learn/element.md b/blog/front-edn-learn/element.md
new file mode 100644
index 0000000000000000000000000000000000000000..b6c0d195175f0ec41f396129767b9ccf6a05b796
--- /dev/null
+++ b/blog/front-edn-learn/element.md
@@ -0,0 +1,316 @@
+# 标签元素
+
+## 1、标题标签 Heading
+
+`h1~h6`
+
+```html
+一级标题
+二级标题
+三级标题
+四级标题
+五级标题
+六级标题
+```
+
+
+ 一级标题
+ 二级标题
+ 三级标题
+ 四级标题
+ 五级标题
+ 六级标题
+
+
+同时选中下一个相同字符：`command + D`
+
+特点：
+
+- 独占一行
+- 文字加粗
+- 文字变大，h1->h6 文字逐渐变小
+
+## 2、段落标签 Paragraph
+
+```html
+内容
+```
+
+
+ 内容
+
+
+特点：
+
+- 段落之间存在间隙
+- 独占一行
+
+## 3、排版标签
+
+（1）换行符 Line Break
+
+```html
+第一行文本
+第一行文本
+
+特点
+
+- 单标签
+- 让文字强制换行
+
+（1）水平分割线 Horizontal Rule
+
+```html
+
+
+
+## 4、文本格式化标签
+
+推荐使用后者
+
+- b/strong 加粗
+- u/ins 下划线
+- i/em 倾斜
+- s/del 删除线
+
+```html
+加粗
+加粗
+
+下划线
+下划线
+
+倾斜
+倾斜
+
+删除线
+删除线
+```
+
+
+
+ 加粗
+ 加粗
+
+
+ 下划线
+ 下划线
+
+
+ 倾斜
+ 倾斜
+
+
+ 删除线
+ 删除线
+
+
+
+## 5、媒体标签
+
+（1）图片标签 Image
+
+```html
+
+```
+
+支持的格式 mp3 wav
+
+## 8、视频标签
+
+```html
+
+```
+
+支持的格式 mp4
+
+## 9、链接标签 Anchor
+
+```html
+文字内容
+
+
+百度
+```
+
+
+ 百度
+
+
+属性：
+
+- target: \_self 当前窗口打开（默认） / \_blank 新窗口打开
+
+Tips: chrome 地址栏双击可以看到完整地址
+
+网站的默认首页 index.html
+
+## 10、列表
+
+- 无序列表
+- 有序列表
+- 自定义列表
+
+（1）无序列表 Unordered List
+
+列表项 List Item
+
+```html
+
+```
+
+
+
+
+
+（2）有序列表 Ordered List
+
+```html
+
+ 苹果
+ 香蕉
+ 桃子
+
+```
+
+
+
+ 苹果
+ 香蕉
+ 桃子
+
+
+
+（3）自定义列表 Description List
+
+```html
+
+ 水果
+ 苹果
+ 香蕉
+ 桃子
+
+```
+
+
+
+ 水果
+ 苹果
+ 香蕉
+ 桃子
+
+
+
+标签含义
+
+- dt Description Term
+- dd Description Details
+
+## 11、表格
+
+（1）基本元素
+
+标签含义
+
+- tr Table Row
+- th Table Header
+- td Table Data
+
+table 属性：
+
+- border 边框宽度
+- width 表格宽度
+- height 表格高度
+
+[](demo/table-1.html ':include :type=code')
+
+[](demo/table-1.html ':include height=150')
+
+（2）表格结构，可以省略
+
+- thead 表格头部
+- tbody 表格主体
+- tfoot 表格底部
+
+[](demo/table-2.html ':include :type=code')
+
+[](demo/table-2.html ':include height=170')
+
+（3）合并单元格
+
+- 跨行合并（垂直）rowspan
+- 跨列合并（水平）colspan
+
+左上原则
+
+- 上下合并，保留最上
+- 左右合并，保留最左
+
+> Tips: 不能跨结构合并
+
+[](demo/table-3.html ':include :type=code')
+
+[](demo/table-3.html ':include height=170')
diff --git a/blog/front-edn-learn/index.md b/blog/front-edn-learn/index.md
new file mode 100644
index 0000000000000000000000000000000000000000..d9f5242b367bb6966e0be8698230db9ff318f0fd
--- /dev/null
+++ b/blog/front-edn-learn/index.md
@@ -0,0 +1,18 @@
+# 笔记：web 前端开发入门
+
+
+
+## 资源
+
+[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)
+
+
+## 内容
+
+1. [HTML基本认知](blog/front-edn-learn/basic.md)
+
+2. [标签元素](blog/front-edn-learn/element.md)
diff --git a/blog/vue.md b/blog/vue.md
new file mode 100644
index 0000000000000000000000000000000000000000..b42d3639c48c2e0558af45186837e43fb28f65b0
--- /dev/null
+++ b/blog/vue.md
@@ -0,0 +1,3 @@
+[](demo/demo.html ':include :type=code')
+
+[](demo/demo.html ':include height=95px')
diff --git a/doc/html.md b/doc/html.md
index 0264070a91d1df67ebd73c6601437714782861d6..04adc169d6900c52f082cd143bbb8388717216ad 100644
--- a/doc/html.md
+++ b/doc/html.md
@@ -1,6 +1,6 @@
# html
-[笔记：web前端开发入门](blog/front-edn-learn.md)
+[笔记：web前端开发入门](blog/front-edn-learn/index.md)
[HTML 快速参考](https://www.w3school.com.cn/html/html_quick.asp)
diff --git a/doc/vue.md b/doc/vue.md
index ffab78f91a5af81b7122c6b42294721cb60b54a9..84b2c8647e2871e5a250744471ebc3b6aa80a50f 100644
--- a/doc/vue.md
+++ b/doc/vue.md
@@ -4,3 +4,5 @@
```
+
+[vue.md](blog/vue.md)
\ No newline at end of file
+
+
+
+```
+
+（2）下级路径
+
+```html
+
+```
+
+（3）上级路径
+
+```html
+
+```
+
+## 7、音频标签
+
+```html
+