整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

html开发笔记15-图片标签-向网页添加图片

、图片标签是用 <img> 单标签来定义:

作用是向网页中添加图片,并且img标签有多个可用参数可以添加。

二、代码演示

全栈攻城狮-每日更新原创IT编程技术及日常实用视频。

主要内容:这是HTML课程的第五课,主要讲解HTML的图片和超链接。让自己设计的网页更加多元素。

上节回顾

在上节中主要讲解了HTML的文字标签和格式标签。上篇请戳→→04程序员定要学HTML,字体段落标签介绍,60秒搞定

其实如果没有记住也无所谓。毕竟这些标签都是HTML中比较常用的,在以后的相关的案例中也会使用。此系列教程主要讲解HTML从基础到精通。自己能够设计一个完整的前端网页项目。

程序员写代码


图片

在HTML中添加图片其实很简单,就是添加一个img的标签。

图片标签的语法

一般有src、alt、width、height四种属性就够用了。

效果:

图片的显示效果

图片路径的写法

src表示的是图片的路径,这里面的值应该怎么写呢?

(1)html文件和图片在相同一个文件夹下。

HTML文件和图片文件在相同的目录下,可以直接书写文件的名称。

写文件名的写法,如上面的HTML

(2)图片在HTML文件所在目录的文件夹内:

如图:

图片文件在文件夹内

此时需要加上文件夹名称,并加上“/”表示下层目录:

下层目录的图片写法

(3)图片文件在上层目录

如果图片在HTML文件所在的上层目录,则需要写“..”表示向上一级。如图:

上层目录


超链接

超链接就是可以链接到某个资源的东西,比如我们打开百度首页搜索后,产生的就是超链接:

这些蓝字超链接

这些蓝色的文字标题,我们点击之后可以跳转到新的网站。这就是超链接。下面我们自己写一个超链接:

超链接的写法

超链接预览


超链接中的属性

超链接中的潮涌属性包括:href(网页地址)、title(说明描述)、target(打开网页的位置)、name(名称)。

其中href支持带有任何协议的连接。title是对超链接的说明。

程序员

target包括四个值:

_blank

在新的窗口打开连接

_self

在当前窗口打开超链接

_parent

在父窗口打开超链接,这个后面会说,不常用

_top

在整个窗口中打开被链接文档。


每天一个知识点,带你迈向软件编程大神,一起努力吧。

索 HTML 图像的不同概念,以及如何有效地使用它们在您的网站上增加视觉吸引力、传达信息和表达情感。 本指南包含大量示例和实用技巧,可帮助您创建一个视觉效果惊人且用户友好的网站。



图像是网页设计师和开发人员的强大工具,它们可用于传达信息、表达情感并使网站更具视觉吸引力。 HTML 图像概念是网页设计和开发的重要方面。 它们用于将图像嵌入到网页中,以便于显示和共享图片和图形。 在这篇博文中,我们将探讨 HTML 图像的不同概念以及如何有效地使用它们。

首先,让我们谈谈不同类型的 HTML 图像。 有两种主要类型的图像:内嵌图像和背景图像。 内联图像直接嵌入到 HTML 代码中,而背景图像则应用于元素的背景。

1 | 内联图像



在此示例中,内联图像“image.jpg”直接嵌入到 HTML 代码中并显示给用户。

2 | 背景图片


在此示例中,背景图像“image.jpg”应用于 div 元素的背景并显示给用户。

3 | 替代 (alt) 文本

以合乎逻辑且一致的方式使用图像也很重要。 这意味着您应该使用它们来传达与网页内容相关的信息或表达情感,而不是随意使用它们。 此外,使用 alt 属性为图像添加文本替代也很重要,它允许可能使用屏幕阅读器的用户访问图像,或者以防图像加载失败。


在此示例中,替代文本“日落的美丽图像”让用户清楚地了解图像所代表的内容。

4 | 调整图像大小

另一个 HTML 图像概念是使用宽度和高度属性调整图像大小的能力。 这些属性允许您调整图像大小以适合您的布局和设计。


在此示例中,图像的宽度设置为 300 像素,图像的高度设置为 200 像素。

结论

HTML 图像概念是网页设计和开发的重要方面。 它们用于将图像嵌入到网页中,以便于显示和共享图片和图形。 通过了解不同类型的图像并正确使用它们,您可以为您的网站增加额外的视觉吸引力,并以有力的方式传达信息或表达情感。 无论是使用内联图片还是背景图片,添加替代文本或调整大小,这些概念都是创建视觉效果惊人且用户友好的网站的关键。

但不要只相信我们的话,您自己试试吧! 尝试使用 HTML 图像,看看它们如何增强您网站的整体外观。 通过每一行代码,您离创建一个您的访问者会喜欢的美观且引人入胜的网站又近了一步。 请记住,图像具有唤起情感和传达信息的力量,因此请明智地使用它们并将它们作为您网页设计策略的重要组成部分。 通过正确组合 HTML 和图像,您将创建一个脱颖而出并给访问者留下持久印象的网站。