HTML5基础语言的常用标签II
常用于布局的块级标签
常用于布局的块级标签有：有序列表 、 无序列表、定义列表、表格标签、表单标签、分区标签
有序列表标签< ol >和无序列表标签< ul >
< ol >和< ul >表示多个并列的列表项，区别如字面意思相同，< ol >表示的是有先后顺序的并列列表项，< ul >表示的是没有顺序的并列列表项。
< li＞标签的属性和参数
但其中用来表示列表项的都是使用同一种标签—— < li >标签
比如如下代码段：
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<head>
<tile>列表标签的使用</title>
</head>
<body>
<ol> <!--这里把< ol >修改成< ul >标签,把下面的</ol>修改成</ul>就是无序列表了-->
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ol>
</body>
</html> <!--自己放到记事本，保存，文件格式改成“所有文件”，后缀名改成“html”，自己运行试试-->
< li >标签的属性以及参数：
| 属性 | 参数 |
|---|---|
| type | 1 a A i I（这是大写的i） circle square disc |
| value | 任意数字 |
type属性用于规定列表项前的标识符的样式，就如上图所示的“1.”、“2.”、“3.”
value属性用于规定此列表项是第几项
type属性中的“circle”、“square”、“disc”也是设置列表项标识符的样式，分别对应：
空心圆、实心方形、实心圆
多想一点：
写HTML语言时，不使用type属性时，默认type属性使用参数“1”，value属性则按顺序从小到大，可参考第一个代码的运行
以下代码测试列表标签的属性和参数：
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<head>
<tile>列表标签的使用</title>
</head>
<body>
<ol>
<li type="1">项目一</li>
<li type="1">项目二</li>
<li type="2">项目三</li> <!---使用不符规范的参数，默认参数为“1”-->
<li type="A">项目四</li> <!---使用不同标签测试运行结果-->
<li type="A">项目五</li>
<li type="a">项目六</li>
<li type="a">项目七</li>
</ol>
</body>
</html>
可以看到使用错误的参数，系统就不会识别，直接使用默认参数
而且，在几个并列表列项中，使用不同type的样式，其列表项的序号还是不会改变：
D在大写字母的表示法里面，表示第四个项目
f在小写字母的表示法里面，表示第六个项目
但是通过value属性，我们可以改变列表的序号：
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<head>
<tile>列表标签的使用</title>
</head>
<body>
<ol>
<li type="1">项目一</li>
<li type="1" value="3">项目二</li>
<li type="1">项目三</li>
</ol>
</body>
</html>
当改变value的值的时候，也会影响后面没有设置value的列表项的序号
用“A”或“a”来表示列表项的序号时，你可能会想字母不是26个吗？难道只能表示26个列表项吗？
NoNoNo，年轻人，你还是太年轻了。
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<head>
<tile>列表标签的使用</title>
</head>
<body>
<ol>
<li type="A" value="27">项目一</li>
<li type="A" value="28">项目二</li>
<li type="a" value="29">项目三</li>
<li type="a" value="30>项目四</li>
<li type="1" value="3">项目五</li>
<li type="1">项目六</li>
</ol>
</body>
</html>
以此类推：
A ~ Z、再从AA ~ AZ；AAA~ZZZ，总之可以一直写下去
序号27 * 26=702，（序号1 * 26=26是Z、序号2 * 26=52是AZ）
序号就是ZZ，703就是AAA了。以此类推
< ol >标签的属性和参数
| 属性 | 参数 |
|---|---|
| reversed | reversed |
| start | 任意数字 |
| type | 1 a A i I（这是大写的i） |
直接展示使用案例：
reversed属性就是序号顺序颠倒了，最后一个列表项就是“1.”
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<head>
<title>列表标签的使用</title>
</head>
<body>
<ol reversed="reversed" >
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
<li>项目四</li>
<li>项目五</li>
</ol>
</body>
</html>
start属性就是列表项的序号从这个数字开始：
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<head>
<title>列表标签的使用</title>
</head>
<body>
<ol start="4">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
<li>项目四</li>
<li>项目五</li>
</ol>
</body>
</html>
两种属性的合用让人意想不到：
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<head>
<title>列表标签的使用</title>
</head>
<body>
<ol reversed="reversed" start="3">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
<li>项目四</li>
<li>项目五</li>
</ol>
</body>
</html>
序号数字出现了负数！这就是说start里填的数字可以是负数
< ul >标签的属性和参数
| 属性 | 参数 |
|---|---|
| compact | compact |
| type | disc circle square |
compact属性：标签的compact属性的值。规定列表 呈现的效果 比正常情况 更小巧紧凑。
很多浏览器都不太支持使用此属性
目前更流行使用CCS中的功能替换此属性
compact属性是通过 减少行之间的间距(line-height) 以及 对列表进行 缩进 来实现的
所以可以使用另一个属性：line-height行高属性,减少 行间距
<ul style="line-height: 80%">
type属性就不展示了，语句形式变成了这样，代码片段如下：
<ul type="A">
<li>项目一</li>
<li>项目二</li>
</ul>
< dl >定义列表标签
<dl>、</dl>表示定义列表，<dt>、</dt>表示术语，<dd>、</dd>表示对术语的具体描述
< ul >定义无序列表标签、< ol >定义有序列表标签、< dl >定义列表标签。
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<head>
<title>列表标签的使用</title>
</head>
<body>
<dl>
<dt>术语
<dd>对术语的具体描述</dd>
<dd>对术语的二次描述</dd>
<dt>第二术语
<dd>对第二术语的具体描述</dd>
<dd>对第二术语的二次描述</dd>
</dl>
</body>
</html>
表格标签< table >
用于制作表格，可以做出的表格样式较少，但作为基础还是值得我们学习，毕竟一步一步来才能制作更好的表格
< table >表格标签的一些常用结构：
| 常用标签 | 功能 |
|---|---|
| < table > | 用于定义表格 |
| < tr > | 用于表示行，< td >用于表示列 |
| < caption > | 用于设置表格的标题 |
| < th > | 用于设置表头 |
| thead tfoot tbody | 用于给表格内容分组 |
thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。** 注释 **：如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。
————————————————
原文链接：https://blog.youkuaiyun.com/terrychinaz/article/details/113788594
如下面代码：
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<head>
<title>表格标签的使用</title>
</head>
<body>
<table>
<caption>这是表格标题</caption>
<tr>
<th></th> <!--第一行第一列是空的-->
<th>表头一号</th>
<th>表头二号</th>
</tr> <!-----从< tr >到< /tr >都算是一行的内容--->
<tr>
<th>表头三号</th>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<th>表头四号</th>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
</body>
</html>
< table >标签可用的属性：
| 属性 | 参数 | 功能 |
|---|---|---|
| border | 像素值 | 设置表格边框的粗细 |
| width | 百分数，像素值 | 设置表格宽度 |
| height | 像素值 | 设置表格高度 |
| align | right\left\center | 设置文本对齐方式 |
| valign | top\middle\buttom\baseline | 设置文本垂直方向对齐方式 |
| colspan | 任意数字 | 设置垂直方向的合并单元格 |
| rowspan | 任意数字 | 设置水平方向合并单元格 |
| cellspacing | 像素值 | 设置单元格之间的间距 |
border属性：
指的是整个表格边框粗细，当使用< tabel >标签不设置border属性时，默认没有表格外边框和单元格边框
当border的参数已经设置时，表格外边框宽度随参数变化，单元格边框始终为1px
width属性和height属性：
指的是整个表格的宽度，当使用< tabel >标签不设置width属性时，默认每个表格的宽度等于与之同行以及同列的单元格的最大宽度，表格的最大宽度是看表格本身的多少字
当width属性设置为百分比时，表格按比例被拉宽，高度不变，拉宽至占据屏幕宽度的一定百分值
align属性和valign属性：
colspan属性和rowspan属性：
colspan属性后面跟着的数值是指被向下方向被合并的单元格数,设置在< td >标签上
rowspan属性后面跟着的数值是指向右方向被合并的单元格数，设置在< td >标签上
cellspacing属性：
设置在< table >标签上
可以通过向< table >标签添加border-spacing样式属性，设置单元格之间的间距
可以通过向< td >或< th >标签添加padding样式属性，设置所有单元格与整个表格的间距
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<head>
<title>表格标签的使用</title>
<style>
table {
border-spacing:0
} <!-----给table标签添加样式标签-------->
</style>
</head>
<body>
<table width="50%" border="30">
<caption>这是表格标题</caption>
<tr>
<th colspan="2"></th> <!--第一行第一列是空的-->
<th>表头一号</th>
<th>表头二号</th>
</tr> <!-----从< tr >到< /tr >都算是一行的内容--->
<tr>
<th>表头三号</th>
<td>第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<th>表头四号</th>
<td rowspan="2">第一列</td>
<td>第二行第二列</td>
</tr>
</table>
</body>
</html>
1万+
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
