web前端之html图片操作详解从零开始(三)----img标签
2017-02-25 15:51
821 查看
<!DOCTYPE html> <html> <head> <title>Image.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- HTML 图像- 图像标签( <img>)和源属性(Src) 在 HTML 中,图像由<img> 标签定义。 <img> 是空标签,意思是说,它只包含属性,并且没有闭合标签。 要在页面上显示图像,你需要使用源属性(src)。src 指 "source"。源属性的值是图像的 URL 地址。 --> <!-- HTML 图像- Alt属性 alt 属性用来为图像定义一串预备的可替换的文本。 替换文本属性的值是用户定义的。 <img src="boat.gif" alt="没有了"> 在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。 此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯, 这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。 --> <!-- HTML 图像- 设置图像的高度与宽度 height(高度) 与 width(宽度)属性用于设置图像的高度与宽度。 属性值默认单位为像素: <img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228"> 提示: 指定图像的高度和宽度的一个很好的习惯。如果图像指定了高度宽度,页面加载时就会保留指定的尺寸。 如果没有指定图片的大小,加载页面时有可能会破坏HTML页面的整体布局。 --> <!-- 基本的注意事项 - 有用的提示: 注意: 假如某个 HTML 文件包含十个图像,那么为了正确显示这个页面,需要加载 11 个文件。加载图片是需要时间的,所以我们的建议是:慎用图片。 注意: 加载页面时,要注意插入页面图像的路径,如果不能正确设置图像的位置,浏览器无法加载图片,图像标签就会显示一个破碎的图片。 --> </head> <body> <p> 一个图像: <img src="timg.gif" alt="Smiley face" width="32" height="32"></p> <p> 一个动图: <img src="timg.gif" alt="Computer man" width="48" height="48"></p> <p> 注意插入动图的语法和静态图的语法是一样的。 </p> <p>一个来自文件夹中的图像:</p> <img src="images/timg.gif" alt="Google Chrome" width="33" height="32"><p>图像:</p> <img src="http://www.runoob.com/images/logo.png" alt="runoob.com" width="336" height="69"> </body> </html>
<!DOCTYPE html> <html> <head> <title>Image.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- 排列图片 --> <body> <h4>默认对齐的图像 (align="bottom"):</h4> <p>这是一些文本。 <img src="timg.gif" alt="Smiley face" width="32" height="32"> 这是一些文本。</p> <h4>图片使用 align="middle":</h4> <p>这是一些文本。 <img src="timg.gif" alt="Smiley face" align="middle" width="32" height="32">这是一些文本。</p> <h4>图片使用 align="top":</h4> <p>这是一些文本。 <img src="timg.gif" alt="Smiley face" align="top" width="32" height="32">这是一些文本。</p> <p><b>注意:</b>在HTML 4中 align 属性已废弃,HTML5 已不支持该属性,可以使用 CSS 代替。</p> <p> <img src="timg.gif" alt="Smiley face" style="float:left" width="32" height="32"> 一个带图片的段落,图片浮动在这个文本的左边。 </p> <p> <img src="timg.gif" alt="Smiley face" style="float:right" width="32" height="32"> 一个带图片的段落,图片浮动在这个文本的右边。 </p> <p><b>注意:</b> 在这里我们使用了 CSS "float" 属性,在HTML 4中 align 属性已废弃,HTML5 已不支持该属性,可以使用 CSS 代替。</p> <p>创建图片链接: <a href="http://www.baidu.com"> <img src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p> <p>无边框的图片链接: <a href="http://www.baidu.com"> <img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p> <p>点击太阳或其他行星,注意变化:</p> <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.html"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.html"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.html"> </map> </body> </html>
HTML 图像标签
<image> 定义图像 <map> 定义图像地图 <area> 定义图像地图中的可点击区域
相关文章推荐
- web前端之html从零开始(二)----a标签学习,强化
- web.xml文件中的jsp-config标签详解 --可用于解决jsp、html乱码问题
- HTML:img标签usemap,一个图片中添加多个链接
- css html将图片img标签 水平居中 垂直居中 和水平垂直居中
- Android 详解实现TextView加载带图片标签的Html并按比例缩放
- web前端之HTML常用标签,元素,属性
- html <img>标签 src=""内的图片路径问题
- HTML:认识<img>标签,为网页插入图片
- 移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码,更好地将移动web前端页面表现出来。本文整理一些常用的meta标签
- MyEclipse中创建WEB工程,运用<img>标签显示图片等,但无法显示问题
- web前端与移动开发---html列表、表单元素等标签的学习
- <img usemap不能得到outHTML,如何对标签操作
- android中webview空间通过Img 标签显示sd卡中 的图片
- web前端,标签切换总结5load()加载新的html界面
- 前端开发规范(一):img标签:图片IMG标记的alt属性和title属性
- <img usemap不能得到outHTML,如何对标签操作
- 读书笔记之html标签的语义的意义——《编写高质量的代码:Web前端开发的修炼之道》
- WEB前端问题——img标签的onclick事件无法响应问题
- web前端与移动开发---html标签的学习及特殊符号
- iOS原生如何加载HTML中img标签的图片