`

HTML之给网页增加锚点

阅读更多
HTML Anchors with 'name' or 'id'?
When one wants to refer to some part of a webpage with the 

"http://example.com/#foo" 

method, should one use

<h1><a name="foo"/>Foo Title</h1>

or

<h1 id="foo">Foo Title</h1>

They both work, but are they equal, or do they have semantic differences?




-----------------------------------------------------------------------------


According to the HTML 5 specification, 5.9.8 Navigating to a fragment identifier:

引用

For HTML documents (and the text/html MIME type), the following processing model must be followed to determine what the indicated part of the document is.

1. Parse the URL, and let fragid be the <fragment> component of the URL.

2. If fragid is the empty string, then the indicated part of the document is the top of the document.

3. If there is an element in the DOM that has an ID exactly equal to fragid, then the first such element in tree order is the indicated part of the document; stop the algorithm here.

4. If there is an a element in the DOM that has a name attribute whose value is exactly equal to fragid, then the first such element in tree order is the indicated part of the document; stop the algorithm here.

5. Otherwise, there is no indicated part of the document.


So, it will look for id="foo", and then will follow to name="foo"


Edit: As pointed out by @hsivonen,
in HTML5 the a element has no name attribute. However, the above rules still apply to other named elements.

-----------------------------------------------------------------------------






html-anchors-with-name-or-id

http://stackoverflow.com/questions/484719



-
分享到:
评论

相关推荐

    jQuery插件 jQuery 实现网页报纸的区域锚点提示功能

    综上所述,实现“jQuery插件 jQuery 实现网页报纸的区域锚点提示功能”需要综合运用HTML、CSS和JavaScript的知识,尤其是jQuery库的强大功能。通过合理的设计和编程,我们可以创建出既美观又实用的网页导航体验。在...

    jquery锚点带动画跳转

    总结,jQuery锚点带动画跳转是提高网页交互体验的有效手段。通过结合`animate()`、`scrollTop()`等方法,我们可以轻松创建出流畅的页面滚动效果。在实际项目中,还可以根据需求进行各种定制和扩展,以满足不同的设计...

    <jQuery>导航的滚动锚点

    在网页设计中,导航是用户在页面间跳转的重要工具,而滚动锚点则是导航功能的一种增强,使得用户可以通过点击导航菜单直接跳转到页面内的特定位置。在jQuery库的支持下,实现滚动锚点变得更加简单高效。本文将深入...

    jquery a标签锚点定位特效.zip

    总结起来,"jquery a标签锚点定位特效"是一种利用jQuery改进传统锚点链接的方法,它提供了平滑的滚动动画,提升了用户在网页浏览时的体验。掌握这种技术,可以帮助你创建更加互动和引人入胜的网页应用。在实际项目中...

    A锚点导航定位菜单jQuery特效.zip

    在网页设计中,锚点导航是一种常见的交互方式,它允许用户通过点击菜单项快速跳转到页面上的特定位置,提高用户体验。 【描述】提到的特效,是指当用户在右侧菜单中点击一个条目时,对应的左侧内容会立即被滚动到...

    jQuery点击锚点链接屏幕滚动代码.zip

    同时,由于这个特效特别提到了"右侧浮动导航",因此可能还会涉及到CSS样式,比如使用`position: fixed`来让导航栏始终固定在屏幕右侧,以及使用`z-index`来确保导航栏位于其他元素之上。 此外,为了使特效更加完善...

    导航定位页面锚点官网.zip

    JavaScript是一种广泛使用的编程语言,用于增加网页的交互性和动态功能;HTML是超文本标记语言,负责构建网页结构;jQuery是一个流行的JavaScript库,简化了DOM操作、事件处理和动画效果。 【压缩包子文件的文件...

    html个人博客的静态网页

    3. **链接与图像**:`&lt;a&gt;`标签用于创建超链接,可以链接到其他网页或锚点。`&lt;img&gt;`标签插入图像,需指定`src`属性为图片URL和`alt`属性提供文字描述。 4. **表格与列表**:`&lt;table&gt;`、`&lt;tr&gt;`、`&lt;td&gt;`用于创建表格,...

    外卖:实现类似锚点功能.zip

    在传统的网页开发中,我们使用HTML的`&lt;a&gt;`标签配合`#`符号来实现锚点链接,但在微信小程序中,我们需要采用不同的方法来达到相同的效果。 首先,微信小程序不支持直接使用HTML的锚点链接,但我们可以借助小程序提供...

    jQuery手机左侧导航锚点定位代码.zip

    总的来说,"jQuery手机左侧导航锚点定位代码"是一个实用的工具,结合了jQuery的强大功能和移动设备的特性,为手机网页设计提供了便利。理解并掌握其工作原理和实现方式,将有助于提升你的前端开发技能,创造出更富...

    jQuery汽车品牌按字母分类锚点导航代码.zip

    对于有能力的开发者,这个代码提供了一个基础框架,可以进行二次修改和扩展,比如添加搜索功能、优化性能、增加更多交互效果等。总的来说,这个压缩包中的资源是一个实践jQuery技术和提升网页交互性的良好案例,对于...

    显示锚点「Show Anchors」-crx插件

    CHANGELOG:版本1.7-增加了查看任何具有“ id”属性的元素的能力,而不仅仅是特定的锚定html元素,就像以前的版本1.6一样-修复了Chrome更新1.4版后上下文菜单的问题-保留了锚点内联以防止在显示锚点时页面滚动。...

    HTML+CSS+DIV网页设计与布局(第2版)(微课版)-教案.docx

    在这一章中,学生将学会创建超链接和锚点,这些是网页内部导航和外部链接的重要组成部分。链接地址、打开链接的方式等细节都将被详细讲解。通过这一章节的学习,学生将能够自如地处理网页间的跳转问题,为用户提供...

    基于vue监听滚动事件实现锚点链接平滑滚动的方法

    在现代网页设计中,为了提升用户体验,常常需要在页面内实现平滑滚动的效果,尤其是当涉及到锚点链接跳转时。本文将详细介绍一种基于Vue.js框架实现锚点链接平滑滚动的方法,该方法不仅具有很高的实用价值,而且可以...

    HTML网页特效大全下载

    本资源“HTML网页特效大全下载”提供了丰富的HTML特效代码,涵盖计时器等多种实用功能。下面将详细探讨这些特效以及它们在网页设计中的应用。 1. 计时器:计时器在网页中广泛应用,例如倒计时、实时动态显示时间等...

    基于jQuery 的动画锚点滚动定位特效(回到顶部).zip

    【标题】中的“基于jQuery的动画锚点滚动定位特效(回到顶部)”指的是一个使用JavaScript库jQuery实现的网页滚动效果。这种特效通常用于当用户在页面滚动到底部时,提供一个快速返回页面顶部的按钮,提升用户体验。...

    jQuery锚点带动画跳转特效特效代码

    在网页设计中,jQuery是一种广泛使用的JavaScript库,它极大地简化了JavaScript代码的编写,使得页面交互更加生动和高效。本文将深入探讨“jQuery锚点带动画跳转特效”这一技术,以及如何在实际项目中应用。 首先,...

    css锚点定位被顶部固定导航栏遮住的解决方案

    标题中的“css锚点定位被顶部固定导航栏遮住的解决方案”主要涉及到的是网页设计中一个常见的问题,即如何在存在固定在顶部的导航栏时,正确地利用HTML的锚点(Anchor)功能进行页面内部跳转,而不让标题被导航栏...

    HTML网页制作手册

    在"HTML网页制作手册"中,你可以找到关于HTML的基础知识,包括但不限于以下几个方面: 1. **HTML基本结构**:HTML文档通常由`&lt;!DOCTYPE&gt;`声明、`&lt;html&gt;`根元素、`&lt;head&gt;`和`&lt;body&gt;`部分组成。`&lt;head&gt;`包含了文档元...

    HTML5学习心得总结(推荐)

    其中,HTML5作为最新版本,增加了大量新元素和API,以支持现代网络应用的复杂需求。 HTML5的主要新特性包括: 1. canvas元素:它允许开发者在网页上绘制图形和动画,为网页设计提供了更多的可能性。 2. video和...

Global site tag (gtag.js) - Google Analytics