【web前端基础day02】表格table+表单form

【web前端基础day02】表格table+表单form

目录

1、表格标签

最基本的表格语法：

 2、表头标签

3、表格属性

align

border

cellpadding

cellspacing

width

heigh

 案例1：

 4、表格标签

（1）表格结构标签：

 （2）合并单元格

5、列表标签

无序列表（重点）

 有序列表（理解）

自定义列表（重点）

6、表单标签

表单域

表单控件（表单元素）

input输入表单元素

 label标签

select下拉表单元素

textarea文本域元素

综合案例：

---

1、表格标签

（1）表格的主要作用：用来显示和展示数据的；

（2）表格的基本语法：三组标签组成

<table>

      <tr>

          <td>单元格内的文字</td>

      </tr>

  </table>

①table标签：用于定义表格：表示最大的框，表格除了框还要行和单元格

②tr标签：用于定义表格的行，必须嵌套在table标签里面

③td标签：用于定义表格的单元格，必须嵌套在tr标签内（td表示table data，即单元格的内容）

最基本的表格语法：

<table><!-- 三行三列的表格 --><tr><td>姓名</td> <td>性别</td> <td>年龄</td></tr><tr><td>张三</td> <td>男</td> <td>23</td></tr><tr><td>李四</td> <td>女</td> <td>12</td></tr> </table>  

页面展示：

 2、表头标签

（1）th：叫做表头标签：也是单元格

（2）与td的区别：表头标签会加粗居中显示

3、表格属性

align

border

cellpadding

cellspacing

width

heigh

（1）表格属性在正式开发中使用，后面会用CSS设置

（2）目的：记住这些单词，后面CSS会用，直观感受表格的外观形态

（3）相关属性：

①表格的对齐方式：align=center：居中显示；=left：居左显示；=right：居右显示

②表格的边框：border=1，有边框；border=“”，无边框，默认就是无边框

③单元格内容与边框的距离：cellpadding=“数字”：像素值，默认cellpadding为1

④单元格和单元格之间的距离：cellspaceing=“数字”；像素值，默认cellspacing为2像素

⑤width和hight：设置表格的宽度和高度

【注意】这些属性要写在table标签里面

<table align="center" border="1" cellpadding="5" cellspacing="0" width="500" heigh="200"><tr><th>姓名</th> <td>性别</td> <td>年龄</td></tr><tr><td>张三</td> <td>男</td> <td>23</td></tr><tr><td>李四</td> <td>女</td> <td>12</td></tr> </table> 

页面展示：

 案例1：

<table align="center" border="1" cellpadding="5" cellspacing="0" width="500" heigh="200" ><tr><th>排名</th><th>关键词</th><th>趋势</th><th>今日搜素</th><th>最近七日</th><th>相关链接</th></tr><tr><td>1</td><td>鬼吹灯</td><td><img src=""/></td><td>345</td><td>123</td><td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td></tr></table>

 4、表格标签

（1）表格结构标签：

表格头部标签：<thead>

表格主体标签：<tbody>

 （2）合并单元格

（1）合并单元格方式：

①跨行合并：rowspan=“合并单元格的个数”；

②跨列合并：colspan=“合并单元格的个数”

（2）目标单元格：

①跨行：最上侧单元格为目标单元格，写合并代码

②跨列：最左侧单元格为目标单元格，写合并代码

（3）合并单元格三部曲

①确定是跨行合并还是跨列合并

②找到目标单元格，写合并方式

③删除单元格

5、列表标签

（1）表格使用来显示数据的，列表是用来布局的

（2）列表的分类：无序列表（ul是无序列表标签，li是列表项标签；无序列表前面有一个小黑点）、有序列表and自定义列表

（3）无序列表注意事项：①无序列表中的列表项是没有顺序之分的②ul标签里面只能放li标签，不能嵌套其他标签，但是li标签可以。例如：p标签不能都放在ul标签里面，但是可以放在li标签里面③无序列表会有自身的样式，比如前面的小圆点可以设置

无序列表（重点）

ul是无序列表标签，li是列表项标签<h4>您喜欢的食物是？</h4><ul><li>榴莲</li><li>臭豆腐</li><li>黄桃罐头</li></ul>

 有序列表（理解）

（1）有序列表注意事项：①有序列表中的列表项是有顺序之分的②ol标签里面只能放li标签，不能嵌套其他标签，但是li标签可以。例如：p标签不能都放在ol标签里面，但是可以放在li标签里面③有序列表会有自身的样式属性，我们会用CSS来设置

ol是有序列表标签，li是列表项标签<h4>您喜欢的运动？</h4><ol><li>散步</li><li>跑步</li><li>打球</li></ol>

自定义列表（重点）

（1）使用场景：用于对术语and名词的解释和描述，前面没有任何符号

（2）自定义标签注意事项：①dl标签只能包含dd和dt标签②dt和dd没有个数限制，一个dt可以对于多个dd

dl是自定义列表标签，dt表示项目名字标签（也就是老大）和dd表示每一个项目名字（也就是小弟）<dl><dt>关注我们</dt><dd>新浪微博</dd><dd>官方微信</dd><dd>联系我们</dd></dl>

6、表单标签

（1）表单的目的：为了收集用户信息，与用户进行交互

（2）表单的组成：表单域（表单的区域，将所有表单包含进去）、表单控件（每一个小方块or小按钮）和提示信息（方框or按钮之前的）三部分组成

表单域

（1）表单域是什么？是包含所有表单元素的区域，就是form标签

（2）定义表单域的标签：<form>，form标签会把它范围内的表单元素信息提交给服务器，来实现用户的信息的收集和传递

