pink老师前端入门p23-p27

4.6图像标签和路径(重点)

2.路径之相对路径

相对路径: 以引用文件所在位置为参考基础,而建立出的目录路径。

简单来说,图片相对于HTML页面的位置。

相对路径分类:
同一级路径		图像文件位于HTML文件同一级 如	<img src="baidu.gif" />
下一级路径	符号 / 图像文件位于HTML文件下一级	如<img src="images/baidu.gif" />
上一级路径	符号 ../ 图像文件位于HTML文件上一级	如<img src="../baidu.gif" />
2.路径之绝对路径

绝对路径: 是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。

例如,“D:\web\img\logo.gif” 或完整的网络地址 “http://www.itcast.cn/images/logo.gif”

第一种一般不采用,因为每个人的电脑文件夹情况不同,通常的操作是寻找网络中存在绝对地址的图片,直接右键“复制网络地址”得到。这个地址是绝对的,路径是唯一的。

4.7 HTML常用标签

4.7 超链接标签(重点)

在HTML标签中,标签用于定义超链接,作用是从一个页面链接到另一个页面。

1.链接的语法格式

<a href="跳转目标" target="目标窗口的方式"> 文本或图像</a>

点击这个文本或图像,就可以去到我们想要去往的地址。

单词anchor ,意为锚

两个属性的作用如下:

  • 属性 作用
  • href 用于指定链接目标的url地址,(必须属性) 当为标签应用herf属性时,它就具有了超链接的功能
  • target 用于指定链接页面的打开方式,其中_self 为默认值,_blank 为在新窗口中打开方式。

2.链接的分类

1.外部链接,例如 <a href="http://www.baidu.com" target = "_blank"> 百度 </a>
<a>百度</a>,但是其中前一个<a>中有一个必须的属性:href
所谓外部链接,就是外部网站的一个链接地址
外部链接的地址是有规定的。必须以http://开头
还有一个target属性需要注意,主要作用是以什么样的方式打开,默认 
target = "_self"
  • target 打开窗口的方式 默认的值是_self 当前窗口打开页面 _blank新窗口打开页面
2.内部链接:网站内部页面之间的相互链接,直接链接内部页面名称即可,例如
<a href="index.html">首页</a>
这两个页面都在我们的目录文件夹内,是目录文件夹中的两个页面相互跳转。
3.空链接:如果当时没有确定链接目标时,
<a href="#">首页</a>
  • 4.下载链接:如果href里面地址是一个(特殊)文件或者压缩包,会下载这个文件
    最常见的就是一种压缩包的形式,在网上下载软件时,都有下载地址,下载的基本都是压缩包的形式(文件.exe 或者是 zip 等压缩包形式)

  • 5.网页元素链接:在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接。

    <a href="http://www.baidu.com"><img src="img.jpg"/></a>
    

    总结

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <h4>1.外部链接</h4>
        <a href="http://www.qq.com" target="_blank"> 腾讯</a>
        <a  href="http://www.itcast.cn" target="_blank"> 传智播客</a>
        <h4>2.内部链接:网站内部页面之间的相互链接</h4>
        <a href="公司简介.html" target="_blank">公司简介</a>
        <h4>3.空链接:#</h4>
        <a href="#">公司地址</a>
        <h4>4.下载链接: 地址链接的是 文件 .exe 或者是 zip 等压缩包形式</h4>
        <a href="img.zip">下载文件</a>
        <h4>5.网页元素的链接</h4>
        <a href="http://www.baidu.com"><img src="img.jpg" /></a>
    </body>
    </html>
    
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值