无序列表和有序列表
<!--无序列表-->
<ul style="list-style: none"> <!--unorder line 去掉小圆点style="list-style: none(squre为正方形)"-->
<li>李白</li>
<li>杜甫</li>
<li>申公豹</li>
</ul>
<!--ul>li*5 会出现一个ul嵌套5个li-->
<!--有序列表 ol order list type="a" start="3"以小写字母开始，从字母的第三个位置开始-->
<ol>
<li>123</li><!--按住鼠标滚轮往下拖动鼠标，就会一次输入多个相同的数据-->
<li>123</li>
<li>123</li>
<li>123</li>
</ol>
<ol type="I" start="1">
<li style="height:50px">你好</li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<!--自定义列表 define list-->
<!--缩进属性 text-indent:32px-->
<dl>
<dt style="height:30px;text-indent: 44px">配送方式</dt> <!--define title标题-->
<dd>上门自提</dd> <!--数据 define data-->
<dd>上门自提</dd>
</dl>
表格
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--样式css
1.写到标签身上 行内 缺点：冗杂 没有实现结构和样式相分离
2.文本内样式，语法：在head标签里引入一个style标签
优点：符合标准，样式分离
注意：必须写到head标签里
-->
<style>
/*挑谁？ 挑选过程--》css选择器--》选择元素
方式1：标签选择器{
写你给这些元素加的公共样式（属性名字：属性值；）
}
align更多强调的是文本局中
*/
td{
width: 100px;
background-color: blue;
color: darkred;
/*文本局中*/
text-align: center;
}
</style>
</head>
<body>
<!--表格 table-->
<!--
跨行：从上到下 rowspan="跨越的行数" colspan="跨越的列数"
-->
<table align="center" border="1" cellpadding="10px" cellspacing="0px"> <!--align="center" border="1"表格局中，边框大小为1，cellpadding="10px设置单元格内容与边框的距离，cellspacing="0px"边框之间的距离-->
<!--标题-->
<caption style="font-size: 30px;color: burlywood">产品信息</caption>
<!--表格头部-->
<thead>
<!--行 tr table row-->
<tr style="height: 50px">
<!--th作为字段的话是自动局中的-->
<th>序号</th>
<th>名称</th>
<th>评价</th>
</tr>
</thead>
<!--表格身体-->
<tbody>
<tr>
<td colspan="2">1001</td> <!--跨行合并-->
<!--<td>枣花</td>--> <!--合并后把下一列注释掉-->
<td rowspan="2">好用</td><!--跨列合并-->
</tr>
<tr>
<td>1002</td>
<td>梨花</td>
<!--<td>好用</td>-->
</tr>
<tr>
<td>1003</td>
<td>贴花</td>
<td>真好用</td>
</tr>
</tbody>
</table>
<!--结构和样式相分离-->
</body>结果为：
超链接
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--设置在新建页面打开
base标签专门用于修改a链接的打开方式
-->
<base target="_blank">
</head>
<body>
<!--img src="地址"-->
<!--anchor 锚点 a-->
<!--href="跳转的目标地址 " 热点内容-->
<!--默认是在本页打开-->
<a href="http://www.baidu.com">百度</a>
<!--修改打开方式
target="_black" 在新建页面打开
-->
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com">百度</a>结果为：
切换模块
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{
list-style: none;
width: 200px;
height: auto; /*内容撑开*/
border: 2px solid blue;
float: left;
}
li{
height: 200px;
width: 100px;
}
div{
float: left;
width: 600px;
}
</style>
</head>
<body>
<ul>
<li><a href="#p1">西游记</a></li>
<li><a href="#p2">红楼梦</a></li>
<li><a href="#p3">三国演义</a></li>
</ul>
<div>
<!--id # 引用id加#-->
<p id="p1">西游记<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
<p id="p2">红楼梦<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
<p id="p3">三国演义<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>2
</div>
</body>如图（点击的时候跳转到指定位置）：
