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

块级元素引入
什么是块级元素？块级元素是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>

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

对的，这个数字的区别就是标题大小的区别，同时，作为块级元素，它们并不会同一行表示，而是自动换行。由于 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知道就好了。

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

HTML基础（三）：常用的块级元素相关推荐

零基础学习HTML(7)——块级元素和行内元素
文章目录官方资料学习正文注:学习笔记基于小甲鱼学习视频,官方论坛: https://fishc.com.cn/forum.php 官方资料鱼C课程案例库:https://ilovefishc. ...
HTML的块级元素（常用整理）
emmm,最近想整理复习一下前端的基础,最开始的HTML想了好久也没想好怎么写,最后也是决定以行块这样整理,再在后面补充吧. 说到HTML,什么是HTML呢? 什么是 HTML?HTML 是用来描述网 ...
css变成块级元素_css块级元素垂直居中常用布局方式
在项目中经常会用到垂直居中布局,本次通过常用的块级元素居中布局的实现方式来对过程中的技术点包括transform的使用,flex的使用进行梳理.让大家能够理解之后进行举一反三. 以下例子如果未特别说明 ...
CSS块级元素和行内元素
1. 宽高 width:数值; height:数值; 也可用百分比! 长高的设置不会被后代继承 2. 背景 (1)背景颜色 background-color:颜色值; 元素的背景颜色默认为transp ...
内联元素与块级元素及内外边距的影响
内联元素与块级元素块级元素(block): 新行开始: 高度,行高以及外边距和内边距都可控制: 宽度缺省是它的容器的100% 可以嵌套内联元素和其他块元素常用的块级元素:div.h1~h6.dl. ...
CSS行内元素和块级元素的水平居中，垂直居中，水平垂直居中实现
常用内联元素:a,img,input,lable,select,span,textarea,font 常用的块级元素:div,p,table,form,h1,h2,h3,h4,h5,h6,dl,ol, ...
行内元素与块级元素的区别，行内元素与块级元素分别有哪些
文章目录 1.块级元素 2.行内元素 3.行内块元素(融合了前两者的特点) 4.三个元素的转换 5.常用的行内元素 6.常用的块级元素 6.常用的块级元素 1.块级元素 1.总是从新的一行开始,即各个 ...
css变成块级元素_探讨行内元素转换为块级元素_html/css_WEB-ITnose
行内元素和块级元素对于前端来说是一个很重要的概念.在CSS中,只有块级元素有物理属性,而元素则有三种形态: 1. 块级元素:有物理属性,width,height写值起作用,而且要占据一行. 2. 行内 ...
行内元素与块级元素，以及区别
行内元素与块级元素首先,CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,分别为块级(block).行内(inline). 块级元素:(以下列举比 ...

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