表格的简介、长表格、表格的样式、表单简介、表单补充—

一、表格的简介（table标签）

二、长表格

三、表格的样式

四、表单简介（form标签）

五、表单补充

六、综合案例——注册页面

一、表格的简介（table标签）

在现实生活中，我们经常需要使用表格来表示一些格式化的数据，如课程表、人名单、成绩单……

同样在网页中我们也需要使用表格，我们通过 table 标签来创建一个表格

在table 中使用 tr 表示表格的一行，有几个tr 就有几行

在tr 中使用 td 表示一个单元格，有几个td 就有几个单元格

colspan 属性：横向的合并单元格，合并列，等于几就横向合并几个单元格

rowspan 属性：纵向合并单元格，合并行，等于几就纵向合并几个单元格

<body><table border="1" width="50%" align="center"><tr><td>A1</td><td>A2</td><td rowspan="2">A3</td><!-- 纵向合并单元格 --></tr><tr><td>B1</td><td>B2</td></tr><tr><td>C1</td><td colspan="2">C2</td></tr></table>
</body>

二、长表格

代码格式化快捷键：shift + alt + f

可以将一个表格分为三个部分：

头部 thead

主体 tbody

底部 tfoot

th 表示头部的单元格

<body><table border="1" width="50%" align="center"><thead><tr><th>日期</th><th>收入</th><th>支出</th><th>合计</th></tr></thead><tbody><tr><td>2000.1.1</td><td>200</td><td>80</td><td>120</td></tr><tr><td>2000.1.1</td><td>200</td><td>80</td><td>120</td></tr><tr><td>2000.1.1</td><td>200</td><td>80</td><td>120</td></tr></tbody><tfoot><tr><td></td><td></td><td>合计</td><td>120</td></tr></tfoot></table>
</body>

三、表格的样式

table 标签实际上也属于块元素，会独占一行，但其宽度默认不是父元素的100%，table 的宽度默认被内容撑开。

border-spacing 指定单元格边框之间的距离

border-collapse: collapse 设置边框的合并

如果表格中没有使用 tbody,而是直接使用 tr，

那么浏览器会自动创建一个tbody,并将 tr 全部放到 tbody中，

所以tr 不是table 的子元素

默认情况下,元素在 td 中是垂直居中的，可以通过 vertical-align 来修改

在其它元素中,vertical-align 只会影响文字内容,但在 td 中什么都可以影响，

只要是td中的子元素，所以可以通过将其它元素设置为 table-cell （即单元格td）来设置子元素的垂直居中

    <style>table{width: 50%;margin: 0 auto;/* 只为table设置边框，内部单元格无边框 */border: 1px solid black;/* border-spacing 指定单元格边框之间的距离 *//* border-spacing: 0px; *//*此时边框之间距离为0，但边框的宽度为2px，td中设置的边框的宽度的两倍*//* border-collapse: collapse 设置边框的合并 */border-collapse: collapse;}/* 如果表格中没有使用tbody,而是直接使用tr，那么浏览器会自动创建一个tbody,并将tr 全部放到tbody中，所以tr不是table 的子元素 */tr:nth-child(odd){/*不能使用table > tr:nth-child(odd),因为tr不是table的子元素但可以使用tbody > tr:nth-child(odd)*//* 使用伪类设置一行一个颜色，隔行变色 */background-color: #bfa;}td{border: 1px solid black;height: 50px;/* 默认情况下,元素在td中是垂直居中的，可以通过vertical-align来修改 在其它元素中,vertical-align只会影响文字内容,但在td中什么都可以影响，只要是td中的子元素*/vertical-align:middle ;text-align: center;}.box1{width: 300px;height: 300px;background-color: orange;/* 将元素设置为单元格td */display: table-cell;vertical-align: middle;          }.box2{width: 100px;height: 100px;background-color: yellow;margin: 0 auto;          }</style>
</head><body><div class="box1"><div class="box2"></div></div><table><tr><td>学号</td><td>姓名</td><td>性别</td><td>年龄</td><td>地址</td></tr><tr><td>1</td><td>孙悟空</td><td>男</td><td>18</td><td>花果山</td></tr><tr><td>2</td><td>猪八戒</td><td>男</td><td>28</td><td>高老庄</td></tr><tr><td>3</td><td>沙和尚</td><td>男</td><td>38</td><td>流沙河</td></tr></table>
</body>

四、表单简介（form标签）

表单：

- 在现实生活中表单用于提交数据

- 在网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器

- 使用 form 标签来创建一个表单，为了收集用户信息

- 一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分组成。

form 的属性：

action 指定表单要提交的服务器的地址，必须有

添加表单项

文本框，注意：数据要提交到服务器中，必须为元素指定一个name属性值，属性值为什么都可以，但一般要有意义。

密码框，同样数据要提交到服务器中，必须为元素指定一个name属性值

提交按钮，按钮中文字默认是提交，可以添加value 属性来指定按钮的内容

单选按钮，像这种选择框，必须要指定一个value属性，value属性最终会作为用户的填写的值传递给服务器，同时要为单选按钮设置相同的name 属性值，否则就是单独的按钮，可同时选中。checked 可以将单选按钮设置为默认选中

多选框，同样也需要制定name 和value 属性，也是用checked 设置为默认选中

下拉列表，使用select 标签，需要name属性，对于下拉的内容使用option标签，并使用selected设置为默认选项

<select name="haha">

<option value="ii" selected>选项二</option>

</select>

<body>   <form action="target.html"><!-- 添加表单项文本框 注意：数据要提交到服务器中，必须为元素指定一个name属性值-->文本框<input type="text" name="username"><br><br><!-- 密码框, 同样数据要提交到服务器中，必须为元素指定一个name属性值-->密码框<input type="password" name="password"><br><br><!-- 单选按钮 像这种选择框，必须要指定一个value属性，value属性最终会作为用户的填写的值传递给服务器checked 可以将单选按钮设置为默认选中-->      单选按钮 <input type="radio" name="hello" value="a"><input type="radio" name="hello" value="b" checked><br><br><!--  多选框-->多选框<input type="checkbox" name="test" value="1"><input type="checkbox" name="test" value="2"><input type="checkbox" name="test" value="3" checked><br><br><!-- 下拉列表 --><select name="haha"><option value="i">选项一</option><option value="ii" selected>选项二</option><option value="iii">选项三</option></select><!-- 提交按钮,按钮中文字默认是提交，可以添加value属性来指定按钮的内容 --><input type="submit" value="注册"></form>
</body>

五、表单补充

普通的按钮，用得最多，可以通过JS添加效果。

重置按钮，可以将文本框的内容重置为默认值

下面的按钮与上面的功能相同，唯一不同点是input是自结束标签，而button是成对出现的，有开始有结束，成对出现的意味着可以编写更加复杂的结构，如把图片作为按钮，所以button用得更多

文件域，使用场景：上传文件使用的

autocomplete="off" 关闭自动补全

readonly 将表单项设置为只读，数据会提交

disabled 将表单项设置为禁用，数据不会提交

autofocus 设置表单项自动获取焦点

label 标签为input 元素定义标注（标签），用于绑定一个表单元素，当点击label标签内的文本时，浏览器会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。

重点记住：number 、tel、search

<body>   <form action="target.html"><!-- autocomplete="off" 关闭自动补全 --><!-- readonly将表单项设置为只读 --><!-- disabled 将表单项设置为禁用 --><!-- autofocus 设置表单项自动获取焦点 --><input type="text" name="uesername" value="hello" autocomplete="off" readonly><br><br><input type="text" name="uesername" value="a" disabled><br><br><input type="text" name="uesername" value="b" autofocus><br><br><input type="submit"><!-- 重置按钮，可以将文本框的内容重置为默认值 --><input type="reset"><!-- 普通的按钮 --><input type="button" value="按钮"><br><br><!-- 与上面的功能相同，唯一不同点是input是自结束标签，而button是成对出现的，有开始有结束成对出现的意味着可以编写更加复杂的结构，如把图片作为按钮，所以button用得更多 --><button type="submit">提交</button><button type="reset">重置</button><button type="button">按钮</button><br><br><input type="color"><br><br><input type="email"><!--  避免使用，在不同浏览器提示内容有区别--></form>
</body>

textarea 标签用于定义多行文本输入的控件，使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。

    <style>/* 为提示信息改变颜色 */input::placeholder {color: pink;}header,nav {width: 800px;height: 120px;background-color: pink;margin: 15px auto;border-radius: 15px;}</style>
</head>
<body><form action=""><input type="search" name="" id="" required="required" placeholder="老师"autofocus="autofocus"><input type="submit" value="提交"></form>
</body>

六、综合案例——注册页面

<body><h3>青春不常在，抓紧谈恋爱</h3><table width="500px"><tr><td>性别</td><td><input type="radio" name="sex" id="male"><label for="male">男</label><input type="radio" name="sex" id="female"><label for="female">女</label></td></tr><tr><td>生日</td><td><select name="year"><option value="2023">--请选择年--</option><option value="2023">2023</option><option value="2022">2022</option></select><select name="month"><option value="12">--请选择月--</option><option value="12">12</option><option value="11">11</option></select><select name="day"><option value="1">--请选择日--</option><option value="1">1</option></select></td></tr><tr><td>所在地区</td><td><input type="text" name="area" value="北京思密达"></td></tr><tr><td>婚姻状况</td><td><input type="radio" id="wei" name="marriage"><label for="wei">未婚</label><input type="radio" id="yi" name="marriage"><label for="yi">已婚</label><input type="radio" id="li" name="marriage"><label for="li">离婚</label></td></tr><tr><td>学历</td><td><input type="text" name="education" value="幼儿园"></td></tr><!-- 第六行 --><tr><td>喜欢的类型</td><td><input type="checkbox" name="like">妩媚的<input type="checkbox" name="like">可爱的<input type="checkbox" name="like">小鲜肉<input type="checkbox" name="like">老腊肉<input type="checkbox" name="like">都喜欢</td></tr><!-- 第七行 --><tr><td>自我介绍</td><td><textarea name="intro">自我介绍</textarea></td></tr><!-- 第八行 --><tr><td></td><td><input type="submit" value="免费注册"></td></tr><tr><td></td><td><input type="checkbox" name="gou" checked>我同意注册条款和会员加入标准</td></tr><tr><td></td><td><a href="#">我是会员，立即登录</a> </td></tr><tr><td></td><td><h4>我承诺</h4><ul><li>年满18岁、单身</li><li>抱着严肃的态度</li><li>真诚寻找另一半</li></ul> </td></tr></table>
</body>