一、插入图片
(1)简单的试下
一个网站中最引人注目的一定是那些图片,而不是文字,那么如何在我们自己的网站中插入图片呢?
很简单,使用img标签便可以实现,要注意的是这是一个单标签,插入图片我们可以写作
<img src="图片名(图片地址)">
<img src="3.webp" alt="山" title="3" width="300" height="300">
譬如这串代码它就可以展现出一个名叫3.webp的图片在我们的网站上
注意:这个3.webp(或者别的你想在网站上输出的图片)文件要通过如上图方式输出首先得满足的条件就是这个文件得是跟你的网站放置在一个文件夹中你才可以通过这种方式(相对路径)去访问它,
后面会详述三种图片路径。
其中alt的作用是在图片打不开的时候显示的内容,如图所示:
title的作用则是让我们在用光标触摸图片的时候显示的提示内容
截图时光标消失了,但这里是有光标的)
width和height分别代表了图片的宽度和高度,单位依然是像素(px)
将图片输出在我们自己的网站中
(2)图片路径详述
图片路径一共分为三种,绝对路径,相对路径,和网络路径
我们先讲简单的绝对路径,绝对路径是电脑盘符存储的具体路径,什么意思呢?举个例子
如图所示,我在这个文件夹中有一个图片是吧
那么我被我选择的那个D:\新建文件夹就是我们电脑盘符存储的具体路径,即绝对路径,我们可以通过这种方式访问它
<img src="D:\新建文件夹\1.jpg" alt="风景">
网络路径顾名思义就是通过网站来输出图片和绝对路径差不多
<img src="http://iwenwiki.com/api/newworld/images/n1.png" alt="111">
http://iwenwiki.com/api/newworld/images/n1.png这串网址可以打开一个图片,可以自己去试下
最后一种相对路径,这个就比较复杂一点,我先把访问方式给摆出来
子级访问:/ 同级访问:./(可省略) 父级访问:../
什么是子级访问呢?很简单,比方说,一个文件夹中装着你设计的网站,和一张图片,图片又放入了另一个文件夹中,而网站没再放入别的文件夹中,这个时候图片相对于网站那就是子级关系
同级访问显而易见那便是并列的时候
父级访问便是网站位于文件夹中,而图片在文件夹外时
这么说有点抽象,如图所示,4.webp相对于Welconme.html就是一个子级关系,如果要访问它应该写作
<img src="./test_6_23/4.webp" alt="4"> //这个alt="4"并不影响图片的输出,你也可以改成alt="10086",并不影响图片的正常输出
3.webp和Welcome.html则是同级关系,3.webp和World.html则是父级关系
二、超链接文本
我们在很多网站上都能够点击上面的有些内容实现跳转到其他网站,这便是超链接文本
标签为<a></a>这是个双标签<a href"完整的网站地址">(你想让读者看到的内容)</a>
注意:必须是完整的网站;你给读者看到的内容无论是文本还是图片,还是别的什么都是可以的
举个例子
<a href="https://www.baidu.com">百度</a>
这串代码会呈现出这样的效果,我这里已经点击过了,因此程序的是紫色的,在没点击之前呈现的是蓝色的,当你把光标放置上去并长按,呈现红色。
好了,今天的分享到这儿就结束了,感谢你的阅读,祝各位友友前程似锦O(∩_∩)O