2018/1/17HTML打卡

今天进行《Head First Html 与 CSS》一书第二章的学习。

学习内容可以简单概括为两部分：

1.在网页中建立超链接。

2.属性中相对路径和绝对路径的区分。

第一部分：

所谓超链接就是将一个网页链接到另一个网页中去，我们通过一个<a>元素实现。我们将上一章中做练习的两个网页进行超文本链接，加入链接后如图所示：

可以发现mission多了下划线变为可单击。

同样，我们在mission网页中也增加了一个可返回Stabuzz的链接。如图所示：

Back单词出现下划线，并且变为可单击。单击后返回主页面Starbuzz.

实现上面的效果具体的HTML代码如下：

我们发现 ，使单词mission和Back变得可单机可链接的关键就是我们之前没有见过的一个元素<a=href " "></a>

具体的书写格式应该是：<a=href " 所链接网页的路径">添加链接的单词（文本）</a>

知识点总结：

<a>文本</a>：<a>元素用于创建指向另一个网页的链接，元素的内容就是链接文本。（也就是说使文本变得可单击，浏览器中文本显示下划线）

href:通过href属性来指定链接的目标文件。属性中的内容必须通过""引号引起来。

如果只有<a>元素而没有href,文本只可单击但是不能链接到具体网页。只有通过href属性添加链接路径才可以完整的实现超文本链接。

第二部分：

我们在制作一个网页时，需要把所有需要用到的素材全部集中放在一个文件夹里。超链接时需要在属性中输入链接网页路径。

所谓路径可以分为绝对路径和相对路径。

绝对路径指的是目录下的绝对位置，通常从根目录开始（即从盘符开始）

比如第一部分练习中的路径就是一个绝对路径,如图：

intex.html和mission.html两个互相链接的文件位于E盘同一文件夹HTML下，这样的路径我们称为绝对路径，那么什么是相对路径？

相对路径指的是由一个文件夹所在的路径引起的和其他文件或文件夹的路径关系。比如我把上图中的intex.html和mission.html分别存储到文件夹HTML新建立的HTML1文件夹和HTML2文件夹中，这样的关系就是相对路径。

通过href属性进行路径赋值时，一定要选择正确的路径（找到你要链接文件的路径），一旦错误，网页在超链接时就会发生错误无法链接，web页面显示错误图像。

知识点补充：

1.文字或图像都可以作为链接的标签。

2.使用“..”可以链接到源文件上一层文件夹中的一个文件，“..”表示“父文件夹”。

3.要用“/”(斜线)字符分割路径中的各个部分。

4.为网站选择的文件名和文件夹名中不要使用空格。

5.最好在构建网站初期组织网站文件，这样不用在网站升级时修改大量路径。

                                                                               参考用书《Head First Html 与 CSS》