前言
大家好，我是老谷。
今天是我自学前端基础教程的第6天，除开周末，每天带来一篇自学笔记。
前两天学习到html的body标签，今天就到了常用的表格表单环节。
有序列表
以ol标签开始，li作为子标签，ol标签结束。\
<ol>
<li>列表项</li>
</ol>
ol标签和li标签只能配合使用，不能单独使用。
这里，也可以使用“type”更改属性。
无序列表
无序列表和有序列表的意思差不多。
<ul>
<li>列表项</lo>
</ul>
不过这里需要注意两点：
- ul元素内只能是li元素，不能包含其它元素
- ul元素内的文本只能在li元素内，不能在li元素外。
表格结构
表格分为三个标签table表格、tr行、td单元格
<table>
<tr>
<td>内容</td>
</tr>
</table>
这是最基本的结构包裹，内容越多，tr、td标签就可以越多。
完整结构
同html差不多，表格也具有表格标题，头、身、尾的语义化内容。
其中表头单元格我们也可以用th代替td标签，这样显的更规范。具体可以查看我写的代码。
表头我们可以用thead包裹、表身我们可以用tbody包裹、表脚我们可以用tfoot包裹。
\
包裹起来可以让我们更清楚自己写的结构。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8 />
<title>老谷笔记的title</title>
<meta name="keywords" content="老谷,笔记,html" />
<meta name="description" content="这是老谷书写的html网页" />
<meta name="author" content="老谷" />
<meta name="copyright content="owzz.com"/>
<!--刷新跳转页面需要和同属性的间隔开来-->
<meta http-equiv="refresh" content="99;url=http://owzz.com"/>
<!--这里是表格边框样式-->
<style type="text/css">
table,tr,th,td{border:1px solid silver;}
</style>
</head>
<body>
<!--这是第一段标题标签-->
<div>
<h1>h1标题</h1>
<h2>h2标题</h2>
<h3>h3标题</h3>
<h4>h4标题</h4>
<h5>h5标题</h5>
<h6>h6标题</h6>
</div>
<!--这是第二段段落标签-->
<div>
<p>这是我书写的标题标签</p>
<p>这是我书写的段落内容</p>
<p>如果不想隔行间隙可以使用换行标签<br/>这样就可以没有隔行了</p>
</div>
<!--这是第三段文本标签-->
<div>
<strong>字体粗体</strong><br>
<em>字体变斜体</em><br/>
<s>字体中划线</s><br/>
<u>字体下划线</u><br/>
<p>字体<sup>上标</sup>字体<sub>下标</sub></p>
</div>
<!--这是第四段水平线标签-->
<div>
水平线标签<hr/>
</div>
<!--这里是特殊符号的运用-->
<div><p>空格 符号，版权©符号</p></div>
<!--这里是有序列表-->
<div>有序列表的标题
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
<ol type="I">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
</div>
<!--这里是无序列表-->
<div>无序列表的标题
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
<ul type="square">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
</div>
<!--这里是表格-->
<div>
<table>
<tr>
<td>表格1</td>
<td>表格2</td>
</tr>
<tr>
<td>表格3</td>
<td>表格4</td>
</tr>
</table>
</div>
<!--这里是完整的表格结构-->
<div>
<table>
<caption>这是表格标题</caption>
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
<th>表头4</th>
</tr>
</thead>
<tbody>
<tr>
<td>表行单元格1</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>表行单元格2</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
<tr>
<td>表行单元格3</td>
<td>80</td>
<td>80</td>
<td>80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>合计</td>
<td>270</td>
<td>270</td>
<td>270</td>
</tr>
</tfoot>
</table>
</div>
<!--这里是表格合并行-->
<div>
<table>
<caption>老谷喜好调查</caption>
<thead>
<tr>
<td>项目：</td>
<td>老谷</td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">喜欢的女明星</td>
<td>迪丽热巴</td>
</tr>
<tr>
<td>景甜</td>
</tr>
<tr>
<td>古力娜扎</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td>三个美女</td>
</tr>
</tfoot>
</table>
</div>
<!--这里是表格合并列-->
<div>
<table>
<caption>老谷喜好调查</caption>
<thead>
<tr>
<td>项目：</td>
<td>老谷</td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">喜欢的女明星</td>
<td>迪丽热巴</td>
</tr>
<tr>
<td>景甜</td>
</tr>
<tr>
<td>古力娜扎</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">总结</td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
