html a标签用法解析

最新推荐文章于 2024-07-23 08:49:01 发布

yy10992

最新推荐文章于 2024-07-23 08:49:01 发布

阅读量1.1k

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/yy10992/article/details/46312323

版权

html 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<a> 标签可定义锚。锚 (anchor) 有两种用法：
通过使用 href 属性，创建指向另外一个文档的链接（或超链接）
<a> 元素最重要的属性是 href 属性，它指定链接的目标。
通过使用 name 或 id 属性，创建一个文档内部的书签（也就是说，可以创建指向文档片段的链接）

一 href 属性

1、href连接到其他网页
<a href="http://www.baidu.com">百度一下</a>

2、href连接到其他html
同目录
<a href="hello.html">hello</a>
下一级目录tmp/hello.html
<a href="tmp/hello.html">hello</a>
上一级、两级目录
<a href="../hello.html">hello</a>
<a href="../../hello.html">hello</a>

3、href其他连接
3.1. <a href="#">
# -- 代表空连接,连接的是自己即什么也不做。

联接是当前页面。

通常有如下用法：
<a href="#" οnclick="window.close()">关闭</a>
将href="#"是指联接到当前页面，其实是无意义的，页面也不会刷新，关键是后面的onclick，当点击“关闭”时，会执行window.close()代码。

你或许会说为什么不直接写成<a οnclick="window.close()">关闭</a>
如果这样写，关闭这两个字就不会作为超联接处理，效果看上去会差一些。你可以自己试试。
3.2. <a href="#place">
#new -- 跳到本页的place字段位置,用法:<a name="place"></a>

二、target属性:<a> 标签的 target 属性规定在何处打开链接文档。

打开新窗口
toc.html
<ul>
<li><a href="pref.html" target="view_window">Preface</a></li>
<li><a href="chapter1.html" target="view_window">Chapter 1</a></li>
<li><a href="chapter2.html" target="view_window">Chapter 2</a></li>
<li><a href="chapter3.html" target="view_window">Chapter 3</a></li>
</ul>
pref.html

<html>
<style "text/css" rel="stylesheet">
html,body{ margin:0px; height:100%; }
.backg{width:100%; height:100%; MARGIN: 0px auto; background-color:#7AFEC6;}
</style>
<body>
<div class="backg">hello <em>Preface</em></div>
</body>
</html>
chapter1.html chapter2.html chapter3.html

在框架中打开窗口

不用打开一个完整的浏览器窗口，使用 target 更通常的方法是在一个 <frameset> 显示中将超链接内容定向到一个或者多个框架中。
可以将这个内容列表放入一个带有两个框架的文档的其中一个框架中，并用这个相邻的框架来显示选定的文档

<html>
<frameset cols="300,*">
<frame src="toc.html">
<frame src="pref.html" name="view_frame">
</frameset>
</html>

toc.html

<h3>Table of Contents</h3>
<ul>
<li><a href="pref.html" target="view_frame">Preface</a></li>
<li><a href="chapter1.html" target="view_frame">Chapter 1</a></li>
<li><a href="chapter2.html" target="view_frame">Chapter 2</a></li>
<li><a href="chapter3.html" target="view_frame">Chapter 3</a></li>
</ul>

<a target="value">
值描述
_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
framename 在指定的框架中打开被链接文档。

三、 name/id属性--锚定

1、同页面跳转:
<a href="#q1">问题一</a>


<a name="q1">问题一的解答</a>
or <a id="q1">问题一的解答</a>

2、不同页面跳转:
a.html的内容 <a href="b.html#q1">问题一</a>
b.html的内容 <a name="q1">问题一的解答</a>
or <a id="q1">问题一的解答</a>

四、点击图片连接