HTML---基础篇

html文档编辑

1.表单制作

表单里面有两个属性是必须的：action 提交到后台；method提交方式，默认是get方式，但是提交的数据会显示在提交栏上不安全，一般使用post方式，底层是以流的形式提交的。<form action="" method="post"></form>

代码区：

<label for="mz">姓名：</label><input type="text" name="username" value="" placeholder="请输入你的用户名" id="mz"/><br>
 密码：<input type="password" name="mima" placeholder="请输入密码"/><br>
 <!-- 单选按钮注意实现，单选按钮指的是一次只能选择一个 那要实现这种效果 多个单选按钮的name属性值必须一样 -->
 性别：<label for="nan">男</label> <input type="radio" name="sex" id="nan" value="0"/> <input type="radio" name="sex" value="1"/>女 <input type="radio" name="sex" value="2"/>妖<br>
 爱好：
 <!-- 复选框 的name 属性值 也要一样 checked="checked" 默认选中-->
 <input type="checkbox" name="hobby" checked="checked" id="pb" value="paobu"/><label for="pb">跑步</label>
 <input type="checkbox" name="hobby" checked="checked" value="qixing"/>骑行
 <input type="checkbox" name="hobby" checked="checked" value="lvyou"/>旅游
 <br>
 学历：
 <!--  selected默认选中项 name 和 value 属性必须要有-->
 <select name="xueli">
  <option>---请选择学历--</option>
  <option value="youeryuan">---幼儿园--</option>
  <option value="xiaoxue">---小学--</option>
  <option value="chuzhong">---初中--</option>
  <option value="gz">---高中--</option>
  <option value="dx" selected>---大学--</option>
 </select>
 <br>
 个人描述：<textarea rows=10 cols=50 name="ms">请简单描述一下你的个人特点</textarea>
 <br>
 图像：<input type="file" name="photo"/><br>
 <input type="submit" value="提交"/>
 <input type="reset" value="重置"/>

   这是一份一份完整的表单，但是，排列不整齐。我们可以用table表格使其排列整齐

代码区：

<table width="60%" height="60%" border="1" cellspacing="0" align="center" bgcolor="aquamarine" bordercolor="blue">
    <caption>
     <h1>用户信息表</h1></caption>
    <tr>
     <td>用户名：</td>
     <td><input type="text" name="username" value="" placeholder="请输入用户名" /></td>
    </tr>
    <tr>
     <td>密码：</td>
     <td><input type="password" name="pwd" placeholder="请输入密码" /></td>
    </tr>

这样排列下来，表单就会对其，而且可以设置表单的位置，运用学过的table知识，美化表单。

2.合并单元格

      当我们需要合并单元格时，可以讲table中的两个或者多个单元格合并，来达到自己想要的表单。

代码区：

<tr>
     <td colspan="2" align="center">
      <input type="submit" value="提交"/>&nbsp;&nbsp;&nbsp;<input type="reset" value="重置"/>
     </td>

</tr>

colspan=?,?表示合并单元格的数量，colspan 合并横向单元格，rowspan合并纵向的单元格。特别注意的是，合并单元格后，会删除相应的单元格