HTML基础（三）：常用的块级元素

水深无声 2023-07-24 09:16 95阅读 0赞

在了解网页基础结构框架后便正式开始常用块级元素的学习：

**块级元素引入**  
什么是块级元素？块级元素是HTML规范中的一个概念，大多数HTML 元素被定义为块级元素或内联元素。通常，块级元素被称为块元素。与其对应的，还有一个内联元素。\*\*块元素和内联元素的基本差异是块元素一般都从新行开始，相邻的块级元素将会在不同行显示。\*\*块级元素可以容纳内联元素和其他块级元素。可以这么理解，块级元素是一个文件夹，而内联元素则是一个子文件夹。文件夹可以放入其他文件夹和子文件夹。当然，在后期学习CSS后，这一点就可以改变了。  
常见的块级元素有标题元素hn、段落元素p、表格元素table、列表元素ul、滚动元素marquee、水平线元素hr、大区块元素div等。下面将逐一介绍

### 标签名称 ###

*  标题元素hn
 *  段落元素p
 *  表格元素table
 *  列表元素ul、ol、dl
 *  滚动元素marquee
 *  水平线元素hr
 *  大区块元素div

# 标题元素hn #

首先介绍的是标题元素hn，这个n并不是实际上标签的内容，n代表的是1-6这6个数字，即标题元素的6种格式，分别为h1、h2、h3、h4、h5与h6，其中的h为heading（标题）的意思，数字1~6代表标题的级别。以1为最大的标题，依次递减。实际使用源码为：

<h1>这是一个一级网页文本标题</h1>
    <h2>这是一个二级网页文本标题</h2>
    <h3>这是一个三级网页文本标题</h3>
    <h4>这是一个四级网页文本标题</h4>
    <h5>这是一个五级网页文本标题</h5>
    <h6>这是一个六级网页文本标题</h6>

其在浏览器的表现效果为：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NzAwMjE1_size_16_color_FFFFFF_t_70]  
对的，这个数字的区别就是标题大小的区别，同时，作为块级元素，它们并不会同一行表示，而是自动换行。由于 h 元素拥有确切的语义，因此请慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。合理使用标题往往会对网页表达起到意想不到的效果。

# 段落元素p #

有了文本的标题，那么接下来所了解的就是文本的内容，在html文档中，文字以段落的形式表达，而网页中的段落是用

标签来定义的，p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间。它的语法为：

<p>这是一个段落1的内容... ...</p>
    <p>这是一个段落2的内容... ...</p>
    <p>这是一个段落3的内容... ...</p>
    <p>这是一个段落4的内容... ...</p>
    		... ...

当需要在一个段落中进行换行时，使用`<br/>`标签进行段落文本的换行。它是一个独立标签，**仅需一个就可以使用**。另外，水平线标签`<hr/>`也是一样的

在我们对其填充内容，并合理排序后：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NzAwMjE1_size_16_color_FFFFFF_t_70 1]  
在浏览器的效果为：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NzAwMjE1_size_16_color_FFFFFF_t_70 2]  
当然，实际使用时是要结合情况搭配的。

# 表格元素table #

在实际网页中，为了表达信息偶尔还需要使用表格，这时候就需要`<table>` 标签了，`<table>`元素在HTML中用于呈现表格数据，如计划表、价格表、分数、成绩表、员工信息、财务数据和日历等。下图是一个简单的表格：  
![在这里插入图片描述][20200410204420393.png]  
而如果在源码中标示这个表格，变成脚本这是下面这些（当然没有那个那么好看，堪称简陋）：

你也可以复制这些脚本到你的网页中感受一下，并且自己设计修改表格，这样会更方便并彻底的理解。

# 列表元素ul、ol、dl #

这个元素是专用来分条罗列用的，对于这种表达方式我们称为列表元素。而对于列表元素有有序列表、无序列表和自定义列表三种。  
首先介绍的是无序列表ul元素，ul元素的基本语法为：

其中type可以取三个值，分别为disc、Circle与Square，分别代表小圆点、空心圆与小正方形  
举个例子，这一段脚本：

<ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>

在浏览器的表达效果为：  
![在这里插入图片描述][20200410211104102.png]  
ul元素仅会将要罗列的元素分条罗列，那如果要按步骤来，就需要标个顺序了，这时候就需要有序列表ol元素了：  
有序列表ol元素的基本语法为：

