第4章 链接<a>

  链接允许你从一个网页跳转到另一个网页，一般有下面几种：

1、网站间（一个网站指向另一个网站的链接）

2、同网站的网页间（一个网页指向同网站内部另一个网页的链接）

3、页面内（同网页内，一个位置指向另一个位置的链接）

4、链接到其他页面（站内或站外）指定位置。

5、新开窗口（在新开浏览器窗口中打开的链接）

6、电邮链接（启动电邮程序并添加收件人链接）

 

一、指向其他网站的链接

要求href特性值必须是另一个网站的完整web地址（即绝对URL）。如：<a href="https://www.baidu.com/index.html">百度首页</a>

绝对URL以协议（如http://）开头，后面是域名，再后面是具体页面路径。如果没有指定具体页面，将请求主页index.html

 

二、指向同网站内其他页面

href特性值采用相对URL。如：<a href="about-us.html">关于我们</a>

 

三、页面内指定位置链接

如：<h1 id="top">这是页面顶部</h1>

　　<a href="#top">回到顶部</a>

注意：href的 # 和 id特性 配合使用

 

四、指向其他页面指定位置的链接

站内如：

<a href="music/listings.html#bottom">链接到music里listings.html页面的id值为bottom的位置</a>

站外如：

<a href="https://www.baidu.com/index.html#bottom">链接到百度首页的id值为bottom的位置</a>

 

五、新开窗口打开链接页面

一般对于链接指向另一个网站，或者希望用户随时回到前一页面时使用新开窗口打开链接页面。即使用<a>标签的特性target = "_blank"

 

六、电邮链接

如： <a href="mailto:XXXX@163.com">发电邮给XXX</a>

 

 

七、网站目录结构和相对URL

对于规模较大的网站而言，在管理代码时合理的方式是将不同类别的网页保存在不同的文件夹中。网站中的文件夹也称目录。

 

1、网站目录结构和主页index.html

　　用HTML编写的网站主页文件（包括子目录中各个板块的主页文件）通常命名为index.html。web服务器通常会这样设置：如果未指定请求的文件名，则自动返回index.html文件。

　　所以，如果浏览器访问example.com，服务器返回example.com/index.html文件；如果访问example.com/music，服务器返回example.com/music/index.html文件。

　　网站上的每个页面、图片、文件资源都有URL，它是在网站域名后面加上页面、图片或文件资源的路径。如：exampleArts网站的主页路径是www.examplearts.com/index.html，而网站的logo图片路径是www.examplearts.com/images/logo.gif（见上图目录结构）

　　如上图所示目录结构，根目录包括：（1）index.html文件，它是整个网站的主页。（2）movies、musics、theatre版块的独立文件夹。

　　每个子目录包括：（1）一个index.html，它是这个子目录即版块的主页。（2）一个评论页面reviews.html  （3）一个列表页面listings.html（除了dvd版块）。

　　movies版块包括：（1）一个cinema文件夹 （2）一个dvd文件夹。。。。

 

2、相对URL

当你需要链接到网站内部某个页面时，可以使用相对URL这种简短的方式来告诉浏览器目标文件相对于当前文件的位置，而不必在链接中指定域名。

（1）如果网站中的所有文件都保存在同一文件夹，仅用页面的文件名就可以作为指向这个页面的链接地址。

（2）如果网站是由多个文件夹（目录）组织成的，就需要告诉浏览器怎样由当前页面到达链接的页面。详见下表：

 

另外：当网站上传到web服务器后（网站开通后），会出现网站的一些其他功能，这些是网站开通之前不会工作（不会起作用）的。如下：

<1>对于一个没有附带文件名的子文件夹名称，web服务器通常会显示这个子文件夹的主页index.html

<2>一个正斜杠表示整个网站的主页，一个正斜杠附带一个文件名表示网站根目录下对应的文件。如"/musics/listings.html"