图像标签与链接标签

图像标签与链接标签

1. 图像标签 img

1-1 img 标签介绍

<img> 标签的作用是用来定义图片。

img 标签为单标签，所以没有尾标签。

img 标签有一个 必填的属性： src 属性，代表图片的路径。（路径可以为相对路径，绝对路径和网络路径）

<!-- img标签写法 -->
<img src="图片的路径">

1-2 img 标签属性

img 标签有多个属性，属性不分先后顺序，都必须写在标签名后，多个属性以空格分开。

img 标签的属性值以键值对的形式 key = "value"的格式，属性 = “属性值”。

img 标签的属性：

• src：表示图片的路径 URL。
• alt：起到一个文本提示作用，当图片路径出错或者图片加载失败时显示 alt 属性定义的文本，图片加载成功，则 alt 属性的内容会自动隐藏。
• title：定义鼠标在移动到元素上的文本提示。
• width：定义图像的宽度。
• height：定义图像的高度。
• border：定义图像的边框，已废弃，建议使用 css 里的 border 设置样式。

<img src="图片的路径" alt="图片无法显示提示" title="提示" width="宽度" heigh="高度" border="边框">

1-3 插入图片的类型

• 能够插入的图片类型是：jpg（jpeg）、png、gif、bmp等。

• 不能往网页中插入的图片格式是：psd、ai 等。

HTML 页面不是直接插入图片，而是插入图片的引用地址，所以要先把图片上传到服务器上。

2. 链接标签 a

2-1 a 标签介绍

HTML使用标签 <a> 来设置超文本链接。a 标签为双标签，需要有首尾标签。a 标签的 href 属性为必填属性，表示该 a 标签点击过后跳转网页的地址。

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

<a> 标签的使用事项：

• a 标签的 href 属性必须添加网络协议，如：HTTP 或者 HTTPS 协议，一般为 HTTPS 协议，不能单纯的编写网址。
• a 标签有很多默认样式。
  • 一个未访问过的链接显示为蓝色字体并带有下划线。
  • 访问过的链接显示为紫色并带有下划线。
  • 点击链接时，链接显示为红色并带有下划线。
  • 如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。
• a 标签默认在本页面跳转，不会新开一个网页跳转。
• a 标签的 href 属性如果为错误的网络地址，页面会跳转，但不会显示网页的内容。

2-2 a 标签属性

<a> 标签的属性：

• href：规定链接的目标 URL。
• title：定义鼠标在移动到元素上的文本提示。
• name：规定锚（anchor）的名称。
• download：指定被下载的超链接目标。该属性也可以设置一个值来规定下载文件的名称，所允许的值没有限制，浏览器将自动检测正确的文件扩展名并添加到文件。
• target：规定在何处打开目标 URL。
  • _blank：新窗口打开。
  • _parent：在父窗口中打开链接。
  • _self：默认，当前页面跳转。
  • _top：在当前窗体打开链接，并替换当前的整个窗体(框架页)。

<!-- href 定义url路径 -->
<a href="https://www.baidu.com">百度</a>

<!-- download 定义下载链接 -->
<a href="" download="">下载壁纸</a>

<!-- target 链接的打开方式 -->
<!-- 窗体打开，并替换当前的整个窗体 iframe -->
<a href="https://ww.baidu.com" target="_top">百度</a>

<!-- 当前页面跳转 -->
<a href="https://ww.baidu.com" target="_self">百度</a>

<!-- 在父窗口中打开链接 -->
<a href="https://ww.baidu.com" target="_parent">百度</a>

<!-- 新窗口打开 -->
<a href="https://ww.baidu.com" target="_blank">百度</a>

2-3 链接分类

外部链接：用来跳转外部网站的链接

<a href="https:www.baidu.com" target="_blank">百度</a>

内部链接（页面链接）：用来跳转网页内部的链接，直接链接页面名即可（注意页面路径）

<a href="03-链接标签的属性.html" target="_blank">链接标签的属性</a>

