html 列表 表格 form表单 文本域 label
2024-05-20 14:58:27
1.无序列表(常用)
ul li(没有顺序，默认li会有圆点)
<!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><h2>无序列表</h2><ul><li>榴莲</li><li>香蕉</li><li>苹果</li><li>臭豆腐</li><li><p>圣女果</p><ul><li>123</li></ul></li></ul>
</body>
</html>
2.有序列表(不常用)
ol li(默认li会有数字排序)
<!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><ol><li>张三</li><li>张三</li><li>张三</li></ol>
</body>
</html>
3.自定义列表
dl dt dd(dt相当于核心，dd相当于对核心的拆分)
<!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><dl><dt>服务支持</dt><dd>售后服务</dd><dd>上门服务</dd><dd>包换服务</dd></dl>
</body>
</html>
4.表格
table caption(表格标题) thead(表头) tbody(身体) tr(列) th(第一行标题单元格) td(单元格)
<!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 border="10" width="400" hight="120"><caption>学生成绩单</caption><thead><tr><th>姓名</th><th>成绩</th><th>评语</th></tr></thead><tbody><tr><td>张三</td><td>100</td><td>Fighting</td></tr><tr><td>李四</td><td>100</td><td rowspan="2">加油</td></tr><tr><td>123</td><td>100</td></tr></tbody></table></body>
</html>5.form表单
input中type设置样式，text:‘文本’，password:‘密码框’,radio:‘单选框’,checkbox:‘复选框’
<!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><form action="">昵称: <input type="text" placeholder="请您输入昵称" /> <br />密码: <input type="password" placeholder="请您输入密码" /> <br />性别: <input type="radio" name="sex" checked /> 男<input type="radio" name="sex" /> 女 <br />爱好: <input type="checkbox" checked /> 吃饭<input type="checkbox" /> 睡觉 <input type="checkbox" /> 打豆豆 <br />上传头像: <input type="file" multiple /><br /><input type="sumbit" /><input type="reset" /><input type="button" value="普通按钮" /><button>1323</button></form></body>
</html>6.button
<button type="submit" value="提交所填"></button><button type="reset" value="重置"></button><button type="button" value="按钮"></button>7.select下拉
<!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><select name="" id=""><option value="">北京</option><option value="">上海</option><option value="" selected>广东</option><option value="">深圳</option></select></body>
</html>8.textarea文本域
<!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><textarea name="" id="" cols="30" rows="10" maxlength="10"></textarea></body>
</html>9.label标签
设置当点击radio时，也可以通过点击文字实现效果
<!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><input type="radio" name="sex" id="female" /><label for="female">女</label><input type="radio" name="sex" id="male" /><label for="male">男</label>婚否<label><input type="radio" name="marry" /> 未婚</label><label><input type="radio" name="marry" />已婚</label></body>
</html>10.综合案例
<!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 border="1" width="600" height="200"><h1>就业榜</h1><tr><th>学号</th><th>姓名</th><th>年龄</th><th>性别</th><th>薪资</th><th>就业城市</th><th>操作</th></tr><tr><td>1001</td><td>1</td><td>5</td><td>3</td><td>4</td><td>5</td><td><a href="#">删除</a></td></tr></table>
</body>
</html>
11.综合案例2
<!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><form action=""><h1>青春不常在，抓紧谈恋爱</h1><hr />昵称：<input type="text" placeholder="请输入昵称" /> <br><br>性别：<label><input type="radio" name="sex" /> 男</label> <label> <input type="radio" name="sex" /> 女</label> <br><br>所在城市：<select name="" id=""><option value="">北京</option><option value="" selected>上海</option><option value="">天津</option><option value="">广东</option><option value="">深圳</option></select><br><br>婚姻状况: <label><input type="radio" name="marry"> 未婚</label> <label><input type="radio" name="marry"> 已婚</label> <label><input type="radio" name="marry"> 保密</label> <br><br>喜欢的类型: <input type="checkbox"> 可爱<input type="checkbox"> 性感<input type="checkbox"> 御姐<input type="checkbox"> 萝莉<input type="checkbox"> 小鲜肉<input type="checkbox"> 大叔<br><br>个人介绍: <br><textarea name="" id="" cols="30" rows="10"></textarea><h3>我承诺</h3><ul><li>年满18岁、单身</li><li>抱着严肃的态度</li><li>真诚寻找另一半</li></ul><input type="checkbox"> 我同意所有条款<br><br><input type="submit" value="免费注册"> <input type="reset"></form></body>
</html>
html 列表 表格 form表单 文本域 label相关推荐
- form表单隐藏域有什么作用
隐藏域是用来收集或发送信息的不可见元素,对于网页的访问者来说,隐藏域是看不见的.当表单被提交时,隐藏域就会将信息用你设置时定义的名称和值发送到服务器上. 代码格式:在form表单中写如下代码 < ...
- java学习之服务器第26天( --form表单-- 四大域对象--cookie)
你想要多大的成功, 你愿意为这份成功付出什么? 1.form表单 定义: 相当于一个控件集合,里面包含多个控件,点"提交"后会把表单中的所有控件的值都传给action到的页面: 通 ...
- element组件table表格/form表单显示弹窗的三种方式
element组件table表格显示弹窗的两种方式 <el-table-columnlabel="地址"prop="Address"min-width=& ...
- html表单文本域长度,Dreamweaver表单文本域大小怎么调 – 手机爱问
2018-01-09 3.在网页中连续输入空格的方法是 A.连续按空格键 B.按下Ctrl键再连续按空格键 C.转换到中文的全角状态下连续按空格键 D.按下Shift键再连续按空格键 4. 下列--- ...
- vue表单提交数组_ajax传递数组、form表单提交对象数组
在JSP页面开发中,我们常常会用到form表单做数据提交,由于以前一直只是使用form表单提交单个对象,只要表单文本域的name值和接收的对象的属性名一致,那么传值就没有什么问题.不过,在前几天的开发 ...
- django-演练-添加老师-form表单方式添加
目标 从老师列表页,通过一个链接,进入一个新的页面 新页面主要内容是一个form表单 文本框中输入老师的姓名 下拉框中选择老师所带的班级(可多选) 技术点 下拉框的多选 multiple属性 提交一个 ...
- form表单重复提交
现象: 后台完成数据库操作后返回到页面,这时点击浏览器的后退再提交或刷新页面,会导致form表单重复提交 原因: 第一次提交的表单会被缓存到内存中,直到页面下次提交或页面关闭或转向其它页面才消失,在自 ...
- 解放前端工程师——手把手教你开发自己的自定义列表和自定义表单系列之一缘起
之前有序言章节<Vue中路由到一个公共组件,然后根据路径中是否存在文件动态加载组件>,已经是一个雏形了.而现在,重新梳理下,我们要做的是让前端工程师不用上班了,哈哈,这么贴心的后端哪里找? ...
- form表单注意点合集（文本域、单选框、复选框、下拉框等）
.html <form action="#" target="_blank">账号:<input type="text" ...
- HTML 部分常用属性、组成属性|...超链接、路径、锚点、列表、滚动、URL编码、表格、表单、GET和POST
URL地址 就是我们所说的网址:www.jd.com 浏览器内核,渲染引擎 Ie内核:triteent 谷歌/欧鹏:blink 火狐:gecko 苹果:webkit 渲染引擎是出现兼容性的根本问题 - ...
最新文章
- 如何做好一场技术演讲-总结：3、如何把你的观点深深地刻在别人的脑海中？
- ASP.NET Get和Post两种提交的区别
- UA MATH563 概率论的数学基础 鞅论初步4 Radon-Nikodym定理，条件期望的存在唯一性
- STL泛型算法：reverse
- 云炬Android开发笔记 3-1项目架构初始化
- jwPlayer实现支持IE8及以下版本避免出错的方法
- 据说这份高考卷，只有程序员能得满分！
- Ubuntu 20.04安装Ros Noetic及Ubuntu 18.04安装ROS Melodic（两版本详细填坑）
- andriod studio在缩小图片_画图教室|有哪些办法可以有效缩小作品集的pdf文件大小？...
- webpack ，react
- 没有找到MSVCP80D.dll，因此这个应用程序未能启动。重新安装应用程序...
- 【渝粤教育】国家开放大学2018年秋季 0269-21T文学概论 参考试题
- [分享]iOS 5.0.1 桌面出现 四个白图标 的解决办法！AdSheet FieldTest iOS Diagnostics 设置。...
- python无限循环小数_如何把一个无限循环小数转换成一个分数（算法）
- 美通企业日报 | 英特尔与阿里云签署战略合作备忘录；赛默飞在苏州扩建临床试验工厂...
- AD7760数据采集系统设计 [FPGA逻辑设计]
- 王者荣耀国际服——传说对决
- mysql进阶教程pdf_Mysql基础到进阶精品视频教程附讲义文档 91课
- 运动快乐的来源-内啡肽
- python使用turtle库绘制一个红色五角星_使用turtle库绘制红色五角星图形