课程咨询 :0535-6582277
QQ:2720475033

  • 标记语言——锚点

    发布:烟台java培训机构      来源:烟台java培训机构      时间:2015-12-12

  • 标记语言——锚点

    Chapter 7 锚点

    HTML中的链接,正确的说法应该称作"锚点",它不仅让我们能指向文档,还能指向页面里的特定段落,更能当作"精准链接"的便利工具.让链接对象接近焦点.在这一章里,我们将看到四种不同的锚点做法,说明每个方法的优点,也会介绍title属性如何能提升链接的易用性,另外也将使用CSS为链接设计样式.

    在需要指定到页面的特定部分时,标记锚点是最佳的方法

    这是在设计网站时经常遇到的情况,你想链接到某个页面的特定部分,可是使用者正在阅读的可能是在另外的一个页面,接下来讨论的四种方法之中任选一种都能让你达成目标. Webjx.Com

    在示例中,假设我们打算链接到同一个页面中的特定标题:

    方法A:空洞的名称

    About Oranges

    Webjx.Com

    ...一些文字...

    Oranges Are Tasty

    ...更多文字...

    使用一个内容空白的锚点标签再配上name属性,标记特定的链接点,或许这是你熟悉的方法,在标题前放一个内容空白的,并且连向它(使用#符号,后面加上name属性的值),就能让我们连到页面的特定部分了,当页面包含了很长需要滚动的项目清单时,我们能通过这个方法十分方便的连到特定的项目.

    图7-1显示了点击"About Oranges"链接之后的结果,也就是跳到我们标识的地方,正好在标题上面. 网页教学网

    Webjx.Com

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

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

    Webjx.Com

    方法B:全部在名称之内

    About Oranges

    Webjx.Com

    ...一些文字...

    Webjx.Com

    Oranges Are Tasty

    Webjx.Com

    ...更多文字... Webjx.Com

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

    小心的全局样式

    如果使用了方法B的话,有个地方必须要注意.如果你为所有的元素指定了全局的CSS样式的话(颜色,文字大小,文字装饰等等),这些样式就会覆盖你为

    元素指定的样式.会发生这种情况的原因是,在这个例子里头,标签是位于包围它的

    标签之内的子元素.

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

    a{ 网页教学网

    color:green; Webjx.Com

    font-weight:bold; Webjx.Com

    text-decoration:underline; Webjx.Com

    } 网页教学网

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

    样式不同.

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

    更丰富的名称属性

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

    举例来说,如果使用方法B的话,你可以这么做(在此é代表符号"e"): 网页教学网

    My Resumé

    网页教学网

    ...一些文字...

    Dan's Resumé

    ...更多文字...

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

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

    方法C:丢掉名称

    About Oranges

    网页教学网

    ...一些文字... Webjx.Com

    Oranges Are Tasty

    网页教学网

    ...更多文字...

上一篇:简单的Java性能优化方法

下一篇:谈谈JavaScript中的数组、集合及效率

最新开班日期  |  更多

java--名企定制班

java--名企定制班

开班日期:6月30日

java--零基础脱产班

java--零基础脱产班

开班日期:6月30日

java--在职提升班

java--在职提升班

开班日期:6月30日

java--精品业余班

java--精品业余班

开班日期:6月30日

2001-2017 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56