整合营销服务商

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

免费咨询热线:

HTML基础操作:图片显示

景图片

本例演示如何向 HTML 页面添加背景图片。

<html>

<body background="background.jpg">

<h3>图像背景</h3>

<p>gif 和 jpg 文件均可用作 HTML 背景。</p>

<p>如果图像小于页面,图像会进行重复。</p>

</body>

</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>

效果如下:

替换文本属性(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>

效果可参考 https://www.w3cschool.cn/html5/html5-img.html 这里。

可以看到鼠标在图片上点击小行星会打开对应的图片。

到此网页中使用图片已经大体介绍了,自己亲手写下,会加深印象,感谢关注。

上篇:前端入门——html 超链接

下篇:前端入门——html 如何在网页中使用视频音频

TML图像标记

常用的图像格式—GIF,PNG,JPG
图像标记<img />
HTML网页中任何元素的实现都要依靠HTML标记,要想在网页中显示图像就需要使用图像标记,接下来将详细介绍图像标记以及和他相关的属性。其基本语法格式如下:

<img src="图像URL" />

该语法中src属性用于指定图像文件的路径和文件名,他是img标记的必需属性。

相对路径和绝对路径

相对路径
相对路径不带有盘符,通常是以HTML网页文件为起点,通过层级关系描述目标图像的位置。
例如:

<img src="img/logo.gif" alt="传智播客-专业的java培训,.net培训,php培训,网页培训,平面培训,iOS培训机构" />

相对路径设置分为以下三种:

图像文件和html文件位于同一文件夹:只需输入图像文件的名称即可,如<img src="logo.gif" />。

图像文件位于html文件的下一级文件夹:输入文件夹名和文件名,之间用“/”隔开,如<img src="img/img01/logo.gif" />。

图像文件位于html文件的上一级文件夹:在文件名之前加入“…/” ,如果是上两级,则需要使用 “…/ …/”,以此类推,如<img src="../logo.gif" />。

绝对路径

绝对路径一般是指带有盘符的路径。

例如:

“D:\HTML+CSS网页制作\chapter02\img\logo.gif”,或完整的网络地址,例如“http://www.itcast.cn/images/logo.gif”。

我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以关注我的头条号并在后台私信我:前端,即可免费获取。


原文链接:https://blog.csdn.net/dubaiqaq/article/details/103500345