web前端开发零基础入门9

一.建立超链接

1.超链接

超链接是指从 个网页指向 个目标的链接关系 超链接由链接源和链接目标两部分组成文本或图片常用来作为超链接的链接源 ;链接目标可以是网页、网页上的不同位置、图像、电子邮件地址、文件,还可以是一个应用程序。

语法

这里是引用

说明

未设置 target 属性时,链接目标的内容默认显示在当前窗口中 target 属性的取值
在这里插入图片描述
在这里插入图片描述

二.链接路径

建立超链接时需要指定链接 目标的 UR 地址 ,若链接路径错误,则出现图像不能正
显示链接页面打不开等情况 链接路径分为绝对路径和相对路径。

1.绝对路径

绝对路径也称为绝对 URL 是指目录下的绝对位置,它是一个完整描述文件位置的路径,
能表示文件或目录在硬盘上存放的真正物理位置 例如:

<a href= " c: \windows\notepad.html " >

若要链接到外部服务器上的文件则必须使用绝对路径,且路径中包含了 URL 完整信息,
如协议名称、域名或主机名 (FQDN) 、文件名,甚至还可能包含有端 号、虚拟目录等信息,如 <a
href=" http: //news.baidu.com/int rnet.html" >百度互联网新闻 。
在这里插入图片描述
在网页中使用绝对路径来定位文件清晰明了,但是如果文件或 夹移动了位置,则会导
致设置的路径失效。

2.相对路径

相对路径是指目标文件相对于当前文件的位置 也就是从当前文件开始直到目 标文
件的路径 相对路径分为根相对路径和文档相对路径 根相对路径是指以根目录 ”I"
为起点到目标文件的路径;文档相对路径是指以当前文件的位置为起点到目标文件的
路径
通常情况下建议使用文档相对路径,不管是移动文件的位 还是发布到 Web 服务器上,
只要文件的相对位置没变,就不会出错 文档相对路径有以下几种主要使用方式。

①链接到同级目录文件,只需要输入文件名
**例如 <a href= 11 index.html 11 >首页 </a>**
②链接到上级目录文件,用 “..I” 表示上级目录,"../../”表示上上级目录
**例如 <a href= 11 ../index.html 11 >首页 </a>**
③链接到下级目录文件,直接输入下级目录的路径
**例如 <a href= 11 myweb/index.html" >首页 </a>**

三.超链接分类及应用

1. 内部链接(站内链接、本地链接)

内部链接是指链接的对象在同 个网站中,也就是同网站内部网页之间的链接,因此又称
为站内链接、本地链接 内部链接 般采用相对路径来指向链接目标的位置。

2.外部链接(站外链接、网络链接)

外部链接是指与其他网站资源的链接,所以也称为站外链接、网络链接 在建立外部链接
时,用绝对路径来表示链接目标的位置。

3.描点链接(书签链接)

铀点链接是指向页面里的某个位置的链接,也称为书签链接 在网页内容较多、页面过长
时,使用铀点链接有助于浏览者快速访问到页面中指定位置的内容 使用铀点链接前必须先
创建铀点。

语法

<a name=储点名称>铀点内容 </a>

说明

name 属性指定描点名称,"描点内容“用千指定铀点链接的位置,也就是链接设置
后跳转的位置
例如:创建 个名称为 one 的描点,代码为 <a name=" one" >描点内容
创建好铀点名称后,就可以建立铀点链接了
语法:< href=" #描点名称'>链接源

这里是引用

四.图像超链接

图像超链接指的是当链接源为图像时所设置的超链接 当浏览者在访问某个网站 ,单
击设置有超链接的图片后,浏览器 即跳转到链接所指向的地址。

语法

语法 href=链接目标><img src= "图像文件的地址'></a>
例如:< href= 11 http://www.163.com 11 ><img src= 11 timg.jpg 11 ><la>

提示

在这里插入图片描述

五.小任务

1.建立列表

<html><head><title> 简单列表的应用 </ti1 le><lhead> 
<body> 
<h3> 无序列表 </h
<ul> 
<li> 实心圆 </li>
单元 设计制作网页
<h> 空心圆 </li>
<h> 实心方块 </li>
</ul> 
<hr> 
<h3> 有序列表 </h3>
<ol> 
<li> 阿拉伯数字 </li>
<li> 英文字母 </li>
<li> 罗马数字 </li>
</ol> 
<hr> 
<h3> 定义列表 </h3>
<dl> 
<dt> HTML</dt><dd> 文本标记语言 </dd>
<dt>CSS</dt><dd> 层叠样式表 </dd>
<dt>JavaScript</dt><<ld> 种脚本语言 </d<l>
</db 
</body> 
</html> 

2.建立超链接

<html><head><title> 建立超链接 </title></head>
<body> 
<h4> 单击图片访问百度 </h4>
<a href= ti http://www.baidu.com" target= " _blank ti ><img src= ti timg.jpg ti alt= ti click ti ><la> 
<hr> 
<a href= ti http: / w1r baidu ('om ti target= " _blank ti>单击我访问百度 </a>
</body> 
</html>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值