一、如何插入图像?
<img>元素可以向网页插入图片,<img src="XXX" />,XXX就是图片的路径,可以是本地路径或者网址,例如:<img src="http://www.htmq.com/images/logo.gif" />就是链接的网页地址。<img>标签没有结束标签,跟<br>标签一样加个斜线"/",完整的形式应该是<img src="" />。<img>一定要有src属性的,不要丢。
我们来试着插入一张图片吧。dreamweaver中输入<img src="后就会弹窗引导打开需要嵌入的图片,非常方便,不用手动输入图片的地址了。
二、修改图像显示的大小
width属性和height属性可以规定图像的大小,其中width指定图像显示的宽度,height指定图像显示的高度。
我们将img标签添加上width属性和height属性:<img src="_olfwsqpsg4gdmeb9qah-a.jpg" width="600" height="200"/>
完成后的显示效果:
三、html中的表格
html中<table>定义表格,简单的 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。
table标签也可以加上width属性和height属性,在网页中添加了一个table表格:
<table border="1" width="300" height="111">
<tr>
<th>th1</th>
<th>th2</th>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
</tr>
</table>
添加表格后的效果图:
table中的border属性决定了表格边框线的厚度,0就是没有。
border值改成0之后就是这样的:
四、我们来制作个复杂点带图片的表格吧
结合前面的知识,做一个带有表格和文字的表格。
table如下,仅仅是在td里嵌入了<img>标签,非常简单:
<table border="0">
<tr>
<td>
<img src="../../Public/Pictures/Sample Pictures/Chrysanthemum.jpg" width="100" height="100" />
<p>菊花</p>
</td>
<td>
<img src="../../Public/Pictures/Sample Pictures/Penguins.jpg" width="100" height="100" />
<p>企鹅</p>
</td>
<td><img src="../../Public/Pictures/Sample Pictures/Desert.jpg" width="100" height="100" />
<p>沙漠</p>
</td>
</.tr>
<tr>
<td>
<img src="../../Public/Pictures/Sample Pictures/Lighthouse.jpg" width="100" height="100"/>
<p>灯塔</p>
</td>
<td>
<img src="../../Public/Pictures/Sample Pictures/Jellyfish.jpg" width="100" height="100" />
<p>水母</p>
</td>
<td>
<img src="../../Public/Pictures/Sample Pictures/Koala.jpg" width="100" height="100" />
<p>考拉</p>
</td>
</tr>
</table>
同学们自己动手试试哦,熟能生巧。这篇教程介绍了<img>标签用法和<table>标签的用法,同学们复习一下然后继续学习吧!