HTML图像
<img> 元素
<img src="/i/eg_mouse.jpg" width="128" height="128"/>
<img src="/i/eg_cute.gif width="50" height="50"/>
说明:插入普通图片与插入动图方法相同
慎用插入图像,会导致加载变慢。
替换文本属性 alt
<img src="boat.git" alt=“Big Boat">
说明:图片无法被浏览器显示出来后,会显示alt定义的文本。
图像背景
<body background="/i/eg_background.jpg">
...
</body>
图片靠左靠右
<p>
<mig src="/i/eg_cute.gif align="left"/>
带有图像的段落,align属性为“left”图像浮动到文本左侧,“rigth"则会浮动靠右侧
</p>
图片作为父超链接
<p>
将下图作为超链接中的父链接:
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
</p>
图片映射 使用map标签
即,点击图片某区域,跳转到给定地址
<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/htm./venus.html"
target="_blank"
alt="Venus"/>
<area
shape="circle"
coords="129,162,10"
href="/example/html/mercur.html"
target="_blank"
alt="Mercury"/>
</map>
说明,img元素中“usemap"属性引用map元素中的”id"或"name"属性(根据浏览器),需同时向map元素添加“id”和“name"属性
------------------------------------------------------------------------------------------------------------------------------
HTML表格
<h4>一行三列:</h4>
<table border="1">
<tr>
<td>row1 cell1</td>
<td>row2 cell2</td>
<td>row3 cell3</td>
</tr>
</table>
说明:
<table>元素下的三个常用标签
<td>定义某单元格内容
<tr>定义下一行
<th>定义表头
表格边框 border属性
<h4>border属性为“1”,显示表格边框,为“0”或没有border属性不显示边框</h4>
<table border="1">
<tr>
<td>row 1,cell 1</td>
<td>row1, cell2</td>
</tr>
</table>
表格的表头 <th>标签
<h4>横向表头</h4>
<table border="1">
<tr>
<th>姓名</th>
<th>电话1</th>
<th>电话2</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 856</td>
</tr>
</table>
<h4>竖向表头:</h4>
<table border="0">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>电话1</th>
<td>10086</td>
</tr>
<tr>
<th>电话2</th>
<td>10001</td>
<tr>
</table>
合并单元格 colspan、rowspan属性
<h4>横跨两列的单元格</h4>
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 823</td>
<td>555 77 965</td>
</tr>
</table>
<h4>竖跨两列的单元格</h4>
<table border="0">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">电话</th>
<td>10086</td>
</tr>
<tr>
<td>10001</td>
<tr>
</table>
表格中单元格内容靠左、靠右 align属性
<table width="400" border="1">
<tr>
<th align="left>消费项目</th>
<th align="right">一月</th>
<tr>
<tr>
<td>衣服</td>
<td>$241.10</td>
</tr>
</table>
表格框架 frame属性
相当于定义一个块,在块里显示内容
<table frame="box">
<tr>
<th>最外面,四周有框格线</th>
</tr>
</table>
<table frame="above">
<tr>
<th>最外面,只有上框格线</th>
</tr>
</table>
<table frame="below">
<tr>
<th>最外面,只有下框格线</th>
</tr>
</table>
<table frame="hsides">
<tr>
<th>最外面,只有上下框格线</th>
</tr>
</table>
<table frame="hsides">
<tr>
<th>最外面,只有左右框格线</th>
</tr>
</table>