今天实训第二天,小张和她的小伙伴们一起学习了HTML中的表格和列表(我做的好慢!!!!)。
一、HTML中的列表
HTML 支持有序、无序和定义列表
(一)无序列表
无序列表是一个项目的列表,此列项目默认无标注时使用粗体圆点(典型的小黑圆圈)进行标记。
(无序列表始于 <ul> 标签。每个列表项始于 <li>。)列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
<ul>
<li>一个张张</li>
<li>两个张张</li>
<li>三个张张</li>
</ul>
(二)有序列表
有序列表也是一列项目,列表项目使用数字进行标记。
(有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。)列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
<body>
<ol>
<li>一个张张</li>
<li>两个张张</li>
<li>三个张张</li>
</ol>
</body>
使用type对前面的序号进行样式改变
<ul type="disc">
<li>一个张张</li>
<li>两个张张</li>
<li>三个张张</li>
<li>四个张张</li>
</ul>
<ul type="circle">
<li>一个张张</li>
<li>两个张张</li>
<li>三个张张</li>
<li>四个张张</li>
</ul>
<ul type="square">
<li>一个张张</li>
<li>两个张张</li>
<li>三个张张</li>
<li>四个张张</li>
</ul>
(三)定义列表
自定义列表不仅仅是一列项目,而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>张张</dt>
<dd>张张张张</dd>
<dd>张张张张</dd>
<dd>张张张张</dd>
<dt>呀呀呀呀呀呀呀</dt>
<dd>呀呀呀呀呀呀</dd>
<dd>呀呀呀呀呀呀</dd>
<dd>呀呀呀呀呀呀</dd>
</dl>
附:嵌套
<ul>
<li>苹果</li>
<ul>
<li>苹果核</li>
<li>苹果肉</li>
</ul>
<li>香蕉</li>
<ul>
<li>香蕉皮</li>
<li>香蕉肉</li>
</ul>
</ul>
总结:
<ol> | 定义有序列表。 |
<ul> | 定义无序列表。 |
<li> | 定义列表项。 |
<dl> | 定义定义列表。 |
<dt> | 定义定义项目。 |
<dd> | 定义定义的描述。 |
二、HTML中的表格
表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>3</td>
<td>2</td>
<td>1</td>
</tr>
</table>
表头
表格的表头使用 <th> 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本:
<table border="1" cellspacing="0" >
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td>3</td>
<td>2</td>
<td>1</td>
</tr>
</table>
在使用过程中有查询和联系到这些东西。
使用 Cell spacing 增加单元格之间的距离。
使用 Cell padding 来创建单元格内容与其边框之间的空白。
可以使用colspan和rowspan进行列合并和行合并。