网页设计a元素 第1篇
看到上边的语法,我们是不是想到了第一天讲述的img标签的用法,还记得吗?是不是里面也有个属性,src,如下图:
其实绝大多数属性都是这样呈现的,一般以双引号为主,有时候也会使用单引号;单双引号,表述是一致的,下面我们举个例子,新建一个网页,引入一个图片,如下图:
网页设计a元素 第2篇
目前,零基础这个文件夹里,有两个文件,“a标签.html”这个文件里的代码如下:
跳转地址为同目录的“远程图片加载.html”文件,target属性为_blank,在新的窗口打开,我们看下效果:
上边的例子,大家可以实际操作一下。
之前说过,a标签,不仅仅可以是文字,也可以是图片,比如我们给上边的“远程图片加载.html”这个文件里的图片,加上超链接,让它跳转到百度,代码如下:
效果如下:
网页设计a元素 第3篇
效果如下:
两个属性都设置的话,那么它就会按照你设置的进行展示,有可能会出现图片的拉伸或压缩情况,这种情况的出现,是因为你的图片过大或者过小而导致的,在实际的开发中,我们也要考虑到这种情况,一般UI,会给我们标注图片的尺寸,或者比例,我们按照UI的标注去写,就没有问题。
上边两个就是img的属性,其实也没啥难的,无非就是控制宽高而以,需要注意一下,多个属性之间,我们使用空格隔开,我们再去看另一属性,alt属性,alt 属性用来为图像定义一串预备的可替换的文本,什么意思呢,就是在图片无法加载,或者加载错误的时候,所展示的文本信息,如下图,我们故意把图片的地址写错:
因为我们没有“”这张图片,加载肯定是错误的,我们看下效果:
以上是图片加载错误后,给用户展示的图片描述信息,如果说图片展示正常,用户鼠标滑过图片,就给出图片的描述,我们该如何设置呢?实现这种效果,我们就必须再去掌握它的另外一个属性“title”,我们直接看例子: