html之链接

1.链接剖析:
链接有两个主要的部分:目标和标签
如连接到其他网页,在页面内跳转等功能目标通过URL编写

HTML 统一资源定位器(Uniform Resource Locators)
URL 是一个网页地址。
URL可以由字母组成,如”runoob.com”,或互联网协议(IP)地址: 192.68.20.50。大多数人进入网站使用网站域名来访问,因为 名字比数字更容易记住。
URL - 统一资源定位器
Web浏览器通过URL从Web服务器请求页面。
当您点击 HTML 页面中的某个链接时,对应的 <a> 标签指向万维网上的一个地址。
一个统一资源定位器(URL) 用于定位万维网上的文档。
说明:

    scheme - 定义因特网服务的类型。最常见的类型是 http
    host - 定义域主机(http 的默认主机是 www)
    domain - 定义因特网域名,比如 runoob.com
    :port - 定义主机上的端口号(http 的默认端口号是 80)
    path - 定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)。
    filename - 定义文档/资源的名称
Scheme访问用于
http超文本传输协议以 http:// 开头的普通网页。不加密。
https安全超文本传输协议安全网页,加密所有信息交换。
ftp文件传输协议用于将文件下载或上传至网站。
file您计算机上的文件。

2.创建指向另一个页面的链接

输入<a href="page.html">其中page.html是目标网页的URL
输入标签文本,默认突出显示的文本
输入</a>结束对连接的定义


<p>
<a href="/index.html">标签文本</a> 是一个指向本网站中的一个页面的链接。</p>

<p><a href="http://www.github.com/">标签文本</a> 是一个指向万维网上的页面的链接。</p>

</body>
</html>

标签文本 是一个指向本网站中的一个页面的链接。

标签文本 是一个指向万维网上的页面的链接。

html5允许块级链接,建议最好包含主要内容

HTML<a>rel 属性

HTML a 标签参考手册 HTML<a> 标签
实例

链接使用 rel 属性:
<a rel="nofollow" href="http://www.functravel.com/">Cheap Flights</a>
所有主流浏览器都支持 rel 属性。
注意:尽管浏览器不会以任何方式使用该属性,不过搜索引擎可以利用该属性获得更多有关链接的信息。
定义和用法
<a> 标签的 rel 属性用于指定当前文档与被链接文档的关系。
只有在使用了 href 属性才能使用 rel属性。

描述
alternate文档的可选版本(例如打印页、翻译页或镜像)。
stylesheet文档的外部样式表。
start集合中的第一个文档。
next集合中的下一个文档。
prev集合中的前一个文档。
contents文档目录。
index文档索引。
glossary文档中所用字词的术语表或解释。
copyright包含版权信息的文档。
chapter文档的章。
section文档的节。
subsection文档的子段。
appendix文档附录。
help帮助文档。
bookmark相关文档。
nofollowGoogle 使用 “nofollow”,用于指定 Google 搜索引擎不要跟踪链接。
licence
tag
friend

在URL中应全部使用小写字母,不要让标签过长,

HTML<a> 属性

定义和用法
<a> 标签的 target 属性规定在何处打开链接文档。
语法
<a target="_blank|_self|_parent|_top|framename">
属性值

描述
_blank在新窗口中打开被链接文档。
_self默认。在相同的框架中打开被链接文档。
_parent在父框架集中打开被链接文档。
_top在整个窗口中打开被链接文档。
framename在指定的框架中打开被链接文档。

3.创建锚
激活一个链接会将用户带到对应网页特定区域,创建并引用锚
创建锚的步骤:
将光标放在希望用户跳转的元素的开始标记里
输入id=“anchor-name”,其中anchor-name是在内部用来标识网页中这部分内容的文字。一定要在元素名称和id之间保留一个空格,例如<h2 id="rising">
为锚id赋予有意义的名称,id中不能使用空格,应用短横线分割单词,

4.连接到指定的锚
输入<a href="#anchor-name">
输入标签文本,突出显示的文本(通常默认显示为带下划线的蓝色)
输入</a>结束对链接的定义

如果锚位于另一个文档,<a href="page.html#anchor-name>(URL与#之间无空格) 如果有位于另一台服务器的页面,则需输入
<a href="http://www.site.com/path/page.html#anchor-name">

5.创建其他类型的链接
输入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Creating Other Types of Links</title>
</head>
<body>

<article>
    <h1>Other Types of Links</h1>

    <p>There are lots of different kinds of links that you can create on a Web page. More precisely, there are a lot of different files you can link to on your Web page.</p>

    <p>You can create links to directly to <a href="img/blueflax.jpg">a photo</a> or even make links out of photos.</p>

    <p>For example, here are Cookie and Woody again, except this time they are linked to other pages. <a href="cookie.html" title="All about Cookie"><img src="img/cookiefora.jpg" width="143" height="131" alt="Cookie" /></a> <a href="woody.html" title="All about Woody"><img src="img/woodygran.jpg" width="202" height="131" alt="Woody" /></a></p>

    <p>You can link directly to <a href="http://www.sarahsnotecards.com/catalunyalive/segadors.mov" rel="external">a video</a> file, too, though it's usually better to link to a page with the video embedded in it, such as with the <abbr title="Hypertext Markup Language revision 5">HTML5</abbr> <code>video</code> element.</p>

    <p>Although you can make a link to <a href="mailto:someone@somedomain.com">someone's email address</a> with the mailto: protocol, I don't recommend it since spambots pick those up and then bombard them with spam. It's too bad because they are so convenient. If you activate the link, it opens your email program. It's probably better to offer your email address in a descriptive way, like &quot;someone at somedomain,&quot; although that isn't always foolproof either.</p>
</article>

</body>
</html>

效果

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值