html基础用法④——图像和超链接

来源：互联网发布：知乎专栏 pytorch 编辑：程序博客网时间：2024/06/05 04:43

为了让网页更加直观绚烂，我们在插入文字的同时最好也要配上图片来增加网页的美观度和阅览性。
通常在html中我们使用的是

<img src="" alt="" />

src后面跟图片的url

<img src="" alt="" title="" width="" height="" />

除此自外，alt文字代替图像(当图片无法加载出来显示的文字),title则是图片的注释(鼠标放在图片上会显示图片的中文注解)，width和height来控制图片的宽高。

慕课网logo

为了能够更加顺利的添加图片，我们要导入一个概念，路径。

路径分两种，相对路径和绝对路径
首先我们引入一个例子，我在网上找到一张图——度娘的LOGO，我把它保存在桌面上的WEB文件夹img中，我现在需要创建在web文件夹中创建一个img.html，来引用这张图片根据上面的内容，只需要在代码中写入

<!DOCTYPE html><html>    <head>        <title>图片与超链接</title>        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">    </head>    <body>        <img src="C:\Users\kinght\Desktop\WEB\img\bd_logo1_31bdc765.png">    </body></html>

这里写图片描述

但是我现在要改变我的WEB服务路径，我要把他从桌面放到D盘里
这里写图片描述
现在打开img.html页面

我们会发现这张图片已经显示不出来了，如果要让他显示出来，我们需要编辑页面更改他的src值。

<img src="D:\WEB\WEB\img\bd_logo1_31bdc765.png">

这里写图片描述
现在内容少还好，如果到后面，我们做的页面大了，复杂了，一个页面都有可能有几十上百个图片，如果移动一次位置，岂不是要被累死。

这里我们就应用了一个相对路径，我们接着看刚才的那个例子。
同样的一个页面

<!DOCTYPE html><html>    <head>        <title>图片与超链接</title>        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">    </head>    <body>        <img src="img\bd_logo1_31bdc765.png">    </body></html>

我们这里把引用的链接改为了img\bd_logo1_31bdc765.png，这时候我们保存一下，就发现可以随意的移动位置，图片一样的能够显示出来。

这就是相对路径，相对路径和绝对路径的区别就是参照物的不同，绝对路径是以系统根目录为参照物，路径就是系统中的位置，而相对路径就是以当前编辑页面为参照物，路径是相对于当前页面的路径。

在网页中，我们学会了插入文字和图像，在网页中还有一个必不可少的就是超链接了。
超链接的定义其实就不用说了，就是给其他的页面或者资源进行跳转使用

<a href="">

这个链接可以和图片一样，添加绝对路径和相对路径来进行引用。

我们还是举一个例子吧，刚才我们添加的图片是百度的LOGO，我们为了能够支持快捷访问百度，我决定在这个图片上面添加一个超链接进行应用。

<!DOCTYPE html><html>    <head>        <title>图片与超链接</title>        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">    </head>    <body>        <a href="http://www.baidu.com"><img src="img\bd_logo1_31bdc765.png"></a>    </body></html>

这时候我们打开图片就可以发现，图片是可以点击的，并且会跳转到百度的网站上去。

在制作网页的时候，我们通常会遇到我们需要做一个超链接效果，但还没有确定链接到什么地方的时候，这时我们可以填写url的地方用#号键进行代替。

<a href="#"></a>

这时候点击图片，他跳转就会在本页面内进行跳转。

尝试过前面超链接的小伙伴会发现一个问题，为什么我们打开的页面都是在当前页面打开的，假如我当前页面还有用，不想改变该怎么办？

其实a href是可以添加target属性来修改打开方式的。
_self 当前窗口打开（默认值）
_blank 打开一个新的窗口
我们来试一下效果
百度

<a href ="http://www.baidu.com" targe="_self">百度</a>

百度

<a href ="http://www.baidu.com" targe="_blank">百度</a>

如果链接内的文字不足以描述链接的话，我们还可以添加title来添加备注，也可以添加name来给这个进行命名（后面锚点有用）
百度

<a href ="http://www.baidu.com" targe="_self" title="百度" name="百度1">百度</a>

百度

<a href ="http://www.baidu.com" targe="_blank" title="百度" name="百度2">百度</a>

可以尝试把鼠标移动/点击到百度文字上，来感受一下效果。

当网页长的时候，我们需要滑动来查看网页。
不过一直滑动，显得特别累赘，
所以我们可以通过设置锚点来进行跳转。
首先感受一下
百度1
百度2
返回页首
这是源代码

<a href="#百度1">百度1</a><a href="#百度2">百度2</a><a href="#aabc">返回页首</a>``我们开始设置了百度1和百度2两个超链接名字的，所以我们可以通过#号+名字来进行跳转。<hr />超链接还可以拓展网页的功能<a href="mailto: 邮箱地址">邮箱</a><a href="下载">下载</a>

邮箱

下载

“`

阅读全文

0 0