JavaWeb学习之路(18)–HTML之超级链接

简介: 本文目录1. 前言2. 跳转指定网址页面3. 跳转当前网站其他网页4. 在新窗口中打开网页5. 小结

1. 前言

超级链接是HTML中极其精彩的设计。


网页之所以让人感觉功能无限,丰富多彩,就在于网页上的超级链接,当我们点击超级链接时,可以跳转到一个新的页面,查看该链接对应的内容。


在一层一层的链接中,网站的内容得到极大的延展,用户也得以从互联网上获取海联的信息。


本篇我们就来讲解下超级链接的使用。


2. 跳转指定网址页面

可以使用超级链接跳转指定网址的页面,例如下面的例子会跳转到百度:


<a href="http://www.baidu.com">百度</a>

1

效果如下,点击文本百度,则跳转到对应的网址:http://www.baidu.com



3. 跳转当前网站其他网页

href属性也可以指向当前网站的其他网页,例如:


<a href="1.html">网页1</a>

   <a href="pages/2.html">网页2</a>


则点击【网页1】,会跳转到当前网页同目录下的1.html;而点击【网页2】,会跳转到pages文件下的2.html。


4. 在新窗口中打开网页

有时候,我们点击超级链接时,并不希望新网页替换当前网页,而是弹出一个新窗口加载新页面,这样的好处是还可以轻松返回查看老页面。


此时可以使用target属性,当target属性值为_blank时,点击超链接会弹出新窗口打开网页,实例如下:


<a href="http://www.baidu.com" target="_blank">百度</a>

1

5. 小结

超级链接非常重要,要掌握本节的内容,需要自己编写网页逐一实现上面的要点。

相关文章
|
20天前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
20天前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
8月前
|
JavaScript 前端开发
HTML 链接5
空链接是指在HTML中不指向任何实际资源的链接。常见设置方法包括:`href=&quot;#&quot;`(导航到页面顶部)、`href=&quot;javascript:void(0)&quot;`(阻止默认行为,不刷新页面)、`href=&quot;&quot;`(刷新当前页面)、`href=&quot;about:blank&quot;`(打开空白页面)和`role=&quot;button&quot;`(链接表现为按钮,无默认行为)。选择合适的方法取决于具体应用场景。注意:链接应始终包含正斜杠以避免不必要的HTTP请求。
|
9月前
|
前端开发
HTML 链接2
HTML 使用 `&lt;a&gt;` 标签创建超链接,链接可以是文字或图像,点击后可跳转至新文档或当前文档的特定部分。链接地址通过 `href` 属性指定。默认情况下,未访问的链接为蓝色带下划线,已访问的为紫色,点击时为红色。样式可通过 CSS 自定义。
|
9月前
|
JavaScript 前端开发
HTML 链接1
HTML 链接(Anchor)是网页间跳转的核心元素,通过 `&lt;a&gt;` 标签创建。链接用于导航至其他网页、文档、图像等资源,实现网页互联。基本语法为 `&lt;a href=&quot;URL&quot;&gt;链接文本&lt;/a&gt;`。例如:`&lt;a href=&quot;https://example.com&quot;&gt;本文本&lt;/a&gt;` 是一个指向万维网上页面的链接。
HTML 链接4
`id`属性用于在HTML文档中创建书签。书签在页面中不可见,但可以通过链接直接跳转到指定位置。例如,在页面内或从其他页面链接到带有`id=&quot;tips&quot;`的元素:`&lt;a href=&quot;#tips&quot;&gt;访问有用的提示部分&lt;/a&gt;` 或 `&lt;a href=&quot;https://www.runoob.com/html/html-links.html#tips&quot;&gt;访问有用的提示部分&lt;/a&gt;`。
|
10月前
|
数据可视化 前端开发 容器
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
本文介绍了如何在Twaver-HTML5中使用列表可视化视图组件(List),展示了如何创建列表、设置列表属性(如行高、间隔颜色等)、实现数据绑定和排序,以及如何通过React代码示例进行操作。
119 2
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
|
9月前
|
人工智能
|
10月前
|
移动开发 数据可视化 HTML5
Twaver-HTML5基础学习(40)表格可视化视图组件(Table)
本文介绍了如何在Twaver-HTML5中使用表格可视化视图组件(Table),包括创建表格、定义列对象、实现数据绑定和排序,以及处理表格事件和获取表格数据的方法。
121 2
|
9月前
html基础知识学习
html基础知识学习
73 0