HTML基础 之 img 图片

图像标签(<img>)和源属性(Src)

  • 在 HTML 中,图像由 <img> 标签定义。
  • <img> 是空标签,意思是说,它只包含属性,并且没有闭合标签。
  • 要在页面上显示图像,你需要使用源属性(src)。src 指 "source"。源属性的值是图像的 URL 地址。
  • URL 指存储图像的位置。如果名为 "boat.gif" 的图像位于 www.w3school.com.cn 的 images 目录中,那么其 URL 为 http://www.w3school.com.cn/images/boat.gif
  • 浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间,那么浏览器会首先显示第一个段落,然后显示图片,最后显示第二段。

替换文本属性(Alt)
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

![](boat.gif)

在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的

基本的注意事项 - 有用的提示:

假如某个 HTML 文件包含十个图像,那么为了正确显示这个页面,需要加载 11 个文件。加载图片是需要时间的,所以我们的建议是:慎用图片。

HTML 与 XHTML 之间的差异

  • 在 HTML 中,<img> 标签没有结束标签。
  • 在 XHTML 中,<img> 标签必须被正确地关闭。
  • 在 HTML 4.01中,不推荐使用 image 元素的 "align"、"border"、"hspace" 以及 "vspace" 属性。
  • 在 XHTML1.0 Strict DTD 中,不支持 image 元素的 "align"、"border"、"hspace" 以及 "vspace" 属性。

基本代码如下

<html>
<!--设置网页背景图片-->

<body  style="background:url('background.jpg') no-repeat;background-size: 100%;">

<!--图片与html在同一级目录则只需要写图片名称,如果在更深层目录这要写到同一级目录-->
<p>图片的排列 ![](one.png)设置了对齐方式 </p>

<!--带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。-->
<p>图片的排列 ![](one.png) align图片位置 </p>

<p>如果无法显示图像,将显示 "alt" 属性中的文本:![](11one.png)</p>


<!--您也可以把图像作为链接来使用-->
<a href="http://www.jianshu.com/u/3f6026e916d5">
![](a-http.png)
</a>


<p>请点击图像上的星球,把它们放大。</p>

<img
src="one.png"
border="0" usemap="#planetmap"
alt="Planets" height="260" />

<map name="planetmap" id="planetmap">

<area
shape="circle"
coords="180,139,14"
href ="http://www.jianshu.com/u/3f6026e916d5"
target ="_blank"
alt="Venus" />

<area
shape="circle"
coords="129,161,10"
href ="http://www.jianshu.com/u/3f6026e916d5"
target ="_blank"
alt="Mercury" />

<area
shape="rect"
coords="0,0,110,260"
href ="http://bbs.kuaifazs.com/home.php?mod=space&do=notice&view=system"
target ="_blank"
alt="Sun" />

</map>

<p><b>注释:</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性(根据浏览器),所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>

</body>
</html>

推荐阅读更多精彩内容

  • 学习HTML的最佳网站没有之一http://www.w3school.com.cn/html/ 关于HTML/HT...
    hiuman阅读 840评论 0 16
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 1,560评论 1 40
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 74,810评论 12 116
  • HTML基础 本文包括 HTML基本知识与结构 HTML常见标签 标签写法与嵌套的讨论 HTML、CSS、java...
    廖少少阅读 804评论 2 21
  • 仿佛梦回少年,不知道是雨水还是泪水
    耍耍三郎77阅读 22评论 0 1