标签：logo round url 合格 epg repeat 简单 地方 border
在html网页中，我们也可以往网页中插入图片；图片的格式有很多种，分别有JEPG格式、PNG格式、GIF格式；每种格式都有自己的特点以及缺点，对于图像格式的使用并没有严格的要求，一般根据开发者的习惯而定，但是一般来说，Logo、Banner、简单线条构图的时候比较适合使用PNG格式 ；照片、图画等比较适合使用的是JEPG格式；动图的话自然是GIF格式啦~
在网页中插入图片的标签是：<img/> 说明：img就是image的缩写，src就是图片的路径；这里要特别说明一下：图片的路径是已经继承了这个html文件的路径了，如果还往后延伸的话，直接写延伸部分；例如：我的html文件的路径是：F/html源文件 我的路飞图片路径：F/html源文件/图片/路飞 （所以只需要写后面部分就好了）。
在网页的左边、中间、右边插入图片有2种方式（中间插入只有一种）；分别是在img标签中添加位置命令和在p标签中添加，代码如下
<p><img src="图片/路飞.jpg" align="left"/></p> <p align="right"><img src="图片/路飞.jpg"/></p>
但是对于在中间插入图片只有一种方式 ，只有在p中使用居中命令的方法可行，在img中使用居中命令无效；不信？看无效样例：
<p><img src="图片/乔巴.jpg" align="center"/></p>
what happened？！！我不是使用了居中命令了嘛？怎么没效果？？是的，居中命令在img标签中使用无效！！！因而会显示默认的居左格式。
让图片和文本文字对齐有3种情况，分别是图片最上边与文本对齐、图片中间与文本对齐、图片的底边与文本对齐。
具体代码：（如果没有说明的话，居下边缘对齐是默认的！）
<p><img src="图片/娜美.jpg" style="vertical-align: text-top"/>我在最上面</p> <p> <img src="图片/乔巴.jpg" style="vertical-align: middle"/>我在中间哈哈 </p> <p><img src="图片/娜美.jpg" style="vertical-align: text-buttom"/>我在最下面~~</p>
一个合格的网页自然少不了图片和文字的衬托，那么我要在使用图片和文字的使用，怎么控制两者之间的距离呢？我们可以使用hsapce来用控制水平方向上的距离，vspace来控制垂直方向上的距离；例如：
<p> <img src="图片/娜美.jpg" hspace=40/> 我水平方向距离其他东西40px</p> <p><img src="图片/娜美.jpg" vspace=40/>我垂直方向上距离其他东西40px</p>
我们在插入图片的时候，自然有一件事情是必不可少要做的，那就是选择图片的大小，就我所了解改变图片的大小主要有2种方式，一种是通过外部软件（ps等等）事先处理好要插入到网页中的图片的大小，然后直接插入即可；另外一种就是通过html语言来改变图片的大小（emmmm，不太推荐吧，毕竟有些许的失真之类的）
代码如下：
使用width来改变宽度、height改变高度
<p><img src="图片/娜美.jpg"/>原始大小</p> <p><img src="图片/娜美.jpg" width="200" height="240"/>修改之后的图片</p>
看，使用这种方法修改后的娜美都不美了呢！~~~~
有时候吧，我们插入了图片，但是想给图片加个框框，这时候我们可以利用border属性。
<p><img src="图片/娜美.jpg" border="7"/></p>
看到没有~在娜美图片上有很明显的边框哈哈哈~ 如果想去掉边框可以使用 border="0"的。
有时候我们希望在网页中插入一条水平线来起分隔作用，这时候html也可以满足我们！
在页面主题的<body>标签中使用background-image属性，可以网页制定背景；使用url来制定背景图片的路径，background-repeat属性用来定义背景在水平或者垂直方向来重复使用（避免图片太小而不能覆盖整个网页）
代码如下：
<body style="background-image: url(图片/娜美.jpg)"> <!--没有设置background-repeat那么就默认水平和垂直方向都覆盖-->
<body style="background-image: url(图片/娜美.jpg); background-repeat: repeat-x">
<body style="background-image: url(图片/娜美.jpg); background-repeat: no-repeat"> <！--注意中间有个分号，如果不重复的话，就只贴了左上角喽-->
<body style="background-image: url(图片/娜美.jpg); background-repeat: repeat-y">
好了，关于往网页上插入图片的html知识就介绍这么多吧！~如果文章有哪里写错了欢迎指出，另外如果涉及到侵权之类的地方请指出，告知必修改！谢谢大家。
标签：logo round url 合格 epg repeat 简单 地方 border
原文地址：http://www.cnblogs.com/shan-kylin/p/7718569.html
