HTML(五）——HTML区块，布局

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> 元素

html 复制代码

<!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 布局 - 使用表格

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>

实现效果：

html 复制代码

<td colspan="3" style="background-color:#00ff40;">
                <h1>主要的网页标题</h1>
            </td>

其中里面出现的colspan="n ",这个是和中间部分相对应的，我的这个例子中间有三部分，如果n的值为2，那么右边的那一部分就不会被上面的盖住，如果是1，那右边的两部分都不会被盖住，这可能也是用table创布局的一方面原因