摘要:本篇文章主要讲述HTML+CSS之基础入门(6)超链接,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。
本篇文章主要讲述HTML+CSS之基础入门(6)超链接,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。
超链接【hyperlink】是网页中最为常见的元素之一,我们几乎可以在所有的网站页面中找到超链接。每个网站都不止一个页面,这些页面就是利用超链接进行串接。超链接帮我们实现了网页与网页之间的跳转。
文字链接:我们可以使用超链接标签<a><a/>实现文字链接。设置了链接的文字默认样式为蓝色文字,有下划线。<a><a/>标签实现超链接有两个属性需要设置:
href属性:表示点击该超链接将要跳转到的页面地址,该地址可以是当前页面的相对地址,也可以直接跳转到另外一个网站。
target属性:该属性设置超链接页面的打开方式。target属性有四个取值,这里,只说明常用的两个,【_self】是默认值,表示在浏览器当前窗口打开超链接的页面,【_blank】表示新建一个空白浏览器窗口,在新的窗口打开超链接页面。
来个例子看看:新建三个HTML页面文件,网页1里面设置三个超链接,分别链接到百度、网页2、网页3。
网页一代码:
<!DOCTYPE html><html xmlns="//www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title></head><body> <!--第一个超链接,链接到百度,在浏览器新的窗口打开--> <a href="//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="//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="//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="//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>
我们可以给超链接设置一些常见的样式,比如颜色【color】、字体【font-family】、背景【background】等。超链接还有一些特殊样式,就是我们可以依据超链接当前的状态设置特定的样式。超链接有以下四种状态:
· a:link – 当前链接未被访问的样式
· a:visited – 当前链接已被用户访问过的样式
· a:hover – 当鼠标指针移入到链接上方的样式
· a:active – 当链接被鼠标点击时的样式
注意,我们在定义上述样式时,需要按照上面的顺序定义,就是按照“未访问、访问后、鼠标经过、鼠标点击时”这个顺序来设置,这是官方规定。通常情况下,为了突出链接,我们只设置鼠标移入时的样式【a:hover】。
示例代码:
<!DOCTYPE html><html xmlns="//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="//www.baidu.com">百度一下</a> <a id="link2" target="_blank" href="//www.qq.com">腾讯网</a></body></html>
本文由职坐标整理发布,学习更多的相关知识,请关注职坐标IT知识库!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号