超链接 -- 文字链接
超链接[hyperlink] 是网页中最为常见的元素之一, 我们几乎可以在所有的网站页面中找到超链接. 每个网站都不止一个页面, 这些页面就是利用超链接进行串接. 超链接帮我们实现了网页与网页之间的跳转.
文字链接: 我们可以使用超链接标签 < a><a/>实现文字链接. 设置了链接的文字默认样式为蓝色文字, 有下划线.<a><a/>标签实现超链接有两个属性需要设置:
?? href 属性: 表示点击该超链接将要跳转到的页面地址, 该地址可以是当前页面的相对地址, 也可以直接跳转到另外一个网站.
?? target 属性: 该属性设置超链接页面的打开方式. target 属性有四个取值, 这里, 只说明常用的两个,[_self] 是默认值, 表示在浏览器当前窗口打开超链接的页面,[_blank] 表示新建一个空白浏览器窗口, 在新的窗口打开超链接页面.
来个例子看看: 新建三个 html 页面文件, 网页 1 里面设置三个超链接, 分别链接到百度, 网页 2, 网页 3.
网页一代码:
- <!DOCTYPE HTML>
- <HTML xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- </title>
- </head>
- <body>
- <!-- 第一个超链接, 链接到百度, 在浏览器新的窗口打开 -->
- <a href="http://www.baidu.com" target="_blank">
- 链接到百度
- </a>
- <!-- 第二个超链接, 链接到网页二, 在浏览器新的窗口打开 -->
- <a href="网页 2.html" target="_blank">
- 链接到网页 2
- </a>
- <!-- 第三个超链接, 链接到网页三, 在浏览器当前窗口打开 -->
- <a href="网页 3.html" target="_self">
- 链接到网页 3
- </a>
- </body>
- </HTML>
网页二代码:
- <!DOCTYPE HTML>
- <HTML xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- </title>
- </head>
- <body>
- <h1>
- 这是网页 2
- </h1>
- </body>
- </HTML>
网页三代码:
- <!DOCTYPE HTML>
- <HTML xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- </title>
- </head>
- <body>
- <h1>
- 这是网页 3
- </h1>
- </body>
- </HTML>
运行效果:
超链接 -- 锚点链接
很多网页文章的内容比较多, 导致页面很长, 需要不断的拖动滚动条才能找到需要的内容, 我们可以用锚点链接来解决这个问题, 锚点链接就是在单个页面内部不同的位置进行跳转, 也可以理解为书签. 锚点链接的设置也很简单, 首先为目标锚点设置一个 ID, 然后在超链接的 href 属性里指明该 ID, 注意 ID 前面要加上 "#" 号.
示例代码:
- <!DOCTYPE HTML>
- <HTML xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- </title>
- </head>
- <body>
- <div>
- <h3>
- 目录
- </h3>
- <!-- 注意前面要加上 #号 -->
- <a href="#chapt1">
- 第一章
- </a>
- <br />
- <a href="#chapt2">
- 第二章
- </a>
- <br />
- <a href="#chapt3">
- 第三章
- </a>
- <br />
- </div>
- ......
- <br />
- ......
- <br />
- ......
- <br />
- ......
- <br />
- ......
- <br />
- <div id="chapt1">
- <h4>
- 第一章
- </h4>
- <p>
- 这是第一章的内容
- </p>
- ......
- <br />
- ......
- <br />
- ......
- <br />
- </div>
- <div id="chapt2">
- <h4>
- 第二章
- </h4>
- <p>
- 这是第二章的内容
- </p>
- ......
- <br />
- ......
- <br />
- ......
- <br />
- </div>
- <div id="chapt3">
- <h4>
- 第三章
- </h4>
- <p>
- 这是第三章的内容
- </p>
- ......
- <br />
- ......
- <br />
- ......
- <br />
- </div>
- </body>
- </HTML>
运行效果:
超链接的 CSS 样式
我们可以给超链接设置一些常见的样式, 比如颜色[color] , 字体[font-family] , 背景[background] 等. 超链接还有一些特殊样式, 就是我们可以依据超链接当前的状态设置特定的样式. 超链接有以下四种状态:
a:link - 当前链接未被访问的样式
a:visited - 当前链接已被用户访问过的样式
a:hover - 当鼠标指针移入到链接上方的样式
a:active - 当链接被鼠标点击时的样式
注意, 我们在定义上述样式时, 需要按照上面的顺序定义, 就是按照 "未访问, 访问后, 鼠标经过, 鼠标点击时" 这个顺序来设置, 这是官方规定. 通常情况下, 为了突出链接, 我们只设置鼠标移入时的样式[a:hover] .
示例代码:
- <!DOCTYPE HTML>
- <HTML xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- </title>
- <style type="text/css">
- /*link1 未被访问: 取消下划线, 设置绿色 */ #link1:link {text-decoration:none; color:green}
- #link1:visited {text-decoration:none; color:black} /*link1 鼠标进入: 添加下划线,
- 设置红色, 文字变大到 15pt*/ #link1:hover {text-decoration:underline; color:red;
- font-size:15pt} #link1:active {text-decoration:none; color:blue;} /* 只设置
- link2 鼠标进入时的样式 */ #link2:hover { text-decoration:none; /* 取消下划线 */ color:DarkGreen;
- /* 文字颜色为深绿 */ font-size:18pt;/* 文字大小为 18pt*/ font-weight:bold;/* 文字加粗 */
- }
- </style>
- </head>
- <body>
- <a id="link1" target="_blank" href="http://www.baidu.com">
- 百度一下
- </a>
- <a id="link2" target="_blank" href="http://www.qq.com">
- 腾讯网
- </a>
- </body>
- </HTML>
运行效果:
--------------------------END --------------------------
来源: http://www.bubuko.com/infodetail-3070939.html