HTML学习篇(四) 超链接

HTML学习篇(四) 超链接
0

超链接

  超链接是 Web 上十分关键的功能,通过它可以跳转到网上任意的页面和内容,除了HTML 页面,还有图片、音视频以及其他在网络上存储的任意格式文件。如果浏览器不能识别的文件,会询问用户是否利用本地应用来打开或者下载它。

<a> 标签

  a 标签通过设置href属性来指定需要跳转的页面:

<body>
	<a href="https://www.baidu.com/">百度一下</a>.
</body>

%E5%9B%BE%E7%89%87

  点击“百度一下”会在本页跳转到百度搜索首页,但是,如果想在新页面打开这个超链接页面,可以通过设置 target 属性为 _blank

<body>
	<a href="https://www.baidu.com/" target="_blank">百度一下</a>.
</body>

%E5%9B%BE%E7%89%87

  另外,可以为超链接加入鼠标浮动提示,只需要加入 title 属性即可:

<body>
	<a href="https://www.baidu.com/" target="_blank" title="百度一下,你就知道!">百度一下</a>.
</body>

%E5%9B%BE%E7%89%87

  另外一个比较常用的功能是,将图片做成超链接:

<body>
  <a href="https://www.baidu.com/" target="_blank" title="百度一下,你就知道!">
    <img src="HTML5.png" alt="H5 Logo"/>
  </a>.
</body>

%E5%9B%BE%E7%89%87

文档内节点间跳转

  除了跳转到指定的 html 页面外,还有一个功能是在文档指定节点内跳转,先利用 id 属性来设定节点,然后使用 a 标签的 href 属性来指定要跳到的节点:

<body>
<h2 id="sec1">节点标题1</h2>
<p>这是段落1。</p>
<h2 id="sec2">节点标题2</h2>
<p>这是段落2。</p>
<h2 id="sec3">节点标题3</h2>
<p>这是段落3。</p>
<p>这是另一个段落。</p><p>这是另一个段落。</p><p>这是另一个段落。</p>
<p>这是另一个段落。</p><p>这是另一个段落。</p><p>这是另一个段落。</p>
<p>这是另一个段落。</p><p>这是另一个段落。</p><p>这是另一个段落。</p>
<p>这是另一个段落。</p><p>这是另一个段落。</p><p>这是另一个段落。</p>
<p>这是另一个段落。</p><p>这是另一个段落。</p><p>这是另一个段落。</p>
<p>这是另一个段落。</p><p>这是另一个段落。</p><p>这是另一个段落。</p>
<p>这是另一个段落。</p><p>这是另一个段落。</p><p>这是另一个段落。</p>
<p>这是另一个段落。</p><p>这是另一个段落。</p><p>这是另一个段落。</p>
<p>这是另一个段落。</p><p>这是另一个段落。</p><p>这是另一个段落。</p>
<p>这是另一个段落,跳转到<a href="#sec1">段落1</a>。</p>
<p>这是另一个段落,跳转到<a href="#sec2">段落2</a>。</p>
<p>这是另一个段落,跳转到<a href="#sec3">段落3</a>。</p>
</body>

上一篇: HTML学习篇(三) 标题,段落和列表
下一篇: HTML学习篇(五) 图片

1赞