Web前端开发-7

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

二、a标签链接
语法为:

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

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

三、内部链接
上面说到的a链接其实是一种外部链接方式,而内部链接其实就是在一个工程下,或者说网站下有多个网页,然后彼此切换。
Web前端开发-7_第1张图片
如上图所示,为一个网页工程下建立的三个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>

结果如下:
Web前端开发-7_第2张图片

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

<!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>

效果如下:
Web前端开发-7_第3张图片
总结:锚点链接需要设置

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

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

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

你可能感兴趣的:(Web,7,外部链接,锚点链接,内部链接)