超简单网页图片

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

<img>标签即可以实现：

<imgsrc="图片文件地址"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 4only）

• 属性声明了一个 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

• <imgsrc="logobrand.png"alt="brand">




例 2：图像链接

• <ahref="/"><imgsrc="logobrand.png"alt="brand"></a>




例3：使用srcset属性

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

• <imgsrc="logobrand.png"alt="brand"srcset="logobrandHD.png2x">




例4：使用srcset和sizes属性

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

• <imgsrc="logobrand.png"alt="brand"srcset="logobrand.png200w,brandlogo-400.png400w"sizes="(min-width:600px)200px,50vw">

【图例】给HTML添加的图片

Ⅱ PS有哪些免费的素材网站

1、觅元素

觅元素，这是一个拥有海量免抠素材以及高清背景的素材类网站。在这个网站中，免抠素材的分类很丰富，有漂浮元素、装饰元素、节日元素、手绘/卡通、字体元素、标签元素、背景元素、图表元素、动植物元素等等；背景图的分类、颜色、版式、格式都分得很详细，找素材超方便。

2、花瓣网

花瓣网，经常找素材的小伙伴肯定对这个网站不陌生，这是一个很多设计师都在用的素材网站，这里的素材分类很丰富。

具体的素材分类有插画/漫画、婚礼、女装/搭配、工业设计、摄影、造型/美妆、手工/布艺、健身/舞蹈、人文艺术、建筑设计、生活网络、汽车/摩托、美食、旅行、美女等等；除了素材之外，它还有很实用的采集工具。

3、站酷网

站酷网，可能有些小伙伴对这个网站并不是很熟悉，它虽然看起来很简单，但它是一个可以下载图片、视频、字体、音乐等多种素材的网站。在这里搜索素材非常方便，选择好素材类型，然后输入关键词进行搜索即可，很方便。

4、stickpng

Stickpng，这是一个免费提供PNG透明背景图资源的网站，这个网站上的PNG背景图都是已经去掉背景的，不需要自己再重新抠背景，下载之后直接就能用，非常方便。它的图片分类很丰富，有美食、家具、音乐明星、厨具、假期、游戏、动物、漫画人物、机器人等等。

5、pngimg

Pngimg，这是一个不需要注册就可以免费下载免抠透明背景元素图的网站，这里有大量透明背景图和剪贴画，很多设计师经常在这个网站下载免费素材，素材下载之后就可以直接用，简直太方便了，难怪很多设计师喜欢来这里找素材。

Ⅲ 如何给图片做个链接

可以利用电脑版qq给图片生成一个链接，请参照以下步骤。

1、首先在电脑上打开自己的qq，点击首页界面的空间图标。

Ⅳ 制作网页可以用什么软件

制作网页可以用如下软件：

1、Coolsite360。特点有可复制模板，更可任性DIY，无需编程，在线创建，自动适配桌面及移动端。

2、Adobe Dreamweaver。简称“DW”，中文名称 "梦想编织者"，最初为美国MACROMEDIA公司开发，2005年被Adobe公司收购。

3、Flash。是由macromedia公司推出的交互式矢量图和 Web 动画的标准，由Adobe公司收购。做Flash动画的人被称之为闪客。

4、Fireworks。是由Macromedia推出的一款网页作图软件，软件可以加速 Web 设计与开发， 是一款创建与优化 Web 图像和快速构建网站与 Web 界面原型的理想工具。

5、Frontpage。Frontpage，是微软公司出品的一款网页制作入门级软件。FrontPage使用方便简单，会用Word 就能做网页，因此相对Dreamweaver等软件更容易上手。