html网页制作添加图片(html网页制作添加图片标签)

html里怎么插入背景图片？？急

1、插入背景图片有两种方法，一种是用html的img标签，另一种是利用css的background标签插入。具体操作是首先新建一个html文件，写入两个div，分别用来演示两种方法插入标签：

2、首先是用html标签插入图片，这里直接在img标签中使用src属性就可以插入图片路径就成功了：

3、接着是用css插入，在div中设置class属性为img2，在script标签中使用background标签插入，其中url是标签的路径，no-repeat是设置图片不重复，center是设置照片居中显示：

4、最后给这些标签都设置一些样式，让它们显得美观一些。然后打开浏览器查看效果：

5、打开浏览器，可以看到照片都显示出来了。以上就是html插入照片的方法介绍：

最简单的HTML制作之如何在网页中插入图片

img标签即可以实现：

img?src="图片文件地址"?alt="图片文件描述"

img标签支持的属性

这个元素支持 全局 属性。

align

已废弃于 HTML4.01和HTML5，我们使用?vertical-align 这一个 CSS 属性来替代

属性声明了图像相对于它周围上下文的对齐。

alt

这个属性定义了描述图像的替换文本。用户将看到这个显示，如果图像的地址是错误的，或该图像不在?支持的格式?列表中，或者如果图像还没有被下载。

使用说明：?省略这个属性表明该图像不是内容的关键部分，但没有等效的文本可用。把这个属性设置为空字符串，表明该图像不是内容的关键部分。非可视化浏览器在渲染的时候可能会忽略它。

border?

已废弃?HTML4.01与 HTML5，我们使用?border?这一个 CSS 属性来替代

属性声明了图像周围的边框宽度。

crossorigin （HTML5）

这个属性表明是否必须使用?CORS 完成相关图像的抓取。启用CORS的图像?在?canvas?元素中可以重复使用而不会被污染。允许的值有：

anonymous

执行一个跨域的请求（比如，有?Origin:?HTTP header）。但是没有发送证书（比如，没有?cookie，没有?X.509 证书，没有?HTTP 基本的授权认证）。如果服务器没有给源站证书（没有设置?Access-Control-Allow-Origin:?HTTP头），图像会被污染而且它的使用会被限制。

use-credentials

一个有证书的跨域请求（比如，有?Origin:?HTTP header）被发送?（比如，a cookie, a certificate, and HTTP Basic authentication is performed）。如果服务器没有给源站发送证书（通过 Access-Control-Allow-Credentials: HTTP header），图像将会被污染，且它的使用会受限制。

当用户并未显式使用本属性时，默认不使用 CORS 发起请求(例如，不会向服务器发送 HTTP 头部信息)，用以防止其在canvas中的使用。如果无效，默认当做anonymous关键字生效。更多信息，请查看?CORS 属性设置?。

height

图像的高度，在?HTML5?中的单位是 CSS 像素，在?HTML 4?中可以是像素也可以是百分比。

hspace

已废弃?HTML4.01和HTML5

属性声明了插入到图像的左侧和右侧的空白像素的值。

ismap

这个布尔属性表示图像是否是服务器端map的一部分。如果是， 那么点击的精准坐标将会被发送到服务器。

使用说明：只有当?img?是?href?属性是有效的?a?元素的内联元素时，这个属性才被允许使用。

longdesc

（HTML 4?only）

属性声明了一个 URL ，描述了要显示图像的URL描述，是对?alt 属性文本的补充。

name?

已废弃?HTML4.01和HTML5

属性声明了元素的名字。在?HTML 4?只向后兼容。?使用?id?属性替代。

sizes

（HTML5）

属性表示资源大小的以逗号隔开的一个或多个字符串。每一个资源大小包括：

一个媒体条件。最后一项一定是被忽略的。

一个资源尺寸的值。

资源尺寸的值被用来指定图像的预期尺寸。当srcset使用 'w' 描述符时，用户代理使用当前图像大小来选择srcset中合适的一个图像URL。 被选中的尺寸影响图像的显示大小（如果没有CSS样式被应用的话）。如果没有设置srcset属性，或者没值，那么sizes属性也将不起作用。

src

属性声明了图像的 URL，这个属性对?img?元素来说是必需的。在支持?srcset?的浏览器中，src?被当做拥有一个像素密度的描述符?1x?的候选图像处理，除非一个图像拥有这个像素密度描述符已经被在?srcset?或者?srcset?包含 '地址'?描述符中定义了.

srcset

（HTML5）

属性声明了以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像。每一个字符串由以下组成：

一个图像的?URL。

可选的，空格后跟以下的其一：

一个宽度描述符，这是一个正整数，后面紧跟 'w' 符号。该整数宽度除以sizes属性给出的资源（source）大小来计算得到有效的像素密度，即换算成和x描述符等价的值。

一个像素密度描述符，这是一个正浮点数，后面紧跟 'x' 符号。

如果没有指定源描述符，那它会被指定为默认的?1x。

在相同的?srcset?属性中混合使用宽度描述符和像素密度描述符时，会导致该值无效。重复的描述符（比如，两个源 在相同的srcset两个源都是?'2x'）也是无效的。

浏览器选择在给出的时间点显示大部分?adequate 图片。

width

属性声明了图像的宽度，在?HTML5?中单位是?CSS 像素，?在?HTML 4?中可以是像素也可以是百分比。

usemap

属性声明了与元素相关联的的?image map?的部分 URL（以?'#' 开始的部分）。

使用说明：?如果?img?元素是?a?或?button?元素的后代元素则不能使用这个属性。

vspace?

已废弃?HTML4.01和HTML5

属性声明了插入到图像的上方和下方的空白像素的数组。

支持的图像格式

HTML 标准并没有给出必须支持的图像格式的列表，因此每个用户代理支持一组不同的格式。 一般而言支持以下格式：

JPEG

GIF，包括动态的GIFs

PNG

APNG

SVG

BMP

BMP ICO

PNG ICO

WEBP

与 CSS 的交互

关于 CSS，img?是一个?替换元素。它没有基线，这意味着当在一个行内格式的上下文中使用?vertical-align: baseline 时，图像的底部将会与容器的基线对齐。

根据它的类型，图像可能会有一个本征维数（intrinsic dimension），但这不是一个必要条件：SVG图像就没有，而光栅图像有。

例 1

img?src="logobrand.png"?alt="brand"

例 2：图像链接

a?href="/"img?src="logobrand.png"?alt="brand"/a

例?3：使用?srcset?属性

在支持?srcset 的用户代理中，src?属性是?1x?候选项。

img?src="logobrand.png"?alt="brand"?srcset="logobrandHD.png?2x"

例?4：使用?srcset?和?sizes?属性

在支持?srcset 的用户代理中，当使用?'w' 描述符时，src 属性会被忽略。当匹配了媒体条件?(min-width: 600px)?时，图像将宽?200px，否则宽?50vw（视图宽度的50%）。

img?src="logobrand.png"?alt="brand"?srcset="logobrand.png?200w,?brandlogo-400.png?400w"??sizes="(min-width:?600px)?200px,?50vw"

【图例】给HTML添加的图片

html网页制作中如何设置背景图片（如何引用）

1、首先打开Atom编辑器导入项目文件夹，先创建一个index.html的文件。定义一下html文件的主信息：

2、然后填写自己的网页内容，?设置一下样式，直接在body后面加上background="图片名字"即可插入图片：

3、最后来到浏览器，刷新一下网页，这样就会显示背景了：