• 利用HTML在你的网页中包含图像
  • 选用合适的图像格式
  • 以正确的大小显示图像
  • 优化网络图像让页面加载得更快

<img>需要使用<img>元素来向页面中添加图像。这是一个空元素(没有结束标签)。<img>元素必须包含以下两个特征

src 这个特征告诉浏览器在何处找到所需的图像文件,特性值通常是一个指向网站内某个图像的相关URL。

Alt 这个特性对图像进行文本说明,在你无法查看图像时这段说明会对图像进行描述

title 也可以在<img>元素中使用title特征来提供有关图像的附加信息。

height /width 这两个特性以像素为单位来指定图像的宽度

<img src=”images/xxx.jpg” alt=”abcxxx” width=”500″ height=”500″/>

在代码插入图像的位置

  1. 在段落之前,段落会在图像之后另起一行开始显示
  2. 在段落的起始处,段落文本的第一行将与图像的地步对齐
  3. 在段落之中,图像将位于它所在的段落文字之中

旧代码,图像的水平对齐

align ,特性通常用来表明页面的其它部分怎样环绕在图像周围,HTML5不在支持这一特性

align特性可以采用以下水平值

left,该特性值将图像左对齐(使文本环绕在图像右边)

right,该特性值将图像右对齐(使文本环绕在图像的左边)

图像的垂直对齐

align特性有三个值可用来控制图像如何在垂直方向上与环绕在它周围的文本对齐

top, 该值将周围文本的第一行与图像的顶端对齐

middle,该值将周围文本的第一行与图像的中间对齐

bottom,该值将周围文本的第一行与图像的低端对齐

创建图像的三条规则

  • 使用正确的格式保存图像
  • 以正确的大小保存图像
  • 以像素来衡量图像

HTML5:图形和图形说明

<figure> 图像往往带有说明,HTML5引入了一个新的<figure>元素用来包含图像以及对图像的说明,并且这两项是相关联的。只要图像的说明是相同的,你就可以在<figure>中添加多个图像

<figcaption> 在HTML5中引入<figcaption>元素是为了让网页设计人员给图像添加说明,在这些元素出现之前,一直无法将<img>元素与其说明关联起来

图像小结

  • <img>元素用于向网页中添加图像
  • 必须为<img>元素指定src特性和Alt特性,src特性用来表示图像的源地址,alt特性用来描述图像的内容
  • 应该根据图像在网页上显示的大小来保存图像,并将其保存为合适的格式
  • 照片最好保存为JPEG格式,使用单色的插图或徽标更适合保存为gif格式