From 064ed07438bdc694dfe3bf10c02f21d4b0c8caf3 Mon Sep 17 00:00:00 2001
From: qianguyihao <qianguyihao@gmail.com>
Date: Fri, 30 Jun 2017 17:37:31 +0800
Subject: [PATCH] update

---
 01-html/01-html标签.md | 193 +++++++++++++++++++++++++++++++++++++----
 1 file changed, 177 insertions(+), 16 deletions(-)

diff --git a/01-html/01-html标签.md b/01-html/01-html标签.md
index 5c662f2..8fb2fab 100644
--- a/01-html/01-html标签.md
+++ b/01-html/01-html标签.md
@@ -395,7 +395,7 @@ charset就是charactor set（即“字符集”）。这个meta不用背，用su
 当我们不设置的时候，sublime默认类型就是UTF-8。而一旦更改为gb2312的时候，就一定要记得设置一下sublime的保存类型： `文件→ set File Encoding to → Chinese Simplified(GBK)`。
 
 
-**重点2:UTF-8和gb2312的比较：**
+**重点2：UTF-8和gb2312的比较**
 
 保存大小：UTF-8（更臃肿、加载更慢） > gb2312 （更小巧，加载更快）
 
@@ -488,7 +488,7 @@ title也是有助于SEO搜索引擎优化的。
 ```
 
 
-面试题；
+面试题：
 
 - 问：网页的head标签里面，表示的是页面的配置，有什么配置？
 - 答：字符集、关键词、页面描述、页面标题。（今后我们还能看见一些其他的配置：IE适配、视口、iPhone小图标等等）
@@ -545,6 +545,40 @@ title也是有助于SEO搜索引擎优化的。
 
 <br>
 
+
+段落，是英语paragraph“段落”缩写。
+
+HTML标签是分等级的，HTML将所有的标签分为两种：
+
+- **容器级**：容器级别的标签，里面可以放置任何东西。
+
+- **文本级**：文本级的标签里面，只能放置文字、图片、表单元素。
+
+从学习p的第一天开始，就要死死记住：**p标签是一个文本级标签，p里面只能放文字、图片、表单元素**。其他的一律不能放。
+
+
+错误写法：（尝试把 h 放到 p 里）
+
+```html
+	<p>
+		我是一个小段落
+		<h1>我是一级标题</h1>
+	</p>
+```
+
+网页效果如下：
+
+20170630_1100.png
+
+上图显示，浏览器不允许你这么做，我们使用Chrome的F12审查元素发现，浏览器自己把p封闭掉了，不让你去包裹h1。
+
+PS：Chrome浏览器是世界上HTML5支持最好的浏览器。提供了非常好的开发工具，非常适合我们开发人员使用。审查元素功能的快捷键是F12。
+
+
+
+
+
+
 ### 换行标签`<br>`
 
 当你打算结束一行，而又不想开始一个新段落时，`<br> `标签就派上用场了。无论你将它置于何处，`<br> `标签都会产生一个强制的换行。
@@ -633,6 +667,12 @@ This <br> is a para<br>graph with line breaks
 
 ![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_09.png)
 
+qa
+b
+c
+
+
+
 ### 字体标签`<font>`
 
 属性：
@@ -736,10 +776,25 @@ O<sup>2</sup>    5<sub>3</sub>
 ```html
 <a href="02页面.html">点击进入另外一个文件</a>
 ```
+
+a是英语`anchor`“锚”的意思，就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。
+
+href是英语`hypertext reference`超文本地址的缩写。读作“喝瑞夫”，不要读作“喝夫”。
+
+
 效果：
 
 ![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_17.png)
 
+
+
+
+
+
+
+
+
+
 **2、锚链接**：
 指给超链接起一个名字，作用是**在本页面或者其他页面的的不同位置进行跳转**。比如说，在网页底部有一个向上箭头，点击箭头后回到顶部，这个就是利用到了锚链接。
 首先我们要创建一个锚，也就是说，使用`name`属性给那个特定的位置起个名字。效果如下：
@@ -747,8 +802,10 @@ O<sup>2</sup>    5<sub>3</sub>
 ![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_18.png)
 
 上图中解释：
+
 11行代码表示，顶部这个锚的名字叫做name1。
-然后在底部设置超链接，点击时将回到顶部。注意**上图中红框部分的`#`号不要忘记了**，表示跳到名为name1的特定位置，这是规定。如果少了`#`号，点击之后，就会跳到name1这个文件或者name1这个文件夹中去。
+然后在底部设置超链接，点击时将回到顶部（此时，网页中的url的末尾也出现了`#name1`）。注意**上图中红框部分的`#`号不要忘记了**，表示跳到名为name1的特定位置，这是规定。如果少了`#`号，点击之后，就会跳到name1这个文件或者name1这个文件夹中去。
+
 如果我们将上图中的第28行代码写成：
 ```html
 <a href="a.hhml#name1">回到顶部</a>
@@ -764,29 +821,93 @@ O<sup>2</sup>    5<sub>3</sub>
 ```
 效果：点击之后，会弹出outlook，作用不大。
 
