button是块级元素吗_HTML中的块级元素与内联元素——零基础自学网页制作

块级元素与内联元素的概念与区别

在HTML中，大多数元素都被定义为块级元素或内联元素。

块级元素通常会独立成行，而内联元素会并排显示。

在我们学过的元素中，

块级元素如：

内联元素如

下面我们通过练习来直观看看他们的区别。

块级元素展示，代码如下：

第一个网页

表格元素

块级元素与内联元素

零基础自学网页制作

表格的头部信息 表格的脚部信息 表格标题 姓名 年龄 1 2 一列二行 二列一行 二列二行

如图：

内联元素展示如下

示例代码：这段代码被我放在了

后面。

歼20战斗机

效果如图：

其中，标签中的width属性规定了图片的宽度为200px，也就是200像素。

HTML中，如果只对图片的宽或高进行数值指定，那么未指定的数值会随着指定数值进行等比例缩放！

熟知html元素是块级还是内联对以后进行页面布局有一定的指导意义。

与标签

为了方便开发者对页面内容进行布局和调整，html开发者为html加入了专门的区块元素

比如这个！

笔者第一个漫画作品

如果抛开画面内容，我们看到的是一堆对画面进行分割的方格子。像这样

实际上我们的页面布局都是基于这样思路进行分割的，只是页面上不会像漫画一样显示外边框而已。例如：

强制为其添加边框分割：

大家看明白了吗？

通过给

标签设置不同的id属性，可以在css文件中对不同

区块中的所有信息进行统一调整样式的操作。

这是对块级元素整体改变样式的方法。

但是，如果我们想对一个块级元素中的不同文字或图片这些内联元素进行单独操作怎么做呢？

html开发者为我们提供了这样的内联标签。比如我们对

我有一个梦想

这个段落元素中的"梦想"两个字进行变化颜色的操作，我们可以这样写：

我有一个梦想

通过对指定不同的id或class属性在CSS文件中对"梦想"二字进行改变颜色的操作而不会影响段落元素中的其他文字。

今天的内容结束了，下一次我们建立一个新的页面来简单看看

元素的基本用法。

喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！

HTML完整学习目录

HTML序章(学习目的、对象、基本概念)——零基础自学网页制作

HTML是什么？——零基础自学网页制作

第一个HTML页面如何写？——零基础自学网页制作

HTML页面中head标签有啥用？——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2(路径详解)——零基础自学网页制作

使用HTML添加表格1(基本元素)——零基础自学网页制作

使用HTML添加表格2(表格头部与脚部)——零基础自学网页制作

使用HTML添加表格3(间距与颜色)——零基础自学网页制作

使用HTML添加表格4(行颜色与表格嵌套)——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的

块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3(下拉列表、多行文字输入)——零基础自学网页制作

HTML表单4(form的action、method属性)——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用标签实现文本内链接——零基础自学网页制作