HTML学习（4）图像和表格

HTML 图像

1. 创建图像映射

图像1中有可供点击的3个区域，每个区域都是一个超级链接，点击后显示另一个图像。

<img
src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />

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

<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />

<area
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />

<area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />

</map>

<img>表示图像1，其 中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以应该同时向 <map> 添加 id 和 name 属性。

alt属性是一个必需的属性，它规定在图像无法显示时的替代文本。

<map>标签定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。

<area>标签定义图像映射中的区域（图像映射指得是带有可点击区域的图像）。area 元素总是嵌套在 <map> 标签中。

<area>属性：

属性	值	描述
coords	坐标值	定义可点击区域（对鼠标敏感的区域）的坐标。
href	URL	定义此区域的目标 URL。
nohref	nohref	从图像映射排除某个区域。
shape	default rect circ poly	定义区域的形状。
target	_blank _parent _self _top	规定在何处打开 href 属性指定的目标 URL。

实践了一下，感觉不错。实践前我没有研究如何确定坐标值，实践时直接用坐标值试验。坐标值是指在图像1上的坐标，即如果图像是矩形，宽800高100，那么coords="0,0,800,100" shape="rect"，则覆盖整个图像1。

HTML 表格

1. 在 HTML 文档中创建表格

<table border="1"> //表格由 <table> 标签开始。border表示表格边框。

<caption>标题内容</caption> //标题

<tr>
<th>表头数据</th> //表头由 <th> 标签定义。大多数浏览器会把表头显示为粗体居中的文本。
......
<th>表头数据</th>
</tr>

<tr> //每个表格行由 <tr> 标签开始。
<td>表格数据</td> //每个表格数据（列）由 <td> 标签开始。
......
<td> </td> //如果单元格中没有内容，可以添加一个空格占位符。
</tr>
......
<tr>
<td>表格数据</td>
......
<td>表格数据</td>
</tr>

</table>

用colspan和rowspan属性表示跨列或跨行的单元格。
跨2列：<th colspan="2">表头数据</th>；跨2行：<th rowspan="2">表头数据</th>。

<table>中的cellpadding属性可以设置表格数据与边框间的距离。
<table>中的cellspacing属性可以设置边框与边框间的距离。
<table>中的frame属性可以控制围绕表格的边框。