一、列表
1.有序列表：标签有<ol></ol>和<li></li>
代码如下：
<ol>
<li>Google</li>
<li>Baidu</li>
<li>Bing</li>
<li>Sougou</li>
</ol>结果如下：
<ol>标签中可以定义列表类型，如：
<ol type="1">
<ol type="A/a">
<ol type="I/i"> 2.无序列表 标签有<ul></ul><li></li>
代码如下
<ul>
<li>Java</li>
<li>C++</li>
<li>Python</li>
<li>JavaScript</li>
</ul>
<ul>中也可以定义列表类型
<ul type=”disc">
<ul type=”square">
<ul type=”circle"> 3.自定义列表
<dl> 定义一个自定义列表
<dt> 列表项的标题
<dd> 列表项的描述
代码如下
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>香蕉</dd>
<dt>蔬菜<dt>
<dd>西兰花</dd>
<dd>菠菜</dd>
</dl>结果如下
二、表格
表格标签<table></table>
<tr>标签：行
<td>,<th>标签：行内元素
<caption>标签：为表格设置一个标题 该标签必须在<table>标签之后
代码：<table>
<caption>标题</caption>
<tr>
<th>书名</th>
<th>作者</th>
</tr>
<tr>
<td>活着</td>
<td>余华</td>
</tr>
<tr>
<td>西游记</td>
<td>吴承恩</td>
</tr>
</table>
要使用表格标签，要在<style>中改变样式
<style>
table{
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
</style>
border-collapse是设置表格的行<tr>或<td>之间是否留有距离。
border-collapse : 取值有separate :（默认值）边框独立和 collapse :相邻边被合并。
border的属性：width：线的粗细，一般用px，color：颜色，style：样式，solid（实线）、dashed（虚线）、dotted（点划线）、none（不显示）.....。border的样式可以写在一起，例：border：1px solid black。
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表格</title>
<style>
table{
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<caption>标题</caption>
<tr>
<th>书名</th>
<th>作者</th>
</tr>
<tr>
<td>活着</td>
<td>余华</td>
</tr>
<tr>
<td>西游记</td>
<td>吴承恩</td>
</tr>
</table>
</body>
</html>