简单网页连接图片制作
<html>
<meta http-equiv=Content-Type content="text/html; charset=UTF-8">
<title>网页</title>
<body>
<h1 style="text-align:center;">2012年</h1>
<div class="taglist">
<!--
<ul class="tags">
<li class="tag tag1"><a href="./2012/1.JPG" target="_blank"><img src="./2012/2.JPG" width="80px" height="100px"/></a></li>
<li class="tag tag1"><a href="/i?tn=list&word=liulan#%E5%AE%A0%E7%89%A9|%E5%85%A8%E9%83%A8|0|0">宠物</a></li>
<li class="tag tag2"><a href="/i?tn=list&word=liulan#%E5%AE%A0%E7%89%A9|%E8%90%8C%E8%B4%A7|0|0"> 礼物</a></li>
</ul>
-->
<a href="./2012/1.JPG" target="_blank">
<img src="./2012/2.JPG" width="80px" height="100px" style="margin-right: 10px;"/>
<a/>
<a href="./2012/1.JPG" target="_blank">
<img src="./2012/2.JPG" width="80px" height="100px" style="margin-right: 10px;"/>
</a>
<a href="./2012/1.JPG" target="_blank">
<img src="./2012/2.JPG" width="80px" height="100px" style="margin-right: 10px;"/>
</a>
<a href="./2012/1.JPG" target="_blank">
<img src="./2012/2.JPG" width="80px" height="100px" style="margin-right: 10px;"/>
</a>
<br/>
<a href="./2012/1.JPG" target="_blank">
<img src="./2012/2.JPG" width="80px" height="100px" style="margin-right: 10px;"/>
</a>
</div>
</body>
</html>
说明:
1。style="text-align:center;" 是让“2012年”居中。
2。<ul class="tags">
</ul> 是关闭(结尾)
是之间的内容目录的形式出现。
3。<!--
-->
是之间的内容取消(不用)的意思。
4。<a href="#"> 是联接是当前页面。
</a> 是关闭(结尾)
通常有如下用法:
<a href="#" onclick="window.close()">关闭</a>
将href="#"是指联接到当前页面,其实是无意义的,页面也不会刷新,关键是后面的onclick,当点击“关闭”时,会执行window.close()代码。
你或许会说为什么不直接写成<a onclick="window.close()">关闭</a>
如果这样写,关闭这两个字就不会作为超联接处理,效果看上去会差一些。你可以自己试试。
<a标签,href代表的连接地址,如:href="http://www.baidu.com",这样你可以通过此标签页面跳转到百度;
你说的href="#"代表的连接地址是本页面[页面跳转到本身页面];
5。<a href=“#”/>
这个是现实图片的代码。。
img表示当前标签现实图片显示
src表示你要显示图片的地址。。这个是必须要的
alt:表示在显示图片后。鼠标移到图片上显示的文字。这个可以不要也可以为空
注意:后面要加结束符‘/’<img scr="" alt="" />
比如:
<img src="http://img.baidu.com/img/logo-zhidao.gif" alt="这是百度知道的图标" />
图片链接来源于这个网址。
后面的alt=""引号里面的是对图片的描述。
你把那个地址复制,在浏览器中打开,就可以看到图片了。
6。style="margin-right: 10px; 是图片与图片的距离多大。
7。<br/> 是下一行的
8。<meta http-equiv=Content-Type content="text/html; charset=UTF-8"> 是使“网页”不是乱码
<title>网页</title>
9。图片与图片上下距离
多放点
<br/>
<br/>
<br/>
就可以了