一、超链接
< a>标签代表html里的链接
1.URL
讲到超链接,URL就不得不提了,URL神通广大,不过我这里只是浅谈一下URL,URL除了网页,还有其他文件(pdf,文本等),还可以是指向该html的某个位置,还可以是Email地址
什么是URL?
既然是浅谈,其实我们就可以把URL简单的看成一个网址或者地址
它在< a>标签下的使用:< a href=/news/”URL”></index.html /a>
定义URL
URL称为统一资源定位符,在html很多标签下都是需要URL这个定位符的,如图片,表单,还有js中
URL的组成
协议:http
主机:baidu.com(这里以百度为例)
端口:80(默认)(若是ftp服务器,则是21端口)
资源:即路径:aaa/html/w_linux.html
参数:?变量名=值&变量名=值……
URL绝对与相对路径
1.相对路径(周边文件):相对于你现在的位置,去找上一个路径或下一个及多个路径。例:
< a href=/news/”w_linux.html”>找当前目录下的w_linux.html _br/index.html>< a href=/news/”/w_linux.html”>/是默认的/index.html .代表当前路径,与上面相同
< a href=/news/”/aaa/bbb/w_linux.html”>在当前路径下找下一级的html _br/index.html>< a href=/news/”/aaa/w_linux.html”>..代表上一级目录_/span/index.html>
2.绝对路径(从根开始找)
http://www………..
二、a标签常用属性
1.href
代表一个URL的链接源(点击后链接到什么地方)
2.target
1.target=_blank:点击链接的时候,是新的浏览器窗口打开,而不是在本浏览器内打开
2.target=_self:这是默认的,也就是在本浏览器中打开
还有两个属性不常见,话不多说。
3.title
代表链接的附加提示消息
< a href=/news/”URL”/index.html title=”提示信息”>链接名字< a>
三、锚点(定位作用)
锚点:定位网页内部的链接,简单的说就是你在这个网页里点击一个链接,会跳到该网页里的某个位置
1.使用
1.< a name=”one”>< /a>放在定位的位置处,用name属性是给该位置命名
< a name=”two”>< /a>
2.< a href=/news/”/index.html /a>,”#”这个符号是区分是在本网页找位置,否则服务器会误认为找某个文件或其他网站
< a href=/news/”/index.html /a>
3.< a href=/news/”/index.html /a>或< a href=/news/”“></index.html /a>都代表点击后回到顶部(但是,如果不写#会很危险,所以只要用第一个有#的就好)
4.其实也可以从另一个html中找这里的位置,比如这里的叫w_linux.html,另一个叫text.html,那就在text.html中写< a href=/news/”w_linux.html /a>
四、综述代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阿水的阿里</title>
</head>
<body link="#8a2be2" bgcolor="#f0f8ff" alink="#8a2be2" vlink="blue" text="#8a2be2">
<h1>
<em>
<strong>
<u>阿水的阿里</u>
</strong>
</em>
</h1>
<a href=/news/"http_/my.csdn.net/w_linux"/index.html >
<h2>目录</h2>
</a>
<br>
<ol>
<li>
<a href=/news/"/index.html title="这里是第一篇"> 第一篇</a>
</li>
<li>
<a href=/news/"/index.html title="这里是第二篇">第二篇</a>
</li>
<li>
<a href=/news/"/index.html title="这里是第三篇" >第三篇</a>
</li>
</ol>
<hr>
<a name="one"></a>
<h3><strong><u>第一篇</u></strong></h3>
这里添加第一篇的内容信息
<a name="two"></a>
<h3>第二篇</h3>
这里添加第二篇的内容信息
<a name="three"></a>
<h3>第三篇</h3> 这里添加第三篇的内容信息 <hr>
<a href=/news/"">返回</a> _/span/index.html>
</body>
</html>
五、效果图