本文介绍了HTML中的块级元素和内联元素的区别。块级元素如`<div>`、`<p>`和`<table>`会独占一行，而内联元素如`<span>`、`<a>`和`<img>`则可以并排显示。了解这些概念对于网页布局至关重要。通过示例代码展示了`<img>`标签的width属性以及如何通过CSS对内联元素进行样式调整，强调了HTML和CSS在页面设计中的应用。
块级元素与内联元素的概念与区别
HTML中的块级元素与内联元素——零基础自学网页制作
在HTML中，大多数元素都被定义为块级元素或内联元素。
块级元素通常会独立成行，而内联元素会并排显示。
在我们学过的元素中，
块级元素如：
内联元素如
下面我们通过练习来直观看看他们的区别。
块级元素展示，代码如下：
第一个网页
表格元素
块级元素与内联元素
零基础自学网页制作
| 表格的头部信息 | |||
| 表格的脚部信息 | |||
| 姓名 | 年龄 | ||
|---|---|---|---|
| 一列二行 | ||
| 二列一行 | 二列二行 | ||
如图：
HTML中的块级元素与内联元素——零基础自学网页制作
内联元素展示如下
示例代码：这段代码被我放在了
后面。
效果如图：
HTML中的块级元素与内联元素——零基础自学网页制作
其中，标签中的width属性规定了图片的宽度为200px，也就是200像素。
HTML中，如果只对图片的宽或高进行数值指定，那么未指定的数值会随着指定数值进行等比例缩放！
熟知html元素是块级还是内联对以后进行页面布局有一定的指导意义。
为了方便开发者对页面内容进行布局和调整，html开发者为html加入了专门的区块元素
比如这个！
HTML中的块级元素与内联元素——零基础自学网页制作
笔者第一个漫画作品
如果抛开画面内容，我们看到的是一堆对画面进行分割的方格子。像这样
HTML中的块级元素与内联元素——零基础自学网页制作
实际上我们的页面布局都是基于这样思路进行分割的，只是页面上不会像漫画一样显示外边框而已。例如：
HTML中的块级元素与内联元素——零基础自学网页制作
强制为其添加边框分割：
HTML中的块级元素与内联元素——零基础自学网页制作
大家看明白了吗？
通过给
这是对块级元素整体改变样式的方法。
但是，如果我们想对一个块级元素中的不同文字或图片这些内联元素进行单独操作怎么做呢？
html开发者为我们提供了这样的内联标签。比如我们对
我有一个梦想
这个段落元素中的"梦想"两个字进行变化颜色的操作，我们可以这样写：我有一个梦想
通过对指定不同的id或class属性在CSS文件中对"梦想"二字进行改变颜色的操作而不会影响段落元素中的其他文字。
今天的内容结束了，下一次我们建立一个新的页面来简单看看
喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
