前端html(3)

表格:table

我们做数据统计的时候,都需要用到表格,table就是用来定义一个表格的,我们来设置一个表格:

复制代码
<html>
    <head>
        <title>网站名称</title>
    </head>
    <body>
        <table border="1">
            <caption>我是表格标题</caption>
            <thead>
                <th>姓名</th>
                <th>性别</th>
                <th>联系地址</th>
            </thead>
						<tfoot>
                <tr>
                    <td colspan="3">我是一个底部</td>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td>小李</td>
                    <td>男</td>
                    <td>哈哈哈</td>
                </tr>
                <tr>
                    <td>小韩</td>
                    <td>女</td>
                    <td>美美</td>
                </tr>
                <tr>
                    <td>小张</td>
                    <td>男</td>
                    <td>哦哦哦</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

注:表格相关的元素很多,我们这里整理一下:

caption:用来设置表格标题;

thead:表示表格的头部区域;

th:表示表格的头部中的一个列;

tbody:表示表格的中间主要显示区域;

tr:表示表格的一个行;

td:表示表格的和个列;

tfoot:设置表格的脚部;

colspan:表示横跨几列;

表单:form

表单也是我们开发中经常用到的一个元素,我们登录时都是使用表单来向后台发送请求的,我们创建一个登录界面:

复制代码
<html>
    <head>
        <title>网站名称</title>
    </head>
    <body>
        <form action="/demo.php" method="get">
            <div>
                <input type="text" name="username"/>
            </div>
            <div>
                <input type="password" name="password"/>
            </div>
            
            <button type="submit">登录</button>
        </form>
    </body>
</html>

注:form表单的元素介绍如下:

input:表示一个输入框,type属性用来表示此输入框的功能,text时表示输入的可见文件;password表示输入的是不可见到的密码;name属性用来设置后台语言用来获取此输入框的内容;

button:表示一个按钮,type:submit表示点击时会自动提交;提交到哪里呢?又是以什么方式提交呢?

我们看下form中的两个属性:

action:用来定义提交到的地址;

method:表示提交到后台语言时的提交方式,get或post,其他的还有put,delete

相关推荐
狂炫冰美式6 小时前
人均配了AI, 为什么公司还是没变快? 🤔 本质还是分布式系统问题
前端·后端·架构
乘风gg7 小时前
多 Agent 不是万能的!搞懂这 5 个原则,少走 1 年弯路!
前端·agent·ai编程
猩猩程序员7 小时前
Vercel 推出 Agent 框架 Eve:让 AI Agent 像写 Web 应用一样简单
前端
爱读源码的大都督8 小时前
Claude Code源码分析(三):为什么系统提示词中需要有tools呢?
前端·人工智能·后端
爱勇宝8 小时前
Claude Code 被曝暗藏“隐形检测”代码:封代理不是最可怕的,可怕的是你根本不知道它在干什么
前端·后端·程序员
小牛不牛的程序员8 小时前
我用 Claude Code 半天撸完了一个完整网站,AI 编程到底提升了多少效率?
前端
东风破_8 小时前
JavaScript 面试常考的字符串算法:从反转字符串到回文判断
前端·javascript
ITOM运维行者8 小时前
从零搭建企业级服务器监控体系:踩坑实录与架构设计
前端·后端
monologues9 小时前
深入 Vue 3 源码:响应式系统的精妙设计与编译优化
前端
hunterandroid9 小时前
Paging 3 分页:从手动分页到声明式加载
前端