HTML图像

HTML 图像- 图像标签( <img>)和源属性(Src)

在 HTML 中,图像由<img> 标签定义。

<img> 是空标签,意思是说,它只包含属性,并且没有闭合标签。

要在页面上显示图像,你需要使用源属性(src)。src 指 "source"。源属性的值是图像的 URL 地址。

定义图像的语法是:

<img src="url" alt="some_text">

URL 指存储图像的位置。如果名为 "boat.gif" 的图像位于 www.w3school.com.cn 的 images 目录中,那么其 URL 为 http://www.w3school.com.cn/images/boat.gif。

浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间,那么浏览器会首先显示第一个段落,然后显示图片,最后显示第二段。


HTML 图像- Alt属性

alt 属性用来为图像定义一串预备的可替换的文本。

替换文本属性的值是用户定义的。

<img src="boat.gif" alt="Big Boat">

在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。


HTML 图像- 设置图像的高度与宽度

height(高度) 与 width(宽度)属性用于设置图像的高度与宽度。

属性值默认单位为像素:

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

提示: 指定图像的高度和宽度的一个很好的习惯。如果图像指定了高度宽度,页面加载时就会保留指定的尺寸。如果没有指定图片的大小,加载页面时有可能会破坏HTML页面的整体布局。


基本的注意事项 - 有用的提示:

注意: 假如某个 HTML 文件包含十个图像,那么为了正确显示这个页面,需要加载 11 个文件。加载图片是需要时间的,所以我们的建议是:慎用图片。

注意: 加载页面时,要注意插入页面图像的路径,如果不能正确设置图像的位置,浏览器无法加载图片,图像标签就会显示一个破碎的图片。



更多实例

排列图片
本例演示如何在文字中排列图像。

浮动图像
本例演示如何使图片浮动至段落的左边或右边。

设置图像链接
本例演示如何将图像作为一个链接使用。

创建图像映射
本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。


HTML 图像标签

标签 描述
<img> 定义图像
<map> 定义图像地图
<area> 定义图像地图中的可点击区域

下面是一个实例:

1、打开eclipse软件,添加jsp文件和image文件夹,并在image文件夹中添加一张75×75的图片。项目结构如下:

2、编写index.jsp文件

内容为:

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jsp页面使用图片</title>
</head>
<body>
	<h1>使用图像</h1><hr>
		<img alt="jquery1" src="image/1.jpg" height="75" width="75"><hr>
	<p>这是一张Jquery的标志图片<img  alt="jquery1" src="image/1.jpg" height="75" width="75"></p><hr>
	<p><img  alt="jquery1" src="image/1.jpg" height="75" width="75">这是一张Jquery的标志图片</p><hr>
</body>
</html>

 3、保存后启动Tomcat服务器运行,在浏览器地址栏输入http://localhost:8888/Img_jsp/index.jsp,可以看到如下显示结果:

注:Tomcat的端口号我改成了8888,原先是8080。

如果src写成:

src="/image/1.jpg",则出现如下结果:图片无法显示,显示的是alt的内容(alt 属性用来为图像定义一串预备的可替换的文本)。

所以src前面不要加“/”,否则出错。

				
时间: 2025-01-07 21:41:00

HTML图像的相关文章

mp4网页播放代码,有声音无图像的解决办法~

mp4网页播放代码,有声音无图像的解决办法~ 关于网页播放mp4格式的视频,找了一些插件,这里推荐一下video.js 官方网址:http://www.videojs.com/ github :https://github.com/videojs/video.js/ demo:http://www.videojs.com/downloads/video-js-4.12.5.zip 使用方法: ①引入文件:指派flash播放的swf文件 <link href="//example.com/p

Halcon学习之三:有关图像通道的函数

