从零开始学前端：链接跳转 --- 今天你学习了吗？（CSS：Day03）

从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（CSS）

复习：从零开始学前端：HTML的一些文本格式化标签、快捷键、和特殊符号 — 今天你学习了吗？（CSS：Day02）

前言

欢迎大家来到2022年，你们元旦过得怎么样，有没有很有意思的事情发生，我的一年以《穿过寒冬拥抱你》结束，事情并没有跌宕起伏，却很符合现实，整个故事平平淡淡，只有其中的一对老夫妻，让我感动了，后来看到好多影评人都说这是个烂剧，大家看过这部剧嘛？对此有什么看法呢？我的元旦以《李茂扮太子》而结束，属实是给我本就圆满的元旦画上了一个大结局，属实搞笑，大家有机会可以去看看哈~ 新的一年还要继续努力呀~ 把之前拉下的课程补上，大家一起加油。 ------ 一个人必须不停地写作，才能不被茫茫人海湮灭。

第三节课：整堂课主要是讲了链接的使用

一、图片标签

在HTML标签中，<img>标签用于定义HTML页面中的图像。
就比如小米官网中的商品图片，都是利用我们的图片标签来制作的。

怎么来引入一张图片呢？就是使用img标签，语法规则为

• <img src="URL">
• 单词image的缩写，意为图像。
• src是<img>标签的必须属性，它用于指定图像文件的路径和文件名。

二、属性

什么是属性呢？

所谓属性：简单理解就是属于这个图像标签的特性。其中"图像的URL"就是我们的src的属性值了。属性为HTML元素提供附加信息。HTML属性HTML标签可以拥有属性。属性提供了有关HTML元素的更多的信息。

三、目录文件夹和根目录文件夹

1. 目录文件夹：就是普通文件夹，里面只不过存放了我们做页面所需要的相关教材，比如html文件、图片等
2. 根目录：打开目录文件夹的第一层就是根目录。

四、相对路径

相对路径	符号	说明
同一级	./	图片位于HTML文件同一级<img src="./图片名字"/>
下一级	/	图片文件位于HTML下一级<img src="图片文件夹名字/图片名字"/>
上一级	…/	文件位于HTML文件上一级<img src="../图片名字"/>
上上级	…/…/	文件位于HTML文件上上级<img src="../../图片名字"/>

五、绝对路径

• 是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
• 例如：<img src="E:\use\image\image1.jpg"/>我们也可以直接复制网络上的地址使用：<img src="https://www.baidu.com/"/>

六、图片标签的属性

属性	属性值	说明
src	图片路径	必须属性（没有的话，图片显示不出）
alt	文本（程序员自定义）	替换文本，图像不能显示的时候显示alt里面的属性值
title	文本（程序员自定义）	提示文本，当鼠标放在图像上面，显示的提示信息
width	大小（单位像素）	设置图片宽度
height	大小（单位像素）	设置图片高度
boeder	大小（单位像素）	设置图片边框的粗细

^*建议：当我们设置图片大小（宽高）的时候，不要把高度和宽度同时定死，这样做的图片会失真、变形。所以我们建议图片一般设置刚度或则宽度，只设置其中一个边就可以。

七、图像标签的注意点

1. 图像标签可以拥有多个属性，必须写在标签名的后面。
2. 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
3. 属性采取键值对的格式，即key="value"的格式，属性=“属性值”。

八、问答

1. 图像标签的哪个属性是必须要写的？
   src路径属性必须要写
2. 请说出图像标签中alt和title属性区别？
   alt是当图片显示不出来替换图片的属性。Title是当鼠标移到图片上面的时候显示的图片标题。

九、图片标签的路径总结

图片路径分为：
相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。
绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
例如：<img src="E:\use\image\image1.jpg"/>

十、链接标签

在HTML标签中，<a>标签用于定义超链接，作用是从一个页面链接到另一个页面
链接的语法格式：<a href="跳转目标" target="目标窗口的弹出方式">文字或图像</a>
a----anchor的缩写 意为：锚。

属性	作用
href	用于指定链接目标的url地址，(必须属性)当此标签引用href的时候，他就具有了超链接的功能了
target	用于指定链接页面打开的方式，其中target=”_self”为默认值，表示在自身页面打开当属性值为：target=”_blank”的时候，表示在新的窗口页面打开。

十一、链接的分类

外部链接：例如<a href="http://www.baidu.com">百度</a>。
内部链接：内部网页的跳转(自己写的页面地址跳转，为内部网页链接)。
空链接：< a href="#"></ a> 当还没有链接跳转的地址，用# 来代替。
下载链接：地址链接的是文件 .exe 或者 .zip等压缩形式的文件< a href="img.zip"></a>。
网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。
锚点链接：点击链接可以快速定位到页面中的某个位置。
在链接文本的href属性中，设置属性值为#名字的形式，如< a href="#two">第2集< /a>。
找到目标位置标签，里面添加一个id属性=刚才的名字，如:< h3 id="two">第2集介绍</h3>。

预习：从零开始学前端：表格制作 — 今天你学习了吗？（CSS：Day04）

------少年辛苦终身事，莫向光阴惰寸功。