常用 HTML元素 - 2
接下来再学习一些常用的HTML元素
表格 table
要把信息呈现在表格中, 可以使用 table
元素
如下所示:
<table>
<tr>
<th>学生</th>
<th>年龄</th>
</tr>
<tr>
<td>白月</td>
<td>23</td>
</tr>
<tr>
<td>黑羽</td>
<td>35</td>
</tr>
</table>
其中
tr元素
表示表格的一行。 里面包含了一行的内容,可以是 多个 th元素
或者 td 元素
th元素
表示表格的一列的标题
td元素
表示表格的一个单元格。
大家会发现上面的html呈现的表格是没有分隔线的,可以通过给元素添加 边界线样式 呈现 分隔线
<table style="border-collapse: collapse;">
<tr>
<th style="border: 1px solid green;">学生</th>
<th style="border: 1px solid green;">年龄</th>
</tr>
<tr>
<td style="border: 1px solid green;">白月</td>
<td style="border: 1px solid green;">23</td>
</tr>
<tr>
<td style="border: 1px solid green;">黑羽</td>
<td style="border: 1px solid green;">35</td>
</tr>
</table>
table 的样式 border-collapse
指定了table里面的单元格是否共享边界。
缺省值 separate
表示不共享,这样显示效果就是每个单元格有各自的边界,通常不好看
值为 collapse
表示共享, 这样相邻单元格只有一个边界,比较好看
我们发现为每个 th、td指定同样的样式太麻烦了,可以放在 head 里的 style 中指定,对所有的表格元素都生效。
像这样
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
th,td {
border: 1px solid green;
}
</style>
</head>
<body>
<table>
<tr>
<th>学生</th>
<th>年龄</th>
</tr>
<tr>
<td>白月</td>
<td>23</td>
</tr>
<tr>
<td>黑羽</td>
<td>35</td>
</tr>
</table>
</body>
</html>
指定宽度,居中
表格整体和列 都是自适应宽度的, 如果要变为指定宽度,可以使用 样式的 width,
比如
<table style="width: 60%">
<th style="width: 50%">学生</th>
缺省 th 是自动居中的,如果想让td里面的文本也居中显示,可以使用如下css
td {
text-align: center;
vertical-align: middle;
}
完整示例如下:
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
td, th
{
border: 1px solid green;
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body>
<table style="width: 60%">
<tr>
<th>学生</th>
<th>年龄</th>
</tr>
<tr>
<td>白月</td>
<td>23</td>
</tr>
<tr>
<td>黑羽</td>
<td>35</td>
</tr>
</table>
</body>
</html>
单元格合并
可以使用 colspan
和 rowspan
属性进行单元格的列、行合并
如下所示
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
td, th {
border: 1px solid green;
text-align: center;
vertical-align: middle;
}
th {
width: 12.5%
}
</style>
</head>
<body>
<table style="width: 90%">
<tr>
<th colspan="8">白月黑羽培训日程安排</td>
</tr>
<tr>
<th>8点</td>
<th>9点</td>
<th>10点</td>
<th>11点</td>
<th>14点</td>
<th>15点</td>
<th>16点</td>
<th>17点</td>
</tr>
<tr>
<td colspan="4">C语言</td>
<td>答疑</td>
<td>答疑</td>
<td>自由交流</td>
<td>晚饭</td>
</tr>
<tr>
<td colspan="6" rowspan="2">Python语言</td>
<td>答疑</td>
<td>晚饭</td>
</tr>
<tr>
<td>答疑</td>
<td>晚饭</td>
</tr>
</table>
</body>
</html>
列表 list
我们经常需要把信息展示为列表,比如 操作步骤、今日新闻、药品成分 等等
HTML针对列表信息的展示主要是通过 ol
和 ul
这两个元素
ol
ol
(Ordered list)元素表示 有序列表
,内容条目用 li
元素,条目是有次序的
缺省渲染为一个带编号的列表
如下
<h3> 自动化测试实战班学习路线 </h3>
<ol>
<li>Python编程实战</li>
<li>web 测试自动化</li>
<li>自动化测试框架</li>
<li>API 测试自动化</li>
<li>Linux、MySQL</li>
<li>项目实战第1阶段</li>
<li>项目实战第2阶段</li>
<li>移动App 测试自动化</li>
<li>项目实战第3阶段</li>
</ol>
ul
ul
(Unordered list)元素表示 无序列表
,内容条目用 li
元素,条目是次序无关的
通常渲染为一个带符号前缀的列表
如下
<h3> 白月黑羽实战班 课程列表 </h3>
<ul>
<li>自动化软件测试</li>
<li>性能测试</li>
<li>PyQT图形界面程序开发</li>
<li>Web网站后端开发</li>
<li>爬虫数据处理自动化</li>
</ul>
每个条目 li 里面还可以嵌套嵌套其它的 ul、ol,比如
<h3> 白月黑羽实战班课程 </h3>
<ul>
<li>自动化软件测试
<ol>
<li>Python编程实战</li>
<li>web 测试自动化</li>
<li>自动化测试框架</li>
<li>API 测试自动化</li>
<li>Linux、MySQL</li>
<li>项目实战第1阶段</li>
<li>项目实战第2阶段</li>
<li>移动App 测试自动化</li>
<li>项目实战第3阶段</li>
</ol>
</li>
<li>性能测试</li>
<li>PyQT图形界面程序开发
<ul>
<li>Python编程实战</li>
<li>HTTP协议数据交互</li>
<li>MySQL 数据库 </li>
<li>Qt图形界面程序开发</li>
<li>socket网络编程</li>
<li>项目实战1 数据处理工具</li>
<li>项目实战2 性能测试工具</li>
</ul>
</li>
<li>Web网站后端开发</li>
<li>爬虫数据处理自动化</li>
</ul>
同样,ol 每个条目 li 里面 , 也可以嵌套其它的 ul、ol
list-style-type
很多时候,我们使用 ul/ol,并不希望 列出的条目 有前缀的 点 或者 数字
比如 菜单栏、导航栏。
这时侯,可以设置 list-style-type:none
比如
<h3> 白月黑羽实战班 课程列表 </h3>
<ul style='list-style-type: none;'>
<li>自动化软件测试</li>
<li>性能测试</li>
<li>PyQT图形界面程序开发</li>
<li>Web网站后端开发</li>
<li>爬虫数据处理自动化</li>
</ul>
list-style-type 的常见取值可以是如下这些
-
none 不显示列表项的标记。
-
disc 实心圆点 (默认值)
-
circle 空心圆点
-
square 实心方块
-
decimal 十进制阿拉伯数字 从1开始
-
simp-chinese-informal
中文十进制数 例如: 一, 二, 三, …, 九八, 九九, 一〇〇
-
decimal-leading-zero
十进制阿拉伯数字, 前缀用0补齐,比如 01、02、03
-
lower-roman
小写罗马字母,比如 i, ii, iii, iv, v
-
upper-roman
大写罗马字母,比如 I, II, III, IV, V
-
lower-alpha
小写英文字母,比如 a, b, c, … z
-
upper-alpha
大写英文字母,比如 A, B, C, … Z
上面这些对ol、ul都有效