From e48bcf4eac832d968e0a8a938b18ac0068fadf0b Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Tue, 2 Oct 2018 22:10:26 +0800 Subject: [PATCH] udate img --- 00-前端工具/01-Git的使用.md | 35 +- .../02-第一次使用VS Code时你应该知道的一切配置.md | 27 + .../{02-VS Code.md => 03-VS Code的使用.md} | 34 +- 00-前端工具/whistle网络抓包.md | 23 + 00-前端工具/推荐链接.md | 70 - 01-html/01-html标签图文详解（一）.md | 70 +- 01-html/02-html标签图文详解（二）.md | 56 +- 02-CSS/01-CSS属性：字体属性和文本属性.md | 23 +- 02-CSS/02-CSS属性：背景属性.md | 8 +- 02-CSS/03-CSS样式表和选择器.md | 28 +- 02-CSS/04-CSS选择器：伪类.md | 4 +- 02-CSS/05-CSS样式表的继承性和层叠性.md | 4 +- 02-CSS/06-CSS盒模型详解.md | 6 +- 02-CSS/08-CSS属性：定位属性.md | 4 +- 02-CSS进阶/02.md | 126 ++ ...础：变量 (smyhvae-PC 的冲突副本 2018-08-10).md | 701 -------- .../02-JavaScript语法基础：变量.md | 1460 ++++++++--------- 03-JavaScript基础/05-函数.md | 4 +- 03-JavaScript基础/08-数组.md | 26 +- .../02-scroll家族和缓动动画.md | 37 +- .../03-client家族(可视区).md | 4 +- .../04-JS的小知识.md | 3 - 05-jQuery/01-jQuery的介绍和选择器.md | 4 +- 06-HTML5和CSS3/07-CSS3属性详解：Web字体.md | 18 +- 06-HTML5和CSS3/09-HTML5详解（二）.md | 23 +- 06-HTML5和CSS3/10-HTML5详解（三）.md | 5 +- 06-HTML5和CSS3/CSS3的常见边框汇总.md | 6 +- ...动和非阻塞机制.md => 00-事件驱动和非阻塞机制.md} | 6 +- 09-Node.js和模块化/01-Node.js入门.md | 9 +- .../02-JavaScript模块化03：CMD.md | 30 +- .../02-JavaScript模块化04：ES6.md | 583 +++---- 10-ES6/06-ES6：字符串、数组、对象的扩展.md | 6 + 16-前端基础/UserAgent.md | 2 +- 17-前端进阶/01-前端的几道题目.md | 91 - 18-前端面试/04-HTTP协议.md | 18 - 18-前端面试/07-安全问题：CSRF和XSS.md | 24 +- 18-前端面试/{web安全.md => z-web安全.md} | 0 18-前端面试/{其他.md => z-其他.md} | 0 18-前端面试/{推荐文章.md => z-推荐文章.md} | 0 .../{计算机网络.md => z-计算机网络.md} | 0 19-面试题积累/02-HTML和CSS相关.md | 6 +- 20-前端综合/2018年-前端日记.md | 72 +- 21-Vue基础/00-Vue的介绍和vue-cli.md | 2 +- 21-Vue基础/07-Vue-router路由.md | 106 +- 22-前端工程化/01-项目介绍.md | 7 +- 22-前端工程化/02-项目设计与原理分析.md | 19 +- 22-前端工程化/03-京东金融的首页.md | 4 +- 22-前端工程化/09-构建工具.md | 2 +- 22-前端工程化/Vue-router.md | 2 +- 22-前端工程化/Vue基础知识.md | 6 +- .../01-推荐链接-前端相关.md | 81 + .../推荐链接-互联网相关.md | 0 README.md | 10 +- 53 files changed, 1664 insertions(+), 2231 deletions(-) create mode 100644 00-前端工具/02-第一次使用VS Code时你应该知道的一切配置.md rename 00-前端工具/{02-VS Code.md => 03-VS Code的使用.md} (95%) delete mode 100644 00-前端工具/推荐链接.md create mode 100644 02-CSS进阶/02.md delete mode 100644 03-JavaScript基础/02-JavaScript语法基础：变量 (smyhvae-PC 的冲突副本 2018-08-10).md rename 09-Node.js和模块化/{事件驱动和非阻塞机制.md => 00-事件驱动和非阻塞机制.md} (98%) rename 18-前端面试/{web安全.md => z-web安全.md} (100%) rename 18-前端面试/{其他.md => z-其他.md} (100%) rename 18-前端面试/{推荐文章.md => z-推荐文章.md} (100%) rename 18-前端面试/{计算机网络.md => z-计算机网络.md} (100%) rename 推荐链接-前端相关.md => 23-推荐连接/01-推荐链接-前端相关.md (65%) rename 推荐链接-互联网相关.md => 23-推荐连接/推荐链接-互联网相关.md (100%) diff --git a/00-前端工具/01-Git的使用.md b/00-前端工具/01-Git的使用.md index 23e5d8f..f536186 100644 --- a/00-前端工具/01-Git的使用.md +++ b/00-前端工具/01-Git的使用.md @@ -73,7 +73,8 @@ git branch -d feature_item_recommend ### 合并分支时，如果存在分叉 -20180610_1650.png +![](http://img.smyhvae.com/20180610_1650.png) + 比如说上面这张图中，最早的时候，master分支是位于`C2`节点。我基于`C2`节点，new出一个新的分支`iss53`，我在`iss53`上提交了好几个commit。 @@ -97,11 +98,11 @@ Git 没有简单地把分支指针右移，而是对三方合并的结果作一 值得一提的是Git 可以自己裁决哪个共同祖先才是最佳合并基础；这和CVS 或Subversion（1.5 以后的版本）不同，它们需要开发者手工指定合并基础。所以此特性让Git 的合并操作比其他系统都要简单不少。 -20180610_1710.png +![](http://img.smyhvae.com/20180610_1710.png) ### 解决合并时发生的冲突 -20180610_1740.png +![](http://img.smyhvae.com/20180610_1740.png) 如果 feature1和feature2修改的是同一个文件中**代码的同一个位置**，那么，把feature1合并到feature2时，就会产生冲突。这个冲突需要人工解决。步骤如下： @@ -124,14 +125,27 @@ git自动合并成功。不管是git自动合并成功，还是在人工解决 ## 日常操作积累 -### 修改已经commit的备注信息 +### 修改密码（曲线救国） +> 网上查了很久，没找到答案。最终，在cld童鞋的提示下，采取如下方式进行曲线救国。 + +```bash +# 设置当前仓库的用户名为空 +git config user.name "" +``` + + +然后，当我们再输入`git pull`等命令行时，就会被要求重新输入*新的*账号密码。此时，密码就可以修改成功了。最后，我们还要输入如下命令，还原当前仓库的用户名： + +``` +git config user.name "smyhvae" +``` ### 修改已经push的某次commit的作者信息 -已经push的记录，如果要修改作者信息的话，只能 通过--force命令。 +已经push的记录，如果要修改作者信息的话，只能 通过--force命令。我反正是查了很久，但最终还是不敢用公司的仓库尝试。 参考链接： @@ -144,8 +158,6 @@ git自动合并成功。不管是git自动合并成功，还是在人工解决 - - ### 将 `branch1`的某个`commit1`合并到`branch2`当中 切换到branch2中，然后执行如下命令： @@ -159,16 +171,15 @@ git cherry-pick commit1 20180623时，网上看了下Git客户端的推荐排名： -20180623_1210.png +![](http://img.smyhvae.com/20180623_1210.png) +上面的Git客户端我基本都用过了，我最推荐的一款Git客户端是：**Tower**。 -### SmartGit +**SmartGit**： 商业用途收费， 个人用户免费： -20180623_1305.png - - +![](http://img.smyhvae.com/20180623_1305.png) diff --git a/00-前端工具/02-第一次使用VS Code时你应该知道的一切配置.md b/00-前端工具/02-第一次使用VS Code时你应该知道的一切配置.md new file mode 100644 index 0000000..95de76f --- /dev/null +++ b/00-前端工具/02-第一次使用VS Code时你应该知道的一切配置.md @@ -0,0 +1,27 @@ + + + +## 前言 + +VS Code 的全称是 Visual Studio Code，是微软推出的一款免费的、开源的跨平台编辑器。 + + + + + +## 常用快捷键 + + +### 编辑 + + +**删除文字**： + + +| 快捷键 | 作用 | 备注 | +|:-------------|:-----|:-----| +|delete|删除光标的前一个字符|相当于 Windows 键盘上的退格键| +|fn + delete|删除光标的后一个字符|| +|**option + delete**|删除光标之前的一个单词|英文有效| +|**command + delete**|删除光标之前的整行内容|【荐】| + diff --git a/00-前端工具/02-VS Code.md b/00-前端工具/03-VS Code的使用.md similarity index 95% rename from 00-前端工具/02-VS Code.md rename to 00-前端工具/03-VS Code的使用.md index 2cbbd25..886847e 100644 --- a/00-前端工具/02-VS Code.md +++ b/00-前端工具/03-VS Code的使用.md @@ -1,8 +1,10 @@ -## 常见操作 -### 自动保存 +## 常见配置 + + +**自动保存**： ``` "files.autoSave": "onFocusChange" @@ -12,6 +14,16 @@ +**在新的窗口中打开文件**： + +```json +"workbench.editor.enablePreview": false, +``` + + +## 常见操作 + + ### 如何查看代码结构 @@ -23,12 +35,6 @@ -### 在新的窗口中打开文件 - -```json -"workbench.editor.enablePreview": false, -``` - ### 在本地开启服务器 ```bash @@ -140,15 +146,17 @@ Sass 文件格式化。 在本地开启Node服务器： -20180611_2230.png +![](http://img.smyhvae.com/20180611_2230.png) 然后在浏览器的地址栏输入`http://localhost/` + 文件的相对路径，就可以通过服务器的形式打开这个文件。 ### Copy Relative Path +> 这个插件很有用，使用频率很高。 + 复制文件的相对路径：（相对于根路径而言） -20180611_2235.png +![](http://img.smyhvae.com/20180611_2235.png) ### open in browser @@ -238,10 +246,6 @@ VSCode自带的高亮显示，实在是不够显眼。用插件支持一下吧 -### 代码格式化 - - - ### 如何同时打开多个窗口 @@ -271,7 +275,7 @@ VSCode自带的高亮显示，实在是不够显眼。用插件支持一下吧 ### 某网友的VS Code 插件截图 -20180611_2255.png +![](http://img.smyhvae.com/20180611_2255.png) diff --git a/00-前端工具/whistle网络抓包.md b/00-前端工具/whistle网络抓包.md index a985bff..7063fef 100644 --- a/00-前端工具/whistle网络抓包.md +++ b/00-前端工具/whistle网络抓包.md @@ -29,6 +29,29 @@ whistle安装证书后，可以拦截 https 请求。但是，我现在又不想 +## 移动端调试神器:eruda +> 手机连接代理时，如何看console.log的日志信息? + +> 现在，代码里有console.log，如果是在电脑浏览器上看，可以直接在控制台查看console.log的内容。但是，如果手机连接代理，在手机上打开网页的话，要怎么查看console.log的内容呢？具体做法如下： + +（1）在 whistle中，新建一个名叫`Eruda H5`的代理，代理中的内容是： + +``` +http://xxx.com htmlAppend://{eruda.html} +``` + + +(2)新建一个values，里面的内容是： + +```html + + +``` + + +然后就OK了。 diff --git a/00-前端工具/推荐链接.md b/00-前端工具/推荐链接.md deleted file mode 100644 index df4e5bf..0000000 --- a/00-前端工具/推荐链接.md +++ /dev/null @@ -1,70 +0,0 @@ - - - -积累平时看到的一些好的前端文章。 - - - - -### 2017-08-17 - -- [面试分享：一年经验初探阿里巴巴前端社招](https://github.com/jawil/blog/issues/22) - -在公众号「web前端课程」上看到的文章。作者经历了4面，也是厉害了。另外，作者在gihub上的[博客](https://github.com/jawil/blog)也是出彩的。比如说下面这篇文章就值得推荐： - -- [挖 "掘" 淘 "金" 之 前端闯关历险记学习资料汇总](https://github.com/jawil/blog/issues/4) - -作者搜集了几百篇在掘金上看到的好文章，让人惊叹。 - - -### 2017-08-16 - -- [道阻且长啊TAT(前端面试总结)](https://segmentfault.com/a/1190000010631325?_ea=2359607) - -作者毕业于华科，面的是前端的实习，还拿了不少offer：百度外卖，头条，美团，狗东，其他，最终在美团实习。我最初是在[微信公众号](https://mp.weixin.qq.com/s/_clHr5a6_JzTos9bKpvKrA)上看到的文章。 - - -hello。我看你拿了不少实习offer。有没有推荐的前端学习资料呀？比如说：网站、链接、书籍等。可否分享给我？如果内容较多，欢迎发表成博客。谢啦～～～ - - -### 2017-08-01 - -- [资深Web技术专家曹刘阳：2016年前端技术观察](http://geek.csdn.net/news/detail/128912) - -有很多争议，[知乎](https://www.zhihu.com/question/53625757)上都有人评论了。 - - - -### 2017-07-31 - -- [你可能不需要 Vuex](https://github.com/chenbin92/blog/issues/1) - -这篇文章里的流程图画得挺好看的，gif图也很小，只有200多kb。我发邮件问作者用的什么软件，很幸运的是，得到了作者的回复。答案是： - -- 录制 GIF：[licecap](https://github.com/justinfrankel/licecap) - -- 画图：[processon免费在线作图](https://www.processon.com/) - - - - - - -### 2017-07-13 - -- [前端开发面试题](https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions) - -在逛公众号「前端大全」的时候发现的，然后顺着找到了对应的GitHub链接。面试题有答案哦。 - - - - - - -### 2017-01-20 - -- [阿里9年，我总结的前端架构演进3大阶段及团队管理心法](http://www.infoq.com/cn/news/2017/01/Ali-9-3) - -伟明的推荐，说是对前端开发的价值观形成有良好的影响。 - - diff --git a/01-html/01-html标签图文详解（一）.md b/01-html/01-html标签图文详解（一）.md index a35a8c8..cdb100f 100644 --- a/01-html/01-html标签图文详解（一）.md +++ b/01-html/01-html标签图文详解（一）.md @@ -105,7 +105,7 @@ html是一个纯本文文件（就是用txt文件改名而成），用一些标 ### 2、HTML的历史 -![html中标签发展趋势.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html166440-5b780bdc6b80a5fb.png) +![html中标签发展趋势](http://img.smyhvae.com/20151001_1001.png) 我们专门来对XHTML做一个介绍。 @@ -546,11 +546,11 @@ title也是有助于SEO搜索引擎优化的。 ``标签另外还有一些属性，这里用个例子来解释： -![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-02-cnblogs_html_39.png) +![](http://img.smyhvae.com/2015-10-02-cnblogs_html_39.png) 上方代码中，当我们对`点我点我`这几个字使用超链时，`link`属性表示默认显示的颜色、`alink`属性表示鼠标点击但是还没有松开时的颜色、`vlink`属性表示点击完成之后显示的颜色。效果如下： -![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-02-cnblogs_html_05.gif) +![](http://img.smyhvae.com/2015-10-02-cnblogs_html_05.gif) 接下来，我们讲一下``里的各种标签的属性。 @@ -577,7 +577,7 @@ title也是有助于SEO搜索引擎优化的。 - `align="属性值"`：对齐方式。属性值包括left center right。 举例： -![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html166440-1dcd2ad6e6353559.png) +![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html166440-1dcd2ad6e6353559.png)
@@ -635,7 +635,7 @@ div标签的属性： 效果举例： -![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_08.png) +![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html_08.png) div在浏览器中，默认是不会增加任何的效果的，但是语义变了，div中的所有元素是一个小区域。 div标签是一个**容器级**标签，里面什么都能放，甚至可以放div自己。 @@ -689,7 +689,7 @@ This
is a para
graph with line breaks ``` 效果如下： -![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html03.png) +![](http://img.smyhvae.com/2015-10-01-cnblogs_html03.png) 上图显示，**`

