列表
无序列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无序列表</title>
</head>
<body>
<!--无序列表使用 `<ul>` 标签-->
<h4>无序列表:</h4>
<ul>
<li>翠峰茉莉</li>
<li>淘淘乌龙</li>
<li>杨枝甘露</li>
</ul>
</body>
</html>
有序列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>有序列表</title>
</head>
<body>
<!--有序列表始于 `<ol>` 标签。-->
<h4>有序列表</h4>
<ol>
<li>翠峰茉莉</li>
<li>淘淘乌龙</li>
<li>杨枝甘露</li>
</ol>
<ol start="50">
<li>翠峰茉莉</li>
<li>淘淘乌龙</li>
<li>杨枝甘露</li>
</ol>
</body>
</html>
效果图:
可戳:不同类型的有序列表-来源:菜鸟教程
自定义列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义列表</title>
</head>
<body>
<!--自定义列表以 `<dl>` 标签开始。每个自定义列表项以 `<dt>` 开始。每个自定义列表项的定义以 `<dd>` 开始-->
<h4>自定义列表:</h4>
<dl>
<dt>翠峰茉莉</dt>
<dd>%半糖正常冰%</dd>
<dt>淘淘乌龙</dt>
<dd>%椰果*1常温%</dd>
</dl>
</body>
</html>
效果图:
嵌套列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>嵌套列表</title>
</head>
<body>
<h4>嵌套列表:</h4>
<ul><li>饮品</li>
<ol>
<li>翠峰茉莉</li>
<dd>%半糖正常冰%</dd>
<li>淘淘乌龙</li>
<dd>%椰果*1常温%</dd>
</ol>
<li>甜品</li>
<ol>
<li>黑森林</li>
<dd>六寸</dd>
<li>布朗尼</li>
<dd>两块</dd>
</ol>
</ul>
</body>
</html>
效果图:
表格
第一个实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>
每一个表格从一个table标签开始。
每个表格行从tr标签开始。
每个表格的数据从td标签开始。
</p>
<h4>一列:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>一行三列:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>三行两列:</h4>
<table border="3"><!--此处table border是指边框的粗细,如果不定义边框属性,表格将不显示边框。-->
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>199</td>
<td>299</td>
<td>399</td>
</tr>
</table>
</body>
</html>
效果图:
表格表头及表格标题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格表头</title>
</head>
<body>
<table border="1">
<caption>哑舍</caption><!--表格的标题使用 <caption> 标签进行定义。-->
<tr><!--表格的表头使用 <th> 标签进行定义。-->
<th>一</th>
<th>二</th>
</tr>
<tr>
<td>鱼纹镜</td>
<td>四季图</td>
</tr>
<tr>
<td>香妃链</td>
<td>锟铻刀</td>
</tr>
</table>
</body>
</html>
效果图:
跨行或跨列的表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>跨列跨行表格</title>
</head>
<body>
<h4>单元格跨两列</h4>
<table border="2">
<tr>
<th>故事名称</th>
<th colspan="2">人物</th>
</tr>
<tr>
<td>种火人</td>
<td>小雅</td>
<td>许安昶</td>
</tr>
</table>
<h4>单元格跨两行</h4>
<table border="3">
<tr>
<th>故事名称</th>
<td>种火人</td>
</tr>
<tr>
<th rowspan="2">人物</th>
<td>小雅</td>
</tr>
<tr>
<td>许安昶</td>
</tr>
</table>
</body>
</html>
效果图:
单元格边距和间距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h4>没有单元格边距和间距</h4>
<table border="2">
<tr>
<th>故事名称</th>
<td>种火人</td>
</tr>
<tr>
<th>作者</th>
<td>苏小晗</td>
</tr>
</table>
<h4>有单元格边距和间距</h4>
<!--cellsapcing控制单元格间距,cellpadding控制单元格边距-->
<table border="1" cellspacing="10" cellpadding="15">
<tr>
<th>故事名称</th>
<td>种火人</td>
</tr>
<tr>
<th>作者</th>
<td>苏小晗</td>
</tr>
</table>
</body>
</html>
效果图: