From 1ea0bfb172d96e978c6d9de2090344a75b447e86 Mon Sep 17 00:00:00 2001 From: pengshiyu <1940607002@qq.com> Date: Thu, 6 Jan 2022 13:12:43 +0800 Subject: [PATCH] fix --- .../basic.md} | 85 +---- blog/front-edn-learn/demo/table-1.html | 18 + blog/front-edn-learn/demo/table-2.html | 30 ++ blog/front-edn-learn/demo/table-3.html | 28 ++ blog/front-edn-learn/element.md | 316 ++++++++++++++++++ blog/front-edn-learn/index.md | 18 + blog/vue.md | 3 + doc/html.md | 2 +- doc/vue.md | 2 + 9 files changed, 428 insertions(+), 74 deletions(-) rename blog/{front-edn-learn.md => front-edn-learn/basic.md} (53%) create mode 100644 blog/front-edn-learn/demo/table-1.html create mode 100644 blog/front-edn-learn/demo/table-2.html create mode 100644 blog/front-edn-learn/demo/table-3.html create mode 100644 blog/front-edn-learn/element.md create mode 100644 blog/front-edn-learn/index.md create mode 100644 blog/vue.md 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 9ef6f12..a2b8ec8 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、标签结构 - 双标签 `<开始标签>内容`, 例如：`内容` - 单标签 `<标签 />`, 例如：`
` -11、标签关系 +## 11、标签关系 - 父子关系（嵌套关系） @@ -130,48 +114,3 @@ index.html ``` - -12、标题标签 Heading - -`h1~h6` - -```html -

一级标题

-

二级标题

-

三级标题

-

四级标题

-
五级标题
-
六级标题
-``` - - -

一级标题

-

二级标题

-

三级标题

-

四级标题

-
五级标题
-
六级标题
- - -同时选中下一个相同字符：`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 0000000..8e830d6 --- /dev/null +++ b/blog/front-edn-learn/demo/table-1.html @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + +
+ 表格大标题 +
姓名年龄
Tom23
Jack24
\ 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 0000000..a1dd6c0 --- /dev/null +++ b/blog/front-edn-learn/demo/table-2.html @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ 表格大标题 +
姓名年龄
Tom23
Jack24
求和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 0000000..56752d4 --- /dev/null +++ b/blog/front-edn-learn/demo/table-3.html @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ 表格大标题 +
姓名年龄
Tom23
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 0000000..b6c0d19 --- /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 +替换文本 +``` + +标签属性：属性名=属性值 + +## 6、资源路径 + +（1）当前路径 + +```html + + + + +``` + +（2）下级路径 + +```html + +``` + +（3）上级路径 + +```html + +``` + +## 7、音频标签 + +```html +