HTML基础篇之表格与无序列表（三）

最新推荐文章于 2024-01-28 20:31:49 发布

醋黄瓜

最新推荐文章于 2024-01-28 20:31:49 发布

阅读量1.5k

点赞数

分类专栏： html 文章标签： HTML

本文链接：https://blog.csdn.net/qq_37130983/article/details/80870744

版权

html 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

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>

效果图：