专业IT网络知识平台,分享IT百科知识、生活百科知识解答!

易企推科技
易企推科技

html怎么插入图片,html图片插入方法

来源:小易整编  作者:小易  发布时间:2022-12-30 04:08
摘要:html怎么插入图片,html图片插入方法。一、图片格式网络上流行的图片格式主要有jpg、jpeg、png、gif等,以下是这几种格式的介绍。1、gif格式gif采用LZW压缩,是以压缩相同颜色色块来减少图像大小。由于LZW压缩不会造成任何...

html怎么插入图片,html图片插入方法。

一、图片格式

网络上流行的图片格式主要有jpg、jpeg、png、gif等,以下是这几种格式的介绍。

1、gif格式

gif采用LZW压缩,是以压缩相同颜色色块来减少图像大小。由于LZW压缩不会造成任何品质的损失,且压缩率高,支持动画效果,很适合互联网平台,但是它只支持256种颜色。

2、jpg或jpeg格式

以JPEG有损压缩图片,通常用来保存超过256色的图片格式。JPEG压缩过程会对一些图像数据造成损失,这部分损失不影响图片显示,一般人眼是看不出来差异的。损失数据越多,图片就越不清晰。

3、png格式

png是一种非破坏性的网页图像文件格式,它以最小的方式压缩图片且不造成图片数据损失。它不仅支持像gif大部分优点,还支持48 bit的色彩,跨平台的图像亮度控制,更多层的透明度设置。

二、使用图片

网页中通过<img>标签插入图片,语法如下:

<img src="图片路径" alt="替换文本" />

具体示例:

<!DOCTYPE HTML><html><body><p>一幅图像:<img src="/i/eg_mouse.jpg" width="128" height="128" /></p><p>一幅动画图像:<img src="/i/eg_cute.gif" width="50" height="50" /></p><p>请注意,插入动画图像的语法与插入普通图像的语法没有区别。</p></body></html>

效果如下:

html怎么插入图片,html图片插入方法

替换文本属性(Alt)

alt 属性用来为图像定义一串预备的可替换的文本。

<img src="boat.gif" alt="Big Boat">

当浏览器无法载入图像时,替换文本属性可告诉读者他们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好地显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。

图像宽度和高度属性

如下代码,在网页中插入一个宽度和高度都是300像素的图片。

<img src="/i/ct_netscape.jpg" width="300px" height="300px" />

图片超链接

如下代码,在网页中对一个图片进行超链接设置,点击这张图片就会跳转到其它页面。

<a href="页面路径"><img src="/i/ct_netscape.jpg" /></a>

创建图像热区链接

除了对整个图片进行超链接设置外,还可以将图像划分成不同区域进行链接设置,比如一张地图中给每个省份图形进行超链接。

图像热区链接,使用usemap 属性通过#name指定到名叫name的map元素上,map定义了每个热区点击区域形状、大小、坐标等。
area标签的 shape 属性有三种,rect 方形,circle 圆形,poly 多边形。coords 属性定义坐标点位置,相对于图片左上角位置。

示例代码:

<!DOCTYPE html><html><head><meta charset="utf-8"><title>W3Cschool(w3cschool.cn)</title></head><body><p>点击太阳或其他行星,注意变化:</p><img src="/statics/images/course/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"><map name="planetmap">
  <area shape="rect" coords="0,0,82,126" target="_blank" alt="Sun" href="/statics/images/course/sun.gif">
  <area shape="circle" coords="90,58,3" target="_blank" alt="Mercury" href="/statics/images/course/merglobe.gif">
  <area shape="circle" coords="124,58,8" target="_blank" alt="Venus" href="/statics/images/course/venglobe.gif"></map></body></html>

本文地址:IT问答频道 https://www.hkm168.com/itwenda/886520.html,易企推百科一个免费的知识分享平台,本站部分文章来网络分享,本着互联网分享的精神,如有涉及到您的权益,请联系我们删除,谢谢!


IT问答
小编:小易整编
相关文章相关阅读
  • 实用Word技巧分享:2招轻松解决多图片排版!

    实用Word技巧分享:2招轻松解决多图片排版!

    多图片排版,是Word编辑文档时常见场景之一,几乎每个人都会碰到,对很多人来说仍然是一大难题。当图片数量一多,很多人都不知道图片该怎么摆放,如何快速高效地搞定一组图片?因为没有掌握系统的套路技巧,每次制作都花费大量时间,做不出满意的效果。今...

  • 奇异值分解(SVD)简介及其在图片压缩中的示例

    奇异值分解(SVD)简介及其在图片压缩中的示例

    奇异值分解(SVD)是一种用于矩阵分解的方法。它将一个矩阵分解为三个矩阵的乘积,分别是左奇异向量矩阵、右奇异向量矩阵和奇异值矩阵。SVD在数据降维、信号处理、推荐系统等领域广泛应用。通过SVD,我们可以将高维数据降低到低维空间,从而提取出数...

  • html中浮动是什么

    html中浮动是什么

    在html中,浮动就是让元素可以向左或向右移动,直到它的外边距碰到其父级的内边距或者是上一个元素的外边距,只需要给元素设置“float:left|right|none|inherit”样式即可。本教程操作环境:windows7系统、CSS3...

  • html如何解析%%

    html如何解析%%

    html是一种用于创建网页结构的标记语言,它提供了一种方式来标记文本、图像、链接以及其他与网站相关的内容。html可以在网页中插入各种元素,包括表格、列表、图像、表格等等。本文将讨论html的解析过程以及如何编写有效的html代码。HTML...

  • html embed标签怎么用

    html embed标签怎么用

    HTMLembed标签使用方法和属性详解一、基本语法代码如下:embedsrc=url说明:embed可以用来插入各种多媒体,格式可以是Midi、Wav、AIFF、AU、MP3等等,Netscape及新版的IE都支持。url为音频或...

  • HTML5中nav是什么意思

    HTML5中nav是什么意思

    在html5中,nav全称“navigation”,中文意思为“导航”,是一个导航标签,用于表示html页面中的导航;nav标签会定义一个含有导航链接的区域,语法“链接...”。本教程操作环境:windows7系统、HTML5版、Dell...

  • html中什么是伪类

    html中什么是伪类

    在html中,伪类是一种用于已有元素处于某种状态时(滑动、点击等)为其添加对应样式的选择器,且这个状态是根据用户行为而动态变化的。常用伪类有“:active”、“:hover”、“:link”、“:root”、“:valid”等等。本教程操...

  • HTML代码如何格式化

    HTML代码如何格式化

    HTML代码可以通过sublime中的内置命令Reindent对代码格式化,还可以安装HTML-CSS-JSPrettify插件对代码格式化有时候我们将别人的代码复制过来的时候发现代码排列的非常杂乱无章,无法去阅读代码,今天就将和大家介绍...

  • 周排行
  • 月排行
  • 年排行

精彩推荐