update

2017-06-30 17:37:31 +08:00 · 2017-06-30 17:37:31 +08:00 · 064ed07438
commit 064ed07438
parent 62afd11b51
1 changed files with 177 additions and 16 deletions
--- 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="这是美女">