一、表格

<!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>

WEB前端 | HTML基础——(5)表格和表单相关推荐

WEB前端 ---- 学习第二天(表格、表单、css等)
今日内容概要表格标签(只要是展视数据一般都可以使用表格标签) 表单标签(重要:获取前端用户数据发送给后端) 后端框架基本使用(flask) css层叠样式表(选择器) 表格标签数据示例: use ...
视频教程-Web前端开发利器 SPRY框架之表单验证-JavaScript
Web前端开发利器 SPRY框架之表单验证有17年互联网行业从业经验,始终在教学第一线,勇于创新,从有效教学,不断向高效教学转变.始终坚持"学生为主体,教师为主导:商业化案例,企业化情境& ...
web前端必学功法之一：表单校验（1）
web前端必学功法之一:表单校验案例效果: 这里的布局采用的是bootstrap布局 <div class="container" style="margin-t ...
web前端必学功法之一：表单校验（2）
web前端必学功法之一:表单校验(2) 这里采用另一种写法,jQuery写法,在用jQuery写法之前,一定要引入jquery.js. <div class="container&qu ...
【HTML基础】表格和表单
本次博客的主要内容如下: meta和link 表格表单 meta和link meta meta的属性有两种:name和http-equiv. name属性主要用于描述网页内容,对应与网页内容. 1. ...
【HTML5】Web前端——第三课：HTML5 表单相关元素和属性
知识点:原有的表单元素及表单控件.HTML5 表单新增功能类型.HTML5 表单控件新增的属性推荐阅读:HTML+CSS第四课:表单标签的使用-制作注册表单 1.原有的表单元素及表单控件表单,是页 ...
web十六讲，表格与表单
什么是表格表格由<table>标签来定义每个表格均由若干行(由tr标签定义) 每行被分为若干个单元格(由td标签定义) 标签td指表格数据及数据单元格内容数据单元格可以包含文本.图片 ...
html里面超链接alt_前端html--超链接，表格，表单属性
单元格合并涉及表格结构的调整 1. 跨列合并属性 : colspan 取值 : 无单位的数值,表示跨几列 2. 跨行合并属性 : rowspan 取值 : 无单位的数值,表示跨几行注意 : 1. ...
WEB前端网页设计 HTML网页代码 - 表单参数
目录表单语法表单元素格式表单元素格式表单元素表单的高级应用表单元素的标注表单的初级验证表单验证的好处表单初级验证的方法 placeholder required pattern 创建 ...

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

一、表格

二、表单

WEB前端 | HTML基础——(5)表格和表单相关推荐

最新文章

热门文章