范仁义html+css课程---3、图片和超链接
一、总结
一句话总结：
img标签是图片标签，定义 HTML 页面中的图像
a标签是超链接标签，用于从一个页面链接到另一个页面。
1、img标签要点？
作用：img标签定义 HTML 页面中的图像。
常用属性：src（图像的 URL） 和 alt（图像的替代文本）。
示例：<img src="smiley-2.gif" alt="Smiley face" width="42" height="42">
2、a标签要点？
作用：a标签定义超链接，用于从一个页面链接到另一个页面
常用属性：a元素最重要的属性是 href 属性，它指定链接的目标
示例：<a href="http://www.fanrenyi.com">访问 范仁义的网站</a>
3、a标签的作用有哪些？
a、页面跳转
b、使用锚点定位
c、下载文件
4、相对路径和绝对路径是什么意思？
相对路径：指由这个文件所在的路径引起的跟其它文件（或文件夹）的路径关系。
绝对路径：目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
HTML绝对路径：带域名的文件的完整路径。
5、a标签中的href属性的值为#，表示什么意思？
|||-begin
<a href="#">内容</a>
|||-end
表示跳转到本页
二、图片标签（img标签）
课程对应的视频地址：3、图片和超链接
https://www.fanrenyi.com/video/2/8
1、标签定义及使用说明
<img> 标签定义 HTML 页面中的图像。
<img> 标签有两个必需的属性：src 和 alt。
注释：从技术上讲，图像并不会插入 HTML 页面中，而是链接到 HTML 页面上。<img> 标签的作用是为被引用的图像创建占位符。
src：规定显示图像的 URL。
alt：规定图像的替代文本。
<img src="smiley-2.gif" alt="Smiley face" width="42" height="42">
2、常见路径的写法
①相对路径：
相对路径就是指由这个文件所在的路径引起的跟其它文件（或文件夹）的路径关系。使用相对路径可以为我们带来非常多的便利。
Ⅰ -当图片在当前文件下一层时：文件夹名/图片名 例如：img/abc.jpg
Ⅱ-当图片与当前文件在同一层时：图片名 例如：src="abc.jpg"
Ⅲ-当图片在当前文件上一层时：../图片名 例如：src="../abc.jpg"
使用相对路径时，图片最外层只能放到网站根目录（图片必须要在项目文件夹中）
②绝对路径：
绝对路径是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。完整的描述文件位置的路径就是绝对路径，以web站点根目录为参考基础的目录路径。
HTML绝对路径(absolute path)指带域名的文件的完整路径。
写法file：///E:/aaa.png 但是，严禁使用
3、例子
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>img小实例</title> 6 </head> 7 <body> 8 <!--<img src="img/aa2.gif" alt="" style=" 100px;height: 100px">--> 9 <img src="../img/bb.jpg" alt=""> 10 <!--<img src="https://pic.cnblogs.com/avatar/1163900/20170531020338.png" alt="">--> 11 12 <!--绝对路径小实例--> 13 <!--<img src="C:UsersFan RenyiDesktopaa.gif" alt="">--> 14 15 </body> 16 </html>
三、超链接标签（a标签）
1、标签定义及使用说明
<a> 标签定义超链接，用于从一个页面链接到另一个页面。
<a> 元素最重要的属性是 href 属性，它指定链接的目标。
例如：
<a href="http://www.fanrenyi.com">访问 范仁义的网站</a>
2、属性
href：
规定链接的目标 URL。
target：
规定在何处打开链接文档。
| 值 | 描述 |
|---|---|
| _blank | 在新窗口中打开被链接文档。 |
| _self | 默认。在相同的框架中打开被链接文档。 |
| _parent | 在父框架集中打开被链接文档。 |
| _top | 在整个窗口中打开被链接文档。 |
| framename | 在指定的框架中打开被链接文档。 |
download：
定义了下载链接的地址。
例如:
<a href="/images/logo.png" download="/images/logo.png">
3、a标签的作用总结
a、页面跳转（跳转本地页面 和 跳转在线的页面）
在a标签的href属性里面指定目标页面即可
例如：
<a href="http://www.fanrenyi.com">访问 范仁义的网站</a>
b、使用锚点定位
设定锚点：
在要定位到的位置找一个标签给他加id属性，属性值就是锚点名称
定位锚点：
跳转到指定锚点
示例：
<a href="#top">内容</a> <!--#的意思是跳转到本页的id为top的标签处-->
<a href="#">内容</a> <!--#的意思是跳转到本页-->
c、下载文件
标签跳转到的文件 浏览器找得到，但是打不开，然后会选择提供下载
加上download属性一定download
比如：
<a href="/images/logo.png" download="/images/logo.png">
4、代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>a标签小实例</title> 6 </head> 7 <body> 8 <!--跳转到在线页面--> 9 <a href="https://fanrenyi.com" target="_blank">去范仁义的网站</a> 10 <a href="https://baidu.com">去百度</a> 11 12 <!--跳转到本地页面--> 13 <a href="img小实例.html">跳转到img小实例里面去</a> 14 15 <!--锚点小实例--> 16 <!--<div>--> 17 <!-- <a href="#part_1">去板块1</a>--> 18 <!-- <a href="#part_2">去板块2</a>--> 19 <!-- <a href="#part_3">去板块3</a>--> 20 <!--</div>--> 21 22 <!--<div id="part_1" style="height: 400px;background-color: red;">--> 23 <!-- 板块1--> 24 <!--</div>--> 25 <!--<div id="part_2" style="height: 400px;background-color: blue;">--> 26 <!-- 板块2--> 27 <!--</div>--> 28 <!--<div id="part_3" style="height: 400px;background-color: green;">--> 29 <!-- 板块3--> 30 <!--</div>--> 31 32 <!--a标签下载实例--> 33 <a href="aa.zip">aa.zip</a> 34 <!--<a href="aa.gif" download="aa.gif">a标签里面是img测试</a>--> 35 <a href="aa.gif">a标签里面是img测试</a> 36 </body> 37 </html>