diff --git a/00-前端工具/01-VS Code的使用.md b/00-前端工具/01-VS Code的使用.md index 2b757e5..a6c9d10 100644 --- a/00-前端工具/01-VS Code的使用.md +++ b/00-前端工具/01-VS Code的使用.md @@ -541,8 +541,6 @@ GitLens 在 Git 管理上有很多强大的功能，比如： } ``` - - ### highlight-icemode：选中相同的代码时，让高亮显示更加明显【荐】 VSCode自带的高亮显示，实在是不够显眼。用插件支持一下吧。 @@ -554,9 +552,6 @@ VSCode自带的高亮显示，实在是不够显眼。用插件支持一下吧 参考链接：[vscode 选中后相同内容高亮插件推荐](https://blog.csdn.net/palmer_kai/article/details/79548164) - - - ### 颜色主题推荐： SynthWave '84 `SynthWave '84` 这个主题很酷。 @@ -577,7 +572,6 @@ VSCode自带的高亮显示，实在是不够显眼。用插件支持一下吧 ### Settings Sync 【荐】 - - 地址： - 作用：多台设备之间，同步 VS Code 配置。通过登录 GitHub 账号来使用这个同步工具。 @@ -605,4 +599,3 @@ css颜色高亮显示。 ## 参考链接 「Vscode」打造类sublime的高颜值编辑器：https://idoubi.cc/2019/07/08/vscode-sublime-theme/ - diff --git a/01-html/01-html标签图文详解（一）.md b/01-html/01-html标签图文详解（一）.md index b5b7c36..db02349 100644 --- a/01-html/01-html标签图文详解（一）.md +++ b/01-html/01-html标签图文详解（一）.md @@ -1,23 +1,18 @@ - > 本文最初于2015-10-01发表于[博客园](http://www.cnblogs.com/smyhvae/p/4850684.html)，并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。 > 以下是正文。 - 国庆节快乐，还在加班的童鞋，良辰必有重谢！ ## 本文主要内容 - - 头标签 - 排版标签：`

`     `

`     ``   `
`     `
`     `
`     `
`
 - 字体标记：`
