HTML表格/表单

最新推荐文章于 2024-07-09 19:50:17 发布
最新推荐文章于 2024-07-09 19:50:17 发布
阅读量19 收藏
点赞数
文章标签： html 前端 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71500484/article/details/132047686
版权

表格/表单

表格

无序列表

<!-- 无序列表 -->
<!-- type选择⚪样式 -->
<ul type="circle">
    <li>周一</li>
    <li>周二</li>
    <li>周三</li>
    <li>周四</li>
</ul>

在这里插入图片描述

有序列表

<!-- 有序列表 -->
<!-- start选择从 5 开始，rebersed选择倒序排列 -->
<ol type="1" start="5" reversed>
    <li>周一</li>
    <li>周二</li>
    <li>周三</li>
    <li>周四</li>
    <li>周五</li>
</ol>

在这里插入图片描述

自定义列表

<!-- 自定义列表 -->
    <dl>
        <dt>一级
            <dd>二级</dd>
        </dt>
    </dl>

在这里插入图片描述

表单

看实例注释

<!-- 五行两列一张标 -->
<!--table代表整个表单，border代表表格边框的粗细(已淘汰需引用Css样式标)
style引用样式表设置width宽度为700；height高度为500px
-->
    <table border="1" style="width: 700px;height: 500px;">
    <!--tr代表行，此行高度为整个表单高度的5%-->
        <tr style="height: 5%;">
            <!-- 第一行 th==标题行，会自动居中文字 colspan==横向合并单元格
            rowspan==纵向合并单元格 &nbsp==空格-->
            <th colspan="2" ><a href="">个人介绍</a>&nbsp;&nbsp;&nbsp;<a href="">新闻资讯</a>&nbsp;&nbsp;&nbsp;
                <a href="">就业团队</a>&nbsp;&nbsp;&nbsp;<a href="">技术支持</a>&nbsp;&nbsp;&nbsp;<a href="">专业售后</a>&nbsp;&nbsp;&nbsp;<a href="">线上客服</a></th>
        </tr>

        <tr style="height: 30%;">
            <td >
                <!-- 插入图片 -->
                <img src="./img/1.jpg" alt="图片加载失败">
            </td>
            <!-- 表单 -->
            <td style="width: 30%;">
            <label for="">邮箱：</label><input type="text"><br>
            <label for="">密码：</label><input type="password"><br>
            <!-- 单选框 -->
            性别:<input type="radio" name="sex" id="">女<input type="radio" name="sex" id="sex">男<br>
            <!-- 多选框 -->
            爱好:<br>
                <input type="checkbox" name="hobby" id="">历史
                <input type="checkbox" name="hobby" id="">编程
                <input type="checkbox" name="hobby" id="">音乐
                <br>
            <!-- 下拉列表 -->
            所在部门：
            <select name="department" id="">
                <option value="">开发部</option>
                <option value="">技术部</option>
                <option value="">人事部</option>
                <option value="">财务部</option>
            </select><br>
            <!-- 两个按钮 -->
            <button>重置</button><button>提交</button>
            </td>
        </tr>

        <tr style="height: 30%;">
            <!-- 文字内容 -->
            <td colspan="2"><p>
                这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
                这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
            <p> 这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
                这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
                这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
                这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
                这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
            </p>
                这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
                这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
                这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
            </p>
            </td>
        </tr>

        <tr style="height: 30%;">
            <!-- 插入图片 -->
            <td colspan="2">
                <img src="./img/2.PNG" alt="图片加载失败">
            </td>
        </tr>

        <tr style="height: 5%;">
            <td>
                <span>版权信息归李某人所有&nbsp;&nbsp;联系电话8848四个8</span>
            </td>
            <!-- 图片链接 -->
            <td>
                <a href="./img/vx.PNG" target="_blank"><img src="./img/vx.PNG" alt="图片加载失败" style="width: 50px;height: 50px;"></a>
            </td>
        </tr>
    </table>

