DAY4

表格标签

HTML中的表格用于展示数据，不能用于布局。

创建表格三大必要标签：table、tr、td.

table：定义表格。

tr：定义表格中的行，嵌套在table中。

td：定义表格中的单元格，嵌套在tr中。td里面存放表格的数据。

th：表示表格的表头，用来指明该列的属性含义。

<table border="1" width="200px" align="center" cellpadding="5px" cellspacing="0">
<tr>
    <th>姓名</th>
    <th>性别</th>
    <th>班级</th>
</tr>
<tr>
    <td>amy</td>
    <td>女</td>
    <td>0701</td>
</tr>
    <td>john</td>
    <td>男</td>
    <td>0702</td>
</tr>
<tr>
    <td>kiki</td>
    <td>女</td>
    <td>0703</td>
</tr>
</table>

table的属性：

表格结构标签

当表格比较复杂，内容比较多的时候，为了更清楚表示表格，可以将表格分割为表格头部、表格主题、表格题注，分别用thead、tbody、tfoot表示

thead：用于定义表格头部，thead内部必须拥有tr标签。 tbody：用于定义表格的主体，里面放数据。

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  

tfoot标签必须被用在以下情境中：作为table元素的子元素，出现在caption、colgroup 和 thead元素之后，tbody和tr元素之前。

合并单元格

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

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

<table border="2" width="200px" cellpadding="20px" cellspacing="0px">
    <tr>
        <td colspan="2"></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
       <td rowspan="2"></td>
    </tr>
    <tr>
        <td></td>
        <td></td> 
    </tr>
   </table>

列表标签

列表就是用来布局的。

列表有三种，无序列表（ul）、有序列表（ol）和自定义列表（dl）。

无序列表

无序列表用ul表示，ul里用li表示列表项。无序列表各个列表项之间没有顺序级别之分，是并列的。ul里只能放li，不能放其他标签或文字。li相当于一个容器，可以容纳所有元素。

<ul>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
   </ul>

有序列表

有序列表用ol定义，列表排序会以数字来显示，ol里嵌套li作为列表项。

<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
   </ol>

ol还有其他属性：

reverse： 当属性值是"reversed"时，可让有序列表中的列表倒序排序。

start：有序列表序列号起点，比如当属性值为3，则输出的序列号从3开始，然后是4，5....

自定义列表

自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。用dl标签来定义自定义列表，该标签与dt（定义项目名/术语）和dd（定义项目内容/术语解释）一起使用。dl里面只能包含dt和dd，dt和dd没有个数限制，一个dt对应多个dd。

 <dl>
    <dt>广东省</dt>
    <dd>佛山市</dd>
    <dd>广州市</dd>
    <dd>肇庆市</dd>
    <dd>清远市</dd>

    <dt>湖南省</dt>
    <dd>邵阳市</dd>
    <dd>怀化市</dd>
    <dd>长沙市</dd>
    <dd>株洲市</dd>
   </dl>

表单

在网页交互时，需要收集用户信息，就可以用表单。一个完整的表单通常由表单域、表单控件和提示信息三个部分组成。

表单域

在HTML中，form用于定义表单域，以实现用户信息的收集和传递。form会将它范围内的表单元素提交给服务器。

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

form常用属性：

• post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。
• get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等。例如：www.runoob.com/?page=1， 这里的 page=1 就是 get 方法提交的数据。

表单控件（表单元素）

input表单控件

input标签用于收集用户信息。在该标签里包含一个type属性值，不同type属性值用来指定不同的控件类型。input为单标签。

<input type="属性值" />

input其他属性·：

下面讲一下属性name、value、checked的用法。

name

name 属性用于对提交到服务器后的表单数据进行标识，后台就是通过name属性值找到相应表单的。 在radio单选框中，用name将不同radio按钮分为一组就可以实现在一组radio中多选一的效果。

 <input type="radio" name="sex">男
 <input type="radio" name="sex">女

效果如图，“男”和“女”单选按钮都有相同的name值，操作时只能二选一。

value

value 属性对于不同 input 类型，用法也不同：

对于 "button"、"reset"、"submit" 类型：定义按钮上的文本。

对于 "text"、"password"类型：定义输入字段的初始（默认）值。

对于 "checkbox"、"radio"、"image" 类型：定义与 input 元素相关的值，当提交表单时该值会发送到表单的 action URL。

注意：value 属性对于"checkbox"和"radio"是必需的。value 属性不适用于"file"。

<input type="button" value="按钮">
<input type="submit"value="提交">
<input type="reset" value="重置">
<br>
<input type="text" value="这是个文本框">
<input type="password" value="这是个密码框">
<br>
<input type="checkbox" value="复选框">
<input type="radio" value="单选框">
<input type="image" value="111111">

label表单控件

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

<input type="radio" value="单选框"id="sex">
<label for="sex">男</label>

select表单控件

当有多个选项让用户选择，为了节约空间，可以用select标签控件定义下拉列表。

<select>  
    
  <option>选项1</option>  
  <option>选项2</option>  
  <option>选项3</option>  
  ...  
</select>

在option中定义selected="selected",即设当前项为默认选中项。

textarea表单控件

通过textarea可以创建多行输入的文本框。

<textarea cols="30" rows="10">
     文本内容
</textarea>

cols表示每行的字符数，rows表示文本框的行数。 在实际开发中，我们并不会这两个属性设置行列，而是使用css来改变文本框大小。