Head first HTML&CSS ---[学习笔记第二章]

时间:2022-11-10 23:36:49

这一章节的内容学习起来也相对很简单。俩个标签属性


一个<a> 超链接  另一个就是<img> 作用于获取图片的


首先我门来说这个<a> 标签, 我门经常在浏览网站的时候会去点击某个文字或者图片,之后就跳转到了其他页面。


这个操作其实就是有<a>标签来完成的。 格式基本上就是这样 <a href="www.baidu.com"> 百度</a>


这样其实我们在网站上看到的就是 “百度” 2个字,当我们点击之后 就会跳转到 www.baidu.com 这个地址去。 具体的工作原理 暂且不说。标签功能大概就是这样。


href 属性里面书写的 就是一段路径,一段点击这个链接之后 跳转到哪里的路径。


这里有个新的技术名词叫做 路径。并且分两种, 相对路径,绝对路径。


我们知道,在一个项目里面肯定有很多的文件夹或者叫目录的东西 分门别类的来存储我们的各种html , 图片 等资源。无论是管理还是维护这样都是最有效率的。


就像你在硬盘当中,下载的游戏,电影, 软件。 可能都会稍微的创建一些目录 来做分开保存,而不会全部都扔在一个文件下。


这个概念熟悉了以后我门来聊下这个路径。


所谓的相对路径 就是相对于你当前的位置,去寻找你要跳转的文件位置的路径。


是不是有点绕口?我们来书写一个目录 来去参考理解。


首先是根目录 D盘 , 他下面分别有二个文件夹 游戏,电影, D:/ 游戏, D:/电影


游戏下面有 扫雷,卡牌 D:/ 游戏/扫雷 D:/ 游戏/卡牌


电影下面有 喜剧电影,动作电影。D:/ 电影/喜剧电影   D:/ 电影/动作电影


比如当前我们的位置是卡牌 你想跳转到扫雷的时候 你需要怎么做? 直接进入到扫雷就可以来 因为他们在一个文件夹下。同层级。


但是如果你想去动作电影 你要怎么做?你要向上一层 然后进入到电影文件夹 再进入到 动作电影。 


这一系列的过程 我们可以理解成一种路径。不知道这样比喻 是否对路径 有了一个概念。帖一个图片看起来生动一点。

Head first HTML&CSS ---[学习笔记第二章]


理解了这个概念之后 我们来说明相对路径 如何在html代码中去书写。


还是之前的两个例子:

1. 卡牌 -> 扫雷   <a href="扫雷"> 同层级的 直接书写名称就好

2. 卡牌 -> 动作电影  <a href="../电影/动作电影">  这里的“ . . ” 俩个点表示去上一层级, 这样我们就到来d盘下  之后用  “ / ” 来进入指定的下一层级 ../.. 代表上一级再上一级


这个其实就是所谓的相对路径 ~ 从你当前的位置 相对于 你要去的地方  路径是怎样的。


接下来说 绝对路径 这个比较好理解。就是从根目录开始 到指定的位置。 同样是从卡牌去动作电影  <a href="D/电影/动作电影">  去其他的网站就是直接打那个网站的域名。


<a>标签的东西 大概就这么多 主要是要理解 绝对路径  相对路径这个概念。


<img>标签  可以 暂时也看成是一个<a>标签 只不过 它获取的不是跳转 而是获取图片资源

<img src="xxx.xxx.xx.jpg"> 这样 来获取一个指定的图片资源。  这个可以是网上的 也可以是你项目其他文件夹下的 都可以。路径也是相对绝对两种。


最后说一下他们俩个的组合。  <a href="www.baidu.com"> <img src="xxx.xxxx.xxx.jpg"> </a> 这样的一个组合,在页面当中我们看到的就是一个图片 但是当你点击之后他就会跳转到百度。


所以我门可以理解,<a>标签不仅仅是只用于文字, 也可以用于图片。