块级元素
div、h1~h6、blockquote、dl、dt、dd、form、hr、ol、p、pre、table、ul ...
特点:总是在新行上开始,高度、行高以及顶和底边距都可控制,宽度缺省(默认)是它的容器的100%,除非设定一个宽度。
功能:主要用来搭建网站架构、页面布局、承载内容。
行内元素
span、a、b、br、code、em、i、img、input、label、select、textarea ...
特点:和其他元素都在一行上,高、行高及顶和底边距不可改变,宽度就是它的文字或图片的宽度,不可改变。
功能:用于加强内容显示,控制细节,例如:加粗、斜体等等。
提示:
以上元素不熟悉不要紧,我们将在后面实战中进行学习。
这里 只需知道块级元素,默认总是在新行开始, 而行内元素默认不会新起一行。
例如:
<span>第一个文本</span><span>第二个文本</span>
<p>第一段</p><p>第二段</p>
运行结果:
闯关:
在 p
元素后面添加一个 span
的行内元素,
其内容为 "在HTML中,span标签是使用来组合文档中的行内元素,以便使用样式来对它们进行格式化。"
提示:
span
元素的文本内容不包括双引号。
重置将会让你的代码编辑器回到初始状态
当代码一直无法通过测试时,可以尝试重置,然后重写一遍,这招非常有效。
强烈建议您亲自将代码敲一遍!