HTML区块
HTML可以通过 <div> 和 <span>将元素组合起来，可以来布局，就是盒子，div是块级盒子，里面 可以放任何东西，span里面装的是文本
HTML 区块元素
大多数 HTML 元素被定义为块级元素或内联元素。
实例: <h1>, <p>, <ul>, <table>
HTML 内联元素
实例: <b>, <td>, <a>, <img>
HTML 内联元素和区块元素的区别
区块（块级）元素在浏览器显示时，通常会以新行来开始，而内联元素不会，会在原来的行上显示，如果所在行的前面有内容，那就会在前面内容的后面
HTML <div> 元素
HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
div和css一起使用，会让内容更加美观和多变
div元素也常用于文档布局
HTML <span> 元素
HTML <span> 元素是内联元素，可用作文本的容器
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性
<div> 用于创建页面结构和布局，而 <span> 用于对文本或行内元素进行样式化或包裹。它们在页面设计和样式设置中有不同的用途和作用。
HTML 布局
HTML布局可以使用<div>元素，也可以使用table(表格）,但我们一般使用div元素来进行布局，table毕竟不是布局工具
HTML 布局 - 使用<div> 元素
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>简单网页布局</title>
</head><body><div id="container" style="width:500px"><div id="header" style="background-color:#00ff37;"><h1 style="margin-bottom:0;">主要的网页标题</h1></div><div id="menu" style="background-color:#00eeff;height:200px;width:100px;float:left;"><b>菜单</b><br>HTML<br>CSS<br>JavaScript</div><div id="content" style="background-color:#eeeeee;height:200px;width:400px;float:left;">内容在这里</div><div id="footer" style="background-color:#48ff00;clear:both;text-align:center;">底部</div></div></body></html>实现效果：
HTML 布局 - 使用表格
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>网页标题</title>
</head><body><table width="500" border="0"><tr><td colspan="3" style="background-color:#00ff40;"><h1>主要的网页标题</h1></td></tr><tr><td style="background-color:#00c3ff;width:100px;"><b>菜单</b><br>HTML<br>CSS<br>JavaScript</td><td style="background-color:#eeeeee;height:200px;width:400px;">内容在这里</td><td style="background-color:#10a7c2;height:200px;width:100px;">还有内容在这里</td></tr><tr><td colspan="3" style="background-color:#5eff00;text-align:center;">底部</td></tr></table></body></html>实现效果：
<td colspan="3" style="background-color:#00ff40;"><h1>主要的网页标题</h1></td>其中里面出现的colspan=“n ”,这个是和中间部分相对应的，我的这个例子中间有三部分，如果n的值为2，那么右边的那一部分就不会被上面的盖住，如果是1，那右边的两部分都不会被盖住，这可能也是用table创布局的一方面原因
![BUUCTF [MRCTF2020]Ezpop](https://i-blog.csdnimg.cn/direct/0371319440d7436e8706d1d68c27c0f0.png)