`标签和`
`标签的区别在于**：`

`标签会在段落的前后自动插入一个空行，而`
`标签没有空行；而且`
`标签没有属性。 @@ -702,7 +702,7 @@ This
is a para
graph with line breaks 水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。 效果如下： -![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_04.png) +![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html_04.png) 属性： - `align="属性值"`：设定线条置放位置。属性值可选择：left right center。 @@ -712,7 +712,7 @@ This
is a para
graph with line breaks - `noshade`：不要阴影，即设定线条为平面显示。若没有这个属性则表明线条具阴影或立体，这是内定值。 属性效果演示： -![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_05.png) +![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html_05.png)
@@ -721,7 +721,7 @@ This
is a para
graph with line breaks 此时center代表是一个标签，而不是一个属性值了。只要是在这个标签里面的内容，都会居于浏览器的中间。 效果演示： -![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_06.png) +![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html_06.png) 到了H5里面，center标签不建议使用。 @@ -734,7 +734,7 @@ This
is a para
graph with line breaks 效果演示： -![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_07.png) +![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html_07.png) 上图中，好像红框部分的字体变小了，而且还出现了缩进，好吧， 这个其实是浏览器搞的鬼。 为什么要有`

`这个标签呢？答案是：
@@ -751,7 +751,7 @@ This 
 is a para
graph with line breaks
 标题使用`
