如何在HTML页面插入图片?




如何在HTML页面插入图片?

图片可以通过帮助读者更好地理解网页内容来使内容更有趣。

我们可以将图片插入HTML页面中。要在HTML页面中插入图片,使用<img>标签。这是一个空标签,仅包含属性,因为不需要闭合标签。

我们应该在<body>...</body>标签中使用<img>标签。<img>标签指定要在HTML文档中显示的图片。



<img>标签有两个属性:

  • src - 添加图片源,即图片的URL(文件的位置)。
  • alt - 添加备用文本,width用于添加宽度,height用于添加图片的高度。

图片不是技术上插入到网页中的;图片是与网页链接的。<img>标签为图片创建了一个空间。

语法

以下是在HTML页面中插入图片的语法。

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

示例

以下是向HTML页面添加图片的示例程序。

<!DOCTYPE html>
<html>
<body>
   <h2>HTML Article on Inserting image to the web page</h2>
   <img src="https://www.tutorialspoint.com/javafx/images/javafx-mini-logo.jpg">
</body>
</html>

现在让我们看看如果用户由于网络连接缓慢或者 src 属性错误而无法查看图像时,alt 属性(替代文本)是如何工作的。alt 属性的值描述了图像的属性。

示例

在下面的示例程序中,我们将指定一个不正确的路径来插入在 HTML 页面中的图像,并观察 alt 属性的工作方式。

<!DOCTYPE html>
<html>
<body>
   <h2>HTML Article on Inserting image to the web page</h2>
   <img src="https://www.tutorialspoint.com/opencv/images/opencv-mini-logo.jpg" alt="search engine image" >
</body>
</html>

文本“搜索引擎图像”是当无法查看图像时图像的替代文本。

示例:更改图像大小

我们还可以使用style属性来更改图像的大小,即图像的高度和宽度。以下是更改图像大小的示例程序:

<!DOCTYPE html>
<html>
<body>
   <h2>HTML Article on Inserting image to the web page</h2>
   <img src="https://www.tutorialspoint.com/opencv/images/opencv-mini-logo.jpg" height="50px" width="50px">
</body>
</html>



HTML 精选笔记
怎样自动将网页重定向到另一个URL如何在具有隐藏溢出的元素中显示省略号?如何使HTML的< dt >和< dd >元素保持同行HTML 如何使文本输入框不可编辑如何增加点线边框之间的间距?如何在打印大型HTML表格时处理分页问题如何将水平线分成多个部分HTML 如何在两列中显示无序列表HTML 如何显示具有嵌套计数器的有序列表如何在HTML中禁用自动换行如何禁用HTML表单和输入字段上的浏览器自动填充和自动完成如何强制< Div>元素的内容保持在同一行上?如何控制项目符号和< li>元素之间的间距HTML 如何创建mailto表单如何创建一个带可点击标签的复选框?HTML 如何创建带有换行的按钮如何创建一个具有固定左列和可滚动主体的HTML表格HTML 如何创建一个具有固定宽度右列的两栏Div布局如何在HTML中创建一个水滴形状如何在HTML中创建带有短划线的列表HTML 如何创建一个无换行或水平间距的隐藏 divHTML 如何给单选按钮分配一个已选中的初始值HTML 如何使文件输入类型仅接受图像文件HTML 如何只允许输入正数如何在HTML中设置单元格的宽度和高度如何从一个HTML页面重定向如何在HTML中创建表格边框HTML 如何设置网页的背景图片如何在HTML中创建带有数字编号的有序列表如何限制HTML输入框只接受数字输入HTML的优缺点使用table标签及其属性设计一个表格如何更改标签的Title属性的样式HTML 如何在元素之间添加空白?如何在HTML中创建表格?如何在HTML文件中包含另一个HTML文件?如何在HTML中更改链接的颜色?HTML中的表格rowspan和colspan是什么?如何在HTML中设置单元格间距?如何调整iframe的宽度和高度以适应其中的内容HTML?如何在HTML中创建多行文本输入(文本区域)?如何在HTML中设置标题的对齐方式?如何在HTML中合并表格列?如何使用HTML表单发送电子邮件?如何在HTML页面中使用动画图片?如何在HTML中合并表格单元格?如何在HTML中去除链接的下划线?如何使用HTML代码嵌入视频?如何限制表单输入文本域中允许的字符数?如何在HTML中给文字添加下划线?如何在HTML页面中创建页面链接如何使用li元素创建项目符号如何在HTML中采用移动优先的方式使用媒体查询?如何在HTML页面插入图片?如何在HTML中居中对齐表格单元格中的文本?如何在HTML中居中文本?解释HTML的布局结构RGB vs RGBA颜色格式的区别普通链接和活动链接之间的区别链接和锚标签的区别blink标记的替代方法使用CSS内容添加HTML实体如何在 HTML 中设置字体颜色?如何在HTML页面中插入超链接?如何在HTML中设置文本对齐?如何在HTML中设置背景色?如何在HTML中使用图像作为链接?