大学牲HTML作业三:链接的细节补充

链接很简单,就是被<a></a>包裹的部分,同时<a href="链接">链接文本</a>就是一个完整的html文本链接语句了。

例如:

<a href="https://n.sinaimg.cn/spider20230302/652/w950h502/20230302/5faa-c51bf98e99783d765c102a5c0f897b85.jpg">一张图片</a>

预览结果如下:

点进链接之后就是一张图片,这是最简单也是最常用的一种文本链接方式

那么图片链接呢?上

述方式只会甩出一个链接,那么我要看图就必须点进链接吗?当然不行

所以图片有一种类似的方式:<img>标签,具体用法是:<img src="图片">,也可以添加一些细节,例如在后面加上宽度(width)、高度(height)等,例如:
 

<img src="https://n.sinaimg.cn/spider20230302/652/w950h502/20230302/5faa-c51bf98e99783d765c102a5c0f897b85.jpg" width="500px">

上述语句就是在网页中放置一张图片,并将宽度设置为500像素

这样当然可以达到预期效果,但是!我们平时进入网页看到图片是可以点击放大的,上述写法的图片不可点击查看,这和平时的习惯很不相同,所以上述用法并不常见。于是就有了下面的方法:

<a href="https://n.sinaimg.cn/spider20230302/652/w950h502/20230302/5faa-c51bf98e99783d765c102a5c0f897b85.jpg">
    <img decoding="async" src="https://n.sinaimg.cn/spider20230302/652/w950h502/20230302/5faa-c51bf98e99783d765c102a5c0f897b85.jpg" alt="示例图片">
  </a>

上面我们讲的<a></a>中间放置的是链接文本,我们在这里将文本改为图片,网页将不会显示链接,而是显示一张图片,点击图片时会跳转到图片所在的链接(当然如果href中的链接是其他链接的时候也会跳转到其他链接),示例效果如下:

 

 点击之后进入图片链接:

这样就方便用户查看图片与下载图片了,非常人性化。

此外。还有下载链接,只需要在<a href="文件" download><a>就好了,只是增加了一个download语句。

本来还想写一些关于<head></head>标签的细节的,但是太多了,很晚了,想睡觉,留到明天再写,慢工才能出细活。

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值