This commit is contained in:
qianguyihao 2018-01-08 15:26:37 +08:00
parent 70a395ade3
commit 63075bf317

View File

@ -785,7 +785,7 @@ This <br> is a para<br>graph with line breaks
要求背诵的特殊字符有:`&nbsp;`、`&lt;`、`&gt;`、`&copy;`。
比如说,你想把`<p>`作为一个文本在页面上显示,直接写`<p>`是肯定不行的,因为这代表的是一个段落标签,所以这里需要用到转义字符。应该这么写:
比如说,你想把`<p>`作为一个文本在页面上显示,直接写`<p>`是肯定不行的,因为这代表的是一个段落标签,所以这里需要用到**转义字符**。应该这么写:
```html
这是一个HTML语言的&lt;p&gt;标签
```
@ -872,7 +872,7 @@ href是英语`hypertext reference`超文本地址的缩写。读作“喝瑞夫
![Paste_Image.png](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_17.png)
当然,我们也可以直接点链接,访问一个网址。举例如下;
当然,我们也可以直接点链接,访问一个网址。举例如下;
```
<a href="http://www.baidu.com" target="_blank">点我点我</a>
@ -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的语义要小于pa就是可以当做文本来处理所以p里面相当
img: 代表的就是一张图片。是单边标记。
img是自封闭标签也称为单标签。
#### 能插入的图片类型
#### 能插入的图片类型:
- 能够插入的图片类型是jpg(jpeg)、gif、png、bmp。类型和类型之间有什么区别css课上讲。
@ -993,15 +990,20 @@ img: 代表的就是一张图片。是单边标记。
> HTML页面不是直接插入图片而是插入图片的引用地址所以也要把图片上传到服务器上。
#### 属性:
### `src`属性:图片的相对路径和绝对路径
这里涉及到图片的一个属性:
- `src`属性:指图片的路径。
在写**图片的路径**时,有两种写法:
写法一:**相对路径**。相对当前页面所在的路径。两个标记.和.. ,分表代表当前目录和父路径。
在写**图片的路径**时,有两种写法:相对路径、绝对路径
#### 1、**写法一:相对路径**
相对当前页面所在的路径。两个标记 `.``..` 分表代表当前目录和父路径。
举例1
```html
<!-- 当前目录中的图片 -->
<img src="2.jpg">
@ -1012,7 +1014,6 @@ img: 代表的就是一张图片。是单边标记。
img 是image“图片”的简写src 是英语source“资源”的缩写。
img是自封闭标签也称为单标签。
相对路径不会出现这种情况:
@ -1024,9 +1025,8 @@ aaa/../bbb/1.jpg
举例2
```html
<img src="images/1.jpg">
```
@ -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
<img src="C:\Users\smyhvae\Desktop\html\images\1.jpg">
```
2网络路径。举例
```html
<img src="http://p1.yokacdn.com/pic/beauty/ytqx/2012/U278P1T117D698193F2577DT20120831155008_maxw808.jpg">
<img src="http://img.smyhvae.com/2016040102.jpg">
```
各位自己打开上面的网络连接看看是啥。
大家打开上面的img中的链接扫一扫可能有惊喜哦。
**相对路径和绝对路径的总结:**
### 相对路径和绝对路径的总结
相对路径的好处:站点不管拷贝到哪里,文件和图片的相对路径关系都是不变的。
相对路径使用有一个前提,就是网页文件和你的图片,必须在一个服务器上。
@ -1096,7 +1100,7 @@ aaa/../bbb/1.jpg
再来看看img标签的其他属性
### img标签的其他属性
- `width`:宽度
@ -1149,7 +1153,7 @@ aaa/../bbb/1.jpg
<br>
#### 热点问题
### 热点问题
指的是对图片的**局部区域**加超链接。
我们知道,如果给图片加一个超链接,那个点击这个图片的任意区域,都会跳转到新的位置。举例: