标签之美四——为网页添加绚丽多彩的图像

时间 2019-11-15

原文原文链接

标签之美——图像的使用

<body background="1.jpg">
</body>

这里图片路径的写法和本地超连接的写法是同样的，能够参考上一篇博客中关于本地路径的地方：http://my.oschina.net/u/2340880/blog/412934。oop

注意：若是图片大小不能充满网页，图片将会被复制平铺。spa

<img>是图片插入标签。其中图片路径的写法和超连接路径的写法同样。示例以下：.net

<body>
<img src="2.png"/>
</body>

效果以下：code

<img>标签的alt属性能够为图片添加缺省文字，当图片不存在或者没法显示时，会有提示效果。示例以下：视频

<body>
<img src="3.png" alt="图片不存在"/>
</body>

设置图片的尺寸属性：width，heightblog

<body>
<img src="1.jpg" width="200" height="200"/><!--设置宽高为200像素-->
</body>

align是图片标签的对齐属性，对齐模式有5种属性值，下面一一对其进行介绍：seo

底部对齐的示例<img src="1.jpg" width="200" height="200" align="bottom"/>的图片

效果以下：图片

底部对齐的示例<img src="1.jpg" width="200" height="200" align="left"/>的图片

底部对齐的示例<img src="1.jpg" width="200" height="200" align="right"/>的图片

效果以下：get

底部对齐的示例<img src="1.jpg" width="200" height="200" align="middle"/>的图片

效果以下：博客

底部对齐的示例<img src="1.jpg" width="200" height="200" align="top"/>的图片

效果以下：

经过border属性能够给图片添加边框。属性的值为边框的宽度。

<img src="1.jpg" width="200" height="200" align="top" border="4"/>

效果以下，图片被加上了黑色的边框：

也能够给图片设置一个间距，间距的效果和透明的边框是同样的。

这里是图片<img src="1.png" align="middle" hspace="20">内容

其中，hspace是设置水平边框的宽度，还有一个属性vspace是设置垂直边框的宽度，上面代码效果以下：

插入视频的原理和图像是同样的，只是路径使用的时dynsrc，可使用loop属性来设置循环次数，start属性来设置播放方式，这里，只将start属性说明一下，有两种方式，fileopen是网页加载就开始播放，mouseover是鼠标移动到视频位置后开始播放。

<img dynsrc="2.wmv" start="fileopen" loop="1">

专一技术，热爱生活，交流技术，也作朋友。

——珲少 QQ群：203317592