HTML基础（新手必看哟！）

少年菌

于 2023-03-11 18:15:56 发布

阅读量261

点赞数 1

分类专栏：前端文章标签： html 前端 css

本文链接：https://blog.csdn.net/weixin_62346914/article/details/129466663

版权

这篇博客详细介绍了HTML的基础知识，包括如何创建成绩表和登录表单，接着深入探讨了CSS在文字排版和盒子模型中的应用，展示了如何使用选择器和浮动布局来实现页面效果。

摘要由CSDN通过智能技术生成

1.html成绩表基本标签及其效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table width="800" align="center" border="1" cellspacing="0" cellpadding="0">
        <caption>学生成绩表</caption>
        <thead>
            <tr align="center">
                <td>学号</td><td>姓名</td><td>性别</td>
            </tr>
        </thead>
        <tbody>
            <tr align="center">
                <td>001</td>
                <td>小明</td>
                <td>女</td>
            </tr>
            <tr align="center">
                <td>002</td>
                <td>小张</td>
                <td>男</td>
            </tr>
            <tr align="center">
                <td>003</td>
                <td>小三</td>
                <td>女</td>
            </tr>
        </tbody>
        <tfooter>
            <tr>
                <td colspan="3" align="center">第一页</td>
            </tr>
        </tfooter>
    </table>
</body>
</html>

效果图1：

2.html登录表格表单及其效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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/>
        性别：男<input type="radio" name="gender">女<input type="radio" name="gender"><br/>
        爱好：英语<input type="checkbox"/> 数学<input type="checkbox"/>体育<input type="checkbox"/><br/>         
        籍贯：<select>
            <option value=""