编程►web

html基础(二)

列表

无须列表

无序列表是一个项目的列表，此列项目使用粗体圆点(典型的小黑圆圈)进行标记。
无序列表始于<ul>标签。每个列表项始于<li>。

1
2
3
4
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

显示结果如下

  • Coffee

  • Milk


    • 列表项内部也可以使用换行符、图片、链接及其他列表等。

    有序列表

    有序列表也是一列项目，列表项目使用数字进行标记。
    有序列表始于ol标签。每个列表项始于li标签。

    1
    2
    3
    4
    <ol>
    <li>Coffee</li>
    <li>Milk</li>
    </ol>

    显示结果如下

    1. Coffee

    2. Milk


      3. 列表项内部也可以使用换行符、图片、链接及其他列表等。

      自定义列表

      自定义列表以<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始。

      1
      2
      3
      4
      5
      6
      <dl>
      <dt>Coffee</dt>
      <dd>Black hot drink</dd>
      <dt>Milk</dt>
      <dd>White cold drink</dd>
      </dl>

      显示结果如下

      Coffee

      Black hot drink

      Milk

      White cold drink


      定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

      表格

      表格由<table>标签定义。每个表格均有若干行(由<tr>标签定义)，每行被分割为若干单元格(由<td>标签定义)。
      单元格可以包含文本、图片、表格等。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      <table>
      <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>

      显示如下










      row 1, cell 1row 1, cell 2
      row 2, cell 1row 2, cell 2

      其他属性

      • 显示边框使用border属性。
      • 表头使用<th>标签定义。
      • 合并行使用rowspan。
      • 和并列使用colspan。
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      <table border="1">
      <tr>
      <th>姓名</th>
      <th colspan="2">电话</th>
      </tr>
      <tr>
      <td>Bill Gates</td>
      <td>55577854</td>
      <td>55577855</td>
      </tr>
      </table>
      <table border="1">
      <tr>
        <th>姓名</th>
        <td>Bill Gates</td>
      </tr>
      <tr>
        <th rowspan="2">电话</th>
        <td>55577854</td>
      </tr>
      <tr>
        <td>55577855</td>
      </tr>
      </table>

      显示如下
      列合并











      姓名电话
      Bill Gates5557785455577855

      行合并












      姓名 Bill Gates
      电话 55577854
      55577855

      表单

      HTML表单用于搜集不同用户类型的用户输入。使用<form>定义HTML表单。

      1
      2
      3
      <form>
      form elements
      </form>

      表单中包括的元素有input元素 复选框 单选按钮 提交按钮等。

      • input元素
        <input>元素根据不同的type属性，有很多形态。
        <input type="text">定义用于文本输入的单行输入字段。
        <input type="radio">定义单选按钮，允许用户在有限数量的选项中选择其中之一。
        <select>定义下拉列表，option定义具体列表项，size表示下拉列表可见项的数目。
        <input type="submit">定义用于向表单处理程序提交表单的按钮。通常包含用来处理输入数据的脚本的服务器页面。处理程序在表单的action属性中指定。 
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        <form action="action_page.php">
        First name:<br>
        <input type="text" name="firstname" value="Mickey">
        <br>
        Last name:<br>
        <input type="text" name="lastname" value="Mouse">
        <br>
        Gender:<br>
        <input type="radio" name="sex" value="male" checked>Male
        <br>
        <input type="radio" name="sex" value="female">Female
        <br>
        Education:<br>
        <select name="list" size="3">
        <option>postgraduate</option>
        <option>undergraduate</option>
        <option>junior college student</option>
        <option>technical secondary school</option>
        </select>
        <br>
        <input type="submit" value="Submit">
        </form>

      显示如下


      First name:




      Last name:




      Gender:

      Male


      Female


      Education:





      Recommended Posts