空链接：如果我们不想 a 标签跳转页面，我们可以设置 href 属性为 # 或 javascript:;

<a href="#">空链接</a>
<a href="javascript:;">空链接</a>

下载链接：用来下载文件的链接，文件格式可以为 .exe、.zip压缩包

<a href="HTML.zip">HTML学习文件下载</a>

网页元素链接：通过 a 标签的嵌套可以让内部的元素实现链接跳转（文本、图片、表格、音频、视频等都可以添加超链接）

<a href="https://www.runoob.com/" target="_blank">
    <img src="https://www.runoob.com/wp-content/themes/runoob/assets/img/runoob-logo.png" alt="">
</a>

邮件链接：

<a href="mailto:2738389567@qq.com">发送邮件链接</a>

2-4 锚点定位

a 标签还有一个重要的功能，那就是锚点定位。什么是锚点定位呢？通俗的讲，我们想要让页面跳转到的位置，就是锚点。锚点是一种超链接，只不过它是页面内部的超链接，它指向页面特定的部分。那么 a 标签实现锚点定位，需要两个部分组成：锚记 和 指向锚记的链接。

a 标签的 name 属性：规定锚（anchor）的名称。

<a name="label">锚（显示在页面上的文本）</a>

• 锚的名称可以是任何你喜欢的名字
• 可以使用 id 属性来替代 name 属性，命名锚同样有效
• 假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端，不会有错误发生
• 在使用锚点时 href 属性需要添加 # 字符标记

方法一：

使用 a 标签作为锚记和链接，俗称使用 name 定位

<a href="#header">点击此处到目标位置</a>
 
<a name="header">目标位置</a>

方法二：

使用 a 标签作为链接，使用其他元素（建议使用块元素）作为锚记，俗称 id 定位

<a href="#header">点击此处到目标位置</a>
<div id="header">这里是目标的位置</div>

3. 路径

在一个项目中页面和静态资源会非常多，通常会将不同的文件存放到不同的文件夹，当需要将资源引入到文档中时就需要通过文件存放的 路径 来指定文件的位置。路径分为两种：相对路径和绝对路径。

• 相对路径：相对于项目而言（一个文件夹）的路径。

• 绝对路径：在我们电脑硬盘上的路径或者网络路径。

3-1 目录文件夹和根目录

目录文件夹：实际上目录文件夹时一个普通的文件夹，这个文件存放了项目中所需要的文件

根目录：相对于一个项目，最外层的文件夹便是根目录

3-2 相对路径

以引用文件的所在位置作为参考基础，而建立的目录路径

相对路径分类	写法	说明
同级路径	./ 或者直接不写	引用文件位于当前文件的同级目录
子级路径（下一层路径）	/	引用文件位于当前文件的下一级目录
父级路径（上一层路径）	../	引用文件位于当前文件的上一级目录

<!-- 相对路径 -->
<a href="06-id属性锚点.html">同级目录</a>
<a href="./06-id属性锚点.html">同级目录</a>
<a href="../02-文本标签和区块标签/01-标题标签.html">上级目录</a>
<a href="下级目录/下级文件.html">下级目录</a>

3-3 绝对路径

是指目录下的绝对位置，直接到达目标文件的位置，通常从盘符开始。、

完整的描述文件位置的路径就是绝对路径，以web站点根目录为参考基础的目录路径。绝对路径名的指定是从树型目录结构顶部的根目录开始到某个目录或文件的路径，由一系列连续的目录组成，中间用斜线分隔，直到要指定的目录或文件，路径中的最后一个名称即为要指向的目录或文件。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的。

以盘符开始的绝对路径：

<a href="D:\My Study\HTML\03-图像与链接\06-id属性锚点.html">以盘符开始的绝对路径</a>

网络绝对路径：

<a href="https://www.baidu.com">网络路径</a>

相对路径 vs 绝对路径

• 大多数情况下使用绝对路径，因为相对路径有时候时相对的是命令行工具当前的工作目录
• 在读取文件或者设置文件时都会选择绝对路径