• :绿叶现版本暂时不再更新维护,全新版本已经在开发中,新系列图书(暂时8本,后面再续)也将于12月后陆续出版,敬请期待~

4.9 块元素和行内元素

块元素和行内元素,这个概念极其重要,这同时也是CSS的基础知识之一。大家不要觉得不重要就跳过。

大家在之前的学习可能发现,在浏览器的显示效果中,有些元素(即标签)它是独占一行的,别的元素不能跟这个元素位于同一行,如<h1>~<h6>、<p>、<div>等;而有些元素它是可以跟其他元素位于同一行,如<strong>、<em>、<u>等。

:标签又叫“元素”,例如<p>标签又叫<p>元素,叫法不同,意思相同。这一节使用“元素”来称呼,也是让大家对这两种叫法有个熟悉。在这里,所谓的“独占一行”并不是在代码中独占一行,而是在浏览器显示效果中独占一行。

HTML元素根据表现形式,可以分为2类:

  • (1)块元素(block);
  • (2)行内元素(inline);

任何HTML元素都属于这两类中的其中一类。

一、块元素

块元素在浏览器默认显示状态下将占据整行,排斥其他元素与其位于同一行。块元素一般为矩形,可以容纳行元素和其他的块元素。

表1 常见块元素
块元素 说明
div div层
h1~h6 1到6级标题
p 段落,会自动在其前后创建一些空白
hr 分割线
ol 有序列表
ul 无序列表

这里只是列出HTML入门阶段常见的块元素。

块元素的特点是:

  • (1)独占一行,排斥其他元素跟其位于同一行,包括块元素和行内元素;
  • (2)块元素内部可以容纳其他块元素或行元素;

举例:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta  http-equiv="content-type" content="text/html; charset=gb2312"/>
</head>
<body>
    <div>
        <h3>绿叶学习网</h3>
        <p>让这里的一切成为衬托你成功的绿叶</p>
        <strong>绿叶学习网</strong><em>让这里的一切成为衬托你成功的绿叶</em>
    </div>
</body>
</html>

在浏览器预览效果如下:

HTML块元素和行内元素

我们为每一个元素加入虚线框来分析他们的结构:

HTML块元素和行内元素

大家很容易看到:

(1)<h3>和<p>是块元素,它们都是独占一行的,并且排斥任何元素(包括块元素和行内元素)跟它们位于同一行;而<strong>和<em>是行内元素,两个行内元素是可以位于同一行的;

(2)<h3>、<p>、<strong>和<em>这几个元素是位于<div>元素内部的,也就是块元素内部可以容纳其他块元素或行元素。

二、行内元素

行内元素与块元素恰恰相反。行内元素默认显示状态可以与其他行内元素共存在同一行。

表1 常见行内元素
行内元素 说明
strong 加粗强调
em 斜体强调
s 删除线
u 下划线
a 超链接
span 常用行级,可定义文档中的行内元素
img 图片
input 表单

我们在学习完“CSS入门教程”之后再回来看一下常见块元素和常见行内元素,我们会对HTML标签有更深的了解和印象。

行内元素的特点是:

  • (1)可以与其他行内元素位于同一行;
  • (2)行内内部可以容纳其他行内元素,但不可以容纳块元素,不然会出现无法预知的效果;

实际例子看块元素中的例子。

这一节注重理解一个思想,而不是叫我们去记忆块元素有哪些,行内元素有哪些。到后续课程我们会给大家总结所有的块元素和行内元素。

总结

1、HTML元素根据浏览器表现形式分为两类:①块元素;②行内元素;

2、块元素特点:

  • (1)独占一行,排斥其他元素跟其位于同一行,包括块元素和行内元素;
  • (2)块元素内部可以容纳其他块元素或行元素;

3、行内元素特点:

  • (1)可以与其他行内元素位于同一行;
  • (2)行内内部可以容纳其他行内元素,但不可以容纳块元素,不然会出现无法预知的效果;
:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

小伙伴们也可以加一下QQ群,在“群文件”中可以获取更多学习资源和配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:593173594(暗号:lvye

(2)绿叶学习网常见问题解答

回到顶部