前端开发常用的内联元素 零基础教你学前端

这节课 我们讲解 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，是"范围" 的意思，用于标记文本的一部分，或文档的一部分，是典型的内联元素。定义它的语法是：<span>内容</span>，里面放置包含的内容。

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

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

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

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

a 链接元素 <a>

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

br 折行元素

img 图片元素 <img>

span 范围元素 <span>

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

文章配套视频「链接」