<a>--href 最重要的元素
值 | 描述 |
---|---|
URL | 超链接的 URL。可能的值:
|
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 属性值与之匹配的元素