007_HTML图像与表格

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>

猜你喜欢

转载自www.cnblogs.com/linyuansun/p/12369766.html
007