图像为您的网站增添了生命，吸引了浏览者的注意力。图片标题提供了有关您的网站上图像的额外信息，但如果没有高级HTML和CSS技能，它们很难添加到网站中。我们提供下面的方法，可以为图像添加简单但有吸引力的图片提示信息，无论您在网页上移动图像，图像都会随图像一起保留。
HTML图像标题的步骤:将图片添加到您的网页。在网页的HTML中，在图片周围放置一个div标签：
<div> <img src =“URL”alt =“替代文字”width =“width”height =“height”/> </ div>
将样式属性添加到div标记：
<div style =“” > <img src =“URL”alt =“替代文字”width =“width”height =“height”/> </ div>
使用width样式属性将div的宽度设置为与图像相同的宽度：
<div style =“ width：image width px; ”> <img src =“URL”alt =“alternate text”width =“width”height =“height”/> </ div>
对于略小于周围文本的标题，请为div样式添加font-size属性：
<div style =“width：image width px; font-size：80％; ”> <img src =“URL”alt =“alternate text”width =“width”height =“height”/> </ div>
如果字符提示位于图像下方的中心，则字符提示看起来最佳，因此将text-align属性添加到style属性：<div style =“width：image width px; font-size：80％; text-align：center; ”> <img src =“URL”alt =“alternate text”width =“width”height =“height”/ > </ div>
最后，在图像和标题之间添加一些额外的空间，方法是使用padding-bottom样式属性向图像添加样式属性：<div style =“width：image width px; font-size：80％; text-align：center;”> <img src =“URL”alt =“alternate text”width =“width”height =“height” style = “pagging：0.5em;” /> </ div>
然后在图像正下方添加文字标题：<div style =“width：image width px; font-size：80％; text-align：center;”> <img src =“URL”alt =“alternate text”width =“width”height =“height”style = “ppadding：0.5em;” /> 这是我的标题 </ div>将网页上传到您的服务器并在浏览器中进行测试。
CSS尺寸可以在许多不同的测量中，因此您通常必须包括测量类型。例如：宽度：100 像素 ;但是，HTML图像尺寸始终以像素为单位，因此请关闭测量值。width= “100”如果使div的宽度宽于图像宽度，则图像旁边可能会出现标题。如果这是您想要的，则在标题之前和图像标记之后直接添加<br>标记。