HTML表单与响应式布局：前端开发实践-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_52060151/article/details/115637811

web学习日志

在这里插入图片描述

话不多说上代码

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body>
    <form action="">
        用户名:
        <input type="text">
        <br/>
        密码：
        <input type="password">
        <br/>
        你喜欢那些专业？
        <br/>
        计算机专业
        <input type="checkbox">
        网络工程
        <input type="checkbox">
        软件工程
        <input type="checkbox">
        <br/>
        你的性别？
        男
        <input type="radio" name="sex">
        女
        <input type="radio" name="sex">
        中性
        <input type="radio" name="sex">
        <br/>
       （送命题）你到底喜欢谁？
        xx
        <input type="radio" name="love">
        yy
        <input type="radio" name="love">
        女朋友
        <input type="radio" name="love">
        无
        <input type="radio" name="love">
        <br/>
        你的年级是多少？
        <br/>
        <select>
            <option>大一</option>
            <option>大二</option>
            <option>大三</option>
            <option>大四</option>
        </select>
        <input type="button" value="按钮">
        <input type="submit" value="确认">
    </form>
    <textarea cols="70" rows="30">大家好</textarea>
</body>
</html>```

作用：以上代码实现了表单和选择题（单双选）的作用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>table布局</title>
</head>
<body marginheigth="0px" marginwidht="0px">
    <table width = "100%" height = "950px" style="background-color: darkturquoise;">
        <tr>
            <td colspan="2" width="100%" height="10%" style="background-color: hotpink;">这是头部</td>
        </tr>
        <tr>
            <td width="30%" height="80%" style="background-color: lawngreen;">左菜单</td>
            <td width="70%" height="80%" style="background-color: linen;">右菜单</td>
        </tr>
        <tr>
            <td width="100%" height="10%" colspan="2" style="background-color: magenta;">这是底部</td>
        </tr>
    </table>
</body>
</html>