HTML初步学习6
这次开刀的是图像，学完就关电脑
先来看看常用图形的种类：
GIF——LZW压缩，十一压缩相同颜色的色块来减少图像的大小，但是LZW压缩不会造成任何品质上的损失，压缩效率也高，而且平台移植性好，所以适合互联网，但是，但是，但是，只能处理256色，所以用来做商标 标题或者<256色图像
JPEG——嗯，还不错
PNG——非破坏性网页图像文件格式，也很不错
以后看见再加。。。
1：背景图（可见HTML初步学习2）
不过，如果想调整背景图大小，那么就不能用HTML初步学习2的方法，用下面这个仁兄的：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 4 <title>hello world</title> 5 </head> 6 <body> 7 <div id="Layer1" style="position:absolute; width:100%; height:100%; z-index:-1"> 8 <img src="pictures/background.jpg" height="100%" width="100%"/> 9 </div> 10 </body> 11 </html>
2：图像大小调整
1 <img src="images/man2.jpg"> 2 <img src="images/man2.jpg" height="160"/> 3 <img src="images/man2.jpg" width="160"/> 4 <img src="images/man2.jpg" height="160" width="80"/> 5 <img src="images/man2.jpg" height="200" border="4"/> 6
效果：
3：图像的间距及位置
1 <img src="images/man1.jpg" height="180"/> 2 如果不做位置调整，会觉得文字贴着图片很紧凑，不好看。。。。 3 <p></p> 4 <img src="images/man1.jpg" height="180" hspace="80" vspace="40"/> 5 如果做过一个微调，可能会显得齐整些吧
1 <!--align有多个选项来对其图像文字的位置，不一一罗列--> 2 我是水平线。。。 3 <img src="images/man2.jpg" height="169" align="texttop" hspace="5"/> 4 <img src="images/man2.jpg" height="169" align="middle" hspace="5"/> 5 <img src="images/man2.jpg" height="169" align="bottom" hspace="5"/>
4：超链接
注：在用map的时候，坐标原点在图片左上
<!--用过left之后，就出现全都在left一边，所以最好不要随便用这个属性--> <img src="images/chunhuayan.png" hspace="40" height="240" align="left" alt="小说《春花厌》的封面"/> 一个人为了生存能做什么？ 别人眉林不知道，但她可以为之付出一切，包括身体和尊严。 她渴望生命能像二月里的春花一样开得肆无忌惮，哪怕短暂，现实中却活得如同淤泥里面的癞蛤蟆，缩头缩脑，丑陋而肮脏。 她只知道，有了命，才能谈其它。连命都没了，还有什么可说的？ 只是她怎么也没想到，最终她竟会栽在慕容璟和那个混蛋的手中，那个曾把她当成玩物去讨好另一个女人，也被她狠狠回报过的男人，那个小肚鸡肠睚眦必报的男人。 那个混帐男人！ <p><p>点击图片阅读 <a href="http://baike.baidu.com/link?url=jNK_5t6js3ay8MZe-OrCMEIaowu8Ep6ktIYCHJ2dtb3LWfI0HRVo4e2-sDWNr4WgN87C2yzzRTI22vQ8Hop8Gq"> <img src="images/chunhuayan.png" height="40"></a> <!--左上0,0 右下为300,340--> <p><p><p>点击不同分区到达不同地方 <img src="images/chunhuayan.png" height="340" width="300" vspace="20" usemap="#chunhuayan"/> <map name="chunhuayan" id="chunhuayan"> <area shape="rect" coords="0,0,150,340" href="http://baike.baidu.com/link?url=jNK_5t6js3ay8MZe-OrCMEIaowu8Ep6ktIYCHJ2dtb3LWfI0HRVo4e2-sDWNr4WgN87C2yzzRTI22vQ8Hop8Gq" target="_blank" alt="左"/> <area shape="rect" coords="150,0,300,340" href="http://baike.baidu.com/link?url=c17VFVHgMRK1GtCrFEy2KVPJTlFmU5EiMHqcGrTkSQJ4d0qrw8rPAjQc214czwH8vJYZGF-GOGG_Pbse0_X58a" target="_blank" alt="右"/> </map>