黑白摄像机会返回每个像素所对应的能量采用结果,这些结果组成了一幅单通道灰度值图像,而对于RGB彩色摄像机,它将返回每个像素所对应的三个采样结果,也就是一幅三通道图像.下面这些是与图像通道有关的函数: 1.access_channel ( MultiChannelImage : Image : Channel : ) 获取多通道图像MultiChannelImage的Channel通道的图像Image. 2.append_channel ( MultiChannelImage, Image : I

Halcon学习之六:获取Image图像中Region区域的特征参数

area_center_gray ( Regions, Image : : : Area, Row, Column )    计算Image图像中Region区域的面积Area和重心(Row,Column). cooc_feature_image ( Regions, Image : : LdGray, Direction : Energy,Correlation, Homogeneity, Contrast )   计算共生矩阵和推导出灰度特征值 Direction:灰度共生矩阵计算的方向  

数字图像处理,图像锐化算法的C++实现

http://blog.csdn.net/ebowtang/article/details/38961399 之前一段我们提到的算法都是和平滑有关, 经过平滑算法之后, 图像锐度降低, 降低到一定程度, 就变成了模糊. 今天我们反其道行之, 我们看看锐化是怎么做的. 这里的锐化, 还是的从平滑谈开去.我们先来观察原来的图像和平滑图像的区别: 原图 raw: 模糊图 blur: _________________________________________________________ 源图

【内存优化】加载一张图像资源到底占据多少内存

0.内容概览 1. 简介 2. 问题 3. 概念描述 4. 具体分析 5. 总结 6. 参考文档 1.简介 Android中经常要通过ImageView进行图片资源显示.在加载图片时,首先要考虑的两个因素就是体验问题和性能问题. 其中,体验问题是指图片显示的是否正确(例如Universal-Image-Loader在适配Adapter图片资源时会导致图片显示错位),分辨率是否合适等.而体验问题主要是指图片加载速度,以及更加重要的图片加载的内存占用问题.本文重点介绍ImageView加载图片中的内

什么是图像 -- opencv基础

opencv基础篇--到底什么是图像 什么是图像?英语中有两个单词来形容图像,一个是picture,一个是image.这两者虽然是形容同一个东西,但却又有着区别.picture代表实而有物的真实图像:而image代表着计算机中存储的图像,也代表想象中的图像. 而我们更多研究的便是image,计算机图像从广义地可分为矢量图和像素图(位图).矢量图,是由一系列计算机指令描述和记录的一幅图,一幅图可以解为一系列由点.线.面等组成的子图.像素图,则是由很多个点组成的,每个点都是由二进制数据来描述和存储其

画图软件中调整图像的大小

在打开Windows附件的画图软件时,有时候截屏.或者其它图形粘贴的大小不合式.需要调整图像的大小. 画图软件有两个界面可调整:内界面是蓝色背景中的白色矩形,外界面是画图软件的边框.内界面固定在边框内,但是长.宽可以通过鼠标拉伸. 拉伸时,鼠标为从右下至左上的斜线型.调整内界面才能调整图像的大小. 如果内界面和外界面边界基本重合,则需要将进度条向右下角汇聚,直至出现内边界的右下"角".从这个角出发,将内边界从下往上.从右往左 拉动,可以发现内边界能移动.通常,在内边界和外边界之间都保存

二维图像到二维屏幕的投影 用例

说明 在默认的2D渲染中,渲染的X,Y轴的范围都是从[-1, 1],屏幕的中心点(0,0),所以鼠标点击的坐标,必须转换成世界地理坐标系,在2D环境下,默认Z轴坐标为0.0 假设屏幕宽800,高4800 屏幕坐标 地理坐标 左上角 0,0 -1,1 左下角  0,480 -1,-1 右上角  800,0           1,1 右下角  800,480         1,-1 现在通过gluOrtho2D函数将二维图像到二维屏幕上的投影,将坐标移动到左下角,方向刚好和屏幕坐标的Y轴相反 代

OpenCV与EmguCV中的图像轮廓提取

轮廓是图像中表示边界的一系列点的集合. 虽然边缘检测算法可以根据像素间的差异检查出轮廓边界的像素,但是它并没有把轮廓做为一个整体表示出来.所以下一步工作是把这些边缘检测出来的像素组装成轮廓. openCV中可以用findContours()函数来从二值图像中提取轮廓. openCV中一般用序列来存储轮廓信息.序列中的每一个元素是曲线中一个点的位置. 函数findContours()从二值图像中寻找轮廓.findContours()处理的图像可以是Canny()后得到的有边缘像素的的图像,也可以是

Opencv图像识别从零到精通(7)----图像平移、旋转、镜像

根据vc6.0c++的学习经验,如果可以很好的自己编程,让图像进行平移旋转这些操作,那么就好像能够清楚的看见图像的内部结构当然这里你怎么访问像素,这个可以自己选一种适合的,最多的是ptr指针,at也是挺多的.看着很简单的变换,可以对图像处理上手的更快,当然对于旋转可能就稍微i难了一点,不过opencv提供了resize(0,remap()等这样的函数,可以方便的让我们进行学习-特别是旋转的时候,有很多的变换,你可以任意旋转一个角度,也可能一直旋转,当然还可以保持图像大小不变的旋转和大小变换的旋转