网页设计与制作
上QQ阅读APP看本书，新人免费读10天
设备和账号都新为新人
上一章目录下一章

4.3 书签链接

当创建的网页内容特别多的时候，可以通过书签对内容进行链接，这样读者在阅读的时候，可以通过书签进行内容的跳转，这种链接又称为网页内部的书签链接。

4.3.1 建立书签

通过建立书签可以对页面的内容进行引导，也可以链接到不同的页面。请具体语法格式如下：

      <a name="书签名称">文字</a>

在该语法，书签名称就是对应于后面要跳转所创建的书签，而文字则是设置链接后跳转的位置。

例题4-3：定义5个书签。具体代码如下：

      <! 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>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>书签链接</title>
      </head>
      <body>
      <h1>古代诗词</h1>
      <br />
      <br />
      <a name="元日">元日（宋代王安石）</a><br />
      爆竹声中一岁除，春风送暖入屠苏。<br />
      千门万户曈曈日，总把新桃换旧符。<br /><br />
      <a name="忆江南三首">忆江南三首（唐代白居易）</a><br />
      江南好，风景旧曾谙；日出江花红胜火，春来江水绿如蓝。能不忆江南？<br />
      江南忆，最忆是杭州；山寺月中寻桂子，郡亭枕上看潮头。何日更重游！<br />
      江南忆，其次忆吴宫；吴酒一杯春竹叶，吴娃双舞醉芙蓉。早晚复相逢！<br /><br />
      <a name="小池">小池（宋代杨万里）</a><br />
      泉眼无声惜细流，树阴照水爱晴柔。<br />
      小荷才露尖尖角，早有蜻蜓立上头。<br /><br />
      <a name="到京师">到京师（元代杨载）</a><br />
      城雪初消荠菜生，角门深巷少人行。<br />
      柳梢听得黄鹂语，此是春来第一声。<br /><br />
      <a name="春日">春日（宋代张耒）</a><br />
      如丝苣甲饤春盘，韭叶金黄雪未干。<br />
      旅饭二年无此味，故园千里几时还。<br />
      异方时节三巵酒，残岁风烟一惨颜。<br />
      曾奉龙旗典邦礼，岁穷祠祀少休闲。<br /><br />
      </body>
      </html>

在这段代码中，定义了5个书签，分别命名为元日、忆江南三首、小池、到京师、春日，运行这段代码的效果如图4-5所示。

图4-5 定义书签

可以看到，在浏览器中并不能看到定义的书签，但是它实际上已经存在了。此时就可以定义书签链接了，请看下面一节的内容。

4.3.2 同一页面的书签链接

在代码的前面增加链接文字和链接地址，这样就能够实现同页面的书签链接。其具体语法格式如下：

      <a href="#书签的名称">链接的文字</a>

在该语法中，书签的名称就是刚才所定义的书签名，也就是name的赋值。而#则代表这是书签的链接地址。

例题4-4：书签的使用。具体代码如下：

      <! 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>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>书签链接</title>
      </head>
      <body>
      <h1>古代诗词</h1>
      &nbsp; &nbsp; &nbsp; &nbsp；如果想学习诗词，只需要单击下面对应的诗词名称即可链接
  到详细介绍。
      <br/>
      <br/>
      <a href="#元日">元日</a><br/><br/>
      <a href="#忆江南三首">忆江南三首</a><br/><br/>
      <a href="#小池">小池</a><br/><br/>
      <a href="#到京师">到京师</a><br/><br/>
      <a href="#春日">春日</a><br/><br/>
      <a name="元日">元日（宋代王安石）</a><br/>
      爆竹声中一岁除，春风送暖入屠苏。<br/>
      千门万户曈曈日，总把新桃换旧符。<br/><br/>
      <a name="忆江南三首">忆江南三首（唐代白居易）</a><br/>
      江南好，风景旧曾谙；日出江花红胜火，春来江水绿如蓝。能不忆江南？<br/>
      江南忆，最忆是杭州；山寺月中寻桂子，郡亭枕上看潮头。何日更重游！<br/>
      江南忆，其次忆吴宫；吴酒一杯春竹叶，吴娃双舞醉芙蓉。早晚复相逢！<br/><br/>
      <a name="小池">小池（宋代杨万里）</a><br/>
      泉眼无声惜细流，树阴照水爱晴柔。<br/>
      小荷才露尖尖角，早有蜻蜓立上头。<br/><br/>
      <a name="到京师">到京师（元代杨载）</a><br/>
      城雪初消荠菜生，角门深巷少人行。<br/>
      柳梢听得黄鹂语，此是春来第一声。<br/><br/>
      <a name="春日">春日 （宋代张耒）</a><br/>
      如丝苣甲饤春盘，韭叶金黄雪未干。<br/>
      旅饭二年无此味，故园千里几时还。<br/>
      异方时节三巵酒，残岁风烟一惨颜。<br/>
      曾奉龙旗典邦礼，岁穷祠祀少休闲。<br/><br/>
      </body>
      </html>

运行这段代码可以看到5个文字链接，如图4-6所示。

图4-6 建立书签和链接的页面效果

在页面中单击其中的一个链接文字，页面将会跳转到该链接的书签所在位置。单击第一个链接，跳转后的页面效果如图4-7所示。

图4-7 跳转的效果

单击页面中最后一个文字，页面将显示到最底部，如图4-8所示。

图4-8 跳转到书签所在位置

4.3.3 不同页面的书签链接

在链接地址上输入其他页面地址，也可以链接到其他页面。其具体语法格式如下：

      <a href="链接的文件地址#书签的名称">链接的文字</a>

在该语法中，与同一页面的书签链接不同的是，需要在链接的地址前增加文件所在的位置。

例题4-5：设置一个单独的链接页面，使其链接到前面定义的书签页面。

      <! 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>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>书签链接</title>
      </head>
      <body>
      <h1>古代诗词</h1>
      &nbsp; &nbsp；如果想学习诗词，只需要单击下面对应的诗词的名字即可链接到详细原则
  <br /><br />
      <a href="4-4.html#元日">元日</a>&nbsp; &nbsp; &nbsp; &nbsp;
      <a href="4-4.html#忆江南三首">忆江南三首</a>&nbsp; &nbsp; &nbsp; &nbsp;
      <a href="4-4.html#小池">小池</a>&nbsp; &nbsp; &nbsp; &nbsp;
      <a href="4-4.html#到京师">到京师日</a>&nbsp; &nbsp; &nbsp; &nbsp;
      <a href="4-4.html#春日">春日</a>
      </body>
      </html>

运行后的界面如4-9所示。

图4-9 运行效果

单击其中的某个链接，例如，选择元日，就可以直接链接到书签所在的位置，如图4-10所示。

图4-10 链接的效果

上一章目录下一章