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

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

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

其在浏览器的表现效果为：

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

段落元素p

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

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

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

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

<br/>
<hr/>

在我们对其填充内容，并合理排序后：

在浏览器的效果为：

当然，实际使用时是要结合情况搭配的。

表格元素table

在实际网页中，为了表达信息偶尔还需要使用表格，这时候就需要<table> 标签了，<table>元素在HTML中用于呈现表格数据，如计划表、价格表、分数、成绩表、员工信息、财务数据和日历等。下图是一个简单的表格：

而如果在源码中标示这个表格，变成脚本这是下面这些（当然没有那个那么好看，堪称简陋）：

<table border="1">
<!--上面的border属性是用来规定表格边框的宽度-->
  <tr>
  <!--表格第一行开始-->
    <th>姓名</th>
    <th>高数</th>
    <th>物理</th>
    <th>组成原理</th>
    <th>总分</th>
  </tr>
   <!--表格第一行结束-->
  <tr>
   <!--表格第二行开始-->
    <td>张三</td>
    <td>77</td>
    <td>66</td>
    <td>78</td>
    <td>150</td>
  </tr>
   <!--表格第二行结束-->
  <tr>
   <!--表格第三行开始-->
    <td>李斯</td>
    <td>88</td>
    <td>80</td>
    <td>86</td>
    <td>160</td>
  </tr>
   <!--表格第三行结束-->
  <tr>
   <!--表格第四行开始-->
    <td>赵谭</td>
    <td>98</td>
    <td>57</td>
    <td>90</td>
    <td>145</td>
  </tr>
   <!--表格第四行结束-->
  <tr>
   <!--表格第五行开始-->
    <td>文章</td>
    <td>67</td>
    <td>90</td>
    <td>69</td>
    <td>178</td>
  </tr>
   <!--表格第五行结束-->
</table>

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

列表元素ul、ol、dl

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

<ul type=value>列表内容</ul>

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

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

在浏览器的表达效果为：

ul元素仅会将要罗列的元素分条罗列，那如果要按步骤来，就需要标个顺序了，这时候就需要有序列表ol元素了：
有序列表ol元素的基本语法为：

<ol type=value>……</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>

这时候，浏览器内就变为了：

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

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

在浏览器中就变为了：

滚动元素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

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

<hr width="宽度值" color="颜色" size="高度值" align="对齐方式"/>

大区块元素div

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

---

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