`至`
`标签进行定义。`
`定义最大的标题，`
`定义最小的标题。具有align属性，属性值可以是：left、center、right。
 效果演示：
 
-![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_09.png)
+![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html_09.png)
 
 
 ### 字体标签``（已废弃）
@@ -768,7 +768,7 @@ This 
 is a para
graph with line breaks
 ```
 效果：
 
-![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_10.png)
+![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html_10.png)
 
 ### 特殊字符（转义字符）
 
@@ -791,16 +791,16 @@ This 
 is a para
graph with line breaks
 ```
 正确的效果如下：
 
-![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_11.png)
+![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html_11.png)
 
 错误的效果如下：
 
-![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_12.png)
+![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html_12.png)
 
 其实我们只要记住前三个符号就行了，其他的在需要的时候查一下就行了。而且，EditPlus软件中是可以直接点击这些符号进行选择的：
 
 ![Paste_Image.png](
-http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_13.png)
+http://img.smyhvae.com/2015-10-01-cnblogs_html_13.png)
 
 来一张表格，方便需要的时候查询：
 
@@ -831,7 +831,7 @@ http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_13.png)
 
 效果：
 
-![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_15.png)
+![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html_15.png)
 
 
 
@@ -849,7 +849,7 @@ div的主要目的是用来布局，而小装饰却可以用来
 
 效果：
 
-![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_14.png)
+![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html_14.png)
 
 

 
@@ -862,7 +862,7 @@ O2    53
 ```
 效果：
 