`    ``    ``    ``    ``    ``
 - 超链接
 - 图片标签
 
-
-
 ## 前言
 
 ### web标准
@@ -29,26 +24,18 @@ web标准介绍：
 - web标准规范的分类：结构标准、表现标准、行为标准。
 - 结构：html。表现：css。行为：JavaScript。
 
-
 web标准总结：
 
 - 结构标准：相当于人的身体。html就是用来制作网页的。
 - 表现标准： 相当于人的衣服。css就是对网页进行美化的。
 - 行为标准： 相当于人的动作。JS就是让网页动起来，具有生命力的。
 
-
-
 ### 浏览器介绍
 
 浏览器是网页运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、猎豹浏览器、Safari和Opera等。如下图所示：
 
 ![](http://img.smyhvae.com/20170628_1352.png)
 
-
-
-
-
-
 浏览器内核：
 
 |浏览器 | 内核|
@@ -60,18 +47,9 @@ web标准总结：
 
 PS：「浏览器内核」也就是浏览器所采用的「渲染引擎」，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。**渲染引擎是兼容性问题出现的根本原因。**
 
-
-
 ### Sublime Text 的使用
 
-详情请移步至：[Sublime Text使用技巧](https://github.com/smyhvae/tools/blob/master/01-%E4%B8%AA%E4%BA%BA%E6%95%B4%E7%90%86/02-Sublime%20Text%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7.md)
-
-
-
-
-
-
-
+详情请移步至：[Sublime Text使用技巧](https://github.com/qianguyihao/Tools/blob/master/%E5%B8%B8%E7%94%A8%E5%B7%A5%E5%85%B7/02-Sublime%20Text%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7.md)
 
 ## 一、HTML的介绍
 
@@ -86,8 +64,6 @@ PS：「浏览器内核」也就是浏览器所采用的「渲染引擎」，渲
 
 **注意**：HTML语言不是一个编程语言(有编译过程)，而是一个**标记语言**(**没有编译过程**)，HTML页面直接由浏览器解析执行。
 
-
-
 #### HTML是负责描述文档语义的语言
 
 html中，除了**语义**，其他什么都没有。
@@ -101,8 +77,6 @@ html是一个纯本文文件（就是用txt文件改名而成），用一些标
 - 正确答案：给文本增加主标题的语义。
 - 错误答案：给文字加粗、加黑、变大。
 
-
-
 ### 2、HTML的历史
 
 ![html中标签发展趋势](http://img.smyhvae.com/20151001_1001.png)
@@ -129,18 +103,19 @@ XHTML是**严格的、纯净的**HTML。
 - dhtml：dynamic，动态的。`javascript + css + html`合起来的页面就是一个dhtml。
 - http：超文本传输协议。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP：邮件传输协议，ftp：文件传输协议。
 
-
 ### 4、HTML的编辑工具
 
+> 用的最多的编辑器是： VS Code 和 Sublime Text。
+
+- VS Code：最火的前端代码编辑器。
+- Sublime Text：很轻量的代码编辑器。
 - NotePad：记事本。
 - EditPlus：语法高亮显示。技巧： 根据颜色判断单词是否出错 （不是100%）。不好的地方：没有代码提示。
 - UltraEdit：根据颜色判断单词是否出错，可以显示2进制数据。
-- Sublime Text：新一代的代码编辑器（用的人很多）。
 - dw(dreamweaver，专业工具) ：建立WEB站点和应用程序的专业工具。它将布局功能、开发工具、代码编辑组合在一起。有代码提示。
 
 PS：后缀名不能决定文件格式，只能决定打开文件打开的方式。
 
-
 ### 5、计算机编码介绍
 
 计算机，不能直接存储文字，存储的是编码。
@@ -168,7 +143,6 @@ PS：后缀名不能决定文件格式，只能决定打开文件打开的方式
 
 毫无疑问，开发中，都用**UTF-8**编码吧，准没错。
 
-
 **中文能够使用的字符集两种：**
 
 - 第一种：UTF-8。UTF-8是国际通用字库，里面涵盖了所有地球上所有人类的语言文字，比如阿拉伯文、汉语、鸟语……
@@ -202,14 +176,9 @@ PS：后缀名不能决定文件格式，只能决定打开文件打开的方式
 - qq网、网易、搜狐都是使用gb2312。这些公司，都追求显示速度。
 - 新华网藏语频道，使用的是UTF-8，保证字符集的数量。
 
-
-
 对了，我们是怎么查看网页的编码方式的呢？在浏览器中打开网页，右键，选择“查看网页源代码”，找到me标签中的charset属性即可。
 那么，我们为什么可以查看网页的源代码呢？因为这个打开的网页已经存到我的临时文件夹里了，临时文件夹里的html是纯文本文件，纯文本文件自然剋以查看网页的源代码了。
 
-
-
-
 ### 6、HTML颜色介绍
 
 **颜色表示：**
@@ -225,9 +194,6 @@ PS：后缀名不能决定文件格式，只能决定打开文件打开的方式
  - 在数字视频中，对RGB三基色各进行8位编码就构成了大约1678万种颜色，这就是我们常说的真彩色。所有显示设备都采用的是RGB色彩模式。
  - RGB各有256级(0-255)亮度，256级的RGB色彩总共能组合出约1678万种色彩，即256×256×256=16777216。
 
-
-
-
 ## 二、HTML的规范
 
 - HTML是一个弱势语言
@@ -240,7 +206,6 @@ PS：后缀名不能决定文件格式，只能决定打开文件打开的方式
 
 目前，IE浏览器是完全不支持H5的，支持最好的是Opera浏览器，可以支持95%以上；其次是google，可以支持一部分H5。
 
-
 ### 1、编写XHTML的规范：
 
 （1）所有标记元素都要正确的嵌套，不能交叉嵌套。正确写法举例：`
