| 网站首页 | 本站新闻 | 康复医疗 | 人间真情 | 起来商务 | 就业指导 | 学习资料 | 站起来论坛 | 

您现在的位置: 站起来公益网 >> 学习资料 >> 网页制作 >> 正文
标记语言——锚点
作者:站起来    文章来源:本网站    点击数:    更新时间:2008-5-28【字体:
  

 图7-1.点击连上具体锚点链接的示例

效果不错,但是浪费一个内容空白的标签来标识链接位置有点不合语义,方法B能改进这点.

方法B:全部在名称之内

<p><a href="#oranges">About Oranges</a></p>

...一些文字...

<h2><a name="oranges">Oranges Are Tasty</a></h2>

...更多文字...

与方法A一样,我们仍然使用<a>标签配上name属性,但这次我们把它包在我想要链接的标题外面,这么做看起来的确比较符合语义,在方法A里头,我们的连接对象是...恩,什么都没有,但是在方法B里,我们不仅说明了这段文字是标题标签的一部分,同时也是这个页面的连接锚点之一.

小心<a>的全局样式

如果使用了方法B的话,有个地方必须要注意.如果你为所有的<a>元素指定了全局的CSS样式的话(颜色,文字大小,文字装饰等等),这些样式就会覆盖你为<h2>元素指定的样式.会发生这种情况的原因是,在这个例子里头,<a>标签是位于包围它的<h2>标签之内的子元素.

举例来说,假如你的CSS内有类似这样的声明:

a{

  color:green;

  font-weight:bold;

  text-decoration:underline;

}

方法B配上这段CSS就会让标题与其他页面内的<a>一样变成绿色,粗体,加上下划线,或许与你期望的<h2>样式不同.

我们能使用<a>的:link伪类以避免这种现象(同时也能获得其他好处),在本章稍后的"技巧延伸"中会详细讨论.

更丰富的名称属性

使用方法B(以及方法A)的好处之一,就是name属性可以处理更丰富的锚点名称,具体来说,就是能在名称之内使用符号

举例来说,如果使用方法B的话,你可以这么做(在此&#233;代表符号"e"):

<p><a href="#resum&#233;">My Resum&#233;</a></p>

...一些文字...

<h2><a name="resum&#233;">Dan's Resum&#233;</a></h2>

...更多文字...

在处理不属于英文字母的字符时,这个功能十分重要.

但是还有几个方法值得一提,下面这个方法完全不需要使用<a>设定锚点,让我们看看方法C.

方法C:丢掉名称

<p><a href="#oranges">About Oranges</a></p>

...一些文字...

<h2 id="oranges">Oranges Are Tasty</h2>

...更多文字...

啊哈,id属性的功能就像name属性,同样能为页面指定锚点,除此之外,方法C还消除了方法A,B使用name属性是需要的额外<a>标签,我们减少了源代码,这向来是好事.

由于id属性可以加到任何标签里,因此我们能轻易地在页面内任意为需要的元素加上锚点.在这个例子中,我们选择为标题加上锚点,但我们也能同样轻易的为<div>,<form>,<p>,<ul>...还有其他所有标签加上锚点.

一石二鸟

事实上,在大多数情况下,我们都能为先前存在id属性添加样式或者scripting,这是方法C的另一个好处.由于这个缘故,我们不需要为仅仅设定锚点而加上额外的代码.

举例来说,让我们假设你在很长的页面底部有一个用来留下评论的表单,而你想在页首加上链接,这个表单已经为了指定独特样式而设了id="comments".这是我们能直接把id当作锚点进行连接,而不必再加上有name属性的<a>标签.

代码看起大概类似这样:

<p><a href="#comments">Add a Comment!</a></p>


...很多文字...


<form id="comments" action="/path/to/script">

...表单元素...

</form>

同时,如果你的页面很长,那么你在底部加上链接到顶部锚点9 7 3 1 2 3 4 4 8 :

文章录入:admin    责任编辑:admin 
  • 上一篇文章:

  • 下一篇文章: 没有了
  • 最新文章 热点新闻 相关文章
    没有相关文章