网页制作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="图片文件的地址">
<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="图像高度"
<img src="04.jpg" alt="04" width="150" height="200">
<img src="file:///I:/03HTML/04.jpg" ><!--没有参数默认原尺寸-->
4.Border:边框
<img src="图片文件的地址" border="图像边框的宽度">
<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="对齐方式" >
<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:映像地图
此处添加空链接，用图像提示文字代替
操作： 选择需要添加区域地图的图像>>右键属性>>选择左下方框选工具，框选后会自动生成代码
<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>