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

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

标签之美——图像的使用


一、设置网页背景图片


<body background="1.jpg">

</body>

这里图片路径的写法和本地超链接的写法是一样的,可以参考上一篇博客中关于本地路径的地方:http://my.oschina.net/u/2340880/blog/412934


注意:如果图片大小不能充满网页,图片将会被复制平铺。


二、图片标签<img>的应用


<img>是图片插入标签。其中图片路径的写法和超链接路径的写法一样。示例如下:


<body>

<img src="2.png"/>

</body>

效果如下:


image.png


<img>标签的alt属性可以为图片添加缺省文字,当图片不存在或者无法显示时,会有提示效果。示例如下:


<body>

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

</body>

设置图片的尺寸属性:width,height


<body>

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

</body>

三、图片的对齐模式


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


1、bottom:底部对其


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

效果如下:


image.png


2、left:左部对齐


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

image.png


3、right:右部对其


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

效果如下:


image.png


4、middle:居中对齐


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

效果如下:


image.png


5、top:上部对齐


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

效果如下:


image.png


四、设置图片边框和边距


通过border属性可以给图片添加边框。属性的值为边框的宽度。


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

效果如下,图片被加上了黑色的边框:

image.png



也可以给图片设置一个间距,间距的效果和透明的边框是一样的。


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

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


image.png


五、插入视频的相关操作


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


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

目录
相关文章
|
6月前
|
计算机视觉
YOLO 目标检测 识别框不显示文字标签(已解决)
YOLO 目标检测 识别框不显示文字标签(已解决)
|
2月前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
51 13
多媒体标签让你的网页,内容很丰富!
多媒体标签让你的网页,内容很丰富!
|
6月前
|
移动开发 UED HTML5
如何像人类一样写HTML之图像标签,超链接标签与多媒体标签
如何像人类一样写HTML之图像标签,超链接标签与多媒体标签
|
6月前
|
前端开发
HTML图片音频视频标签、超链接标签、列表标签和布局标签示例
HTML图片音频视频标签、超链接标签、列表标签和布局标签示例
82 0
|
编解码
使用遮罩提取图像中感兴趣的区域
使用遮罩隔离感兴趣区域 (ROI) 来有效地处理被阻止的图像。 某些大图像源仅在图像的一小部分中具有有意义的数据。可以通过将处理限制为包含有意义数据的 ROI 来缩短总处理时间。使用掩码定义投资回报率。蒙版是一种逻辑图像,其中像素表示投资回报率。
127 1
|
容器
09 # 图像标签
09 # 图像标签
92 0
|
移动开发 Java HTML5
HTML5 学习3.图像标签
HTML5 学习3.图像标签
|
机器学习/深度学习 人工智能 自然语言处理
从图像到语言:图像标题生成与描述
从图像到语言:图像标题生成与描述
280 0
从图像到语言:图像标题生成与描述
|
开发者
HTML标签- 图像标签|学习笔记
快速学习HTML标签- 图像标签
128 0
HTML标签- 图像标签|学习笔记
下一篇
无影云桌面