如何在 HTML 中包含锚点?
在本文中,我们将执行如何在 HTML 中包含锚点的任务。让我们深入了解本文,以了解更多关于 HTML 中锚点的信息。
锚元素用于将源锚点链接到目标锚点。目标是源锚点连接到的资源,而源是指向另一个站点的文本、图片或按钮。
超链接是使互联网成为信息高速公路的关键技术之一。
为了更好地理解如何在 HTML 中包含锚点,让我们看看以下示例
示例 1
在下面的示例中,我们正在创建一个**跳转锚点**链接。
<!DOCTYPE html> <html> <head> <style> .main-content { height: 90vh; text-align: justify; } </style> </head> <body> <h2 id="tutorials">Tutorials Point</h2> <p class="main-content"> Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more.</p> <p>Click To <a href="#tutorials">Jump</a>. </p> </body> </html>
运行上述脚本后,输出窗口弹出,显示上述脚本中使用的文本以及提到的锚点标签“**点击跳转**”,用户按下时可以跳转到页面开头。
示例 2
考虑到以下内容,我们正在创建一个从另一个网页链接到锚点的示例。
<!DOCTYPE html> <html> <body> <h2 id="Tutorials">TutorialsPoint</h2> <p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and preferto learn new skills at their own place from the comforts of their drawing rooms.</p> <p> <a href="https://tutorialspoint.com/market/index.asp">Go To The Course Page.</a> </p> <p> <a href="https://tutorialspoint.com/latest/ebooks">Search For Ebooks.</a> </p> </body> </html>
当脚本执行时,它将生成一个输出,显示上述脚本中使用的文本以及使用锚点标签附加到网页的链接。当用户点击链接时,它将打开新页面。
示例 3:使用 JavaScript
查看以下示例,我们正在创建一个到 javascript 的链接。
<!DOCTYPE html> <html> <body> <a href="javascript:alert('Welcome To TutorialsPoint!');">Click To Execute</a> </body> </html>
当给定脚本执行时,它将提供一个输出,其中包含使用带有文本“**点击执行**”的锚点放置在网页上的链接。
如果用户点击链接,脚本将被触发并显示警报“欢迎来到 tutorials point”。
广告