-![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_16.png)
+![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html_16.png)
 
 
 
@@ -882,7 +882,7 @@ href是英语`hypertext reference`超文本地址的缩写。读作“喝瑞夫
 
 效果：
 
-![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_17.png)
+![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html_17.png)
 
 当然，我们也可以直接点进链接，访问一个网址。举例如下；
 
@@ -899,7 +899,7 @@ href是英语`hypertext reference`超文本地址的缩写。读作“喝瑞夫
 指给超链接起一个名字，作用是**在本页面或者其他页面的的不同位置进行跳转**。比如说，在网页底部有一个向上箭头，点击箭头后回到顶部，这个就是利用到了锚链接。
 首先我们要创建一个**锚点**，也就是说，使用`name`属性或者`id`属性给那个特定的位置起个名字。效果如下：
 
-![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_18.png)
+![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html_18.png)
 
 上图中解释：
 
@@ -1131,33 +1131,33 @@ aaa/../bbb/1.jpg
 ```
 效果：
 
-![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_20.png)
+![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html_20.png)
 
 `Alt`属性效果演示：
 
-![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_21.png)
+![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html_21.png)
 
  - 图片的`align`属性：**图片和周围文字的相对位置**。属性取值可以是：bottom（默认）、center、top、left、right。
 我们来分别看一下这`align`属性的这几个属性值的区别。
 1、`align=""`，图片和文字低端对齐。即默认情况下的显示效果：
 
-![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-02-cnblogs_html_19.png)
+![](http://img.smyhvae.com/2015-10-02-cnblogs_html_19.png)
 
 2、`align="center"`：图片和文字水平方向上居中对齐。显示效果：
 
-![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-02-cnblogs_html_21.png)
+![](http://img.smyhvae.com/2015-10-02-cnblogs_html_21.png)
 
 3、`align="top"`：图片与文字顶端对齐。显示效果：
 
-![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-02-cnblogs_html_22.png)
+![](http://img.smyhvae.com/2015-10-02-cnblogs_html_22.png)
 
 4、`align="left"`：图片在文字的左边。显示效果：
 
-![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-02-cnblogs_html_23.png)
+![](http://img.smyhvae.com/2015-10-02-cnblogs_html_23.png)
 
 5、`align="right"`：图片在文字的右边。显示效果：
 
-![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-02-cnblogs_html_24.png)
+![](http://img.smyhvae.com/2015-10-02-cnblogs_html_24.png)
 
 **注意事项：**
 （1）如果要想保证图片等比例缩放，请只设置width和height中其中一个。
@@ -1175,23 +1175,23 @@ aaa/../bbb/1.jpg
 上方代码表明：给图片加一个超链接，那个点击这个图片的任意区域，都会跳转到新的位置。
 现在，我只想对图片的局部区域加超链接，该怎么做呢？这里的难点在于坐标的确定，此时需要用到Dreamweaver。
 
-![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_22.png)
+![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html_22.png)
 
 上图中，切换到“设计”标签，然后：
 
-![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_23.png)
+![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html_23.png)
 
 上图中，点击菜单栏`插入-图像`，导入图片：
 
-![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_24.png)
+![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html_24.png)
 
 ，在图片上点击右键，选择`属性`，弹出属性面板：
 
-![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_25.png)
+![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html_25.png)
 
 上图中，我们可以利用红框部分的`地图`绘制需要添加超链接的区域。箭头处表示的是要链接到的文件。蓝框部分表示打开新页面的方式，蓝狂部分的`new`是没有下划线的，它和`_blank`的含义是一样的。
 
-![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_26.png)
+![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html_26.png)
 局部区域的热点设置完毕后，上图显示，红框部分就是多出的代码，也正是我们需要的代码。多出的代码如下：
 ```html
 
