范仁义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、例子

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>img小实例</title>

 </head>

 <body>

 <!--<img src="img/aa2.gif" alt="" style="width: 100px;height: 100px">-->

 <img src="../img/bb.jpg" alt="">

 <!--<img src="https://pic.cnblogs.com/avatar/1163900/20170531020338.png" alt="">-->

 <!--绝对路径小实例-->

 <!--<img src="C:\Users\Fan Renyi\Desktop\aa.gif" alt="">-->

 </body>

 </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、代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>a标签小实例</title>

 </head>

 <body>

 <!--跳转到在线页面-->

 <a href="https://fanrenyi.com" target="_blank">去范仁义的网站</a>

 <a href="https://baidu.com">去百度</a>

 <!--跳转到本地页面-->

 <a href="img小实例.html">跳转到img小实例里面去</a>

 <!--锚点小实例-->

 <!--<div>-->

 <!--    <a href="#part_1">去板块1</a>-->

 <!--    <a href="#part_2">去板块2</a>-->

 <!--    <a href="#part_3">去板块3</a>-->

 <!--</div>-->

 <!--<div id="part_1" style="height: 400px;background-color: red;">-->

 <!--    板块1-->

 <!--</div>-->

 <!--<div id="part_2" style="height: 400px;background-color: blue;">-->

 <!--    板块2-->

 <!--</div>-->

 <!--<div id="part_3" style="height: 400px;background-color: green;">-->

 <!--    板块3-->

 <!--</div>-->

 <!--a标签下载实例-->

 <a href="aa.zip">aa.zip</a>

 <!--<a href="aa.gif" download="aa.gif">a标签里面是img测试</a>-->

 <a href="aa.gif">a标签里面是img测试</a>

 </body>

 </html>