其中type可以取5值，取“1”代表数字1、2、3 … …，取“a”时表示小写字母a、b、c … …，取“A”时代表大写字母A、B、C … …，取“i”时代表小写罗马数字i、ii、iii … …，取“I”时代表大写罗马数字I、II、III … …。  
同样的内容，让我们换个元素：

<ol>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>

这时候，浏览器内就变为了：  
![在这里插入图片描述][20200410211552965.png]  
有序标签在对应方法步骤等有很好的表达效果。  
接下来是自定义列表dl元素，说实话，我还没实际使用过这个标签，但是这个标签非常好用，它 增加了`<dt>` （定义列表中的项目）和 `<dd>` （描述列表中的项目），也理解为它可以自定义有序列表的序号是什么内容。  
例如这些脚本：

<dl>
       <dt>计算机</dt>
       <dd>用来计算的仪器 ... ...</dd>
       <dt>显示器</dt>
       <dd>以视觉方式显示信息的装置 ... ...</dd>
    </dl>

在浏览器中就变为了：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NzAwMjE1_size_16_color_FFFFFF_t_70 3]

# 滚动元素marquee #

对于这个元素的效果，其实你可以直接将其理解为视频中的弹幕，它可以是在它内部的内容在网页中进行滚动。  
Marquee标签的基本语法如下：

<marquee>滚动的文本或者图像</marquee>

Marquee中可以添加以下属性：

οnmοuseοver="this.stop()"

用来设置鼠标移入该区域时停止滚动。

οnmοuseοut="this.start()"

用来设置鼠标移出该区域时继续滚动。

align=left | center | right | top | bottom

用来设置滚动内容的对齐方式。

direction=left | right | up | down

设置滚动内容的滚动方向。

behavior=alternate | scroll | slide

设置滚动的方式，alternate表示在两端之间来回滚动，scroll表示由一段滚动到另一端，会重复，slide表示由一端滚动到另一端，不会重复。

bgcolor="颜色"

设置活动字幕的背景颜色，背景颜色可用RGB、16进制值的格式或颜色名称来设置

height=n

设置滚动区域的高度。

hapace=n

设置活滚动区域所在位置距离父容器水平边框的距离。

scrollamount=n

设置滚动内容的滚动速度，单位为pixels（像素）

scrolldalay=n

设置滚动内容滚动两次之间的延迟时间，单位millisecond（毫秒）

width=n

设置滚动区域所在位置距离父容器垂直边框的距离。

vSpace=n

设置活滚动区域所在位置距离父容器垂直边框的距离。

loop=n

设置滚动的次数，当loop=-1表示一直滚动下去，默认为-1.

--------------------

建议嘛，自己加到网页中尝试一下，很好玩的。

# 水平线元素hr #

水平线元素在上面我们已经提到过了，就是在网页中加入一条水平的线，这是它的基本语法：

# 大区块元素div #

这个元素是用来定义文档中的分区或节的，`<div>` 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。  
个人理解，div的作用就是把一系列的相关的放在一起，方便后期用CSS对专门的区块进行格式化，就当作一个大盒子来使用，再，我好像没有发现它有什么用处…需要注意的是这是一个**双标签**，不要只写一半。\*\*圈重点，这个后期最常用了！\*\*前期不会用CSS知道就好了。

--------------------

好了，这一篇的内容结束了，明天再继续。  
同为小白，若有缺漏及错误，敬请指出。  
转载请注明出处。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NzAwMjE1_size_16_color_FFFFFF_t_70]: /images/20230528/3ca63b106f8141c581375766a33d69d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NzAwMjE1_size_16_color_FFFFFF_t_70 1]: /images/20230528/bb60134d5bea4421b25dc435fd1f501d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NzAwMjE1_size_16_color_FFFFFF_t_70 2]: /images/20230528/979bda818dd14d04ac72ea054a6fc42d.png
[20200410204420393.png]: /images/20230528/5132b73413a54978884989c834ec8f36.png
[20200410211104102.png]: /images/20230528/ad003dfeeae64f33868478d6a1a75606.png
[20200410211552965.png]: /images/20230528/f315884e19e04720a0e4d2a017ddd673.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NzAwMjE1_size_16_color_FFFFFF_t_70 3]: /images/20230528/a5be5be8241748b8993c9227e1c6bb7f.png