在 HTML 中，使用 table 标签创建一个表格。表格也是一个块级元素
<tr>表示表格中的一行，有几行就有几个 <tr> <td>在<tr>中需要使用 <td>来创建单元格，有几个单元格就创建几个 <td> <th>可以使用<th>标签来表示表头的内容，它的用法和 <td> 一样，不同的是有一个默认的样式，加粗并且居中
<body> <!-- table 表示一个表格--> <table> <!-- tr 代表一行 --> <tr> <!-- td 代表一列 --> <td>第一行第一列</td> <td>第一行第二列</td> <td>第一行第三列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> <td>第二行第三列</td> </tr> <tr> <td>第三行第一列</td> <td>第三行第二列</td> <td>第三行第三列</td> </tr> </table> </body>rowspan 跨行合并单元格
<body> <table border="1"> <tr> <td rowspan="2">我占2行</td> <td>第一行第二列</td> <td>第一行第三列</td> </tr> <tr> <td>第二行第二列</td> <td>第二行第三列</td> </tr> <tr> <td>第三行第一列</td> <td>第三行第二列</td> <td>第三行第三列</td> </tr> </table> </body>colspan 跨列合并单元格
<body> <table border="1"> <tr> <td colspan="2">我横跨2列</td> <td>第一行第三列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> <td>第二行第三列</td> </tr> <tr> <td>第三行第一列</td> <td>第三行第二列</td> <td>第三行第三列</td> </tr> </table> </body>border-spacing table 和 td 之间默认有一个距离，通过 border-spacing 属性可以设置这个距离.
例如： border-spacing:0px; 设置table和 td之间没有距离。
<style> table { border: 1px solid deeppink; border-spacing: 0; } td { border: 1px solid deeppink; } </style> <body> <table> <tr> <td>第一行第一列</td> <td>第一行第二列</td> <td>第一行第三列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> <td>第二行第三列</td> </tr> <tr> <td>第三行第一列</td> <td>第三行第二列</td> <td>第三行第三列</td> </tr> </table> </body>border-collapse可以用来设置用来设置表格的边框合并
可选值： collapse 表示合并注意：设置了 border-collapse 以后，则 border-spacing 自动失效。
<style> table { border: 1px solid deeppink; border-spacing: 0; /* 自动失效 */ border-collapse: collapse; } td { border: 1px solid deeppink; } </style>隔行变色的效果
<style> table { border: 1px solid deeppink; border-collapse: collapse; } td { border: 1px solid deeppink; } /* 设置偶数行背景颜色 */ tr:nth-child(even) { background: deepskyblue; } /* 设置奇数行背景颜色 */ tr:nth-child(even) { background: yellowgreen; } </style> <body> <table> <tr> <td>第一行第一列</td> <td>第一行第二列</td> <td>第一行第三列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> <td>第二行第三列</td> </tr> <tr> <td>第三行第一列</td> <td>第三行第二列</td> <td>第三行第三列</td> </tr> <tr> <td>第四行第一列</td> <td>第四行第二列</td> <td>第四行第三列</td> </tr> <tr> <td>第五行第一列</td> <td>第五行第二列</td> <td>第五行第三列</td> </tr> <tr> <td>第六行第一列</td> <td>第六行第二列</td> <td>第六行第三列</td> </tr> <tr> <td>第七行第一列</td> <td>第七行第二列</td> <td>第七行第三列</td> </tr> </table> </body>有一些情况下，表格非常的长。这时，就需要将表格分为3个部分【表头、主体、底部】。
在HTML中，提供了三个标签： <thead></thead> 中的内容永远会显示在表格的头部。 <tbody></tbody> 中的额内容永远都会显示在表格的中间。 <tfoot><tfoot> 中的内容永远都会显示在表格的底部。
这三个标签的作用就是用来区分表格的不同部分，他们都是table的子标签，都需要直接写到 table 中。 如果表格中没有写tbody 浏览器会自动在表格中添加 tbody，并且将所有的 tr放到 tbody 里边。 所以注意：tr 不是 table 的子元素，而是tbody的子元素。
<style> table { border: 1px solid deeppink; border-collapse: collapse; } td { border: 1px solid deeppink; text-align: center; /* 设置文字居中 */ } </style> <body> <table> <!-- 表头 --> <thead> <tr> <th colspan="4">编程语言</th> </tr> </thead> <!-- 表格主要内容 --> <tbody> <tr> <td>Java</td> <td>PHP</td> <td>Python</td> <td>web前端</td> </tr> <tr> <td>JavaScript</td> <td>Node.Js</td> <td>Vue.js</td> <td>React</td> </tr> </tbody> <!-- 底部 --> <tfoot> <tr> <td>世界上最优雅的语言是:</td> <td colspan="3">Python</td> </tr> </tfoot> </table> </body>以前表格更多的情况是对页面进行布局的，但是这种方式早已被CSS淘汰了。
表格的列数由td最多的那行决定。表格可以嵌套，可以在 td中再放置一个table表单的作用就是将用户的信息提交给远程服务器的。比如：注册、登录、百度的搜索框
使用 <form action="#"></form>标签创建一个表单，form 标签中必须指定一个 action 属性，该属性指向的是一个服务器的地址，当提交表单的时候，会提交到action属性所对应的地址。
如果希望表单项中的内容提交到服务器中，还必须给表单项指定一个 name 属性，表示提交内容的名字。
用户填写的信息会附在 URL 字符串的后边，以查询字符串的形式发送给服务器。 格式： url地址?属性名=属性值&属性名=属性值&...
使用<input />来创建一个文本框，<input /> 是一个行内块元素，可以通过 value 属性设置文本框的默认值。 例如：
<body> <form action="#"> <input type="text" name="user-name" value="这是文本框的默认值"> </form> </body>使用 <input /> 创建一个密码框，它的 type 属性值是 password 例如：
<body> <form action="#"> <input type="password" name="user-pwd" /> </form> </body>创建按钮有2中方式
使用 <input /> 标签来创建，它的 type 属性有三个值分别是botton 普通按钮、submit 提交按钮、reset重置按钮 <body> <form action="#"> <input type="button" value="普通按钮" /> <input type="submit" value="提交按钮" /> <input type="reset" value="重置按钮" /> </form> </body> 使用 <botton></botton>标签来创建， 它的 type 属性有三个值分别是botton 普通按钮、submit 提交按钮、reset重置按钮 <body> <form action="#"> <button type="button">普通按钮</button> <button type="submit">提交按钮</button> <button type="reset">重置按钮</button> </form> </body>使用 <input /> 来创建一个单选按钮，它的 type 属性值使用 radio
– 单选按钮通过 name 属性进行分组，name 属性相同的是一组按钮。 – 像这种用户选择的但不需要用户直接填写内容的表单项，还必须指定一个 value 属性，这样被选中的表单项的 value 值，将会被提交到服务器。
<body> <form action="#"> <input type="radio" name="gender" value="man"> 男 <input type="radio" name="gender" value="woman"> 女 </form> </body>使用 <input> 创建一个多选框，它的 type 属性使用 checkbox ，用法和 单选按钮类似。
<body> <form action="#"> <input type="checkbox" name="hobby" value="lq" />篮球 <input type="checkbox" name="hobby" value="zq" />篮球 <input type="checkbox" name="hobby" value="ppq" />乒乓球 </form> </body>使用 select 来创建一个下拉列表，在下拉列表中，使用 option 创建列表项。 下拉列表的 name 属性需要指定给 select，value属性指定给 option
<body> <form action="#"> <select name="star"> <option value="fbb">范冰冰</option> <option value="zbs">赵本山</option> <option value="fw">范伟</option> </select> </form> </body>可以通过在 option 中通过添加 selected = "selected"将选项设置为默认选中状态。
<body> <form action="#"> <select name="star"> <option value="fbb">范冰冰</option> <!-- 默认选中 赵本山 --> <option value="zbs" selected="selected">赵本山</option> <option value="fw">范伟</option> </select> </form> </body>当给下拉列表 select 添加一个 multiple="multiple" ，则下拉列表变为一个多选的下拉列表。
<body> <form action="#"> <select name="star" multiple="multiple"> <option value="fbb">范冰冰</option> <option value="zbs">赵本山</option> <option value="fw">范伟</option> </select> </form> </body>可以通过 optgroup对选项进行分组，同一个optgroup中的选项是一组。在optgroup中可以通过 lable 属性来指定分组的名字。
<body> <form action="#"> <select name="star"> <optgroup label="男孩"> <option value="zs">张三</option> <option value="ls">李四</option> <option value="ww">王五</option> </optgroup> <optgroup label="女孩"> <option value="zs">小红</option> <option value="ls">小兰</option> <option value="ww">小张</option> </optgroup> </select> </form> </body>使用 textarea 创建一个文本域。 cols 设置列数 rows 设置行数
<body> <form action="#"> <textarea name="test" cols="30" rows="10"></textarea> </form> </body><label></label> 标签专门用来选中表单中的提示文字。 该标签可以指定一个 for 属性，该属性的值需要指定一个表单项的 ID 值，这样再选中文字的时候可以选择相应的表单项。
<body> <form action="#"> <label for="lq"><input id="lq" type="checkbox" name="hobby" value="lq" />篮球</label> <label for="zq"><input id="zq" type="checkbox" name="hobby" value="zq" />足球</label> <label for="ppq"><input id="ppq" type="checkbox" name="hobby" value="ppq" />乒乓球</label> </form> </body>在表单中可以使用 <fieldset></fieldset> 来对表单项进行分组。可以将表单项中的同一组放到 <fieldset></fieldset> 中。 在<fieldset>中可以使用 <legend> 子标签来指定组名。
<body> <form action="#"> <fieldset> <legend>用户信息</legend> 用户名:<input type="text"> 密码:<input type="password"> </fieldset> <fieldset> <legend>爱好</legend> <label for="lq"><input id="lq" type="checkbox" name="hobby" value="lq" />篮球</label> <label for="zq"><input id="zq" type="checkbox" name="hobby" value="zq" />足球</label> <label for="ppq"><input id="ppq" type="checkbox" name="hobby" value="ppq" />乒乓球</label> </fieldset> <fieldset> <legend>提交</legend> <button type="submit">提交按钮</button> <button type="reset">重置按钮</button> <button type="button">普通按钮</button> </fieldset> </form> </body>