HTML小白学习-2.0

最新推荐文章于 2024-11-03 20:03:09 发布

&GR

最新推荐文章于 2024-11-03 20:03:09 发布

阅读量157

点赞数 2

文章标签： html web

本文链接：https://blog.csdn.net/weixin_47063861/article/details/117467268

版权

HTML小白入门学习

如果你想学习如何开发前端, 可以仔细阅读这篇文章，了解一下html的基本语法知识。

表格

表格由 table 标签来定义。每个表格行由tr 标签进行定义，每行被分割为若干单元格（列）由td标签进行定义。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格的表头使用 th标签进行定义。

例如：生成一个3x3的表格

<table border="1">
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
        </tr>
        <tr>
            <td>数据1</td>
            <td>数据2</td>
            <td>数据3</td>
        </tr>
        <tr>
            <td>数据4</td>
            <td>数据5</td>
            <td>数据6</td>
        </tr>
    </table>

效果如下：
在这里插入图片描述
表格的基本属性：

caption 定义表格标题。
th 定义表格的表头。
thead 定义表格的页眉。
tfoot 定义表格的页脚。
colspan 定义跨列。
rowspan 定义跨行。
border 定义表格边框。

表单

表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签 form 来设置。多数情况下被用到的表单标签是输入标签（input）。输入类型是由类型属性（type）定义的。

常用的输入类型如下：

type=“text” 文本
type=“password” 密码
type=“date” 日期
type=“radio” 单选
type=“checkbox” 复选
type=“submit” 提交表单
type=“reset” 重置表单
type=“button” 普通按钮
type=“color” 颜色选择

例如：常见的注册登录表单。

    <form>
        账户: <input type="text" name="username"><br>
        密码: <input type="password" name="password"><br>
        性别：<input type="radio" name="sex" value="male">男
              <input type="radio" name="sex" value="female">女
    </form>

效果如下：
在这里插入图片描述
表单的基本属性：

action 表单提交服务器的地址（提交表单后跳转页面）
method 提交数据的方式（get 和 post）

get 和 post 的区别：

get请求参数显示在地址栏
post会将数据封装到formdata
get请求安全性相对于post较低
get请求有长度限制，post请求没有长度限制

个人简历模板

<!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>
<style>
td{
    width: 80px;
}
input{
    width: 90%;
    height: 98%;
}
.two{
    width: 95%;
    height: 98%;
}
.three{
    width: 97%;
    height: 98%;
}
.four{
    width: 98%;
    height: 98%;
}
</style>
<body>
    <form action="" align="center">
    <caption><b style="font-size: x-large;">个人简历</b></caption>
        <table border="1" align="center">
            <tr>
                <td>姓名</td>
                <td><input type="text"></td>
                <td>性别</td>
                <td><input type="text"></td>
                <td>出生年月</td>
                <td><input type="text"></td>
                <td rowspan="4" ><input type="file"></td>
            </tr>
            <tr>
                <td>民族</td>
                <td><input type="text"></td>
                <td>政治面貌</td>
                <td><input type="text"></td>
                <td>身高</td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td>学制</td>
                <td><input type="text"></td>
                <td>学历</td>
                <td><input type="text"></td>
                <td>户籍</td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td>专业</td>
                <td><input type="text"></td>
                <td colspan="2">毕业学校</td>
                <td colspan="2"><input type="text" class="two"></td>
            </tr>
            <tr>
                <th colspan="7" align="center">技能、特长或爱好</th>
            </tr>
            <tr>
                <td>外语等级</td>
                <td colspan="2"><input type="text" class="two"></td>
                <td>计算机</td>
                <td colspan="3"><input type="text" class="three"></td>
            </tr>
            <tr>
                <td colspan="7" align="center">个人履历</td>
            </tr>
            <tr>
                <td>时间</td>
                <td colspan="2">单位</td>
                <td colspan="4">经历</td>
            </tr>
            <tr>
                <td><input type="text"></td>
                <td colspan="2"><input type="text" class="two"></td>
                <td colspan="4"><input type="text" class="four"></td>
            </tr>
            <tr>
                <td><input type="text"></td>
                <td colspan="2"><input type="text" class="two"></td>
                <td colspan="4"><input type="text" class="four"></td>
            </tr>
            <tr>
                <td><input type="text"></td>
                <td colspan="2"><input type="text" class="two"></td>
                <td colspan="4"><input type="text" class="four"></td>
            </tr>
            <tr>
                <td colspan="7" align="center">联系方式</td>
            </tr>
            <tr>
                <td>通信地址</td>
                <td colspan="2"><input type="text" class="two"></td>
                <td>联系电话</td>
                <td colspan="3"><input type="text" class="three"></td>
            </tr>
            <tr>
                <td>email</td>
                <td colspan="2"><input type="text" class="two"></td>
                <td>邮编</td>
                <td colspan="3"><input type="text" class="three"></td>
            </tr>
            <tr>
                <td colspan="7" align="center">自我评价</td>
            </tr>
            <tr>
                <td colspan="7"><input type="text" style="width: 99%;height: 98%;"></td>
            </tr>
        </table>
    </form>
</body>
</html>