`
@@ -258,10 +223,6 @@ PS：后缀名不能决定文件格式，只能决定打开文件打开的方式
 
 （6）XHTML文档开头必须要有DTD文档类型定义
 
-
-
-
-
 ### 2、HTML的基本语法特性
 
 #### （1）HTML对换行不敏感，对tab不敏感
@@ -290,8 +251,6 @@ HTML中所有的**文字之间**，如果有空格、换行、tab都将被折叠
 
 ![](http://img.smyhvae.com/20170629_2245.jpg)
 
-
-
 ## 三、HTML结构详解
 
 > 备注：
@@ -299,32 +258,31 @@ HTML中所有的**文字之间**，如果有空格、换行、tab都将被折叠
 > - 每个标签都有私有属性。也都有公有属性。
 > - html中表示长度的单位都是**像素**。HTML只有一种单位就是像素。
 
-HTML标签通常是成对出现的（**双边标记**），比如 `
` 和 `
`，也有单独呈现的标签（**单边标记**），如：`
`、`
`和``等。
+HTML标签通常是成对出现的（**双边标记**），比如 `
` 和 `
`，也有单独呈现的标签（**单边标记**），如：`
`、`
`和``等。
 
 属性与标记之间、各属性之间需要以空格隔开。属性值以双引号括起来。
 
+### 快速生成 html 的骨架
 
-
-#### 使用`Emmet`插件快速生成html的骨架
-
-在Sublime Text中安装`Emmet`插件。
-
-新建html文件，输入`html:xt`，按`Tab`键后（或者按Ctrl+E），自动生成的代码如下：
+**方式1**：在 VS Code 中新建 html 文件，输入`html:5`，按 `Tab`键后，自动生成的代码如下：
 
 ```html
-
-
+
+
 
-	
-	Document
+    
+    
+    
+    Document
 
 
-
+    
 
 
+
 ```
 
-新建html，输入`html:5`后，按 `Tab`键后，自动生成的代码如下：
+**方式2**：在Sublime Text中安装`Emmet`插件。新建html文件，输入`html:5`，按`Tab`键后，自动生成的代码如下：
 
 ```html
 
@@ -339,46 +297,44 @@ HTML标签通常是成对出现的（**双边标记**
 
 ```
 
+**方式3**：在Sublime Text中安装`Emmet`插件。新建html文件，输入`html:xt`，按`Tab`键后（或者按Ctrl+E），自动生成的代码如下：
 
+```html
+
+
+
+	
+	Document
+
+
 
+
+
+```
+
+上面的方式2和方式3中，我们会发现，第一行的内容有些不太一样，这就是我们接下来要讲的**文档声明头**。
 
 ### 1、文档声明头
 
 
-任何一个标准的HTML页面，第一行一定是一个以
+任何一个标准的HTML页面，第一行一定是一个以``开头的语句。
 
-```
- HTML4.01里面规定了**普通**和**XHTML**两大种规范。
-
-> HTML觉得自己有一些规定不严谨，比如，标签是否可以用大写字母呢？`
`
-
-> 所以，HTML就觉得，把一些规范严格的标准，又制定了一个XHTML1.0。在XHTML中的字母X，表示“严格的”。
-
-总结一下，HTML4.01一共有6种DTD，说白了，HTML第一行语句一共有6种：
+HTML4.01里面有两大种规范，每大种规范里面又各有3种小规范。所以一共6种规范（见下图）。
 
+HTML4.01里面规定了**普通**和**XHTML**两大种规范。HTML觉得自己有一些规定不严谨，比如，标签是否可以用大写字母呢？`
`所以，HTML就觉得，把一些规范严格的标准，又制定了一个XHTML1.0。在XHTML中的字母X，表示“严格的”。
 
+总结一下，HTML4.01一共有6种DTD。说白了，HTML的第一行语句一共有6种情况：
 
 ![](http://img.smyhvae.com/20170629_1600.png)
 
-
-
-
-
-
 下面对上图中的三种小规范进行解释：
 
 - **strict**：表示“严格的”，这种模式里面的要求更为严格。这种严格体现在哪里？有一些标签不能使用。
@@ -391,17 +347,40 @@ HTML4.01里面有两大种规范，每大种规范里面又各有3种小规范
 - **Frameset**：表示“框架”，在框架的页面使用。
 
 在sublime输入的html:xt，x表示XHTML，t表示transitional。
-HTML5中极大的简化了DTD，也就是说HTML5中就没有XHTML了（W3C自己打脸了）：
+
+在HTML5中极大的简化了DTD，也就是说HTML5中就没有XHTML了（W3C自己打脸了）：
 
 ```
 
 ```
 
-
-
-
 ### 2、头标签
 
+#### html5 的比较完整的骨架：
+
+```html
+
+
+
+    
+    
+	
+	
+    
+    
+    Document
+
+
+    
+
+
+```
+
+面试题：
+
+- 问：网页的head标签里面，表示的是页面的配置，有什么配置？
+- 答：字符集、关键词、页面描述、页面标题、IE适配、视口、iPhone小图标等等。
+
 头标签都放在头部分之间。包括：``、`<base>`、`<meta>`、`<link>`
 
  - `<title>`：指定整个网页的标题，在浏览器最上方显示。
@@ -410,26 +389,8 @@ HTML5中极大的简化了DTD，也就是说HTML5中就没有XHTML了（W3C自
  - `<body>`：用于定义HTML文档所要显示的内容，也称为主体标签。我们所写的代码必须放在此标签內。
  - `<link>`：定义文档与外部资源的关系。
 
+**meta 标签**：
 
-
-我们打开EditPlus软件，新建一个html文件，自动生成的代码如下：
-
-```html
-<!doctype html>
-<html lang="en">
- <head>
-  <meta charset="UTF-8">
-  <meta name="Generator" content="EditPlus®">
-  <meta name="Author" content="">
-  <meta name="Keywords" content="">
-  <meta name="Description" content="">
-  <title>Document
- 
- 
-
- 
-
-```
 上面的``标签都不用记，但是另外还有一个``标签是需要记住的：
 
 ```html
@@ -437,12 +398,9 @@ HTML5中极大的简化了DTD，也就是说HTML5中就没有XHTML了（W3C自
 ```
 上面这个标签的意思是说，3秒之后，自动跳转到百度页面。
 
-我们接下来对各个头标签进行介绍。
+常见的几种 meta 标签如下：
 
-
-#### （1）字符集 charset
-
-我们发现，在头标签中，有下面这种标签：
+（1）字符集 charset：
 
 ```html
 
@@ -450,13 +408,22 @@ HTML5中极大的简化了DTD，也就是说HTML5中就没有XHTML了（W3C自
 
 字符集用meta标签中的`charset`定义，meta表示“元”。“元”配置，就是表示基本的配置项目。
 
-
-charset就是charactor set（即“字符集”），这里采用的是。这个meta不用背，用sublime生成就行。
+charset就是charactor set（即“字符集”）。
 
 浏览器就是通过meta来看网页是什么字符集的。比如你保存的时候，meta写的和声明的不匹配，那么浏览器就是乱码。
 
 
-#### （2）定义“关键词”
+（2）视口 viewport：
+
+```html
+    
+```
+
+`width=device-width` ：表示视口宽度等于屏幕宽度。
+
+viewport 这个知识点，初学者还比较难理解，以后学 Web 移动端的时候会用到。
+
+（2）定义“关键词”：
 
 举例如下：
 
@@ -466,24 +433,12 @@ charset就是charactor set（即“字符集”），这里采用的是。这个
 
 这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到你。
 
-
-#### （3）定义“页面描述”
+（3）定义“页面描述”：
 
 meta除了可以设置字符集，还可以设置关键字和页面描述。
 
-
-我们把含有`meta`标签的这一行代码抽象一下：
-
-```html
-
-```
-
-name即“名字”，content即“内容”。
-
-
 只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做**SEO**（search engine optimization，搜索引擎优化）。
 
-
 设置页面描述的举例：
 
 ```html
@@ -495,43 +450,22 @@ name即“名字”，content即“内容”。
 ![](http://img.smyhvae.com/20170629_1743.png)
 
 
-#### （4）title标签
+**title 标签**:
+
+用于设置网页标题：
 
 ```html
-		网页的标题
+	网页的标题
 ```
-
 title也是有助于SEO搜索引擎优化的。
 
-
-#### html的完整骨架：
-
-综上所述，html的比较完整的骨架是这样：
+**base标签**：
 
 ```html
-	
-	
-	
-		
-		
-		
-		Document
-	
-	
-
-	
-	
+
 ```
 
-
-面试题：
-
-- 问：网页的head标签里面，表示的是页面的配置，有什么配置？
-- 答：字符集、关键词、页面描述、页面标题。（今后我们还能看见一些其他的配置：IE适配、视口、iPhone小图标等等）
-
-
-
-
+base 标签用于指定基础的路径。指定之后，所有的 a 链接都是以这个路径为基准。
 
 ### 3、``标签的属性
 
@@ -552,10 +486,8 @@ title也是有助于SEO搜索引擎优化的。
 
 ![](http://img.smyhvae.com/2015-10-02-cnblogs_html_05.gif)
 
-
 接下来，我们讲一下``里的各种标签的属性。
 
-
 ## 一、排版标签
 
 ### 注释标签
@@ -564,8 +496,6 @@ title也是有助于SEO搜索引擎优化的。
 
 ```
 
-
-
 ### 段落标签`
`
 
 ```html
@@ -581,7 +511,6 @@ title也是有助于SEO搜索引擎优化的。
 
 

 
-
 段落，是英语paragraph“段落”缩写。
 
 HTML标签是分等级的，HTML将所有的标签分为两种：
@@ -591,10 +520,8 @@ HTML标签是分等级的，HTML将所有的标签分为两种：
 - **容器级标签**：div、h系列、li、dt、dd。容器级标签里可以放置任何东西。
 
 
-
 从学习p的第一天开始，就要死死记住：**p标签是一个文本级标签，p里面只能放文字、图片、表单元素**。其他的一律不能放。
 
-
 错误写法：（尝试把 h 放到 p 里）
 
 ```html
@@ -606,16 +533,12 @@ HTML标签是分等级的，HTML将所有的标签分为两种：
 
 网页效果如下：
 
-
 ![](http://img.smyhvae.com/20170630_1102.png)
 
 上图显示，浏览器不允许你这么做，我们使用Chrome的F12审查元素发现，浏览器自己把p封闭掉了，不让你去包裹h1。
 
 PS：Chrome浏览器是世界上HTML5支持最好的浏览器。提供了非常好的开发工具，非常适合我们开发人员使用。审查元素功能的快捷键是F12。
 
-
-
-
 ### 块级标签 `
`和``
 
 > div和span是非常重要的标签，div的语义是division“分割”； span的语义就是span“范围、跨度”。
@@ -643,7 +566,6 @@ div标签是一个**容器级**标签，里面什么都能放，甚至可以放d
 span也是表达“小区域、小跨度”的标签，但是是一个**文本级**的标签。
 就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。
 
-
 span里面是放置小元素的，div里面放置大东西的。举例如下：
 
 span举例：
@@ -677,10 +599,6 @@ div举例：
 所以，我们亲切的称呼这种模式叫做“**div+css**”。**div标签负责布局，负责结构，负责分块。css负责样式**。
 
 
-
-
-
-
 ### 换行标签`
`（已废弃）
 
 当你打算结束一行，而又不想开始一个新段落时，`
 `标签就派上用场了。无论你将它置于何处，`
 `标签都会产生一个强制的换行。
@@ -742,8 +660,6 @@ This 
 is a para
graph with line breaks
 
 好吧，其实这个标签也用的比较少。
 
-
-
 ## 二、字体标签
 
 ### 标题
@@ -753,7 +669,6 @@ This 
 is a para
graph with line breaks
 
 ![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html_09.png)
 
-
 ### 字体标签``（已废弃）
 
 属性：
@@ -820,7 +735,6 @@ http://img.smyhvae.com/2015-10-01-cnblogs_html_13.png)
 |²|平方2（上标2）|`²`|
 |³|立方3（上标3）|`³`|
 
-
 ### 一些小标签/小标记
 
 - ``：下划线标记
@@ -833,18 +747,14 @@ http://img.smyhvae.com/2015-10-01-cnblogs_html_13.png)
 
 ![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html_15.png)
 
-
-
 上面的这几个标签，常用于做一些小装饰、小图标。比如：
 
 20180118_2340.png
 
 这张图中，我们通过查看京东网站的代码发现，箭头处的小图标都是用的标签``。
 
-
 div的主要目的是用来布局，而小装饰却可以用来
 
-
 ### 粗体标签``或``（已废弃）
 
 效果：
@@ -864,8 +774,6 @@ O2    53
 
 ![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html_16.png)
 
-
-
 ## 三、超链接
 
 超链接有三种形式：
@@ -879,7 +787,6 @@ a是英语`anchor`“锚”的意思，就好像这个页面往另一个页面
 
 href是英语`hypertext reference`超文本地址的缩写。读作“喝瑞夫”，不要读作“喝夫”。
 
-
 效果：
 
 ![Paste_Image.png](http://img.smyhvae.com/2015-10-01-cnblogs_html_17.png)
@@ -890,11 +797,6 @@ href是英语`hypertext reference`超文本地址的缩写。读作“喝瑞夫
 	点我点我
 ```
 
-
-
-
-
-
 **2、锚链接**：
 指给超链接起一个名字，作用是**在本页面或者其他页面的的不同位置进行跳转**。比如说，在网页底部有一个向上箭头，点击箭头后回到顶部，这个就是利用到了锚链接。
 首先我们要创建一个**锚点**，也就是说，使用`name`属性或者`id`属性给那个特定的位置起个名字。效果如下：
@@ -934,7 +836,6 @@ href是英语`hypertext reference`超文本地址的缩写。读作“喝瑞夫
 
 
 
-
 `title`属性举例：
 
 ```html
@@ -954,7 +855,6 @@ href是英语`hypertext reference`超文本地址的缩写。读作“喝瑞夫
 blank就是“空白”的意思，就表示新建一个空白窗口。为啥有一个_ ，就是规定，没啥好解释的。
 也就是说，如果不写`target=”_blank”`那么就是在相同的标签页打开，如果写了`target=”_blank”`，就是在新的空白标签页中打开。
 
-
 #### 备注1：分清楚img和a标签的各自的属性
 
 区别如下：
@@ -963,8 +863,6 @@ blank就是“空白”的意思，就表示新建一个空白窗口。为啥有
 
 
 ```
-
-
 #### 备注2：a是一个文本级的标签
 
 比如一个段落中的所有文字都能够被点击，那么应该是p包裹a：
@@ -987,7 +885,6 @@ blank就是“空白”的意思，就表示新建一个空白窗口。为啥有
 
 a的语义要小于p，a就是可以当做文本来处理，所以p里面相当于放的就是纯文字。
 
-
 ## 四、图片标签
 
 img: 代表的就是一张图片。是单边标记。
@@ -1026,7 +923,6 @@ img是自封闭标签，也称为单标签。
 
 img 是image“图片”的简写，src 是英语source“资源”的缩写。
 
-
 相对路径不会出现这种情况：
 
 ```html
@@ -1035,8 +931,6 @@ aaa/../bbb/1.jpg
 
 `../`要么不写，要么就写在开头。
 
-
-
 举例2：
 
 ```html
@@ -1047,7 +941,6 @@ aaa/../bbb/1.jpg
 
 ![Paste_Image.png](http://img.smyhvae.com/20151001_19.jpg)
 
-
 相对路径的面试题。现有如下文件层级图：
 
 ![](http://img.smyhvae.com/20170630_1133.png)
@@ -1064,7 +957,6 @@ aaa/../bbb/1.jpg
 
 ```
 
-
 #### 2、写法二：**绝对路径**
 
 绝对路径包括以下两种：
@@ -1110,11 +1002,8 @@ aaa/../bbb/1.jpg
 
 - 绝对不允许使用file://开头的东西，这个是完全错误的！
 
-
-
 ### img标签的其他属性
 
-
  - `width`：宽度
  - `height`：高度
  - `Align`：指图片的水平对齐方式，属性值可以是：left、center、right
@@ -1163,8 +1052,6 @@ aaa/../bbb/1.jpg
 （1）如果要想保证图片等比例缩放，请只设置width和height中其中一个。
 （2）如果想实现图文混排的效果，请使用align属性，取值为left或right。
 
-

-
 ### 热点问题
 
 指的是对图片的**局部区域**加超链接。
@@ -1205,11 +1092,7 @@ aaa/../bbb/1.jpg
 
 ![3.gif](http://img.smyhvae.com/3.gif)
 
-最后，送上妹子的近照一张。楼主已经仁至义尽了。
-
-![](http://img.smyhvae.com/2015-10-01-cnblogs_html_20150219214912_11994.jp)
-
-PS：美女图就不放在 GitHub 上了，这么多 star，放了也不合适。去我的[博客园](https://www.cnblogs.com/qianguyihao/p/4850684.html)看吧~
+最后，送上妹子的近照一张。楼主已经仁至义尽了：http://img.smyhvae.com/2015-10-01-cnblogs_html_20150219214912_11994.jpg
 
 怎么？还没看够？且看下文：[HTML标签----图文详解（二）](http://www.cnblogs.com/smyhvae/p/4852863.html)
 
@@ -1223,6 +1106,3 @@ PS：美女图就不放在 GitHub 上了，这么多 star，放了也不合适
 
 
 
-
-
-
diff --git a/03-CSS进阶/01-HTML基础强化.md b/03-CSS进阶/01-HTML基础强化.md
index 989e11f..303f8fc 100644
--- a/03-CSS进阶/01-HTML基础强化.md
+++ b/03-CSS进阶/01-HTML基础强化.md
@@ -36,6 +36,14 @@ html 的常见元素主要分为两类：head 区域的元素、body 区域的
 - base
 
 
+**base**：
+
+```html
+
+```
+
+base 标签用于指定基础的路径。指定之后，所有的 a 链接都是以这个路径为基准。
+
 ### 2、html 元素（body 区域）
 
 > body 区域的 html 元素，会直接出现在页面上。
@@ -46,13 +54,13 @@ html 的常见元素主要分为两类：head 区域的元素、body 区域的
 
 - span、em、strong
 
-- table、thead、tbody、tr、td
+- 表格元素：table、thead、tbody、tr、td
 
-- ul、ol、dl、dt、dd
+- 列表元素：ul、ol、dl、dt、dd
 
 - a
 
-- form、input、select、textarea、button
+- 表单元素：form、input、select、textarea、button
 
 div 是最常见的元素，大多数场景下，都可以用div（实在不行就多包几层div）。可见，**div 是比较通用的元素，这也决定了 div 的的语义并不是很明确**。
 
diff --git a/10-ES6/02-ES5中的一些扩展.md b/10-ES6/02-ES5中的一些扩展.md
index 01c83d3..9b0808a 100644
--- a/10-ES6/02-ES5中的一些扩展.md
+++ b/10-ES6/02-ES5中的一些扩展.md
@@ -74,7 +74,7 @@ ES5给Object扩展了一些静态方法，常用的有2个，我们接下来讲
 
 上方代码中，我们通过第5行的sex给obj2设置了一个新的属性`sex`，但是要通过`value`来设置属性值（第6行）。
 
-设置完属性值后，这个属性值默认是不可修改的，要通过`writable`来设置。总而言是，这几个关键字的解释如下：
+设置完属性值后，这个属性值默认是不可修改的，要通过`writable`来设置。总而言之，这几个关键字的解释如下：
 
 - `value`：设置属性值。
 
diff --git a/14-前端面试/07-安全问题：CSRF和XSS.md b/14-前端面试/07-安全问题：CSRF和XSS.md
index f1a3416..46eacde 100644
--- a/14-前端面试/07-安全问题：CSRF和XSS.md
+++ b/14-前端面试/07-安全问题：CSRF和XSS.md
@@ -138,7 +138,7 @@ Encode的作用是将`$var`等一些字符进行转化，使得浏览器在最
 
 **2、过滤：**
 
-- 移除用户输入的和事件相关的属性。如onerror可以自动触发攻击，还有onclick等。（总而言是，过滤掉一些不安全的内容）
+- 移除用户输入的和事件相关的属性。如onerror可以自动触发攻击，还有onclick等。（总而言之，过滤掉一些不安全的内容）
 
 - 移除用户输入的Style节点、Script节点、Iframe节点。（尤其是Script节点，它可是支持跨域的呀，一定要移除）。