通过9个简单的步骤将HTML标题添加到Web图像中
图像为您的网页添加生命,并引起观众的注意。 标题提供了关于您的网页图片的额外信息,但是如果没有高级HTML和CSS技能,它们可能很难添加到网页中。 这里有一个可靠的方法,用于为图片添加一个简单而有吸引力的标题,该图片可以随图像在网页上移动。
9步到HTML图像标题
为图像添加标题并将它们一起移动到任意位置:
- 添加图片到您的网页。
- 在网页的HTML中,在图片周围放置一个div标签:
div> - 为div标签添加样式属性:
style =“” >div> - 使用宽度样式属性将div的宽度设置为与图像相同的宽度:
width:image width px; ”>div> - 对于略小于周围文本的标题,请为div样式添加font-size属性 :
font-size:80%; ”>div> - 字幕看起来最好,如果它们位于图片下方,那么在style属性中添加一个文本对齐属性:
text-align:center; ”> img src =“URL”alt =“alternate text”width =“width”height =“height”/> div>- 最后,在图像和标题之间添加一些额外的空间,方法是在图像中添加一个样式属性,并使用填充底部样式属性:
style =”padding-bottom:0.5em;“ /> DIV> - 然后直接在图片下方添加文字说明:
这是我的标题 div> 将网页上传到您的服务器并在浏览器中进行测试。
字幕提示
- 宽度: CSS尺寸可以进行多种不同的测量,因此您通常必须包含测量类型。 例如:宽度:100 像素 ; 但是,HTML图像尺寸总是以像素为单位,因此您不需要关闭测量。 宽度= “100”
- 如果您使div的宽度比图像宽度更宽,则说明可能会出现在图像旁边。 如果这是你想要的,那么在标题之前和图片标签之后直接添加一个
标签。
- 为div标签添加样式属性: