HTML学习_图像

在学习前端知识的同时，梳理知识，也便于以后查找

图像

注：图像加载是需要时间的，要慎用
注意图像路径对不对

好的习惯

• 为页面上的图像都加上替换文本属性。这样有助于更好的显示信息，如果图像没有显示出来也可以知道这里是有图像的。
• 指定图像的高度和宽度。指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时就有可能会破坏HTML页面的整体布局。

设置图像边框

在标签中您可以使用border属性以像素为单位指定边框粗细。厚度为 0 表示图片周围没有边框。

<img src="images/1.jpg" alt="this is image" border = "3">

设置图像对齐

默认，图像在页面中将显示为左侧对齐。在img标签中，可以使用align属性将设置图像的对齐方式：center(居中)或right(右侧)。

<img src="images/1.jpg" alt="Pulpit rock" align="right">

图片链接

将图像作为一个链接

<p>创建图片链接:
<a href="http://www.xxx.cn/html/">
<img src="/images/course/link.gif" alt="HTML 图片链接" width="32" height="32"></a></p>

<p>无边框的图片链接:
<a href="http://www.xxx.cn/html/">
<img border="0" src="images/link.gif" alt="HTML 图片链接" width="32" height="32"></a></p>

图像映射

area标签定义图像地图中的可点击区域

一个星空area点击就会跳转到对应星球的demo

<p>点击太阳或其他行星，注意变化：</p>

<img src="images/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="images/sun.gif">
  <area shape="circle" coords="90,58,3" target="_blank" alt="Mercury" href="images/merglobe.gif">
  <area shape="circle" coords="124,58,8" target="_blank" alt="Venus" href="images/venglobe.gif">
</map>

–END–