这一课我们讲解html块级元素和内联元素的概念，学习两个重要的标签，div和跨度。每个HTML元素都有一个默认的显示值（displayvalue），显示值有两种，分别是block和inline，翻译过来就是块和内联。元素显示的默认值取决于它是什么类型。对应显示值，元素分为两种：一种是块级元素，译为块级元素，简称块元素；另一种是行内元素，翻译为行内元素，也叫行内元素。块级元素总是从一个新行开始，浏览器会自动在元素前后添加一些边距。块级元素总是占据可用的整个宽度，尽可能向左和向右伸展。p(

)是一个常见的块元素。让我们来看看它的实际效果。打开编辑器，新建一个block_inline.html文件，准备基本代码，在body中添加一个p标签，在p标签中填写一点文字。节省。在浏览器中打开页面并显示段落。由于p元素被添加到body元素中，根据块级元素的特点，它应该水平延伸到可见窗口的边界。按下键盘F12，打开浏览器开发者工具，点击元素选择按钮，我们看到这里提示了段落的实际宽高。尽管该段落的文本很少，但浏览器会拉伸p元素以填充一行。除了p元素，还有一个非常重要的块级元素，就是div元素。让我们看一个例子。回到编辑器把这一段删掉。使用正文中的h1标签定义标题并写入一些内容。再定义两个段落并填写段落的文本。节省。在浏览器中打开该页面并检查这三个元素，全部在一行中。现在有一个新的要求，即在浏览器视口的中心对齐每个元素。回到小编，一个比较笨的做法是为h1标签和两个p标签分别定义align属性，取值为center。节省。回到浏览器，刷新，三个元素都居中了。有没有更简洁的方法？回到编辑器，我们可以想到：将三个元素用一个标签包裹起来，并在这个标签上定义居中属性。（演示时使用空标签对）使用哪个标签？目前只能使用p标签，似乎比较合适。接下来为它定义对齐等于中心。节省。回到浏览器，刷新，嗯？效果没有实现。为什么是这样？仔细想想，p标签是专门用于段落的，它包裹的内容显然不是段落。所以浏览器认为你的标签不完整，它为你完成了，所以你看到了一个额外的p标签。那有没有更简单的方法呢？事实上，div元素非常适合这里。div，是division的缩写，译为“块”，引申为“盒子”、“容器”。它是典型的块级元素，用于定义HTML文档中的块或部分。定义它的语法是：angleddiv，angled/div，标签包含块的内容。回到编辑器，用div标签替换外面的p标签。节省。回到浏览器，刷新，居中效果就实现了。选择div元素时，整个容器水平填充视口。块级元素有很多，整理一下我们学到的东西：h1到h6标题元素

-

p段落元素

ol、ul、li、dl、dt、dd等列表元素

• tabletrtdththeadtfootcaption等表格元素div块元素

  内联元素不会占一行，只占用增加必要的宽度。例如，文本装饰标签就是典型的内联元素。回到编辑器，创建一个div容器，在里面定义一个h1标题，填写标题内容。定义另一个段落并填写一些内容。我们给这四个词加上b标签，使它们变成粗体，并在标签上定义title属性，值为inline。节省。回到浏览器，刷新，我们查看b标签，很明显它的宽度等于文本的宽度，而且不占一行。将鼠标移到这四个词上，显示标题定义的内容。现在我有一个新的要求。我不想将文本设为粗体，但我想添加标题提示。b标签显然不合适。此处b标签最合适的替代品是span标签。span，意为“范围”，用于标记文本的一部分，或者文档的一部分，是典型的内联元素。定义它的语法是：content，其中放置包含的内容。这里注意：行内元素不能包含块级元素！返回编辑器，将外部b标签替换为span标签。节省。回到浏览器，刷新，文字没有加粗了。将鼠标移到这四个字上，标题就显示出来了。内联元素也有很多，我们来梳理一下我们学到的：a链接元素b、em、i、strong、sub、sup等文本修饰元素br换行元素img图像元素span范围元素内联元素和块级元素说完了，自己试试吧！文章配套视频链接