饭桶教程-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>

定义和用法

<area> 标签定义图像映射中的区域。

HTML 4.01 与 HTML 5 之间的差异

HTML 5 有一些新的属性，且不再支持 HTML 4.01 的一些属性。

例子：

<img src ="/p/planets.gif" alt="Planets" usemap ="#planetmap" /> 
<map id ="planetmap"> 
<area shape ="rect" coords ="0,0,82,126" href ="/p/html/sun.htm" alt="Sun" /> 
<area shape ="circle" coords ="90,58,3" href ="/p/html/mercur.htm" alt="Mercury" /> 
<area shape ="circle" coords ="124,58,8" href ="/p/html/venus.htm" alt="Venus" /> 
</map>

属性

属性	描述	4	5
alt	定义此区域的替换文本。如果 href 存在，则该属性是必需的。仅在 href 属性存在时使用。	4	5
coords	定义可点击区域的坐标。	4	5
href	定义此区域的目标 URL。	4	5
hreflang	规定目标 URL 的基准语言。仅在 href 属性存在时使用。	4	5
nohref	不赞成。从图像映射排除一个区域。	4
media	规定目标 URL 的媒介类型。默认值：all。仅在 href 属性存在时使用。	4	5
ping	由空格分隔的 URL 列表，当用户点击该链接时，这些 URL 会获得通知。仅在 href 属性存在时使用。		5
rel	规定当前文档与目标 URL 之间的关系。仅在 href 属性存在时使用。		5
shape	规定区域的形状。	4	5
target	在何处打开目标 URL。	4	5
type	规定目标 URL 的 MIME 类型。仅在 href 属性存在时使用。		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 中事件属性。

创建图像映射，代码如下：

<html> 
<body> 
<p>请点击图像上的星球，把它们放大。</p> 
<img 
src="/p/eg_planets.jpg" 
border="0" usemap="#planetmap" 
alt="Planets" /> 
<map name="planetmap" id="planetmap"> 
<area 
shape="circle" 
coords="180,139,14" 
href ="/p/html/venus.html" 
target ="_blank" 
alt="Venus" /> 
<area 
shape="circle" 
coords="129,161,10" 
href ="/p/html/html/mercur.html" 
target ="_blank"  
alt="Mercury" /> 
<area 
shape="rect" 
coords="0,0,110,260" 
href ="/p/html/html/sun.html" 
target ="_blank" 
alt="Sun" /> 
</map> 
<p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 
属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p> 
</body> 
</html>

本例显示如何创建带有可供点击区域的图像映射。其中的每个区域都是一个超级链接。