-**超链接的属性：**
- - `href`：目标URL
- - `name`：主要用于设置一个锚点的名称。
- - `target`：告诉浏览器用什么方式来打开目标页面。`target`属性有以下几个值：
-> `_self`：在同一个网页中显示（默认值）
-> `_blank`：打开新的网页（新的标签页）显示
-> `_parent`：在父窗口中显示
-> `_top`：在顶级窗口中显示
+#### 超链接的属性：
+
+- `href`：目标URL
+- `title`：悬停文本。
+
+`title`属性举例：
 
-举例：
 ```html
-<a href="页面2.html" target="_blank">在新的页面中打开新的网页</a>
+<a href="09_img.html" title="很好看哦">结婚照</a>
 ```
 
-> 备注：`_parent`和`_top`值只能用在框架中。
+效果如下：
+
+20170630_1415.png
+
+- `name`：主要用于设置一个锚点的名称。
+- `target`：告诉浏览器用什么方式来打开目标页面。`target`属性有以下几个值：
+	- `_self`：在同一个网页中显示（默认值）
+	- `_blank`：**在新的窗口中打开**。
+	- `_parent`：在父窗口中显示
+	- `_top`：在顶级窗口中显示
+
+
+`target`属性举例：
+
+```html
+<a href="1.html" title="悬停文本" target="_blank">链接的内容</a>
+```
+
+blank就是“空白”的意思，就表示新建一个空白窗口。为啥有一个_ ，就是规定，没啥好解释的。
+也就是说，如果不写`target=”_blank”`那么就是在相同的标签页打开，如果写了`target=”_blank”`，就是在新的空白标签页中打开。
+
+
+#### 备注1：分清楚img和a标签的各自的属性
+
+区别如下：
+
+```html
+<img src="1.jpg" />
+<a href="1.html"></a>
+```
+
+
+#### 备注2：a是一个文本级的标签
+
+比如一个段落中的所有文字都能够被点击，那么应该是p包裹a：
+
+```html
+<p>
+	<a href="">段落段落段落段落段落段落</a>
+</p>
+```
+
+而不是a包裹p：
+
+```html
+<a href="">
+	<p>
+		段落段落段落段落段落段落
+	</p>
+</a>
+```
+
+a的语义要小于p，a就是可以当做文本来处理，所以p里面相当于放的就是纯文字。
+
 
 ## 5、图片标签
 
 img: 代表的就是一张图片。是单边标记。
-**属性：**
+
+
+
+#### 能插入的图片类型
+
+- 能够插入的图片类型是：jpg(jpeg)、gif、png、bmp。类型和类型之间有什么区别，css课上讲。
+
+- 不能往网页中插入的图片格式是：psd、ai
+
+> HTML页面不是直接插入图片，而是插入图片的引用地址，所以也要把图片上传到服务器上。
+
+#### 属性：
+
+
  - `src`属性：指图片的路径。
 在写**图片的路径**时，有两种写法：
 写法一：**相对路径**。相对当前页面所在的路径。两个标记.和.. ,分表代表当前目录和父路径。
+
 举例1：
 ```html
 <!-- 当前目录中的图片 -->
@@ -795,6 +916,23 @@ img: 代表的就是一张图片。是单边标记。
 <!-- 上一级目录中的图片 -->
 <img src="..\2.jpg">
 ```
+
+img 是image“图片”的简写，src 是英语source“资源”的缩写。
+
+img是自封闭标签，也称为单标签。
+
+相对路径不会出现这种情况：
+
+```html
+aaa/../bbb/1.jpg
+```
+
+`../`要么不写，要么就写在开头。
+
+
+
+
+
 举例2：
 ```html
 <img src="images/1.jpg">
@@ -804,6 +942,25 @@ img: 代表的就是一张图片。是单边标记。
 
 ![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_19.png)
 
+
+相对路径的面试题。现有如下文件层级图：
+
+20170630_1131.png
+
+问题：如果想在index.html中插入1.png，那么对应的img语句是？
+
+分析：
+
+现在document是最大的文件夹，里面有两个文件夹work和photo。work中又有一个文件夹叫做myweb。myweb文件夹里面有index.html。  所以index.html在myweb文件夹里面，上一级就是work文件夹，上两级就是document文件夹。通过document文件夹当做一个中转站，进入photo文件夹，看到了1.png。
+
+答案：
+
+```html
+<img src="../../photo/1.png" />
+```
+
+
+
 写法二：**绝对路径**。包括以下两种：
 （1）以盘符开始的绝对路径。举例：
 ```html
@@ -815,6 +972,9 @@ img: 代表的就是一张图片。是单边标记。
 ```
 各位自己打开上面的网络连接看看是啥。
 
+再来看看img标签的其他属性：
+
+
  - `width`：宽度
  - `height`：高度
  - `Align`：指图片的水平对齐方式，属性值可以是：left、center、right
@@ -823,7 +983,8 @@ img: 代表的就是一张图片。是单边标记。
  - `Hspace`：指图片左右的边距
  - `Vspace`：指图片上下的边距
 
- - `Alt`：当图片显示不出来的时候代替图片显示的内容
+ - `Alt`：当图片显示不出来的时候，代替图片显示的内容。alt是英语 alternate “替代”的意思。（有的浏览器不支持）
+
 举例：
 ```html
 <img src="images/1.jpg" width="300" height="`188" title="这是美女">