1.4 HTML超链接_HTML视频教程

- 灬无言 - 阅 5,683

小小课堂网HTML视频教程零基础入门首选。

下方为HTML视频教程,如视频不能正常播放,请安装flash或更换浏览器。请记得在视频右下角选择“超清”,然后点击“全屏”,效果更加。

1.4.1 超链接

概念:在本质上属于一个网页的一部分,它是一种允许我们同其他网页或站点之间进行连接的元素。

语法:<a href=”URL地址” ></a>

简单来讲,就是指按内容链接。最重要的属性href,指示链接目标。

在所有浏览器中,链接默认外观:

  • 未被访问的链接带有下划线而且是蓝色的
  • 已被访问的链接带有下划线而且是紫色的
  • 活动链接带有下划线而且是红色的

CSS伪类可改变链接外观。

重要元素:路径

每一个网页都有一个惟一的地址,称为 统一资源定位符(URL)。

URL两种表达方式

绝对路径:是包含服务器规范在内的完全路径。

优点:无论源文件在什么位置都可以精确地找到。

缺点:不利于测试。

不利用站点的移植。

相对路径:表述源端点同目标端点之间的相互位置,它同源端点的位置密切相关。

优点:站点的结构和文件的位置不变,那么链接就不会出错。可以将整个网站移植到另一个地址的网站中,而不需要修改文档中的链接路径。

源端点和目标端点位置的几种情况

同一目录下:则链接路径只需指明目标端点的文档名称

如:<a href=”1.html” target=”_blank”>链接1.html且新窗口打开</a>

不在同一目录下

链接文档在本文档的子级,输入目录名称(子目录名称)文档名称

                     如:<a href=”text/1.html”>text文件夹下的1.html

链接文档在本文档的父级,用 ../ 来跳出本文档级

                     如:<a href=”../text/1.html”>跳到上级,找到文件夹text中1.html

Target目标窗口

  • _self 在当前页面中打开链接,默认效果
  • _blank 在一个全新的窗口中打开链接

       <head>标签中未讲解的<base/>标签   

为网页上所有连接规定默认地址或默认目标。

换一种说法就是其他标签中的URL地址全部解析成<base/>中URL的相对地址。

例:

<!DOCTYPE html>

<html>

<head>

<title>1.4 HTML超链接</title>

<base href=”http://www.baidu.com” target=”_blank”/>

<meta charset=”utf-8″ />

</head>

<body>

<a href=”duty”>百度免责声明</a>

</body>

</html>

例二:

<!DOCTYPE html>

<html>

<head>

<title>1.4 HTML超链接</title>

<base href=”images” target=”_blank”/>

<meta charset=”utf-8″ />

</head>

<body>

<img src=”1.jpg”/>SRC的相对位置已设为图片所在位置故直接填写图片名即可。

</body>

</html>

1.4.2 内部链接:链接对象为同一网站内的资源

       如: <a href=”1.html” target=”_blank”>链接1.html且新窗口打开</a>

<a href=”../text/1.html”>跳到上级,找到文件夹text中1.html</a>

1.4.3 锚点链接:网页过长,可设置锚点,方便阅读

创建锚点 <a name=”锚点的名称”></a>

HTML5<a>标签name属性已不再受支持,这里推荐换为id

              如:<a name=”1”>我是锚点编号1</a>

如:<a id=”1”>我是锚点编号1</a>

       链接同一页面锚点 <a href=”#锚点名称”></a>

              如:<a href=”#1”>我是锚点链接,点我跳转至锚点1</a>

       链接其他页面锚点 <a href=”链接的文件地址#锚点名称”>

              如:<a href=”2.html#2”>点我跳转至2.html中的锚点2</a>

1.4.4 外部链接:链接到当前网站外的资源

链接到外部网站 <a href=”http://…”>…</a>

              如:<a href=”http://www.xiaoxiaoketang.com”>小小课堂</a>

       链接到E-mail <a href=”mailto:邮件地址”>….</a>

              如:<a href=”mailto:996756342@qq.com”>

       链接到FTP <a href=”ftp://FTP地址”></a>

              如:<a href=”ftp://ftp.baidu.com”></a>

       链接到Telnet  <a href=”telnet://地址”>….</a>

              如:<a href=”telnet://bbs.baidu.com”></a>

       链接到本地文件(通常网站上的本地下载)

              如:<a href=”2345 browser.exe”>2345浏览器下载</a>

这里可加入一个download属性,download=”下载的文件名”(HTML5新属性)

如:<a href=”2345 browser.exe” download=”2345”>2345浏览器下载</a>

1.4.5 <a>标签的其他属性

概念:在本质上属于一个网页的一部分,它是一种允许我们同其他网页或站点之间进行连接的元素。

图文不够清楚?请观看HTML视频教程

扫描二维码关注“小小课堂网”

第一时间获取最新教程

二维码

24

本文转载 " https://www.xxkt.org/1078 "

原文地址 " 小小课堂网原创教程。未经许可,禁止转载。否则,将追究法律责任! "

相关文章!

发表评论

电子邮件地址不会被公开。 必填项已用*标注