3. HTML5常用标签二

重点

1. 列表
2. 表格

3. 表单

   1、列表

   列表主要分为无序列表和有序列表

   无序列表

   无序列表是一列项目，列表没有排序，无序列表始于<ul>标签。每个列表项始于<li>标签。

   <ul>
   <li>Coffee</li>
   <li>Milk</li>
   </ul>

   <ul>拥有type属性：

4. disc默认实心圆

5. circle空心圆
6. square小方块

7. none不显示

   有序列表

   同样，有序列表也是一列项目，列表项目为有序列表。有序列表始于<ol>标签。每个列表项始于<li>标签

   <ol>
   <li>Coffee</li>
   <li>Milk</li>
   </ol>

   也拥有type属性的选项：

   1. 1表示数字标号（1,2,3）

   2. a表示小字母标号（a,b,c）
   3. A表示大字母标号（A,B,C）
   4. i表示小写罗马数字标号（i.ii.iii）
   5. I表示大写罗马数字标号（I,II,III）

      2、表格

      表格在数据展示方面非常简单，并且表现优秀，通过与css的结合，可以让数据变得更加美观和整齐。

      行、列、单元格组成，单元格特点：同行等高，同列等宽。

   

   表格的基本用法

   

   <table border="1px" width="300px">
     <tr>
       <td>11</td>
       <td>12</td>
       <td>13</td>
     </tr>
     <tr>
       <td>21</td>
       <td>22</td>
       <td>23</td>
     </tr>
     <tr>
       <td>31</td>
       <td>32</td>
       <td>33</td>
     </tr>
   </table>

   合并单元格

   水平合并：colspan属性
   
   垂直合并：rowspan属性
   

   3、表单

   表单在web网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能。
   所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。
   一个表单一般应该包含用户填写信息的输入框，提交按钮等，这些输入框，按钮叫做控件，表单很像容器，它能够容纳各种各样的控件。
   一个完整的表单包含三个基本组成部分：表单标签，表单域，表单按钮。

   1. 表单标签 是指
      标签本身，它是⼀个包含表单元素的区域，使⽤
      定义
   2. 表单域 是
      标签中⽤来收集⽤户输⼊的每⼀项，通常⽤标签来定义，标签有不同的类型，对应⽤户不同的数据。（⽐如：⽂本域、下拉列表、单选框、复选框等等）
   3. 表单按钮 ⽤来提交表单中的所有信息到服务器

      表单域

      <input type="text" name="firstname">

      <input type="password" name="pwd">

      <form>
       <input type="radio" name="sex" value="male">Male
       <input type="radio" name="sex" value="female">Female
      </form>

      <form>
       <input type="checkbox" name="vehicle" value="Bike">I have a bike
       <input type="checkbox" name="vehicle" value="Car">I have a car 
      </form>

      <input type="file" name="file">

      label

      <label>标签为input元素定义标注（标记）。
      label元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在label元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

      提示：”for” 属性可把label绑定到另一个元素。请把 “for” 属性的值设置为相关元素的id属性的值。