HTML基础篇之表格与无序列表(三)

HTML基础篇(三)

<img>图片标签的扩展
 width:宽; height: 高; alt: 图片没加载出的显示的提示文本; <map>:图 <area shape="circle"   coords="x1,y1,x2,y2(左上角和右下角)过x1,y1,r"

<!--src图片路径 -->
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<!--name为map名图片引用 -->
<map name="planetmap">
<!--shape图案;coords坐标 herf:点击这个坐标点跳转的页面 --> 
    <area shape="rect" coords="0,0,82,126" alt="Sun" href="a.htm"> 
    <area shape="circle" coords="90,58,3" alt="Mercury" href="b.htm"> 
    <area shape="circle" coords="124,58,8" alt="Venus" href="c.htm">
</map>

html表格标签<table>
表格由若干行<tr>,每行由若干列<td>组成
<tabel> 
    <tr> 
        <td>单元格一</td>
        <td>单元格一</td>
    </tr>
    <tr> 
        <td>单元格二</td>
        <td>单元格二</td>
     </tr>
</tabel>

 


  表格分三部分: 表头<thead>; 表格的主体<tbody>;表格页脚<tfoot>,可写可不写

 表格单元格合并:rowspan 行合并,colspan 列合并,定义在td上
 表格间距:cellspacing  表格边距:cellpadding   表格边框:border
 表格的标题: caption       表格列的组: colgroup       表格结合CSS案例: 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>html基础</title>
		<style>
		*{
			margin: 0;
			padding: 0;
		}
		table{
			width: 340px;
			text-align: center;
			font-size: 18px;
			line-height: 50px;
			border-color: #F5F5DC;
		}
		th{
			background: lightblue;
		}
		td{
			background-color: aliceblue;
		}
		</style>
	</head>
	<body>
		<table border="1" cellspacing="0">
			<caption><h3>电子产品</h3></caption>
			<thead>
				<tr>
					<th>手机</th>
					<th>电脑</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>小米</td>
					<td>联想</td>
				</tr>
				<tr>
					<td>一加</td>
					<td>华为</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td colspan="2" >&copy;版本 2018</td>
				</tr>
			</tfoot>
		</table>
	</body>
</html>
效果图
                

表格的有序列表<ol>和无序列表<ul>

 有序列表<ol>: 子列表<li>;  其属性:类型type值有 1 A a I i;

<ol type="1">
   <li>数据项一</li>
   <li>数据项二</li>
   <li>数据项三</li>
</ol>


 无序列表<ul>: 子列表<li>;  通过样式设置列表类型style属性 list-style-type  值有 disc(圆点)  circle(圆圈)、square(正   方形) 等

<ul style="list-style-type:disc;">
   <li>数据项一</li>
   <li>数据项二</li>
   <li>数据项三</li>
</ul>

在html4中ul废弃;html5中不支持;通过样式设置,如果想去掉数据项前的圆点等图案设置样式list-style-type值为none

<ul style="list-style-type:none;">
   <li>数据项一</li>
   <li>数据项二</li>
   <li>数据项三</li>
</ul>


 自定义列表:<dl>:列表 <dt>列表项  <dd> 列表项描述
   其结构

<dl>
  <dt>手机</dt>
  <dd>苹果</dd>
</dl>

全部代码案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>html基础</title>

	</head>
	<body>
		<div>
			<div>
				<h4>有序列表</h4>
				<ol type="1" style="color: dodgerblue; font-size: 20px;">
					<li>一加</li>
					<li>华为</li>
					<li>小米</li>
				</ol>
			</div>
			<hr />
			<div>
				<h4>无序列表</h4>
				<ul style="list-style-type: circle;color: crimson; font-size: 20px;">
					<li>衣服</li>
					<li>裤子</li>
					<li>鞋子</li>
				</ul>
			</div>
			<hr />
			<div>
				<h4>自定义列表</h4>
				<dl style="color: darkorange; font-size: 20px;">
					<dt>手机</dt>
					<dd>苹果</dd>
					<dt>电脑</dt>
					<dd>戴尔</dd>
				</dl>
			</div>
		</div>
	</body>
</html>

效果图:
        


  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

醋黄瓜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值