HTML小白初步学习教程6-职坐标

HTML小白初步学习教程6

沉沙 2018-10-25 来源：阅读 1328 评论 0

摘要：本篇教程探讨了HTML小白初步学习教程6，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

本篇教程探讨了HTML小白初步学习教程6，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

先来看看常用图形的种类：

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

复制代码

效果：

image

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   
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的时候，坐标原点在图片左上
复制代码

  
  <img src="images/chunhuayan.png" hspace="40" height="240" align="left" alt="小说《春花厌》的封面"/>
       一个人为了生存能做什么？
   别人眉林不知道，但她可以为之付出一切，包括身体和尊严。
   她渴望生命能像二月里的春花一样开得肆无忌惮，哪怕短暂，现实中却活得如同淤泥里面的癞蛤蟆，缩头缩脑，丑陋而肮脏。
   她只知道，有了命，才能谈其它。连命都没了，还有什么可说的？
   只是她怎么也没想到，最终她竟会栽在慕容璟和那个混蛋的手中，那个曾把她当成玩物去讨好另一个女人，也被她狠狠回报过的男人，那个小肚鸡肠睚眦必报的男人。
   那个混帐男人！
   <p><p>点击图片阅读
  <a href="//baike.baidu.com/link?url=jNK_5t6js3ay8MZe-OrCMEIaowu8Ep6ktIYCHJ2dtb3LWfI0HRVo4e2-sDWNr4WgN87C2yzzRTI22vQ8Hop8Gq">
  <img src="images/chunhuayan.png" height="40"></a>
  
  <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="//baike.baidu.com/link?url=jNK_5t6js3ay8MZe-OrCMEIaowu8Ep6ktIYCHJ2dtb3LWfI0HRVo4e2-sDWNr4WgN87C2yzzRTI22vQ8Hop8Gq" target="_blank" alt="左"/>
   <area shape="rect" coords="150,0,300,340" href="//baike.baidu.com/link?url=c17VFVHgMRK1GtCrFEy2KVPJTlFmU5EiMHqcGrTkSQJ4d0qrw8rPAjQc214czwH8vJYZGF-GOGG_Pbse0_X58a" target="_blank" alt="右"/>
  </map>