暗昧处见光明世界
此心即白日青天

HTML布局

div 布局

<head lang="en">
    <style type="text/css">
        body{
                margin: 0px;/*这是将页面铺满*/
        }
        div#container{
            width: 100%;
            height: 900px;
            background-color: aliceblue;
        }
        div#header{
            width: 100%;
            height: 10%;
            background-color: aquamarine;
        }
        div#content_menu{
            width: 30%;
            height: 80%;
            background-color: bisque;
            float: left;
        }
        div#content_body{
            width: 70%;
            height: 80%;
            float: left;
        }
        div#footer{
            width: 100%;
            height: 10%;
            background-color: brown;
            clear: both;/*必须要清除float样式才能正确显示底部否则无法*/
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="header">头部</div>
        <div id="content_menu">内容菜单</div>
        <div id="content_body">内容主体</div>
        <div id="footer">底部</div>
    </div>
</body>

table 布局

<body marginheight="0px" marginwidth="0px">
    <table width="100%" height="950px" style="background-color: darkcyan">
        <tr>
            <td colspan="2" width="100%" height="10%" style="background-color: rebeccapurple"></td>
        </tr>
        <tr>
            <td>左菜单</td>
            <td>右菜单</td>
        </tr>
        <tr>
            <td>底部</td>
        </tr>
    </table> 
</body>

表单

<body>
    <form>
        用户名：
        <input type="text">
    <br/>
        密码：
        <input type="text">
    <br/>
    <input type="submit" value="确认">
/*下面是复选框*/
    你喜欢的水果有？<br/>
    西红柿<input type="checkbox">
    apple<input type="checkbox">
    banana<input type="checkbox">
/*下面是单选框*/
    <br/>
    sex:
        男<input type="radio" name="sex">
        女<input type="radio" name="sex">

/*下拉列表*/
    <select>
        <option>12213132</option>
        <option>23213231</option>
        <option>12414123</option>
    </select>
/*文本域*/
    <textarea cols="30" rows="30">请输入</textarea>

    </form>
</body>

实现与php文件交互

<body>
    <form action="xxx.php" method="GET">/*具体的php文件目录*/
            用户名：
            <input type="text">
        <br/>
            密码：
            <input type="text">
        <br/>
        <input type="submit" value="确认"> 
    </form>
</body>

内联框架----<ifame>

可以理解成，页面套页面？

<iframe src="...." frameborder="0" width="100px" height="100px"></iframe>

HTML
CSS

<article class="forecast">
    <h1>Weather forecast for Seattle</h1>
    <article class="day-forecast">
       <h2>03 March 2018</h2>
        <p>Rain.</p>
    </article>
    <article class="day-forecast">
        <h2>04 March 2018</h2>
        <p>Periods of rain.</p>
    </article>
    <article class="day-forecast">
        <h2>05 March 2018</h2>
        <p>Heavy rain.</p>
    </article>
</article>

.forecast {
    margin: 0;
    padding: .3rem;
    background-color: #eee;
    font: 1rem 'Fira Sans', sans-serif;
}

.forecast > h1,
.day-forecast {
    margin: .5rem;
    padding: .3rem;
    font-size: 1.2rem;
}

.day-forecast {
    background: right/contain content-box border-box no-repeat
        url('/media/examples/rain.svg') white;
}

.day-forecast > h2,
.day-forecast > p {
    margin: .2rem;
    font-size: 1rem;
}