简单网页连接图片制作

<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="#" οnclick="window.close()">关闭</a>
将href="#"是指联接到当前页面，其实是无意义的，页面也不会刷新，关键是后面的onclick，当点击“关闭”时，会执行window.close()代码。

你或许会说为什么不直接写成<a οnclick="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/>
就可以了