web前端之表格表单
作者：互联网
一、表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--在页面中创建一个表格-->
<!--最大的父级table-->
<!--table上面有很多属性:
border 设置边框。默认为0px
width 设置宽度
height 设置高度
浏览器默认给表格设置了内外边距:
cellpadding 内边距
cellspacing 外边距默认设置为1
align 设置整个表格左右对齐方式 left | center | right
-->
<table border="1" width="400" height="250" cellspacing="0" cellpadding="0" align="center">
<!--标题 有默认样式：设置文本左右居中，加粗-->
<tr height="50">
<th>编号</th>
<th>姓名</th>
<th>学号</th>
<th>成绩</th>
</tr>
<!--行-->
<!--行控制高度-->
<tr height="50">
<!--某一个TD设置align，设置文本的左右对齐-->
<!--单元格-->
<!--合并单元格：把属性写在第一个单元格上面,值为要合并的个数,要删除对应的单元格
合并行：colspan x方向
合并列：rowspan Y方向
-->
<!--td上面控制宽度 width-->
<td width="100" align="center" colspan="2">1</td>
<!--<td>2</td>-->
<td width="100">3</td>
<td width="100" rowspan="2">4</td>
</tr>
<!--行-->
<!--某一个tr设置align，设置整行文本的左右对齐-->
<tr height="50" align="center">
<!--单元格-->
<td width="100">姓 名</td>
<td width="100">6</td>
<td width="100">7</td>
<!--<td>8</td>-->
</tr>
<!--行-->
<!--设置文本上下对齐方式： valign : top | middle | bottom-->
<tr height="50" valign="top">
<!--单元格-->
<td width="100" align="center">四个字四</td>
<td width="100">b</td>
<td width="100">c</td>
<td width="100">d</td>
</tr>
<!--行-->
<!--给行设置背景：bgcolor : 颜色-->
<tr height="50" bgcolor="deeppink">
<!--单元格-->
<td width="100">o</td>
<td width="100" valign="top">x</td>
<!--给TD设置背景：bgcolor : 颜色-->
<td width="100" bgcolor="orange">y</td>
<td width="100">z</td>
</tr>
</table>
</body>
</html>
二、表单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--表单最大的父级form 功能性标签 提交数据到后台 -->
<form>
<!--input系列 单标签 meta br hr img-->
<!--类型有很多种:用到type属性-->
<!--文本输入框-->
<!--HTML5 提供属性 用于提示文本 placeholder-->
<!--placeholder 有兼容 移动端 HTML5 CSS3-->
<input type="text" name="username" value="" placeholder="请输入用户名" />
<!--密码框-->
<input type="password" />
<!--复选框-->
<label>
<!--实现点击文本选中-->
<input type="checkbox" />看电影
</label>
<!--默认选中状态 checked-->
<input type="checkbox" checked />打游戏
<!--默认禁用-->
<input type="checkbox" disabled />睡觉
<input type="checkbox" />敲代码
<!--单选框 radio 实现单选要在选项中有相同的name-->
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
<input type="radio" name="sex" />不详
<!--上传文件-->
<input type="file" />
<!--按钮-->
<input type="button" value="按钮" />
<!--提交 具有真实提交功通的按钮，必须配合form实现-->
<input type="submit" value="上传" />
<!--重置-->
<input type="reset" value="清空" />
<!--下拉菜单-->
<select>
<!--选项 中的value-->
<option value="武汉">武汉</option>
<option value="长沙" selected>长沙</option>
<option value="金星">火星</option>
<option value="火星">火星</option>
</select>
<!--文本域 设置大小-->
<!--<textarea rows="4" cols="50"></textarea>-->
<!--样式去控制-->
<textarea style="width:400px; height: 100px; resize: none;"></textarea>
<!--HTML5 日期-->
<input type="date" />
<input type="week" />
<input type="time" />
</form>
</body>
</html>
标签：web,表格,--,打游戏,表单,火星 来源： https://blog.csdn.net/qq_48608598/article/details/114779038