饭桶教程-html教程-

html教程

HTML 教程
HTML 5简介
HTML 5 视频
HTML 5 音频
HTML 5 Canvas
HTML 5 Web 存储
HTML 5 Input 类型
HTML 5 表单元素
HTML 5 表单属性
HTML 5 参考手册
HTML 5 标准事件属性
<!-->
<!DOCTYPE>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdo>
<blockquote>
<body>
<br />
<button>
<canvas>
<caption>
<center>
<em> <strong> <dfn> <code> <samp> <kbd> <var> <cite> 标签
<col>
<colgroup>
<command>
<datalist>
<dd>
<del>
<details>
<dir>
<div>
<dl>
<dt>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> 至 <h6>
<head>
<header>
<hgroup>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<keygen>
<em> <strong> <dfn> <code> <samp> <kbd> <var> <cite>
<label>
<legend>
<li>
<link>
<map>
<mark>
<menu>
<meta>
<meter>
<nav>
<noframes>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<style>
<sub> 和 <sup>
<summary>
<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<tt>
<u>
<ul>
<video>

定义和用法

<img> 标签定义图像。

HTML 4.01 与 HTML 5 之间的差异

在 HTML 4.01 中，图像的 "align", "border", "hspace" 以及 "vspace" 不赞成使用。在 HTML 5 中，不再支持这些属性。

例子

属性

属性	值	描述	4	5
alt	text	定义有关图形的短的描述。	4	5
src	URL	要显示的图像的 URL。	4	5
align	top bottom middle left right	规定如何根据周围的文本来对齐图像。不支持。请使用 CSS 代替	4
border	pixels	定义图像周围的边框。不支持。请使用 CSS 代替。	4
height	pixels %	定义图像的高度。	4	5
hspace	pixels	定义图像左侧和右侧的空白。不支持。请使用 CSS 代替。	4
ismap	URL	把图像定义为服务器端的图像映射。	4	5
longdesc	URL	一个 URL，指向了描述该图像的文档。不支持。	4
usemap	URL	定义作为客户端图像映射的一幅图像。请参阅 <map> 和<area> 标签，了解其工作原理。	4	5
vspace	pixels	定义图像顶部和底部的空白。不支持。请使用 CSS 代替。	4	5
width	pixels %	设置图像的宽度。	4	5

标准属性

class, contenteditable, contextmenu, dir, draggable, id, irrelevant,

lang, ref, registrationmark, tabindex, template, title

如需完整的描述，请访问 HTML 5 中标准属性。

事件属性

onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu,

ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover,

ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup,

onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout,

onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload

如需完整的描述，请访问 HTML 5 中事件属性。

TIY 实例

插入图像，本例演示如何在网页中显示图像。（略）

从不同的位置插入图片（略）

本例演示如何将其他文件夹或服务器的图片显示到网页中。

浮动图像,本例演示如何使图片浮动至段落的左边或右边。

<html> 
<body> 
<p> 
<img src ="/p/eg_mouse.jpg"> 
带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。 
</p> 
<p> 
<img src ="/p/eg_mouse.jpg"> 
带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。 
</p> 
</body> 
</html> 
调整图像尺寸,本例演示如何将图片调整到不同的尺寸。 
<html> 
<body> 
<img src="/p/eg_mouse.jpg" width="50" height="50"> 
<br /> 
<img src="/p/eg_mouse.jpg" width="100" height="100"> 
<br /> 
<img src="/p/eg_mouse.jpg" width="200" height="200"> 
<p>通过改变 img 标签的 "height" 和 "width" 属性的值，您可以放大或缩小图像。</p> 
</body> 
</html>

制作图像链接,本例演示如何将图像作为一个链接使用。

<html> 
<body> 
<p> 
您也可以把图像作为链接来使用： 
<a href="/p/html/html/lastpage.htm"> 
<img border="0" src="planets.gif" /> 
</a> 
</p> 
</body> 
</html> 
创建图像地图,本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。 
<html> 
<body> 
<p>请点击图像上的星球，把它们放大。</p> 
<img 
src="/p/planets.gif" 
border="0" usemap="#planetmap" 
alt="Planets" /> 
<map name="planetmap" id="planetmap"> 
<area 
shape="circle" 
coords="180,139,14" 
href ="/p/html/venus.htm" 
target ="_blank" 
alt="Venus" /> 
<area 
shape="circle" 
coords="129,161,10" 
href ="/p/html/mercur.htm" 
target ="_blank" 
alt="Mercury" /> 
<area 
shape="rect" 
coords="0,0,110,260" 
href ="/p/html/sun.htm" 
target ="_blank" 
alt="Sun" /> 
</map> 
<p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所 
以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p> 
</body> 
</html>