链接很简单,就是被<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>标签的细节的,但是太多了,很晚了,想睡觉,留到明天再写,慢工才能出细活。