博主页面:鱿年年
博主推荐专栏:《WEB前端》
博主格言:追风赶月莫停留,平芜尽处是春山❤️
目录
一、图像标签和路径(重点)
1.图像标签
2.路径
二、超链接标签(!!!)
1.超链接的语法格式
2.超链接的分类
2.路径
(1)目录文件夹和根目录:
在实际工作中,我们的文件不能随便乱放,否则用起来很难很快的速度找到他们,因此我们需要一个文件夹来管理他们。
目录文件夹:就是普通文件夹,里面只不过存放了我们做页面所需要的相关素材,比如html文件、图片等。
根目录:打开目录文件夹的第一层就是根目录
(2)Vscode打开目录文件夹:
文件---打开文件夹,选择目录文件夹,后期非常方便管理文件。
路径
页面中的图片会非常多,通常我们会新建一个文件夹来存放这些图像文件(images),这时再查找图像,就需要采用“路径”的方式来指定图像文件的位置。
路径可以分为:
1.相对路径
2.绝对路径
相对路径:以引用文件所在位置为参考基础,而建立出的目录文件。简单来说,就是图片相对于HTML页面的位置。
相对路径分类 | 符号 | 说明 |
同一级路径 | 图像文件位于HTML文件同一级 如 | |
下一级路径 | / | 图像文件位于HTML文件下一级 如. |
上一级路径 | .../ | 图像文件位于HTML文件上一级 如 |
上一级路径
注意:相对路径是从代码所在的这个文件出发,去寻找目标文件的,而我们这里说的上一级,下一级和同一级就是图片相对于HTML页面的位置。
绝对路径:是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。
例如,“D:\web\img\logo.gif”或完整的网络地址“https://www.itcast.cn/images/logo.gif”。
在HTML标签中,标签用于定义超链接,作用是从一个页面链接到另外一个页面。
1.超链接的语法格式
单词anchor的缩写,意为:锚。
链接中的两个属性作用如下:
属性 | 作用 |
href | 用于指定链接目标的URL地址,(必须属性)当为标签应用href属性时,它就具有了超链接的功能。 |
target | 用于指定链接页面的打开方式,其中_self为默认值,_blank为在新窗口中打开方式 |
2.超链接的分类
1.外部链接:例如腾讯。
外部链接
1.外部链接
CSDN
target 打开窗口的方式 默认值是_self 当前窗口打开页面 _blank 新窗口打开页面
腾讯
代码实现:
2.内部链接:网站内部页面之间的相互链接,直接链接内部页面名称即可,例如首页。
代码实现:
外部链接
1.外部链接
CSDN
target 打开窗口的方式 默认值是_self 当前窗口打开页面 _blank 新窗口打开页面
腾讯
2.内部链接:网站内部页面之间的相互链接
图像标签
3.空链接:如果当时没有确定链接目标时,首页。
代码实现:
外部链接
1.外部链接
CSDN
target 打开窗口的方式 默认值是_self 当前窗口打开页面 _blank 新窗口打开页面
腾讯
2.内部链接:网站内部页面之间的相互链接
图像标签
3.空连接:#
地址
4.下载链接:如果href里面地址是一个文件或者压缩包,会下载这个文件。
代码实现:
外部链接
1.外部链接
CSDN
target 打开窗口的方式 默认值是_self 当前窗口打开页面 _blank 新窗口打开页面
腾讯
2.内部链接:网站内部页面之间的相互链接
图像标签
3.空连接:#
地址
4.下载连接:地址链接的是文件 .exe 或者是 zip 等压缩包形式
下载文件
5.网页元素链接:在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接的。
代码实现:
外部链接
1.外部链接
CSDN
target 打开窗口的方式 默认值是_self 当前窗口打开页面 _blank 新窗口打开页面
腾讯
2.内部链接:网站内部页面之间的相互链接
图像标签
3.空连接:#
地址
4.下载连接:地址链接的是文件 .exe 或者是 zip 等压缩包形式
下载文件
5.网页元素的链接
6.锚点链接:点击我们的链接,可以快速定位到页面中的某个位置。
(1)在链接文本的href属性中,设置属性值为#名字的形式,如CSDN.
(2)找到目标位置标签,里面添加一个id属性=刚才的名字,如:
赶快学起来吧!!!