详解HTML/XHTML中img图象标识的基础用法

 图象标识用于在网页页面里显示信息1副图象。
HTML/XHTML 图象 <img /> 标识
在 XHTML 中,根据 <img /> 标识来界定显示信息1副图象。<img />是1个非成对标识。

基础英语的语法:

XML/HTML Code拷贝內容到剪贴板
  1. <img src="url" />  

<img /> 标识 根据 src 特性来明确图象来源于,url 是1个相对性或肯定的图象详细地址。

图象标识特性:
src:照片源,必须。特定显示信息的图象来源于详细地址,能够是相对性详细地址或肯定详细地址。
alt:可更换文字,可省略。用于图象没法显示信息或访问器屏蔽了照片时,显示信息出来的更换文字。
title:图象提醒文本,可省略。当电脑鼠标滞留到照片上时,会提醒有关文本。
width:照片显示信息的宽度,可省略。企业为像素。
height:照片显示信息的高宽比,可省略。企业为像素。

文字更换特性(alt)
图象标识的文字更换特性 alt 尽管并不是1个必须的特性,但确是1个很关键的特性。当由于一些缘故,访问器载入图象不成功的情况下,将显示信息该取代文字以取代原图象以出示遗失的有关图象信息内容。该特性也是有助于那些应用纯文字访问器的客户了解网页页面內容。
因而,给每幅图象加上1个成心义的 alt 文字更换特性是个很好的习惯性。

<img /> 标识应用训练
在 e:html 文档夹下的建立 images 文档夹用于储放图象文档。将下面这幅照片,电脑鼠标右键挑选 “照片另存为”,将照片储存到 images 文档夹下以备用。

编写大家的 XHTML 小事例 1.html ,在 id="main-content" 的 div 标识内做以下变更:

XML/HTML Code拷贝內容到剪贴板
  1. <h3>文章内容题型</h3>  
  2. <p>文章内容实际內容</p>  
  3. <p><img src="images/flower_1.jpg" alt="花朵" /></p>  

这样大家就在网页页面中显示信息了1幅图象。

特定图象显示信息规格
能够给 <img /> 标识提升 width 或 height 特性以手动式特定图象显示信息的规格:

XML/HTML Code拷贝內容到剪贴板
  1. <img src="images/flower_1.jpg" alt="花朵" width="350" height="270" />  

提醒
1般状况下都会忽视图象规格特性而默认设置显示信息原图尺寸或访问器自融入尺寸显示信息。特定不适当的图象显示信息规格,将会会让图象显示信息形变。
因为加载图象必须1定的時间,应当尽可能在确保照片品质的前提条件下,减小照片的体积以尽可能做到优良的客户浏览体验。

拓宽阅读文章
像素(Pixel):大家能够形象的觉得像素便是1个1个测算机能够显示信息的最少的点,比如大家常说的的显示屏辨别率是 1024*768 ,意思便是显示屏横着有 1024 个(像素)点,竖着有 768 个(像素)点。用作企业时1般默认设置创作 pix。