您的位置：首页 > Web前端 > HTML5

moon 01/19 HTML5第8章 --标记文字<a>元素以及W3C中介绍

2016-01-19 20:31 696 查看

<a>--href 最重要的元素

值	描述
URL	超链接的 URL。可能的值：绝对 URL - 指向另一个站点（比如 href="http://www.example.com/index.htm"）相对 URL - 指向站点内的某个文件（href="index.htm"）锚 URL - 指向页面中的锚（href="#top"）

8.1 生成超链接

超链接是HTML中关键特性，是用户赖以在内容中（同一文档中和不同页面间）导航的基础。超链接用a元素生成。

元素类型：包含短语内容时称为短语元素，包含流内容时称为流元素。

允许具有父元素

内容：短语内容、流元素

习惯样式：

a:link,a:visited{
color:blue;
text-decoration:underline; cursor: atto;
}
a:link:active, a:visited:active{
color:blue:
}

　　 8.1.1 生成指向外部的超链接---绝对 URL - 指向另一个站点（比如 href="http://www.example.com/index.htm"）

1.将a元素的href的属性设置为一http://开头的URL---即生成到其它HTML文档的超链接

8.1.2 使用相对URL--

1 a元素的href属性值不是以类似值http://这样的已知的协议开头，则浏览器会将该超链接视为相对引用。

<!DOCTYPE HTML>
<html>
<head>
< title>Example</title>
<base  href="http://titan/listing/">
</head>
<body>
<p>
I like <code id="applecode">apples</code>and oranges
</p>
<a href="http://apress.com">Visit  Apress.com</a>
<a href="page2.html">page 2</a>
</body>
</html>

　　次例中的基准URL为base 元素中的http://titian/listings/。其中titan为我的开发服务器名称，而listings是服务器上包含本书实例文件中的目录

文档最后a元素生成的超链接的a元素，它使用了page2.html这一相对URL,点击这个超链接，浏览器会将基准URL和相对URL拼接成完整的URL：
http://titan/listing/page2.html
如果不用base元素或不在base元素里面的href元素设置一个基准URL，那么浏览器会将当前文档的URL认定为所有相对URL的解析基准例如假设浏览器

从http://baidu.com/app/mypage.html这个URL载入了一个文档，该人当中有一个超练级使用了myotherpage.html这个相对URL,那么点击这个超链接时

浏览器将尝试从http://baidu.com/app/myotherpage.html这个绝对URL加载第2个文档

8.1.3生成内部超链接----锚 URL - 指向页面中的锚（href="#top"）

超链接可以将同一文档中的另一个元素移入视野。为此需要用到形如CSS中针对目标元素的ID选择器的表达式：#<id>,如下面代码

注意：浏览器找不到具有制定属性为id属性值的元素，那么它会再次进行一次查找，试图找到一个name 属性值与之匹配的元素

<html>
<head>
<title>Example</title>
<meta  name="author"  content="Adam Freeman"/>
<meta  name="shortcut icon"  content="A simple example"/>
</head>
<body>
you can see other fruits I like <a href="#fruits">here</a>
<p  id="fruits">
I also like bananas,mangoes,cherries,apricots,plums and grapes
</p>
</body>
</html>

　　次例中将超链接的href属性值设置为#fruits。点击here，浏览器将查找文章中id属性值为fruits的元素。如果元素不在视野中，那么浏览器将会将文档滚动到能看到他的位置

注意：浏览器找不到具有制定属性为id属性值的元素，那么它会再次进行一次查找，试图找到一个name 属性值与之匹配的元素

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航