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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

理解了这个概念之后 我们来说明相对路径 如何在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>标签不仅仅是只用于文字， 也可以用于图片。