HTML学习篇（四）超链接

超链接

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

<a>标签

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

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

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

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

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

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

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

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

文档内节点间跳转

除了跳转到指定的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学习篇（四） 超链接

超链接

<a>标签

文档内节点间跳转

猜你喜欢

HTML学习篇（四）超链接