> 文档中心 > 从零开始学前端:链接跳转 --- 今天你学习了吗?(Day03)

从零开始学前端:链接跳转 --- 今天你学习了吗?(Day03)


从零开始学前端:程序猿小白也可以完全掌握!—今天你学习了吗?(Day03)

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

文章目录

  • 从零开始学前端:程序猿小白也可以完全掌握!—今天你学习了吗?(Day03)
    • 前言
    • 第三节课:整堂课主要是讲了链接的使用
      • 一、图片标签
      • 二、属性
      • 三、目录文件夹和根目录文件夹
      • 四、相对路径
      • 五、绝对路径
      • 六、图片标签的属性
      • 七、图像标签的注意点
      • 八、问答
      • 九、图片标签的路径总结
      • 十、链接标签
      • 十一、链接的分类

前言

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

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

一、图片标签

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

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

  • 单词image的缩写,意为图像。
  • src标签的必须属性,它用于指定图像文件的路径和文件名。

二、属性

什么是属性呢?

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

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

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

四、相对路径

相对路径 符号 说明
同一级 ./ 图片位于HTML文件同一级
下一级 / 图片文件位于HTML下一级
上一级 …/ 文件位于HTML文件上一级
上上级 …/…/ 文件位于HTML文件上上级

五、绝对路径

  • 是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。
  • 例如:从零开始学前端:链接跳转 --- 今天你学习了吗?(Day03)我们也可以直接复制网络上的地址使用:

六、图片标签的属性

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

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

七、图像标签的注意点

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

八、问答

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

九、图片标签的路径总结

图片路径分为:
相对路径:以引用文件所在位置为参考基础,而建立出的目录路径。
绝对路径:是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。
例如:从零开始学前端:链接跳转 --- 今天你学习了吗?(Day03)

十、链接标签

在HTML标签中,标签用于定义超链接,作用是从一个页面链接到另一个页面
链接的语法格式:
文字或图像
a----anchor的缩写 意为:锚。

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

十一、链接的分类

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

第2集介绍

预习:从零开始学前端:表格制作 — 今天你学习了吗?(Day04)

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