讲解 html 块级元素和内联元素的概念 学习 div 和 span 两个重要的标签

　　每个HTML元素都有一个默认的显示值 (display value)，这个显示值有两个，分别是 block 和 inline，翻译过来就是块和内联。元素显示默认采用哪个值，取决于它是什么类型。

　　对应显示值，元素分为两种类型：一种是 block-level 元素，译为块级元素，简称块元素;一种是 inline 元素，译为内联元素，也称行内元素。

　　块级元素总是从新行开始，浏览器会自动在元素前后添加一些边距。块级元素总是占据可用的全部宽度，尽可能向左和向右伸展。p (<p></p>)就是一个常用的块元素。

　　我们来实际观察一下。

　　打开编辑器，新建一个 block_inline.html 文件，准备好基本代码，在 body 里添加 p 标签，在 p 标签里填写一点文本。保存。

　　在浏览器中打开页面，段落显示了。由于 p 元素是添加到 body 元素里，根据块级元素的特点，它应该横向伸展到可视窗口的边界。

　　按下键盘 F12，打开浏览器开发者工具，点击元素选取按钮，我们看到这里提示了这个段落的实际宽度和高度。虽然段落的文字很少，但浏览器会让 p 元素拉伸铺满一行。

　　除了 p 元素，还有一个非常重要的块级元素，就是 div 元素。我们来看个例子。

　　回到编辑器，删除这个段落。在 body 里使用 h1 标签定义一个标题，写一点内容。再定义两个段落，填好段落的文本。保存。

　　在浏览器中打开页面，审查一下三个元素，全部独占一行。

　　现在有个新需求，实现每个元素在浏览器视口中居中对齐。

　　返回编辑器，一个笨办法就是给 h1 标签和两个 p 标签，都定义 align 属性，值为 center。保存。

　　回到浏览器，刷新，三个元素都居中对齐了。有没有更简洁一点的方法呢?

　　返回编辑器，我们可以想到：把三个元素用一个标签包裹起来，在**这个**标签上定义居中属性。 (演示的时候使用空标签对) 用哪个标签呢?目前只能用 p 标签，似乎更合适一些。接下来给它定义 align 等于 center。保存。

　　回到浏览器，刷新，恩?效果没有实现。这是为什么呢?可以仔细想一下，p 标签是专门用于定于段落的，它包裹的内容显然不是一个段落。所以浏览器认为，你标签没有写完整，给你补充完整了，所以你看多了一个p标签。那就没有简洁一点的方法吗?实际上，这里使用 div 元素再合适不过了。

　　div，是 division 的缩写，译为"分块" ，引申为"盒子"、"容器"。用于定义HTML文档中的一个分块或一个部分，是典型的块级元素。定义它的语法是：尖角号 div，尖角号 /div，标签里面包含分块的内容。

　　返回编辑器，把外层的 p 标签替换 为 div 标签。保存。

　　回到浏览器，刷新，居中效果实现了。选中 div 元素，整个容器横向铺满了视口。

　　块级元素有很多，梳理一下我们学过的：

h1 到 h6 标题元素 <h1>-<h6>

p 段落元素  <p>

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

table tr td th thead tfoot caption 等表格元素 <table><tr><td><th><thead><tfoot><caption>

div 分块元素 <div>

　　内联元素不会独占一行，而且它只占用必要的宽度。比如文本修饰标签都是典型的内联元素。

　　回到编辑器，再创建一个 div 容器，里面定义一个 h1 标题，填写标题内容。再定义一个段落，填写一些内容。我们给这四个字添加 b 标签，让他们加粗，在标签上定义 title 属性，值为 inl ine。保存。

　　回到浏览器，刷新，我们检查一下 b 标签，很明显它的宽度等于文本的宽度，没有独占一行。鼠标划入这四个字，显示了 title 定义的内容。

　　现在有个新需求，我不想让文字加粗，但是要添加 title 提示。b 标签显然不合适了。这里最适合代替 b 标签的，就是 span 标签。

　　span，是"范围" 的意思，用于标记文本的一部分，或文档的一部分，是典型的内联元素。定义它的语法是：``内容``，里面放置包含的内容。

　　这里需要注意：内联元素内不能包含块级元素!

　　回到编辑器，把外层的 b 标签替换为 span 标签。保存。

　　回到浏览器，刷新，文本没有加粗。鼠标划入这四个字，title 显示了。

　　内联元素也有很多，梳理一下我们学过的：

　　a 链接元素 <a> 

　　b、em、i、strong、sub、sup 等文本修饰元素

　　br 折行元素 <br>

　　img 图片元素

　　span 范围元素

　　内联元素和块级元素我们就讲完了，大家自己尝试一下吧!

上一篇

合并单元格

下一篇

盘点前端小白学习html+css的难点