HTML5(4)__H5基本语法(下)

14：表格标签 

HTML 表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。


1 没有边框的表格：
<h4>这个表格没有边框:</h4>
<table>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>


<h4>这个表格没有边框:</h4>
<table border="0">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>


 


2 跨行或者跨列的表格单元格
<table border="1">
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>张三</td>
  <td>1388888888</td>
  </tr>
</table>


<h4>单元格跨两列:</h4>  
<table border="1">
<tr>
  <th>Name</th>
  <td>张三</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>1388888888</td>
</tr>
</table>


3 表格内的一些标签的使用
<table border="1">
<tr>
  <td>
   <p>这是一个段落</p>
   <p>这是另一个段落</p>
  </td>
  <td>这个单元格包含一个表格:
   <table border="1">
   <tr>
     <td>A</td>
     <td>B</td>
   </tr>
   <tr>
     <td>C</td>
     <td>D</td>
   </tr>
   </table>
  </td>
</tr>
<tr>
<td>这个单元格包含一个列表
   <ul>
    <li>apples</li>
    <li>bananas</li>
    <li>pineapples</li>

   </ul>

一个小示例:

<h1 align="center">培训人员名单</h1>
<table border="1" align="center">
<tr>
<td height="30" width="50">阶段</td>
<td height="30" width="50">姓名</td>
<td height="30" width="50">性别</td>
<td style=" width:80px; height:30px">出生年月</td>
<td style=" width:50px; height:30px">学历</td>
<td style=" width:50px; height:30px">专业</td>


</tr>
<tr>
<td rowspan="2">初级</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td rowspan="3">高级</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

15：表单 form

HTML 表单用于搜集不同类型的用户输入。表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 <form> 来设置:




HTML 表单 - 输入元素
多数情况下被用到的表单标签是输入标签（<input>）。
输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>


密码字段
密码字段通过标签<input type="password"> 来定义:
<form>
Password: <input type="password" name="pwd">
</form>


单选按钮（Radio Buttons）
<input type="radio"> 标签定义了表单单选框选项
<form>
<input type="radio" name="sex" value="male" >Male<br>
<input type="radio" name="sex" value="female">Female
</form>


复选框（Checkboxes）
<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>


提交按钮(Submit Button)
<input type="submit"> 定义了提交按钮.
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>


下拉列表： HTML 页面中创建简单的下拉列表框。下拉列表框是一个可选列表。
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

预选状态的下拉列表
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>


文本域
<textarea rows="10" cols="30">
我是一个文本框。
</textarea>


按钮
<form action="">
<input type="button" value="Hello world!">
</form>

相应的例子的展示:

<form action="demo-form.php">
  姓名：
  <input type="text" name="name" value="哈哈">
  <br>
  年龄：
  <input type="text" name="age" value="18">
  <br>
  <input type="submit" value="提交">
</form>

<form action="demo-form.php" method="get">
  <input type="checkbox" name="eat" value="烤肉">
 走，去吃烤肉<br>
  <input type="checkbox" name="eat" value="火锅" checked="checked">
 火锅走起<br>
  <input type="submit" value="提交">
</form>

<form action="demo-form.php" method="get">
  <input type="radio" name="sex" value="Male"> 男<br>
  <input type="radio" name="sex" value="Female" checked="checked"> 女<br>
  <input type="submit" value="提交">
</form>

<form action="MAILTO:someone@example.com" method="post" >
  姓名:<br>
  <input type="text" name="name" value="your name">
  <br>
  E-mail:<br>
  <input type="text" name="mail" value="your email">
  <br>
  内容:<br>
  <input type="text" name="comment" value="your comment" size="50">
  <br>
  <br>
  <input type="submit" value="发送">
  <input type="reset" value="重置">
</form>