526互联

HTML学习笔记三：html-body-块级元素

发布时间 2023-12-05 17:54:08作者: yysocket

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:mail@cm.com">mail@cm.com</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

属性说明：

  1. table标签的属性
    • border: 表格边框（当border>1，只表示外层表格的边框）
    • width: 表格总宽度
    • height: 表格总高度（只调整tbody的高度）
    • cellspacing: 单元表格之间的框框的间距
  2. caption标签的属性：无可用
  3. thead、tbody、tfoot、tr标签通用属性:
    • height: 高度
    • align: 水平对齐方式，left(左对齐)、center(左对齐)、right(左对齐)
    • valign: 垂直对齐方式，top(上对齐)、middle(中间对齐)、bottom(下对齐)
  4. 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>

显示效果如下：