Web前端开发-7

来源：互联网发布：极课大数据怎么样编辑：程序博客网时间：2024/05/16 10:00

/*******************************************************
本文章主要记述了web前端开发中的超链接
****************************************************************/
一、概述
超链接，hyperlink。让浏览器在各个独立页面之间跳转。该连接可以是外部链接、内部链接、电子邮件连接、空连接、脚本连接等。

二、a标签链接
语法为：

<a href="http://www.baidu.com"  target="_bank">百度一下</a>

上式中，a标签标识超链接，href表示超链接的地址，target表示连接的属性，即是在本网页中打开，还是在空白网页中打开。具体如下；
_self:默认方式，在当前窗口打开网页；
_blank:在另一个空白网页中打开；
_top:在顶层框架中打开连接；
_parent:在当前框架的上一层打开链接

三、内部链接
上面说到的a链接其实是一种外部链接方式，而内部链接其实就是在一个工程下，或者说网站下有多个网页，然后彼此切换。
这里写图片描述
如上图所示，为一个网页工程下建立的三个htm网页文件，其中HTMLPag.htm是总文件，其他两个是辅助的子文件。内容分别如下：
HTMLPage.htm文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>超链接之内部链接</title>   </head><body>    <a href="HTMLPage2.htm" target="_blank">跳转到网页2</a>    <a href="HTMLPage3.htm" target="_blank"> 跳转到网页3</a>    <!--img src="img/1.jpg" alt="cc-picture" title="cc"/--></body></html>

HTMLPage2.htm文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>超链接值内部链接2</title></head><body>    <p><strong>这是网页2</strong></p></body></html>

HTMLPage.htm3文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></title></head><body>        <p><strong>这是网页3</strong></p></body></html>

结果如下：
这里写图片描述

四、锚点链接
锚点链接就是当网页内链接过多时，我们只能通过滑条往下看。为了解决这种不方便的问题，可以点击一个连接，直接跳到本网页的指定位置处。
语法：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>锚点链接</title></head><body><div>    <a href="#music">推荐音乐</a><br />    <a bref="#movie">推荐电影</a><br />    <a bref="#articel">推荐文章</a><br /></div><br /><div id="music">    <h2>推荐音乐</h2>    <ul>        <li>林俊杰-被封吹过的夏天</li>        <li>周杰伦-七里香</li>        <li>杨臣刚-老鼠爱大米</li>    </ul></div><br /><div id="movie">    <h2>推荐电影</h2>    <ul>           <li>爱情喜剧片</li>           <li>恐怖片</li>           <li>科幻类</li>   </ul></div><br /><br /><div id="article"><h2>推荐文章</h2>    <ul>        <li>朱自清-荷塘月色</li>        <li>鲁迅-故乡</li>        <li>张爱玲-倾城之恋</li>    </ul></div></body></html>

效果如下：
这里写图片描述
总结：锚点链接需要设置

<a href="#music">推荐音乐</a><br.>   //这里定义了一个id

上述代码值得注意的是划分片区，每个片区都分配了一个id。

div<id="music"></div>

0 0