运行结果

在这里插入图片描述

内联框架

第一部分：设置图片链接
target代表指向

<body>
    <a href="https://www.1688.com" target="myhtml"><img src="../img/1688.PNG" alt="加载失败"></a>
    <a href="https://www.58.com" target="myhtml"><img src="../img/58.PNG" alt="加载失败"></a>
    <a href="https://www.baidu.com" target="myhtml"><img src="../img/baidu.PNG" alt="加载失败"></a>
    <a href="https://www.JD.com" target="myhtml"><img src="../img/jingdong.PNG" alt="加载失败"></a>
    <br>
    <a href="https://www.taobao.com" target="myhtml"><img src="../img/taobao.PNG" alt="加载失败"></a>
    <a href="https://www.tmall.com" target="myhtml"><img src="../img/tianmao.PNG" alt="加载失败"></a>
    <a href="https://www.sina.com.cn/" target="myhtml"><img src="../img/xinlang.PNG" alt="加载失败"></a>
    <a href="https://www.vip.com/" target="myhtml"><img src="../img/weipinhui.PNG" alt="加载失败"></a>
</body>

第二部分：布置内联框架

<body>
<!--设置宽高-->
    <iframe src="https://www.1688.com" width="1000px" height="800px"></iframe>
</body>

第三步：
cols="40%,*"代表第一部分占整个网页的40%，星号代表另一部分占余下的空间
name="myhtml"代表给内联框架起标识

<frameset cols="40%,*">
    <frame src="./Job201.html"></frame>
    <frame src="./job202.html" name="myhtml"></frame>
</frameset>

运行结果
在这里插入图片描述

