900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > WEB前端 | HTML基础——(5)表格和表单

WEB前端 | HTML基础——(5)表格和表单

时间:2021-09-17 13:15:37

相关推荐

WEB前端 | HTML基础——(5)表格和表单

一、表格

<!doctype html><html><head><meta charset="utf-8"/><title>表格</title></head><body><ol><li>1</li></ol><table border="1px" cellspacing="0" cellpadding="10" width="500" height="300"><caption>表格标题</caption><!-- border 代表的是边框,是table的属性和css里的border不一样。可以直接设置大小来给单元格、表格添加边框cellspacing 单元格的外间距cellpadding 单元格的内边距可以通过width、height属性给整个表格设置宽和高。也可以单独设置某一行、列的宽和高来修改每一个单元格的大小。单元格的总宽度超过表格宽度之后按照比例分配单元格的总高度超过表格高度会把表格的高度撑开--><!-- <thead>我是head</thead> --><!-- <tbody> --><!-- tr代表的是一行td代表的是一行有几个单元格tbody可以省略,浏览器会自动添加thead、tfoot表格的头和尾被废弃了caption 表格的标题 用的比较少--><tr><th>姓名</th><th>年龄</th><th>地址</th></tr><tr><td rowspan="2">1</td><td>2</td><td>3</td></tr><tr><!-- <td>3</td> --><td>4</td><td>5</td></tr><tr><td colspan="2">3</td><!-- <td>4</td> --><td>5</td></tr><tr><td class="t1">3</td><td class="t1">4</td><td>5</td></tr><!-- </tbody> --><!-- <tfoot>我是foot</tfoot> --></table><span>111</span></body></html>

二、表单

<!doctype html><html><head><meta charset="utf-8"/><title>表单</title></head><body><!-- action 要提交的服务器地址 IPmethod 提交的方式 POST GET默认 GET常用的时POST--><form action="" method=""><!-- type="text" 输入文字 显示详情type="password" 输入密码 不显示value="123" 默认值为123--><input type="text" name="username" value="123"/><input type="password" value="123"/><!-- type="radio" 单选框 name必须一致才生效 checked="" 默认选项--><input type="radio" name="gender"/><input type="radio" name="gender"/><input type="radio" name="gender"/><input type="radio" name="gender" checked="" /><!-- type="checkbox" 复选框 --><input type="checkbox" name="hobby" checked="" /><input type="checkbox" name="hobby"/><input type="checkbox" name="hobby"/><!-- type="button" 按钮 value="" 可任意命名--><input type="button" value="按钮"/><!-- type="submit" 提交按钮 --><input type="submit" value="提交按钮"/><!-- type="reset" 重置按钮 必须在form里面作为子集 --><input type="reset" value="重置点我"/><!-- type="hidden" 隐藏按钮 --><input type="hidden"/><!-- select 下拉菜单 selected=""为默认选中值 --><select name="" id=""><option value="">上海</option><option value="" selected="">北京</option><option value="">广州</option></select><!-- textarea 多行文本域 cols改变宽度 rows改变高度outline:none 取消点击蓝色的外边框resize:none 取消拉拽框 --><textarea name="" id="" cols="30" rows="10" style="outline:none;resize:none;"></textarea><!-- type="file" 选择文件 默认单选 multiple可以多选文件 --><input type="file" multiple/></form></body></html>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。