diff --git a/01-html/01-html标签图文详解(一).md b/01-html/01-html标签图文详解(一).md index 70faad3..ba64e1c 100644 --- a/01-html/01-html标签图文详解(一).md +++ b/01-html/01-html标签图文详解(一).md @@ -785,7 +785,7 @@ This
is a para
graph with line breaks 要求背诵的特殊字符有:` `、`<`、`>`、`©`。 -比如说,你想把`

`作为一个文本在页面上显示,直接写`

`是肯定不行的,因为这代表的是一个段落标签,所以这里需要用到转义字符。应该这么写: +比如说,你想把`

`作为一个文本在页面上显示,直接写`

`是肯定不行的,因为这代表的是一个段落标签,所以这里需要用到**转义字符**。应该这么写: ```html 这是一个HTML语言的<p>标签 ``` @@ -872,7 +872,7 @@ href是英语`hypertext reference`超文本地址的缩写。读作“喝瑞夫 ![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_17.png) -当然,我们也可以直接点金链接,访问一个网址。举例如下; +当然,我们也可以直接点进链接,访问一个网址。举例如下; ``` 点我点我 @@ -883,9 +883,6 @@ href是英语`hypertext reference`超文本地址的缩写。读作“喝瑞夫 - - - **2、锚链接**: 指给超链接起一个名字,作用是**在本页面或者其他页面的的不同位置进行跳转**。比如说,在网页底部有一个向上箭头,点击箭头后回到顶部,这个就是利用到了锚链接。 首先我们要创建一个**锚点**,也就是说,使用`name`属性或者`id`属性给那个特定的位置起个名字。效果如下: @@ -912,7 +909,7 @@ href是英语`hypertext reference`超文本地址的缩写。读作“喝瑞夫 ``` 效果:点击之后,会弹出outlook,作用不大。 -#### 超链接的属性: +### 超链接的属性 - `href`:目标URL - `title`:悬停文本。 @@ -983,9 +980,9 @@ a的语义要小于p,a就是可以当做文本来处理,所以p里面相当 img: 代表的就是一张图片。是单边标记。 +img是自封闭标签,也称为单标签。 - -#### 能插入的图片类型 +#### 能插入的图片类型: - 能够插入的图片类型是:jpg(jpeg)、gif、png、bmp。类型和类型之间有什么区别,css课上讲。 @@ -993,15 +990,20 @@ img: 代表的就是一张图片。是单边标记。 > HTML页面不是直接插入图片,而是插入图片的引用地址,所以也要把图片上传到服务器上。 -#### 属性: +### `src`属性:图片的相对路径和绝对路径 +这里涉及到图片的一个属性: - `src`属性:指图片的路径。 -在写**图片的路径**时,有两种写法: -写法一:**相对路径**。相对当前页面所在的路径。两个标记.和.. ,分表代表当前目录和父路径。 +在写**图片的路径**时,有两种写法:相对路径、绝对路径 + +#### 1、**写法一:相对路径** + +相对当前页面所在的路径。两个标记 `.` 和 `..` 分表代表当前目录和父路径。 举例1: + ```html @@ -1012,7 +1014,6 @@ img: 代表的就是一张图片。是单边标记。 img 是image“图片”的简写,src 是英语source“资源”的缩写。 -img是自封闭标签,也称为单标签。 相对路径不会出现这种情况: @@ -1024,9 +1025,8 @@ aaa/../bbb/1.jpg - - 举例2: + ```html ``` @@ -1038,7 +1038,7 @@ aaa/../bbb/1.jpg 相对路径的面试题。现有如下文件层级图: -![](http://img.smyhvae.com/20170630_1131.png) +![](http://img.smyhvae.com/20170630_1132.png) 问题:如果想在index.html中插入1.png,那么对应的img语句是? @@ -1053,21 +1053,25 @@ aaa/../bbb/1.jpg ``` +#### 2、写法二:**绝对路径** + +绝对路径包括以下两种: -写法二:**绝对路径**。包括以下两种: (1)以盘符开始的绝对路径。举例: + ```html ``` + (2)网络路径。举例: + ```html - + ``` -各位自己打开上面的网络连接看看是啥。 +大家打开上面的img中的链接,扫一扫,可能有惊喜哦。 - -**相对路径和绝对路径的总结:** +### 相对路径和绝对路径的总结 相对路径的好处:站点不管拷贝到哪里,文件和图片的相对路径关系都是不变的。 相对路径使用有一个前提,就是网页文件和你的图片,必须在一个服务器上。 @@ -1096,7 +1100,7 @@ aaa/../bbb/1.jpg -再来看看img标签的其他属性: +### img标签的其他属性 - `width`:宽度 @@ -1149,7 +1153,7 @@ aaa/../bbb/1.jpg
-#### 热点问题 +### 热点问题 指的是对图片的**局部区域**加超链接。 我们知道,如果给图片加一个超链接,那个点击这个图片的任意区域,都会跳转到新的位置。举例: