HTML中的块级元素与内联元素——零基础自学网页制作
块级元素与内联元素的概念与区别
HTML中的块级元素与内联元素——零基础自学网页制作
在HTML中，大多数元素都被定义为块级元素或内联元素。
块级元素通常会独立成行，而内联元素会并排显示。
在我们学过的元素中，
块级元素如：<h> <p> <table>这些。
内联元素如<td><a><img>
下面我们通过练习来直观看看他们的区别。
块级元素展示，代码如下：
<body> <h1>第一个网页</h1><hr><h2>表格元素</h2><hr> <p>块级元素与内联元素</p> <p>零基础自学网页制作</p> <table border="1" width="50%"> <thead> <tr> <td colspan="2">表格的头部信息</td> </tr> </thead> <tfoot> <tr> <td colspan="2">表格的脚部信息</td> <tr> </tfoot> <tbody> <caption>表格标题</caption> <colgroup> <col span = "1" style="background-color:#ff0000;"></col> </colgroup> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr> <td> <table border = "1" width="100%"> <tr> <td>1</td> <td>2</td> </tr> </table> </td> <td>一列二行</td> </tr> <tr> <td>二列一行</td> <td>二列二行</td> </tr> </tbody> </table> </body>
如图：
HTML中的块级元素与内联元素——零基础自学网页制作
内联元素展示如下
示例代码：这段代码被我放在了</table>后面。
<a href = "https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid =1838467&fr=aladdin">歼20战斗机</a><img src="img/战斗机/image3.jpg" width = "200px"/>
效果如图：
HTML中的块级元素与内联元素——零基础自学网页制作
其中，<img>标签中的width属性规定了图片的宽度为200px，也就是200像素。
HTML中，如果只对图片的宽或高进行数值指定，那么未指定的数值会随着指定数值进行等比例缩放！
熟知html元素是块级还是内联对以后进行页面布局有一定的指导意义。
<div>与<span>标签
为了方便开发者对页面内容进行布局和调整，html开发者为html加入了专门的区块元素<div></div>。
<div></div>是一个块级元素，大家可以把它理解为一个容器，它本身是不会显示在页面上的。
比如这个！
HTML中的块级元素与内联元素——零基础自学网页制作
笔者第一个漫画作品
如果抛开画面内容，我们看到的是一堆对画面进行分割的方格子。像这样
HTML中的块级元素与内联元素——零基础自学网页制作
<div></div>元素的作用就是对页面进行了这样的分割。
实际上我们的页面布局都是基于这样思路进行分割的，只是页面上不会像漫画一样显示外边框而已。例如：
HTML中的块级元素与内联元素——零基础自学网页制作
强制为其添加边框分割：
HTML中的块级元素与内联元素——零基础自学网页制作
大家看明白了吗？<div></div>就是用来对页面进行分割划区域的。
通过给<div>标签设置不同的id属性，可以在css文件中对不同<div>区块中的所有信息进行统一调整样式的操作。
这是对块级元素整体改变样式的方法。
但是，如果我们想对一个块级元素中的不同文字或图片这些内联元素进行单独操作怎么做呢？
html开发者为我们提供了<span></span>这样的内联标签。比如我们对<p>我有一个梦想</p>这个段落元素中的"梦想"两个字进行变化颜色的操作，我们可以这样写：
<p>我有一个<span>梦想</span></p>
通过对<span>指定不同的id或class属性在CSS文件中对"梦想"二字进行改变颜色的操作而不会影响段落元素中的其他文字。
今天的内容结束了，下一次我们建立一个新的页面来简单看看<div>元素的基本用法。
喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！
