表格的介绍
<!--
表格
之前:页面布局
现在:局部布局
(批量展示的数据)
-->
<!-- 基本的表格结构
固定嵌套
空格
-->
<table border="1">
<tr><!-- 行 -->
<td>1111</td> <!-- 单元格 -->
<td>222</td>
</tr>
<tr><!-- 行 -->
<td>1111</td> <!-- 单元格 -->
<td>222</td>
</tr>
</table>
<!-- 表格的完整结构 -->
<table border="1">
<thead>
<!-- 表格的头部 页眉 -->
<tr>
<th>表头单元格</th>
<th>表头单元格</th>
</tr>
</thead>
<tbody><!-- 表格的主体 -->
<tr><!-- 行 -->
<td>1111</td> <!-- 标准单元格 -->
<td>222</td>
</tr>
<tr><!-- 行 -->
<td>1111</td> <!-- 单元格 -->
<td>222</td>
</tr>
</tbody>
<tfoot> <!-- 表格的底部 页脚 -->
<tr><!-- 行 -->
<td>1111</td> <!-- 标准单元格 --
<td>222</td>
</tr>
</tfoot>
</table>
表格的基本使用
带标题表格
<table border="1">
<caption>表格标题,1个table通常只有一个caption,table标签之后</caption>
<thead>
<!-- 表格的头部 页眉 -->
<tr>
<th>表头单元格</th>
<th>表头单元格</th>
</tr>
</thead>
<tbody>
<!-- 表格的主体 -->
<tr>
<!-- 行 -->
<td>1111</td> <!-- 标准单元格 -->
<td>222</td>
</tr>
<tr>
<!-- 行 -->
<td>1111</td> <!-- 单元格 -->
<td>222</td>
</tr>
</tbody>
<tfoot>
<!-- 表格的底部 页脚 -->
<tr>
<!-- 行 -->
<td>1111</td> <!-- 标准单元格 -->
<td>222</td>
</tr>
</tfoot>
</table>
相关属性
<!--
table
border="1" 表格边框
cellspacing="0" 单元格间距
cellpadding="0" 单元格边距
-->
单元格基本属性
<!--
width="300"
height="60"
align="left" 单元格内容水平方向对齐方式 left center right
valign="top" 单元格内容垂直方向对齐方式 top middle bottom
-->
表格的CSS
<!--
table
border-spacing: 0; 边框间距
border-collapse: collapse; 边框折叠(合并)
separate 分离(默认值)
用css给表格添加1像素边框
-->
<!-- class="tablebox" 起了一个名字
.tablebox 查找有 class="tablebox" 属性的元素 -->
<!--
rowspan="5" 跨行合并
colspan="3" 跨列合并
-->
表单的介绍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--
form
申明表单区域
作用:收集不同类型的用户输入
input 空元素
type="text" 文本域(单行文本输入框)
<select></select>
<textarea></textarea>
<label>标注(给表单元素添加注解)
内联
name="" 名称
-->
<form action="">
文本域: <input type="text" name="username"><br/>
密码域: <input type="password"><br/>
<!-- 掩码处理 -->
<!--
通过name属性,指定一组单选按钮
-->
单选按钮:<input type="radio" name="students" id="boy">
<label for="boy">男生</label><input type="radio" name="students" id="girl"><label for="girl">女生</label><br/>
<!--
for="id名称" 绑定表单元素
-->
复选框: <input type="checkbox"> 吃 <input type="checkbox"> 喝 <input type="checkbox"> 玩<input type="checkbox"> 学习<br/>
列表菜单:
<select name="" id="">
<option value="">北京</option>
<option value="">上海</option>
</select>
<!--
value="" 可以改变按钮上的文字
初始值
-->
<br/>
文本区域:<textarea name="" id=""></textarea><br/>
普通按钮:<input type="button" value="按钮"><br/>
<!-- 默认带有提交,重置功能 -->
提交按钮:<input type="submit" value="提交"><br/>
重置按钮:<input type="reset" value="重置"><br/>
图像域:<input type="image" src="imgbtn.png" alt="立即注册">
(另一种类型的提交按钮)<br/>
隐藏域:
<input type="hidden"><br/>
文件域:
<input type="file">
</form>
</body>
</html>
相关属性
<!--
name="username" 名称 (标识不同表单元素,和它的值)
(参与提交的元素通常需要定义name)
value="" 定义初始值,按钮上文本内容
placeholder="" 输入提示占位符
checked 让元素处于【选中】状态
适用于radio,checkbox
checked =
checked="checked"
= checked="true"
selected 让option选项处于【预选定状态】
size="2" <select>可见选项的个数
-->
<form action="">
form的相关属性
<!--
name="" 表单区域名称
action="" 表单动作(地址)
默认当前页面
target="_blank" 新窗口
_self 当前窗口
method="" http方法(数据提交方法)
get(默认) 地址栏可见
post
-->