HTML布局-div，span，table

HTML布局

HTML布局-使用<div>元素
div元素是用于分组HTML元素的块级元素

HTML布局-使用表格
table标签是创建布局的一种简单的方式
大多数站点可以使用div，table元素来创建多列。css用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观

HTML布局-提示
使用css好处是，如果把css存放在外部样式表中，站点更加容易维护。使用统一的css文件来编辑css代码

可以在网上查找相应的布局代码，合理使用网络资源

<div>元素
<div id="container" style="width: 500px;">
        <div id="header" style="background-color:#FFA500 ;">
            <h1 style="margin-bottom: 0;">网页的主要标题</h1>
            </div>
            <div id="menu" style="background-color: #FFD700;height: 200px;width: 100px;float: left;">
                <b>菜单栏</b><br>
                HTML<br>
                CSS<br>
                JavaScript<br>
            </div>
            <div id="content" style="background-color: #EEEEEE;height: 200px;width: 400px;float: left;">
                内容在这里。
                </div>
                <div id="footer" style="background-color: #FFA500;clear: both;text-align: center;">
                    <p>版权所有@2024 Joker.Z</p>
                    </div>
                    </div>

                    <div style="width: 500px;height: 100px;background-color: black;"></div>

<table>元素
 <table width="500" border="1">
        <tr>
            <td colspan="2" style="background-color: #FFA500;">
                <h1>网页的主要标题</h1>
            </td>
        </tr>
        <tr>
            <td style="width: 100px;background-color: #FFD700;">
                <b>菜单栏</b><br>
                HTML<br>
                CSS<br>
                JavaScript<br>
            </td>
            <td style="width: 400px;background-color: #EEEEEE;">
                内容在这里。
            </td>
        </tr>
        <tr>
            <td colspan="2" style="background-color: #FFA500;text-align: center;">
                <p>版权所有@2024 Joker.Z</p>
            </td>
        </tr>
    </table>