Website梦工厂(Nov.16)——IMG标签让你的网页图文并茂

0
Want create site? Find Free WordPress Themes and plugins.

wlg

欢迎大家来到十一月的Website梦工厂,我老Q今天接着教大家HTML5。相信只看标题各位天才淀粉就能明白——没错,我们今天要学习在网页里插入图片的标签——IMG标签。废话不多说,让我们开始学习吧!

顺便向大家公布一个好消息——我换了台装Win10的新电脑,在此还要感谢我的老爸(其实我是怕大家看到图片里面有些不同来问我,所以我就主动说吧)。

首先,我们还是要打开我们的编程利器——HBuilder来进行我们的学习,已经建立了“学习”项目的童鞋不用像我一样再建了,我是因为换了新电脑,没法转移才重建项目的。首先我们要新建一个HTML文件,类型就选“HTML5”。

在新建的HTML文件里敲入如下代码,此代码是文字部分。

bu-huo

下面我们就要开始IMG标签的介绍,了解它的用法和相关属性了

现在我们请W3School君来介绍一下IMG标签,请看下面

img 元素向网页中嵌入一幅图像。

请注意,从技术上讲,<img> 标签并不会在网页中插入图像,而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。

(这里是老Q的补充介绍)IMG标签必须依靠src属性,否则IMG标签就是空壳一个。

 

让我们接着学习IMG标签的用法和相关属性

IMG标签用法格式如下

<img></img>

这时的IMG标签就是之前提到过的“空壳”IMG标签,我们需要添加src属性来将图片引入到IMG标签里,添加了src属性的IMG标签用法如下

<img src=”图片名称”></img>

如果你想给这个图片增加一个替代文本,那么你就用alt属性,添加了alt属性的IMG标签用法如下

<img src=”图片名称” alt=”图片替代文本”>

PS;W3School上面说alt是IMG标签的必备属性,其实在我看来alt添加上去也没个啥卵用。

大家都学会了IMG标签的用法,那么现在让我们试一下

首先我们从网上下载一张图片,这里我上度娘图片下载的这张图

934f3c3c1a45b9afaee8ec698008e9ec

把下载下来的图片放入HBuilder“学习”项目里的img目录

接着我们在HBuilder里敲入如下代码bu-huo

接着我们用“运行”来打开页面

效果就是这样地~~

 

bu-huo

 

好了,今天我们的IMG标签学习完了。我们下期再见~

 

Did you find apk for android? You can find new Free Android Games and apps.

关于作者

目前是一个:业余菜鸟开发者&架构/初中生/独立博客博主,喜欢:PHP/建站/互联网基础设施/方言文化/玩音乐。反正就是搞的东西多,却每样都不是炉火纯青。

发表评论