1、1首先，打开html编辑器，新建html文件，例如indexhtml2在indexhtml中的ltbody标签中，输入html代码ltimg src=quotsmall3pngquot ltspanhello imageltspan3浏览器运行indexhtml页面，此时成功在图片右边写。

2、Calt属性例如ltimg src=quotxxxjpgquot alt=quot这是一个图片“ width=quot100quot height=quot50quot意思是这个图片宽100像素，高50像素，当你把鼠标移动到图片上时会显示quot这时一个图片“。

3、ltstyleltheadltbodyltimg src=quotpicjpgquotltspan我是文字ltspanltbodylthtml 二在开发工具里面的截图三浏览器里面的效果截图四总结一下这个是在body里面添加一下背景图片，然后再建div就可以布。

4、以html为例，步骤一在body中建立文字信息以及图片内容，也就是在header中包含两个同级，图片和文字二在CSS中对文字图片进行简单样式添加，效果如图所示大盒子使用描边显示，里面包含了图片和下面的文字三想要将。

5、为图片要添加简要的说明文字的属性是title当图片无法正常加载时显示的文字，利于seo的作用alt当鼠标放上图片链接时显示的文字，注释图片链接，提高用户体验titleTITLE 元素仅可在 HEAD 元素内使用位于 TITLE 开闭。

6、ltp这里是文字说明ltp ltbody lthtml 在上面的示例代码中，使用了Flex布局display flex来将三张图片放在一行，并通过设置每个图片占据一行的三分之一宽度width 3333%来实现图片和文字的样式可以根据。

7、标签里面加alt属性，格式ltimg src=quot图片路径quot alt=quot描述图片文字quot。

8、然后一个盒子装着头像和文字，把装着头像和文字 的盒子根据装着图片的盒子进行定位就可以了，像这样的其实很简单的，要多思考和分析 代码，要注意图片你要自己放图片，和修改图片路径 lt！DOCTYPE html lthtml lthead lt。

9、3点击插入的图标，属性面板左下角点击热点工具，这里选择矩形热点工具4在图像上拖动得到热点区域5点击底部map#map标签，点击代码6在map标签加入title属性，其属性值为说明文字7按ctrl+s保存文件，按F12调试。

10、如何在图片上加文字 如何在图片上加入文字方法如下 1把需要添加字的图片先移到桌面，鼠标右键点击图片，看到“编辑”后打开编辑2然后在“画图”中编辑，点击框中“A”的标志，这种标志一般都是编辑字体 3。

11、新建html文件，例如indexhtml2在indexhtml中的ltbody标签中，输入html代码ltimg src=quotsmall3pngquot ltspanhello imageltspan3浏览器运行indexhtml页面，此时成功在图片右边写了文字“hello image”。

12、单纯的html要实现你说的效果很难，必须html和css配合才可以，首先用css为需要设置背景的元素设置背景，然后用html写文字等内容附加一个简单例子，希望帮到你其中1jpg跟这个页面在一个路径lt！doctype htmllthtml。

13、2添加CSS样式修饰，最外面的大框添加宽度居中3现在的图文是这样排版4想要将图文左右排版，无非是定位或者浮动，对图片块和文字块都添加了浮动效果后5如图添加浮动后，文字部分因为文字太长超出了他所用那的。

14、图片添加连接我的方法是在ltimg标签两边添加lta标签 如lta href=quot要连接的地址quot title=quot这里也可以使用title属性，也是悬停会会显示文字quot ltimg src=quot图片地址quot width=quot170quot height=quot89quot alt=quotquot title=“这里写。

15、```html ltdiv style=quotbackgroundimage url#39yourimageurl#39 backgroundsize contain width 100%quot ltpYour text hereltp ltdiv ```在这个示例中，我们使用`div`元素作为背景容器，将图片作为背景。