@@ -1203,11 +1203,11 @@ aaa/../bbb/1.jpg
 然后第02至第04行就给出了地图的定义。
 效果演示：
 
-![3.gif](http://7sby7r.com1.z0.glb.clouddn.com/3.gif)
+![3.gif](http://img.smyhvae.com/3.gif)
 
 最后，送上妹子的近照一张。楼主已经仁至义尽了。
 
-![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_20150219214912_11994.jpg)
+![](http://img.smyhvae.com/2015-10-01-cnblogs_html_20150219214912_11994.jpg)
 
 怎么？还没看够？且看下文：[HTML标签----图文详解（二）](http://www.cnblogs.com/smyhvae/p/4852863.html)
 
@@ -1217,7 +1217,7 @@ aaa/../bbb/1.jpg
 
 扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
 
-![](http://7sby7r.com1.z0.glb.clouddn.com/cnblogs/%E7%94%9F%E5%91%BD%E5%9B%A2%E9%98%9F%E5%85%AC%E4%BC%97%E5%8F%B7%E4%BA%8C%E7%BB%B4%E7%A0%81.jpg)
+![](http://img.smyhvae.com/cnblogs/%E7%94%9F%E5%91%BD%E5%9B%A2%E9%98%9F%E5%85%AC%E4%BC%97%E5%8F%B7%E4%BA%8C%E7%BB%B4%E7%A0%81.jpg)
 
 
 
diff --git a/01-html/02-html标签图文详解（二）.md b/01-html/02-html标签图文详解（二）.md
index 904966c..e184299 100644
--- a/01-html/02-html标签图文详解（二）.md
+++ b/01-html/02-html标签图文详解（二）.md
@@ -38,7 +38,7 @@
 
 效果：
 
-![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-02-cnblogs_html_01.png)
+![](http://img.smyhvae.com/2015-10-02-cnblogs_html_01.png)
 
 注意：
 
@@ -52,11 +52,11 @@
  - `type="属性值"`。属性值可以选： `disc`(实心原点，默认)，`square`(实心方点)，`circle`(空心圆)。
 效果如下：
 
-![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-02-cnblogs_html_02_1.png)
+![](http://img.smyhvae.com/2015-10-02-cnblogs_html_02_1.png)
 
 不光是`
    `标签有`type`属性，`
      `里面的`
    • `标签也有`type`属性（虽然说这种写法很少见）。效果如下：
 
-![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-02-cnblogs_html_03.png)
+![](http://img.smyhvae.com/2015-10-02-cnblogs_html_03.png)
 
 注意：项目符号可以是图片，但是通过CSS设置
    • 标记的背景图片来实现(CSS中讲)。
 
@@ -84,7 +84,7 @@
 ```
 效果：
 
-![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_40.png)
+![](http://img.smyhvae.com/2015-10-01-cnblogs_html_40.png)
 
 
 #### ul标签实际应用场景
@@ -115,7 +115,7 @@
 
 效果：
 
-![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-02-cnblogs_html_04.png)
+![](http://img.smyhvae.com/2015-10-02-cnblogs_html_04.png)
 
 **属性：**
  - `type="属性值"`。属性值可以是：1(阿拉伯数字，默认)、a、A、i、I。结合`start`属性表示`从几开始`。
@@ -149,7 +149,7 @@
 ```
 
 效果如下：
-![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-02-cnblogs_html_07.png)
+![](http://img.smyhvae.com/2015-10-02-cnblogs_html_07.png)
 
 和无序列表一样，有序列表也是可以嵌套的哦，这里就不举类似的例子了。
 
@@ -200,7 +200,7 @@ ol这个东西用的不多，如果想表达顺序，大家一般也用ul。举
 
 效果：
 
-![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-02-cnblogs_html_09.png)
+![](http://img.smyhvae.com/2015-10-02-cnblogs_html_09.png)
 
 
 上图可以看出，定义列表表达的语义是两层：
@@ -333,7 +333,7 @@ dt、dd都是容器级标签，想放什么都可以。所以，现在就应该
 ```
 效果：
 
-![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-02-cnblogs_html_10.png)
+![](http://img.smyhvae.com/2015-10-02-cnblogs_html_10.png)
 
 上图中的表格好像没看到边框呀，不急，接下来看看``标签的属性。
 
@@ -359,7 +359,7 @@ dt、dd都是容器级标签，想放什么都可以。所以，现在就应该
 
 单元格带边框的效果：
 
-![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-02-cnblogs_html_11.png)
+![](http://img.smyhvae.com/2015-10-02-cnblogs_html_11.png)
 
 备注：表格中很细表格边线的制作：
 CSS的写法：
@@ -397,11 +397,11 @@ style="border-collapse:collapse;"
  - `rowspan`：纵向合并。例如`rowspan="2"`表示当前单元格在垂直方向上要占据两个单元格的位置。
 效果举例：（横向合并）
 
-![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-02-cnblogs_html_13.png)
+![](http://img.smyhvae.com/2015-10-02-cnblogs_html_13.png)
 
 效果举例：（纵向合并）
 
-![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-02-cnblogs_html_15.png)
+![](http://img.smyhvae.com/2015-10-02-cnblogs_html_15.png)
 
 ### ``标签、``标签、``标签
 这三个标签有与没有的区别：
@@ -459,7 +459,7 @@ style="border-collapse:collapse;"
 
 效果：
 
-![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-02-cnblogs_html_17.png)
+![](http://img.smyhvae.com/2015-10-02-cnblogs_html_17.png)
 
 ## 框架标签
 
@@ -482,11 +482,11 @@ style="border-collapse:collapse;"
 
 效果：
 
-![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-02-cnblogs_html_26.png)
+![](http://img.smyhvae.com/2015-10-02-cnblogs_html_26.png)
 
 上图中，如果删掉页面right.html，显示效果如下：
 
-![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-02-cnblogs_html_27.png)
+![](http://img.smyhvae.com/2015-10-02-cnblogs_html_27.png)
 
 ### ``：框架
 一个框架显示一个页面。
@@ -507,11 +507,11 @@ style="border-collapse:collapse;"
 利用`name`这个属性，我们可以在框架里进行超链。
 举例：
 
-![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-02-cnblogs_html_28.png)
+![](http://img.smyhvae.com/2015-10-02-cnblogs_html_28.png)
 
 效果：
 
-![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-02-cnblogs_html_gif3.gif)
+![](http://img.smyhvae.com/2015-10-02-cnblogs_html_gif3.gif)
 
 
 
@@ -528,7 +528,7 @@ style="border-collapse:collapse;"
 
 
 效果：
-![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-02-cnblogs_html_29.png)
+![](http://img.smyhvae.com/2015-10-02-cnblogs_html_29.png)
 
 内嵌框架举例：（在内嵌页面中切换显示不同的压面）
 
@@ -548,7 +548,7 @@ style="border-collapse:collapse;"
 ```
 
 效果演示：
-![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-02-cnblogs_html_GIF.gif)
+![](http://img.smyhvae.com/2015-10-02-cnblogs_html_GIF.gif)
 
 
 
@@ -640,7 +640,7 @@ POST方式：
 ```
 效果：
 
-![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-02-cnblogs_html_33.png)
+![](http://img.smyhvae.com/2015-10-02-cnblogs_html_33.png)
 
 四种按钮的举例：
 
@@ -661,7 +661,7 @@ Node.js就是后台语言，到时候我们就知道怎么把表单存储到数
 
 效果：
 
-![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-02-cnblogs_html_35.png)
+![](http://img.smyhvae.com/2015-10-02-cnblogs_html_35.png)
 
 
 
@@ -718,7 +718,7 @@ select标签和ul、ol、dl一样，都是组标签。
 
 效果：
 
-![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-02-cnblogs_html_32.png)
+![](http://img.smyhvae.com/2015-10-02-cnblogs_html_32.png)
 
 ### ``标签：多行文本输入框
 
@@ -745,7 +745,7 @@ text就是“文本”，area就是“区域”。
 
 效果：
 
-![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-02-cnblogs_html_34.png)
+![](http://img.smyhvae.com/2015-10-02-cnblogs_html_34.png)
 
 上图的红框部分表示，我在文本区域进行了换行，所以显示的效果也出现了空白。
 
@@ -779,7 +779,7 @@ text就是“文本”，area就是“区域”。
 
 效果：
 
-![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-02-cnblogs_html_36.png)
+![](http://img.smyhvae.com/2015-10-02-cnblogs_html_36.png)
 
 
 
@@ -877,11 +877,11 @@ Flash格式的视频兼容性非常好，Flash格式的文件很小。
 ```
 IE 8中的运行效果：
 
-![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-02-cnblogs_html_37.png)
+![](http://img.smyhvae.com/2015-10-02-cnblogs_html_37.png)
 
 google浏览器中的运行效果：
 
-![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-02-cnblogs_html_38.png)
+![](http://img.smyhvae.com/2015-10-02-cnblogs_html_38.png)
 
 注：在HTML5中新增了`
      `：加粗的单元格。相当于`` + ``
  - 属性同``标签。
@@ -411,7 +411,7 @@ style="border-collapse:collapse;"
  - 属性：`align`，表示标题相对于表格的位置。属性取值可以是：left、center、right、top、bottom
 效果：
 
-![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-02-cnblogs_html_16.png)
+![](http://img.smyhvae.com/2015-10-02-cnblogs_html_16.png)
 
 ### 表格的`