`

顶级、块级、内联,html元素的三大分类

 
阅读更多

学习html后, 你会了解一些基本的html元素(Element), 如p, h1~h6, br, div, li, ul, img等.
如果将这些元素细分, 又可以分别归为顶级 (top-level)元素,块级 (block-level)元素和内联 (inline)元素.   

1. Top-level element 【顶级元素】:    { html, body, frameset }
包括html, body, frameset, 表现如Block-level element, 属于高级块级元素.  

2. Block-level element 【块级元素】:   { p, h1~h6, div, ul }
顾 名思义就是以块显示的元素,高度宽度都是可以设置的。比如我们常用的 p, h1~h6, div, ul 默认状态下都是属于块级元素。块级元素比较霸道,默认状态下每次都占据一整个行,后面的内容也必须再新起一行显示。当然非块级元素也可以通过css的 display:block;将其更改成块级元素。此外还有个特殊的,float也具有此功能。
块级元素能够独立存在, 一般的块级元素之间以换行(如一个段落结束后另起一行)分隔。块级元素是构成一个html的主要和关键元素, 而任意一个块级元素均可以用Box model来解释说明.

3. Inline element 【内联元素】: { a, br, em, img, li, span }
通 俗点来说就是文本的显示方式,与块级元素相反,内联元素的高度宽度是不可以设置的,其宽度就是自身文字或者图片的宽度。我们常用到 的<a>、<span>、<em>都属于内联元素。内联元素的显示特点就是像文本一样的显示,不会独自占据一个行。 当然内联元素也能变成块级元素,那就是通过css的display:inline;和float来实现。
内联元素依附其他块级元素存在, 紧接于被联元素之间显示, 而不换行.

      在《CSS权威指南》这样定义到,“任何不是块级元素的可见元素都是内联元素。 其 表现的特性是“行布局”形式。”我个人不太习惯“行布局”的说话,因为我认为块级元素从表现上更像“行”显示,而内联元素更像是“文本”的显示属性。这其 中一点记住很关键,“内联元素的高度宽度都是不可以设置的,其宽度就是自身文字或者图片的宽度”。因为在你设置宽度高度大半天后没反应才发现,原来这只是 个内联元素。

分享到:
评论

相关推荐

    html 块级标签与内联标签的区别

    例如,html元素是所有HTML代码的容器,body元素则包含网页的所有可见内容,frameset元素则用于创建多窗口布局,这些顶级元素对于构建网页的整体架构至关重要。 了解块级标签和内联标签的区别对于编写高效的HTML和...

    HTML编程例子

    9. **块级元素与内联元素**:HTML元素分为两类:块级元素(如、、等)和内联元素(如、、等)。块级元素占据整个宽度,而内联元素只占据自身内容的宽度。 10. **CSS(层叠样式表)集成**:虽然HTML主要关注内容结构...

    HTML语言结构及基础语法

    3. 内联元素与块级元素:内联元素(如`&lt;span&gt;`、`&lt;a&gt;`)不会占用整行,而块级元素(如`&lt;p&gt;`、`&lt;div&gt;`)会独占一行。 4. 注释:HTML注释以`&lt;!--`开始,`--&gt;`结束,用于解释代码,但不会显示在网页上。 三、HTML文本...

    深入浅出HTML

    - `&lt;div&gt;` 和 `&lt;span&gt;` 是用于布局和样式的容器,`&lt;div&gt;` 是块级元素,而 `&lt;span&gt;` 是内联元素。 - `&lt;table&gt;`、`&lt;tr&gt;`、`&lt;th&gt;`、`&lt;td&gt;` 等用于创建表格。 除了基础标签,HTML还提供了一些表单元素,使得用户能够与...

    javaEE大神宝典(面试吹水专用)

    27. Display:显示,定义元素的显示方式,如块级元素(block)和内联元素(inline)。 28. Inline:内联,元素在一行内显示。 29. Block:块级,元素占据整行空间。 30. Margin:外边距,元素与周围元素的距离。 31....

    HTML+CSS标签属性大全.pdf

    `display`属性可以改变元素的显示方式,如`block`使元素成为块级元素,`inline`使其成为内联元素。 对于动态效果,如跑马灯,HTML的`&lt;marquee&gt;`标签可以实现。`behavior`属性决定滚动方式,`direction`设置滚动方向...

    demo:测试

    CSS用于美化HTML元素的外观,而JavaScript则可以添加动态功能。 在"demo-main1"这个子文件中,可能包含了HTML代码示例或者是一个简单的网页项目。通过查看和分析这个文件,我们可以学习如何编写和组织HTML代码,...

    web前台考试题及答案定义.pdf

    - `display`属性可以控制元素的显示方式,如`block`(块级元素),`inline`(内联元素)和`none`(隐藏)。 5. JavaScript: - JavaScript是最常用的客户端脚本语言,用于增强网页的交互性和动态效果。 - `...

    《网页设计基础》复习题.doc

    18. `div`标记是用于创建块级元素,通常用于布局,而不是插入框架。 19. `padding`属性用于设置单元格内容和边界的像素数。 20. 当鼠标指针在表格上方变为双箭头形状时,可选中整个表格。 21. 网站路径表示方式包括...

    websites

    HTML元素分为块级元素(如`&lt;div&gt;`、`&lt;p&gt;`、`&lt;h1&gt;`-`&lt;h6&gt;`)和内联元素(如`&lt;span&gt;`、`&lt;a&gt;`、`&lt;img&gt;`)。块级元素会占据一整行,而内联元素只占据它们的内容所需的空间。通过组合这些元素,可以创建复杂的布局。 ...

    2017前端面试题答案.docx

    3. **HTML元素类型**: - **块级元素(Block Element)**:如`div`, `p`, `h1`等,它们独占一行,宽度、高度、内边距和外边距都可控制。 - **内联元素(Inline Element)**:如`a`, `span`, `img`等,它们在同一行...

    前端面试题(2016含答案)精华版.pdf

    `display: block`使元素变为块级元素,可以设置宽高;`display: inherit`继承父元素的显示方式。 2. **新窗口打开网页**:`window.open()`函数用于打开新窗口,其第二个参数可以设置为`_self`(当前窗口)、`_blank...

    css 二级下拉导航菜单

    2. 使菜单项成为块级元素并设置内联样式。 3. 使用相对定位以便于绝对定位子菜单。 4. 隐藏子菜单,并设置其位置在父菜单项下方。 5. 当鼠标悬停在一级菜单项上时,显示对应的子菜单。 在实际应用中,你还可以添加...

    Topbia.gaIT1Yc

    8. **区块元素与内联元素**:`&lt;div&gt;`是块级元素,用于组织内容,而`&lt;span&gt;`是内联元素,用于在一行文本中进行操作。 9. **CSS基础**:虽然标签里没有明确提到CSS,但HTML通常会与CSS结合使用以控制样式。CSS通过`...

    最终项目

    2. **HTML根元素**:`&lt;html&gt;`,整个文档的顶级容器,它包含了其他所有元素。 3. **头部元素**:`&lt;head&gt;`,包含元数据,如标题(`&lt;title&gt;`)、字符集设置(`&lt;meta charset="UTF-8"&gt;`)、样式表引用(`&lt;link&gt;`)等。 ...

    bai10-vong-lap

    4. 了解如何创建链接和锚点,以及内联和块级元素的区别。 5. 掌握HTML5的新特性,如离线存储、拖放功能、多媒体支持等。 6. 学习如何使用外部资源,如引用字体(@font-face)和图片。 7. 理解文档类型(DOCTYPE)的...

    top-engineering-colleges

    此外,他们还会接触内联元素(如`&lt;a&gt;`链接、`&lt;img&gt;`图像)和块级元素(如`&lt;p&gt;`段落、`&lt;div&gt;`分隔符),理解元素之间的层次关系和布局方式。 深入学习,学生还会探索HTML5的新特性,如语义化元素(`&lt;header&gt;`、`...

    2021-2022计算机二级等级考试试题及答案No.14278.docx

    14. 在HTML元素中,`&lt;div&gt;`是一个块级元素,不属于行内元素,而`&lt;em&gt;`, `&lt;font&gt;`, `&lt;input&gt;`则是行内或内联元素。 15. 计算机中汉字的排序通常不是按拼音顺序,而是按照字典编码,如GB2312或GBK编码。 16. 单链表...

    HTML标签说明

    - **应用场景**: 用于组合文档中的块级元素,并可以通过CSS来设置样式。 #### - **标签**: `&lt;dfn&gt;` - **描述**: 定义定义项目。 - **应用场景**: 通常用于定义术语或关键词,以便于进一步解释或定义。 #### - **...

    可跳转回首页的CSS二级联动菜单特效代码

    `:hover`伪类可以应用在任何块级元素、内联元素以及链接元素上,当鼠标指针位于该元素之上时,就会激活关联的样式。 返回首页功能通常通过一个“首页”按钮或者Logo图标实现,点击后会立刻跳转到网站的主页。在CSS...

Global site tag (gtag.js) - Google Analytics