HTML列表和表格学习

Posted by wodelu on December 19, 2017

1.列表

1.有序列表 <ol type="a"> <li>有序列表用ol表示</li> <li>type的值决定了有序列表的序号表示</li> <li>type的值有:1,a,A,i,I 5种</li> </ol>

代码:

<ol type="1">
	<li>有序列表用ol表示</li>
	<li>type的值决定了有序列表的序号表示</li>
	<li>type的值有:1,a,A,i,I 5种</li>
</ol>

2.无序列表 <ul type="square"> <li>无序列表用ul表示</li> <li>type的值决定无序列表排序方式</li> <li>type的值有disc、circle、square三种</li> </ul>

代码:

<ul type="disc">
	<li>无序列表用ul表示</li>
	<li>type的值决定无序列表排序方式</li>
	<li>type的值有disc、circle、square三种</li>
</ul>

3.定义列表 <dl> <dt>定义名词</dt> <dd>定义名词的描述</dd> <dt>HTML</dt> <dd>控制网页结构的标准语言</dd> </dl>

代码:

<dl>
	<dt>定义名词</dt>
	<dd>定义名词的描述</dd>
	<dt>HTML</dt>
	<dd>控制网页结构的标准语言</dd>
</dl>

2.表格

表格结构 <table> <caption>标题</caption> <thead> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> </tr> </thead> <tbody> <tr> <td>单元格1</td> <td>单元格2</td> <td>单元格3</td> </tr> <tr> <td>单元格4</td> <td>单元格5</td> <td>单元格6</td> </tr> </tbody> <tfoot> <tr> <td rowspan="2">合并行</td> <td colspan="2">合并列</td> </tr> </tfoot> </table>

代码:

<table>
	<caption>标题</caption>
	<thead>
		<tr>
			<th>表头1</th>
			<th>表头2</th>
			<th>表头3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>单元格1</td>
			<td>单元格2</td>
			<td>单元格3</td>
		</tr>
		<tr>
			<td>单元格4</td>
			<td>单元格5</td>
			<td>单元格6</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td rowspan="2">合并行</td>
			<td colspan="2">合并列</td>
		</tr>
	</tfoot>
</table>