lzb0995
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML表格表单
qq_55636063的博客
05-08 1586
HTML表格表单
HTML超链接 表格 列表 表单
m0_61700036的博客
10-06 2284
一、HTML超链接 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。 超链接标签：<a>一个链接到另一个链接 【Anchor 锚】 <a href='url地址' target='页面打开的方式'>页面元素(文字、图像、音频、视频)</a> 'href'属性：值是要跳转的页面的地址,通常用'#'表示空链接 'target...
HTML表格表单以及列表
lh11223326的博客
03-31 1428
标签是用来定义表格的。定义完之后发现其结构和Excel的标签是非常相似的，都有行，列，单元格，表头等等，但是Excel毕竟还是专业，不像HTML既不支持排序又不支持求和，还不支持很多数学计算，只能用来展示数据。HTML常用的图片标签和超链接标签-CSDN博客HTML常用文本标签-CSDN博客：表示表格，表格的所有内容需要写在和
HTML表格与表单
高数习题的博客
02-03 1323
HTML表格与表单
HTML表格表单制作
weixin_41534129的博客
02-28 7335
1.数据表格的作用及组成 作用：显示数据，展示数据 组成： <table>用于定义表格的标签 <tr>行 <th>内容<th>表头单元格 <td>内容</td>单元格 <td>内容<td>单元格 .... <tr> </table> 1.<table&gt...
html表格表单
哇塞
06-12 2322
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <table border="1" width="500" height="200" cellspacing="...
HTML表格、长表格、表单
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
07-02 1583
表格在日常生活中使用的非常的多，比如excel就是专门用来创建表格的工具，表格就是用来表示一些格式化的数据的，比如：课程表、银行对账单在网页中也可以来创建出不同的表格。 在HTML中，使用table标签来创建一个表格,在table标签中使用tr来表示表格中的一行，有几行就有几个tr，在tr中需要使用td来创建一个单元格，有几个单元格就有几个td 。rowspan用来设置纵向的合并...
HTML 表单 表格 列表
YOUEZ的博客
11-30 1532
HTML 表格 表单 列表 HTML 表单用于搜集不同类型的用户输入，简而言之，就是用来搜集用户数据的。 HTML表单都是存在于<form ></form>标签里面的。 表单元素。 表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。 这些东西都具有一个交互性的特点。
HTML表格，表单知识点
chxlloli的博客
11-14 1052
1.表格标签 表格是较为常用的一种标签，但不是用来布局，常用来处理、显示表格式数据。 1，创建表格 在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下： <table> <tr> <td>单元格内的文字</td> ... </tr>...</table> 1.table用于定义一个表格。 2.tr 用于定义表格中的一行，必须嵌套在 table标签中，在 tab...
html 关于表格表单的总结
asdsdsd25的博客
02-22 1901
、创建表格 在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下： <table> <tr> <td>单元格内的文字</td> ... </tr> ...</table> 在上面的语法中包含三对HTML标签，分别为 table、tr、td，他们是创建表格的基本标签，缺一不可，下面对他们进行具体地解释。 1.table用于定义一个表格。 2.tr 用于定义表格中的一...
html表格表单.pptx
11-20
介绍html表格表单元素，这也是前端比较重要的内容。学了之后你可以用标签简单做一个课程表。还有调查问卷等等
实验三HTML表格与HTML表单优质资料.doc
12-02
HTML 表格与 HTML 表单优质资料 本资源为实验三 HTML 表格与 HTML 表单优质资料，涵盖了 HTML 表格和 HTML 表单的相关知识点。通过本资源，读者可以掌握网页中插入表格数据的标记的用法、不规则表格的创建方法、...
表格表单的嵌套.html
09-18
比较简单的表单与表格的嵌套，只是做一个引导作用，实际意义不大，
html/css 简单的表单实例
01-08
如何实现如下图片的内容？下面我们一起制作该表单页面 如下图是布置的作业 邮箱 * 密码 * 确认密码 * 用户基本信息 性别 男 女
html表单（表格）
07-15
表单标签 table form
HTML(27)——渐变
m0_74386799的博客
07-08 311
渐变是多个颜色逐渐变化的效果，一般用于设置盒子模型。
【前端从入门到精通：第二课：HTML头部标签常用标签】
weixin_50556117的博客
07-06 681
可参考百度百科。
HTML(30)——动画
最新发布
m0_74386799的博客
07-09 447
实现步骤@keyframes 动画名称{from{}to{}@keyframes 动画名称{0%{}10%{}....100%{}2.使用动画示例：盒子的宽度从200变到400px，两个状态一般用from to的形式。
HTML CSS 基础复习笔记 - 列表使用
forevercui的博客
07-03 365
web前端基础复习
html表格镶嵌表单报名表
03-14
HTML表格是一种用于展示数据的标记语言，而表单则是用于收集用户输入的一种HTML元素。你可以将表单嵌套在表格中，以创建一个包含报名表的表格。 以下是一个示例的HTML代码，展示了如何在表格中嵌套一个报名表的表单： ```html <table> <tr> <th>姓名</th> <td><input type="text" name="name"></td> </tr> <tr> <th>性别</th> <td> <input type="radio" name="gender" value="male">男 <input type="radio" name="gender" value="female">女 </td> </tr> <tr> <th>年龄</th> <td><input type="number" name="age"></td> </tr> <tr> <th>邮箱</th> <td><input type="email" name="email"></td> </tr> <tr> <th>电话</th> <td><input type="tel" name="phone"></td> </tr> </table> <input type="submit" value="提交"> ``` 在上面的代码中，我们使用`<table>`标签创建了一个表格，每一行使用`<tr>`标签表示，每一列的标题使用`<th>`标签表示，而具体的输入框则使用`<input>`标签表示。不同类型的输入框可以通过`type`属性进行指定，例如`text`表示文本输入框，`radio`表示单选框，`number`表示数字输入框，`email`表示邮箱输入框，`tel`表示电话号码输入框。 最后，我们使用`<input>`标签创建了一个提交按钮，用户可以点击该按钮提交表单。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值