当前位置:网站首页 / QQ技术/html从入门到放弃(4)------有图有真相

html从入门到放弃(4)------有图有真相

时间:2017年05月12日 | 分类 : QQ技术 | 评论 0


上次我们讲了html的丰富多彩的文本,这次我们要讲一下html的有图有真相的的图片标签4

 

 

在我们我的一个文件夹下面,有这样两个文件,一个是我们的logo,一个是我们的html网页文件

 

QQ拼音截图未命名.png

 

提问怎么让这张图片在网页是显示呢? 答案还是用我们的html标签

 

首先和以往一样先把一个html的基本格式写出来。

QQ拼音截图未命名.png

 

然后接下来就轮到我们今天的图片标签出厂了 img 标签 

 

QQ拼音截图未命名.png

 

一句代码解决问题 img是图片标签 src是引用的意思 引用同级目录下的 logo.ong这个文件

 

效果图

QQ拼音截图未命名.png

 

假如图片和网页不在一个目录下,而是在img文件夹下应该怎么引用?

 

QQ拼音截图未命名.png

这样把目录的名字写上就可以了。

 

把图片引用讲的差不多了,等下在最后会给大家留一个关于图片应用的思考题希望大家能认真完成。

 

接下来在讲 img标签内部的另外一个ait属性

alt.png

 

你把这个属性写上去,然后打开网页,你会惊奇的发现。什么都没有变化。

 

还是一个图片,那这个标签的作用和效果去哪里了呢?

 

把鼠标放到图片上面,会浮现出一段刚才我们写的文字。

 

QQ拼音截图未命名.png

 

这个就是alt 这个属性的作用了。

 

官方给这个属性的定义是 图像的替代文本

 

我们也可以简单的理解为图片的备注的意思。

 

这个让标签的作用是 在图片显示不出来的时候,或者是找不到的时候显示这段文本,像这样

 

QQ拼音截图未命名.png

 

这个文本还有一个作用就是告诉百度等搜索网站,这张图片的内容是什么。这个在网站后期的搜索引擎优化中是非常重要的,我们初学不需要知道那麽多,我们只要知道alt这个标签里面写图片的内容文本就可以了。

 

 

接下来是这节课程的课后小练习时间了。

 

有这样两个目录 html 和img 

QQ拼音截图未命名.png

 

html目录下是一个 1.html 文件

QQ拼音截图未命名.png

 

img目录下是一张图片

QQ拼音截图未命名.png

 

请问在不改变文件位置的情况下,html目录下的 1.html 如何引用到 img 目录下的 logo.png

 

 


万达招商,万达招商QQ提供html教程教程 ,转载必须注明文章出处地址: /QQjishu/1209.html

猜你喜欢
额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

热门文章
最近发表
标签列表
友情链接:万达娱乐主管QQ  万达娱乐直属  万达娱乐平台  万达娱乐招商  万达娱乐直属QQ  万达娱乐登录  万达直属  万达娱乐  万达登录