（3）form标签的属性：action，method，name。

action:提交给哪一个后台（接受表单数据的后台），method表单数据的提交方式，
    name指定表单的名字，区分同一页面重点多个表单

<h3>表单域,form标签,属性：action，method，name</h3><form action="demo.php" method="POST" name="name1">
<!-- action:提交给哪一个后台（接受表单数据的后台），method表单数据的提交方式，name指定表单的名字，区分同一页面重点多个表单 --></form>

表单控件（表单元素）

input输入表单元素

（1）input标签用于收集用户信息，里面包含一个type属性，根据不同的属性值可以是文本字段、复选框、按钮等

（2）input是单标签

（3）type属性设置不同的属性值，来指定不同的控件 

(4)input除了type属性还有其他属性：name=（用户自定义）；value=（用户自定义）checked=checked（默认勾选）；maxlength=正整数（输入字段的字符的最大长度）

(5)注意：①name和value是每个表单元素都有的属性值，主要是给后台人员使用②name表单元素的名字，要求单选按钮和复选按钮要有相同的name值

 <h3>input输入表单元素</h3><!-- action 提交到哪一个页面 --><form action="xxx.php" method="GET" ><!-- text  文本框 用户可以在里面输入任何文字 --><!-- 例如：用户名最大输入6个字符 -->用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"/><br><!-- password 密码框 用户看不见输入的密码 --> 密码：<input type="password" name="password" value="请输入密码" /><br><!--radio 单选按钮  实现多选一  --><!-- name 是表单元素的名字 这里性别单选按钮必须有相同的名字name，才可以实现多选一 --><!-- 当页面打开时，默认勾选，女 -->性别：<input type="radio" name="=sex" value="女" checked="checked" />女<input type="radio"name="=sex" value="男"/>男<br><!-- checkbox  复选框  实现多选 -->爱好：<input type="checkbox" name="hobby" value="吃饭"/>吃饭<input type="checkbox" name="hobby" value="睡觉"/>睡觉<input type="checkbox" name="hobby" value="打豆豆"/>打豆豆<br><!-- 按钮    --><!-- submit  提交按钮 可以把表单域form里面的表单元素 里面的值重新交给服务器 --><input type="submit" value="免费注册"/><!-- reset 重置按钮  可以还原为表单的初始or默认状态 --><input type="reset" value="重新填写"/><!-- button 普通按钮 后期与js一起搭配使用 --><input type="button" value="获取短信验证码"/>上传文件:<input type="file" /></form>

 label标签

（1）label标签的使用场景：例如:选择男女时，不用点击小圆圈，只要点击男就可以选择

（2）label标签的语法格式：

核心：label标签里的for属性和input标签里的id属性相同

<h3>label标签</h3><form action="xxx.php"><label for="text">用户名:</label><input type="text" id="text" /><br></form>

select下拉表单元素

（1）使用场景：出生日期；月份等

（2）语法规范：下拉标签：select ；选项标签：option（至少包含一对option）

<select >

        <option >1月</option>

        <option >2月</option>

        <option >3月</option>

    </select>

注意：①定义selected=selected：默认选定状态

           ②至少包含一对option

<h4>select下拉表单元素</h4>月份:<select ><option >1月</option><option selected="selected" >2月</option><option >3月</option><option >4月</option><option >5月</option><option >6月</option><option >7月</option><option >8月</option><option >9月</option><option >10月</option><option >11月</option><option >12月</option></select>

textarea文本域元素

（1）使用场景：VS文本框：只能写一行，而输入内容较多时，使用文本域标签（理解特大号的文本框）例如：留言板、评论，备注等

（2）语法格式：

        <textarea rows="4" cols="50">文本域:留言板</textarea>

<h4>textarea表单元素</h4><form action="">今日反馈:<!-- row 可以显示几行;cols 一行可以写多少个字 --><textarea rows="4" cols="50">文本域:留言板</textarea></form>

综合案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h4>青春不常在，抓紧谈恋爱</h4><table width="500"><!-- 第一行，共两列 --><tr><td>性别：</td><td><input type="radio" name ="sex" value="男"/>男<input type="radio" name ="sex" value="女"/>女<br></td>    </tr><!-- 第二行，共三列 --><tr><td>生日：</td><td><select ><option >--请选择年份--</option><option >2001</option><option >2002</option><option >2003</option></select><select ><option>--请选择月份--</option><option>1</option><option>2</option><option>3</option></select><select><option>--请选择日--</option><option>1</option><option>2</option><option>3</option></select></td></tr><!-- 第三行，共两列 --><tr><td>所在地区：</td><td><input type="text" name="address" value="北京思密达" /></td></tr><!-- 第四行，共三列 --><tr><td>婚姻状况：</td><td><input type="radio" name="marry" checked="checked" >未婚<input type="radio" name="marry" >已婚<input type="radio" name="marry"  >离婚</td></tr><tr><td>学历：</td><td><input type="text" name="学历" value="博士后"></td></tr><!-- 第五行，共两列 --><tr><td>喜欢的类型：</td><td><input type="checkbox" name="liketype" >妩媚的<input type="checkbox" name="liketype" >可爱的<input type="checkbox" name="liketype" >小鲜肉<input type="checkbox" name="liketype" >老腊肉<input type="checkbox" name="liketype" >都喜欢</td></tr><!-- 第六行 --><tr><td>自我介绍：</td><td><textarea >自我介绍</textarea></td></tr><!-- 第七行 --><tr><td></td><td><input type="submit" value="免费注册"></td></tr><tr><td></td><td><input type="checkbox" checked="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>
</html>

全文共计6651个字，历时两天，加油！下一个CSS