一、表格
<!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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。