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

图片的定义
链接的定义
图片链接套用
链接的<target>定义属性
基础布局定义
小结
课后练习
单词

图片的定义

上几节课，我们熟悉了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定义连接以新窗口打开的属性