a元素(设置超级链接)【变更元素

<a>~</a>

a元素中如果使用了href属性,表示超链接。href属性用于指定超链接的URL,链接源的URL根据当前文档的所在位置,决定使用绝对URL还是相对URL。a元素可以是直列元素,也可以是块元素

HTML4中,a元素是直列元素,所以不能放div元素这样的块元素。但是,HTML5中,a元素的内容模型被定义为透明,所以只要是母元素允许的,a元素中可以放HTML4中那样的块元素。需要注意的是,不是所有母元素允许就可以,像a、 buttoniframeselecttextarea这些属于交互内容的元素就不能放到a元素中。

HTML5中,如果a元素中没有href内容属性,则表示该处为链接占位符。

属性

1.download属性新属性

用于指定,用户点击链接时,将要下载的目标文件名

2.href属性

用于指定超链接的URL,如果该属性没有被指定,该当a元素表示一个超链接的占位符。

3.hreflang属性

表示链接内容的语言。关于语言代码,请参照语言代码手册

4.media属性【新属性

为链接文档指定媒体设备。

5.name属性

HTML5不支持,使用id属性代替指定链接的名称。

6.rel属性

表示当前文档与被链接文档之间的关系

  • alternate:另一可替代文档(如:打印页、翻译、镜像)
  • author:文档的作者
  • bookmark::关联文档
  • help:帮助文档
  • licence:文档知识产权信息
  • next:选择下一个文档
  • nofollow:一般google上使用“nofollow”,指示google搜索蜘蛛不要跟随该当链接(主要用于付费链接)
  • noreferrer:用户打开链接时,指示浏览器不发送HTTP引用头
  • prefetch:缓存目标文件
  • prev:选择中前面的文档
  • search:文档的检索工具
  • tag:当前文档的标签或关键词

7.target内容属性

超链接里的链接标的(要打开的网页)会根据target内容属性的值以相应的方式打开。target内容属性的值是预先规定的,根据需要指定其值。

【target属性的可选值:】

  • _self:当前窗口(或显示框)中打开链接,当target的值为空字符串(即:target="")时的默认值。
  • _parent:在母窗口打开链接
  • _top:当前窗口打开链接,并替代当前整个窗口(或显示框)内容。
  • _blank:另行开启新窗口
  • 独自名称(通常为一个对应的显示框名称):在对应显示框中打开链接

8、type属性

表示超链接内容的MIME类型

9、占位符

HTML5中,如果a元素中没有href内容属性,则表示该处为链接占位符。例,当使用JavaScript等建立动态链接时,可以使用a元素定义链接占位符。

使用例

<a href="a.php">指定相对路径</a><br>

<a href="http://www.webkkl.com/html5/a.php">指定绝对路径</a><br>

<a href="../index.html">指定上层路径</a><br>

<a href="mailto:info@webkkl.com">邮件</a><br>

<a href="../index.html"><img src="../images/logokkl2.png" border="0"></a><br>

浏览器上的显示结果↓

跳至指定位置

同一网页内想要跳至指定位置时,使用a元素指定目的位置的锚点名称时可以实现。书写形式为<a href="#名称">~</a>。使用<id="#名称">的形式建立目的位置锚点,该形式为HTML5的新添加形式。 之前的HTML使用<a name="#名称">的形式。注:HTML5不支持a元素的name属性。

使用例

<h3 id="faq">问题目录</h3>

<ul>

<li><a href="#html">HTML是什么?</a></li>

<li><a href="#browser">浏览器是什么?</a></li>

<li><a href="#editor">HTML编辑器是什么?</a></li>

<li><a href="#tool">制作网页时需要的工具</a></li>

<li><a href="#img">使用的图像</a></li>

</ul>

<h3 id="html">HTML是什么?</h3>

<p>HTML是HyperText Markup Language的缩写…一直处于不断的改善中。</p>

<div class="sample"><a href="#faq">返回头部</a></div>

<h3 id="browser">浏览器是什么?</h3>

<p>为了浏览网页…。</p>

<div class="sample"><a href="#faq">返回头部</a></div>

<h3 id="editor">HTML编辑器是什么?</h3>

<p>能够进行编辑HTML文件,是书写…。</p>

<div class="sample"><a href="#faq">返回头部</a></div>

<h3 id="tool">制作网页时需要的工具</h3>

<p>能够制作、测试HTML文档就需要…。</p>

<div class="sample"><a href="#faq">返回头部</a></div>

<h3 id="img">使用的图像</h3>

<p>通常的网页中使用的图像…。</p>

<div class="sample"><a href="#faq">返回头部</a></div>

浏览器上的显示结果↓



问题目录

HTML是什么?

HTML是HyperText Markup Language的缩写…一直处于不断的改善中。

浏览器是什么?

为了浏览网页…。

HTML编辑器是什么?

能够进行编辑HTML文件,是书写…。

制作网页时需要的工具

能够制作、测试HTML文档就需要…。

使用的图像

通常的网页中使用的图像…。

X

浏览器支持情况

元素
a yes yes yes yes yes

关联内容