html基础学习第四节:链接和图片以及一些布局定义

图片的定义

上几节课,我们熟悉了html的定义方式,以及了解了如何定义字体的样式大小等,这节课,我们来了解下图片和链接以及布局的部分定义方式,下面先来看看图片的定义

<img src="1.jpg" alt="html基础学习第四节:链接和图片以及一些布局定义" />

上面img是定义标签,src是属性标签,1.jpg是图片地址,图片地址可以是绝对地址也可以是相对地址!这里必须先明白地址的概念,一个,绝对地址和相对地址,字面上很容易理解,其实说的就是链接地址或者路径地址,比如,你创建了一个html文本,图片在相同目录,那么编写的方式就是上面那样,1.jpg是图片的名字。如果是链接的就是http://...jpg的地址,再举例一个

<img src="http://www.xxx.com/xxx.jpg" alt="html基础学习第四节:链接和图片以及一些布局定义" />

这里我来详细说明下关于为什么是<img src="" />而不是<img src="">,其实这两个写法在html里面都是正确的,可是xhtml里面是错误的,xhtml里面的所有标签都必须封闭,这是个规范!所以我希望大家以后都按照一定的规范的好习惯,避免以后学习xhtml的时候出现很多错误,养成好习惯是很重要的!和以前的课程一样讲过&ltbr />的用法是同理,封闭标签,好,图片的引用就到此为止

链接的定义

上面我们说了图片的引用再来说说链接的定义吧,下面看一组代码

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

上面看到了一组代码了吧,用<a href=""></a>来定义链接,其实这里链接也是可以分为绝对链接和相对链接,比如1.html里定义跳转到2.html,而且两个文件在同一个目录内,那么,可以这样写<a href="2.html">进入另一个网页</a>这里2.html就是另一个html的名字,如果是php,比如index.php,也可以改成这个,反正链接到相应的网页文件即可,这就是相对链接

图片链接的套用

大家都看过,有的图片一点击就是链接对吧,大家也知道链接定义都有个链接名对吧?如果有去玩过论坛的就知道,用UBB套用可以弄图片链接,那么,html也是一样的,下面来看一个代码

<a href="www.baidu.com"<>img src="logo.png" alt="html基础学习第四节:链接和图片以及一些布局定义" /></a>

大家看到了吧,这里,就是代码的套用,这种套用,需要讲究层级关系,这一点以后大家慢慢研究学习就知道了,这里先不多说,我们来看看这个代码,这里面,两个=后面都可以用绝对地址和相对地址,大家自己课后慢慢练习

<target>属性的定义

大家都经常上网,知道某些连接打开是新窗口打开,而有的是直接打开,普通的连接,如果不加入属性来定义的话是直接打开的,那么,怎么做到新窗口打开呢?下面来给大家看一段代码

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

大家不难看出,上面target的属性定义了链接用新窗口打开,其实,只需要定义一个target属性就可以做到!那么target属性除了这个外还有哪些呢?这个以后再教你们

基础布局定义

上面我们说了一些网址的定义方法和图片的定义方法,这里我们来说说上一节课没有说完的关于排版的定义,上节课,我们只讲了布局定义里面的字体样式定义和颜色定义等,这一节我们来深入了解一下,看看下面代码

<center>居中</center>

这里,是表示居中,和<p align="center">的属性是一样的!好,由于时间有限,布局的下一节课细说,这里就讲到此为止

小结

这一节课没有太过于复杂,但是希望大家结合上一节课的内容一起练习一遍,下一节课准备深入讲解布局定义,有可能花两部分写

课后练习

这一节,让大家练习下连接和图片连接等等的引用,下一节说说图片的大小等定义以及布局定义方法

单词

这一节单词没有太多,主要了解a定义一种链接,而href定义连接的属性是网页链接,img定义图片,src定义的图片属性,center定义居中!target定义链接的打开属性,_blank定义连接以新窗口打开的属性

教程到此结束,有疑问回复评论

html基础学习第四节:链接和图片以及一些布局定义

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

目前评论:2   其中:访客  2   博主  0

  1. avatar 381560201 1

    学习学习 哈哈哈哈哈哈 :evil:

  2. avatar 381560201 1

    :razz:

评论加载中...

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

图片 表情