Python-Web之前端基础介绍(下)

三.常用结构标签

1.列表标签-有序列表(ordered list)

默认使用阿拉伯数字标识每条数据
<ol>
    <li>list item 列表项</li>
    <li>list item 列表项</li>
    <li>list item 列表项</li>
</ol>

2.列表标签-无序列表(unordered list)

默认使用实心圆点标识列表项
<ul>
    <li>list item 列表项</li>
    <li>list item 列表项</li>
    <li>list item 列表项</li>
</ul>

3.列表嵌套

在已有列表中嵌套添加另一个列表,常见于下拉菜单
<ol>
    <li>
    西游记
        <ul>
            <li>孙悟空</li>
            <li>孙悟空</li>
            <li>孙悟空</li>
        </ul>
    </li>
</ol>

4.表格标签

表格由行和单元格组成,常用于直接的数据展示或辅助排版,基本结构如下
<!-- 创建表格标签 -->
<table>
    <!-- 创建行标签 -->
    <tr>
        <!-- 行中创建单元格以显示数据 -->
        <td>姓名</td>
        <td>年龄</td>
        <td>班级</td>
    </tr>
    <tr>
        <td>小白</td>
        <td>18</td>
        <td>001</td>
    </tr>
    <tr>
        <td>小黑</td>
        <td>20</td>
        <td>002</td>
    </tr>
</table>

5.单元格合并

用于调整表格结构,分为跨行合并和跨列合并,合并之后仍然保证表格结构完整
<table border="1px" width="300px" height="300px" align="center">
    <tr>
        <td colspan="3">星期1</td>
        <!--单元格合并之后删除多余的单元格-->
        <td>星期1</td>
        <td>星期1</td>
    </tr>
    <tr>
        <td rowspan="2">星期1</td>
        <td>星期1</td><td>星期1</td>
        <td>星期1</td>
        <td>星期1</td>
    </tr>
    <tr>
        <!--跨行合并,删除多余的单元格-->
        <td>星期1</td>
        <td>星期1</td>
        <td>星期1</td>
        <td>星期1</td>
    </tr>
</table>

6.行分组标签

可以将表格中的若干行划分为一组,表示表头,表尾及表格主体,默认在表格中创建的所有行都会被自动加入表格主体中
<table border="1px" width="300px" height="300px">
    <!--表头-->
    <thead>
        <tr>
        <!--th与td标签用法一致,表示单元格,自带加粗和居中效果-->
        <th>姓名</th>
        <th>年龄</th>
        <th>班级</th>
        </tr>
    </thead>
    <!--表尾-->
    <tfoot>
        <tr>
            <td colspan="3">小计</td>
        </tr>
    </tfoot>
    <!--表主体-->
    <tbody>
        <tr>
            <td>小红</td>
            <td>18</td>
            <td>001</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>18</td>
            <td>001</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>18</td>
            <td>001</td>
        </tr>
    </tbody>
</table>

7.表单标签

• 表单用于采集用户的信息并提交给服务器,由表单元素和表单控件组成。表单元素form负责提交数据给服务器,表单控件负责收集数据。

• 表单使用

  属性名	取值
  action	设置数据的提交地址
  method	设置数据的提交方式,默认为get方式,可以设置为post
  enctype	设置数据的编码类型,涉及二进制数据提交(例如图片,文件,音视频等),必须设置数据的提交方式为post,编码类型为"multipart/form-data"

  例如:
  <form action="" method="" enctype="">
      <!--此处为表单控件-->
  </form>
  

• 表单控件使用(重点)
  表单控件用于采集用户信息,可设置以下标签属性

  属性名	取值
  type	设置控件类型
  name	设置控件名称
  value	设置控件的值
  placeholder	设置输入框中的提示文本
  maxlength	设置输入框中可输入的最大字符数
  checked	设置单选按钮或复选按钮的默认选中
  selected	设置下拉菜单的默认选中

  使用:
  <form action="login" method="post" enctype="">
      <p>
          普通文本框text:
          <input type="text" name="username" placeholder="用户名由数字和字母组成" maxlength="10">
      </p>
      <p>
          密码框password:
          <input type="password" placeholder="请输入密码">
      </p>
      <p>
          <!--一组按钮的控件名称必须保持一致-->
          单选按钮radio:
          <input id="male" type="radio" name="gender" value="male" checked>
          <label for="male">男</label>
          <!--"label for id"实现文本与控件的绑定-->
          <input type="radio" name="gender" value="female">女
      </p>
      <p>
          复选按钮checkbox:
          <input type="checkbox" name="hobby" value="smoke" checked>吃饭
          <input type="checkbox" name="hobby" value="drink">喝酒
          <input type="checkbox" name="hobby" value="study">学习
      </p>
      <p>
          文件选择框file:
          <input type="file" name="uimg">
      </p>
      <p>
          下拉菜单select:
          <select name="province">
              <option value="beijing" selected>北京</option>
              <option value="shanghai">上海</option>
              <option value="guangzhou">广州</option>
              <option value="shenzhen">深圳</option>
          </select>
      </p>
      <p>
          多行文本域:
          <textarea name="uinfo"></textarea>
      </p>
      <p>
          <!--功能按钮-->
          <input type="submit" value="注册">
          <input type="reset" value="刷新">
          <input type="button" value="登录">
          <button>表单内等价于submit</button>
      </p>
  </form>