HTML学习笔记三：body元素块级元素
MDN元素查询地址
所有的html的元素我们都可以通过以下地址进行相关的查询和理解。
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta
body中元素分类
- 块级元素
又称为块元素，独占一行，宽默认与body一致，高度由内容撑开，无内容默认为16px，但可以通过css调整其宽高属性。 - 行内元素
又称为内联元素，不独占一行，从左到右依次排列，默认宽高由内容撑开，无法通过css调整其宽高属性，行内块元素除外（如img）。
块级元素
块级元素是独占一行的元素。
其占据整个水平空间，即为一行的整个空间，垂直空间等于其内容高度，因此创建了一个“块”。
特点：
- 独占一行
- 大部分块级元素能嵌套行内元素和其他块级元素
- p标签内不能再嵌套块级元素
- h1~h6不能相互嵌套
常见块级元素
- h1、h2、h3...h6
h1~h6的标题元素。
<h1>信息安全主题论文</h1> - marquee
跑马灯元素
<marquee>滚动条</marquee> - div
块级无实际意义的集合元素 - p
段落元素
<p>2022-06-21 17:33:00 . 789评论</p> - ol、ul、dl
列表元素（有序列表，无序列表，自定义列表） - table
表格元素 - form
表单元素 - pre
按原文显示(不会改变排版和空格)
一般用于在页面中嵌入大段代码。 - hr
行分割线元素 - br
换行元素 - blockquote
长引用元素<blockquote> <p>这是一段长引用，一般用来引用一大段文字</p> </blockquote> - address
地址元素<address> <a href="mailto:[email protected]">[email protected]</a> <br> <a href="tel:+861388965623">0571-88965623</a> </address>
下面介绍列表元素和表格元素。
form表单元素将单独进行介绍。
列表（ol,ul,dl）元素
列表元素分为：
-
有序列表(ordered list)
结构为：ol->li(列表元素)<ol> <li></li> <li></li> <li></li> </ol> -
无序列号(unordered list)
结构为：ul->li(列表元素)<ul> <li></li> <li></li> <li></li> </ul> -
自定义列表(definition list)
结构为：
dl->dt(一列的标题)
dt->dd(对标题的描述)<dl> <dt>魏国 <dd>典韦</dd> <dd>张辽</dd> </dt> <dt>蜀国 <dd>关羽</dd> <dd>张飞</dd> </dt> </dl>
注意：列表之间是可以嵌套的，但前提是需要有完整的结构。
例如：
<ol>
<li>
<ul>
<li></li>
<li></li>
</ul>
</li>
<li></li>
<li>
<dl>
<dt></dt>
<dd></dd>
</dl>
</li>
</ol>
表格table元素
table用来绘制一个表格，通过表头，行属性，列属性，表脚注4个标签组成。
以下为总宽高为100px，100px的带表头和脚注的表格
<table border="1px" cellspacing="0" width="100px" height="100px">
<caption>
表格
</caption>
<thead height="20px">
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot height="20px">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
显示效果如下：
表格标题标签caption
表格的标题文本。
表格头部标签 thead
子元素表格行（table row）：tr
行子元素-行内一个单元格内容：th
表格主体标签 tbody
子元素表格行（table row）：tr
列子元素-行内一个单元格内容：td
表格脚注标签 tfoot（可选）
子元素表格行（table row）：tr
列子元素-行内一个单元格内容：td
属性说明：
- table标签的属性
- border: 表格边框（当border>1，只表示外层表格的边框）
- width: 表格总宽度
- height: 表格总高度（只调整tbody的高度）
- cellspacing: 单元表格之间的框框的间距
- caption标签的属性：无可用
- thead、tbody、tfoot、tr标签通用属性:
- height: 高度
- align: 水平对齐方式，left(左对齐)、center(左对齐)、right(左对齐)
- valign: 垂直对齐方式，top(上对齐)、middle(中间对齐)、bottom(下对齐)
- th、td标签通用属性
- width: 单元格宽度
- height: 单元格高度
- align: 水平对齐方式，left(左对齐)、center(左对齐)、right(左对齐)
- valign: 垂直对齐方式，top(上对齐)、middle(中间对齐)、bottom(下对齐)
- rowspan: 指定要跨的行数（当前单元格跨行，将后续的单元格位置往后挤）
- colspan: 指定要跨的列数 （当前单元格跨列，将后续的单元格位置往后挤）
示例代码：
<table border="2px" cellspacing="0">
<caption>
课程表
</caption>
<thead>
<tr>
<th>项目</th>
<th colspan="5">上课</th>
<th colspan="2">活动与休息</th>
</tr>
</thead>
<tbody>
<tr>
<td>星期</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期日</td>
</tr>
<tr>
<td rowspan="4">上午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>物理</td>
<td>数学竞赛</td>
<td rowspan="4">休息</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>物理</td>
<td>数学竞赛</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>物理</td>
<td>数学竞赛</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>物理</td>
<td>数学竞赛</td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>物理</td>
<td>数学竞赛</td>
<td rowspan="2">休息</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>物理</td>
<td>数学竞赛</td>
</tr>
</tbody>
</table>
显示效果如下：
