update
This commit is contained in:
parent
70a395ade3
commit
63075bf317
@ -785,7 +785,7 @@ This <br> is a para<br>graph with line breaks
|
||||
要求背诵的特殊字符有:` `、`<`、`>`、`©`。
|
||||
|
||||
|
||||
比如说,你想把`<p>`作为一个文本在页面上显示,直接写`<p>`是肯定不行的,因为这代表的是一个段落标签,所以这里需要用到转义字符。应该这么写:
|
||||
比如说,你想把`<p>`作为一个文本在页面上显示,直接写`<p>`是肯定不行的,因为这代表的是一个段落标签,所以这里需要用到**转义字符**。应该这么写:
|
||||
```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)
|
||||
|
||||
当然,我们也可以直接点金链接,访问一个网址。举例如下;
|
||||
当然,我们也可以直接点进链接,访问一个网址。举例如下;
|
||||
|
||||
```
|
||||
<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的语义要小于p,a就是可以当做文本来处理,所以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>
|
||||
|
||||
#### 热点问题
|
||||
### 热点问题
|
||||
|
||||
指的是对图片的**局部区域**加超链接。
|
||||
我们知道,如果给图片加一个超链接,那个点击这个图片的任意区域,都会跳转到新的位置。举例:
|
||||
|
Loading…
Reference in New Issue
Block a user