列表、表格、表单标签

一、列表

1.1、无序列表ul,li

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

    输出：

          

1.2、有序列表ol,li

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

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

     输出：

            

发现无序列表输出的元素前面都是小圆点，有序列表都是序号

1.3 自定义列表dl,dt,dd

  dl：定义自定义列表

  dt：定义自定义列表项

  dd：自定义列表项的内容

dl包裹dt，dt包裹dd

<dl>
  <dt>Coffee</dt>
    <dd>Black hot drink</dd>
  <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

  输出：

      

二、表格

table：定义表格

tr：定义表格的行

th：定义表格头内的单元格，在表头内tr包裹th标签

td：定义表格的单元格，表格其他地方tr包裹td标签

caption：表格的标题

thead：表格的页眉

tbody：表格的主体

tfoot：表格的页脚

<table border="1">                //表格默认不显示边框，加上border属性定义边框宽度
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

  显示：

      

带有页眉、页脚和主体部分的表格

<style type="text/css">
    thead {color:green;}
    tbody {color:blue;}
    tfoot {color:red;}
</style>

<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>
</table>

  显示：

        

  使用colspan和rowspan进行单元格的合并

<h4>单元格跨两列:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>单元格跨两行:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

  输出：

    

三、表单

  表单标签通常用于收集用户的输入内容，通过

标签设置表单标签，最常用的表单标签是单标签，通过input属性定义不同的输入类型。

3.1 input标签

1、文本域

   通过定义，定义了一个输入文本框

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

输出：

   

2、密码字段

  通过定义

3、单选

  通过定义

4、多选

  通过定义

5、提交按钮

  通过定义，用户点击确定按钮，将把输入框内容提交到表单动作属性(action)定义的目标文件里

<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.php对应的文件里

  输出：

         

6、普通按钮

  通过定义

3.2 fieldset/legend

   把一些表单元素分组，legend标签用于生成外部包裹边框

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
  </fieldset>
</form>

  输出：

3.3 select下拉标签

   内部用options标签表示下拉列表的每一项，select属性默认选中

<select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

3.4 label标签

   使用方法：通常和input标签一起使用，在input标签上定义id属性，label标签上设置for属性，其值与id属性相同，这样在点击label标签内的文本内容时，也可以触发input标签

<form action="demo_form.php">
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" value="female"><br><br>
  <input type="submit" value="提交">
</form>

输出：

     

点击相应的文字，后面的单选框就会选中，方便用户操作

3.5 textarea文本域标签

   他与input标签的text不同，这个可以通过自己定义行数和宽度，允许用户输入多行文本，而input只允许输入一行

   cols：定义宽度

   rows：定义行数

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

输出：