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>
-------------------------------------------------------------------------------------------------------------------
HTML列表 <ul>、<ol>元素
<h4>无序列表，即前面加圆点的列表</h4>
<ul>
<li>咖啡</li>
<li>茶</li>
</ul>
<h4>有序列表，即前面有序号的列表</h4>
<ol>
<li>咖啡</li>
<li>牛奶</li>
</ol>
说明：<ul>元素为无序列表，<ol>为有序列表，<li>定义一行的显示内容
<ul>元素定义列表中，前面不同的圆点，type属性
disc 黑点 circle 黑圈 square 黑块
<h4>disc 黑点</h4>
<ul type="disc">
<li>苹果</li>
<li>香蕉</li>
</ul>
<h4>circle 圆圈</h4>
<ul type="circle">
<li>苹果</li>
<li>香蕉</li>
</ul>
<h4>square 黑方块</h4>
<ul type="square">
<li>苹果</li>
<li>香蕉</li>
</ul>
<ol> 元素定义列表中，前面不同的序号，type属性
默认 从1开始 A 从A开始 a从a开始 I从罗马数字I开始 i从i开始
列表的嵌套
<h4>嵌套列表</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶</li>
</ul>
</li>
<li>牛奶</li>
</ul>
浙公网安备 33010602011771号