网页制作03-html,css,javascript初认识のhtml的图像设置

一、图像格式

网页中图像的格式有三种， Gif， Jpeg， Png

Gif：

Graphic interchange format图像交换格式，文件最多可使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，例如导航条、按钮、图标、徽标或其他具有统一色彩和色调的图像；还可以制作动态图像

Jpeg：

Giant photographic expect group，它是一种图像压缩格式，可包含数百万种颜色，不支持透明图和动态图，但是它能够保留全真的色调版格式。

Png：

Portable network graphics，他提供了将图像文件以最小的方式压缩却又不造成图像失真的技术，支持透明度设置

二、插入图像

插入图像的标记只有一个就是img标记，下面介绍其13个属性

1. src:图像的源文件

<img src="图片文件的地址">

html 复制代码

<img src="01.jpg"><!--相对引用-->
<img src="file:///I:/03HTML/01.jpg" ><!--绝对引用-->

2.Alt VS Title:文字补充说明和提示文字

alt:当图片显示不了,文字会替代显示 ,仅部分浏览器适用

<img src="图片文件的地址" alt="提示文字内容">

title:鼠标指针放置图像上所显示的文字

<img src="图片文件的地址" title="提示文字内容">

3.Width, Height:宽度和高度

<img src="图片文件的地址"> width="图像宽度" height="图像高度"

html 复制代码

<img src="04.jpg" alt="04" width="150" height="200">
<img src="file:///I:/03HTML/04.jpg" ><!--没有参数默认原尺寸-->

4.Border:边框

<img src="图片文件的地址" border="图像边框的宽度">

html 复制代码

<img src="04.jpg" border="20">
<a href="#"><img src="04.jpg" border="20"></a>

边框的颜色默认为黑色,如果上了链接默认为深蓝色,颜色不可设置

5.vspace:垂直间距

<img src="04.jpg" hspace="垂直边距" >

6.hspace:水平间距

<img src="04.jpg" hspace="水平边距" >

7、align:排列

图像和文字之间的对齐是通过align属性来设定的， Align的对齐方式有两种：绝对对齐和相对对齐;

绝对对齐方式有三种：middle,left,right

align的属性：

bottom:图片的底部和当前行的文字底部对齐

top:图片的顶端和当前行的文字顶端对齐

middle:图片水平中线和当前行的文字中线对齐

left:图片左对齐

center:图片水平中线和当前行的文字中线对齐

right:图片右对齐
<img src="04.jpg" align="对齐方式" >

html 复制代码

<img src="04.jpg"width="200" height="300" vspace="20" hspace="30" align="right">
	下文来源：NY Times
	<p>On a recent afternoon, I held a bagel in front of me and said: "Look and tell me if this is healthy."
<p>最近的一个下午，我捧起一个贝果，说："看看它，告诉我它是否健康。"


<p>A monotone voice responded that the bagel was unhealthy because it was high in carbohydrates, which could contribute to weight gain.
<p>一个没有感情的声音回答说，贝果并不健康，因为它含有大量碳水化合物，会导致体重增加。


<p>I wasn't talking to a tech bro obsessed with the ketogenic diet. This was the Ai Pin, a $700 tiny computer featuring a virtual assistant pulling data from OpenAI (the research firm behind the ChatGPT chatbot), Google, Microsoft and others to answer questions and perform tasks.
<p>我不是在和一个痴迷于生酮饮食的技术兄弟聊天。这是Ai Pin，一台售价700美元的微型电脑，它配备了一个虚拟助手，可以从OpenAI（ChatGPT聊天机器人背后的研发公司）、谷歌、微软和其他公司获取数据，来回答问题并执行任务。</p>

运行效果：

8、a href：图像的超链接

tips:创建Email链接需要将mailto://添加到Email地址的前面,链接到一个http站点,需要在网址前使用http://协议

<a href="#"><img src="04.jpg" border="20"></a>

9、Usemap:映像地图

此处添加空链接，用图像提示文字代替
操作： 选择需要添加区域地图的图像>>右键属性>>选择左下方框选工具，框选后会自动生成代码

html 复制代码

<img src="05.jpg" usemap="#color">
<map name="color"><!--这里的地图坐标是通过描点自动生成的语句-->
  <area shape="rect" coords="-1,0,540,536" href="#" title="red">
  <area shape="rect" coords="540,2,1079,537" href="#" title="yellow">
  <area shape="rect" coords="541,539,1078,1080" href="#" title="green">
</map>