search

博客列表 >1209作业（列表、表格、表单）

1209作业（列表、表格、表单）

手机用户1576673622
手机用户1576673622原创
2020年12月19日 17:25:13530浏览

1.列表

作为容器使用可以放置任何类型的元素。
往往处理单列表格

  • 无序列表

    1.   <ul>
    2.       <li>牛奶</li>
    3.       <li>蛋糕</li>
    4.   </ul>

  • 有序列表

    1.   <ol start="7">
    2.       <li>牛奶</li>
    3.       <li>蛋糕</li>
    4.   </ol>

  • 自定义列表
    最常用的列表

    1.   <dl>
    2.       <dt>x姓名：</dt>
    3.       <dd>张三</dd>
    4.       <dt>性别：</dt>
    5.       <dd>男</dd>
    6.   </dl>

应用

  • 导航
    1.   <ul class="menu">
    2.       <li><a href="">首页</a></li>
    3.       <li><a href="">最热</a></li>
    4.       <li><a href="">排行榜</a></li>
    5.       <li><a href="">登录</a></li>
    6.   </ul>
  • 图文列表
    1.   <ul class="list">
    2.       <li>
    3.           <a href=""><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607949307789&di=376e2f5a51e5e85e844fa3ae4bb339d1&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2018-11-05%2F5bdfd64baf0fd.jpg" alt=""></a>
    4.           <a href="">2020l旅行回忆</a>
    5.       </li>
    6.   </ul>

2.表格

  • 基础

    1.   <!-- 表格标签：table thead tbody tr td/th-->
    2.   <table class="product">
    3.       <!-- 表格标题 -->
    4.       <caption>
    5.           信息表
    6.       </caption>
    7.       <!-- 表头。表头只能有一个，主体能有多个 -->
    8.       <thead>
    9.           <tr>
    10.               <th>id</th>
    11.               <th>姓名</th>
    12.               <th>性别</th>
    13.               <th>年龄</th>
    14.               <th>职业</th>
    15.               <th>地址</th>
    16.           </tr>
    17.       </thead>
    19.       <!-- 表格主体 -->
    20.       <tbody>
    21.       <!-- tr、td：单元格。划分行和列。所以数据都要填充到td/th其中。th有加粗、居中的效果。 -->
    22.           <tr>
    23.               <td>1</td>
    24.               <td>张三</td>
    25.               <td>男</td>
    26.               <td>33</td>
    27.               <td>工人</td>
    28.               <td>北京</td>
    29.           </tr>
    30.           <tr>
    31.               <td>2</td>
    32.               <td>李四</td>
    33.               <td>女</td>
    34.               <td>44</td>
    35.               <td>工人</td>
    36.               <td>上海</td>
    37.           </tr>
    38.       </tbody>
    39.   </table>
    41.   <p class="page">
    42.       <a href="">首页</a>
    43.       <a href="">...</a>
    44.       <a href="">7</a>
    45.       <a href="" class="active">8</a>
    46.       <a href="">9</a>
    47.       <a href="">尾页</a>
    48.   </p>

  • 行与列的合并
    colspan，合并。
    rowspan，列合并。

    1.   <table class="lesson">
    2.       <caption>我的课程表</caption>
    3.       <thead>
    4.           <tr>
    5.               <!-- 行合并：colspan -->
    6.               <th colspan="2"></th>
    7.               <!-- <th></th> -->
    8.               <th>星期一</th>
    9.               <th>星期二</th>
    10.               <th>星期三</th>
    11.               <th>星期四</th>
    12.               <th>星期五</th>
    13.           </tr>
    14.       </thead>
    15.       <tbody>
    16.           <tr>
    17.               <td rowspan="4">上午</td>
    18.               <td>1</td>
    19.               <td>语文</td>
    20.               <td>数学</td>
    21.               <td>体育</td>
    22.               <td>英语</td>
    23.               <td>休息</td>
    24.           </tr>
    25.           <tr>
    26.               <td>2</td>
    27.               <td>美术</td>
    28.               <td>物理</td>
    29.               <td>化学</td>
    30.               <td>体育</td>
    31.               <td>语文</td>
    32.           </tr>
    33.           <tr>
    34.               <td>3</td>
    35.               <td>美术</td>
    36.               <td>物理</td>
    37.               <td>化学</td>
    38.               <td>体育</td>
    39.               <td>语文</td>
    40.           </tr>
    41.           <tr>
    42.               <td>4</td>
    43.               <td>美术</td>
    44.               <td>物理</td>
    45.               <td>化学</td>
    46.               <td>体育</td>
    47.               <td>语文</td>
    48.           </tr>
    49.           <tr>
    50.               <td colspan="7">中午休息</td>
    51.           </tr>
    53.           <tr>
    54.               <!-- 列合并：rowspan -->
    55.               <td rowspan="3">上午</td>
    56.               <td>5</td>
    57.               <td>语文</td>
    58.               <td>数学</td>
    59.               <td>体育</td>
    60.               <td>英语</td>
    61.               <td>休息</td>
    62.           </tr>
    63.           <tr>
    64.               <td>6</td>
    65.               <td>美术</td>
    66.               <td>物理</td>
    67.               <td>化学</td>
    68.               <td>体育</td>
    69.               <td>语文</td>
    70.           </tr>
    71.           <tr>
    72.               <td>7</td>
    73.               <td>课外活动</td>
    74.               <td colspan="4">自行活动，自愿参加</td>
    75.           </tr>
    76.       </tbody>
    77.   </table>

3.表单

  • 文本框
    使用lable与input标签

    1.   <h3 class="title">用户注册</h3>
    2.   <!-- action:处理表单的程序 -->
    3.   <!-- method：表单提交类型 -->
    4.   <!-- 默认为GET：数据直接在URl地址中【网页地址】 -->
    5.   <!-- POST:表单的数据在请求体中 -->
    6.   <form action="" method="POST" class="register">
    8.       <!-- 单行文本框 -->
    9.       <label for="username">账号：</label>
    10.       <!-- type :控件类型 -->
    11.       <!-- name：数据的变量名   value：数据的内容 -->
    12.       <!-- 通用文本框 -->
    13.       <input type="text" id="usename" name="username" value="" placeholder="username" required> 
    14.       <!-- 邮箱文本框 -->
    15.       <label for="enmil">邮箱：</label>
    16.       <input type="emall" id="emall" name="emall" value="" placeholder="@emall.com" required>
    17.       <!-- 密码文本框 -->
    18.       <label for="password">邮箱：</label>
    19.       <input type="password" id="password" name="password" value="" placeholder="不少于6位" required>
    20.       <!--placeholder：提示。 required：必选 -->
    22.       <!-- 提交按钮 -->
    23.       <button>提交</button>
    24.   </form>

  • 单选按钮与复选框

    1.       <!-- 单选按钮与复选框 -->
    2.       <label for="secret">性别：</label>
    3.       <div>
    4.           <!-- 单选按钮必须用同一个name的属性值 -->
    5.           <input type="radio" name="gender" value="male" id="male"><label for="male">男</label>
    6.           <input type="radio" name="gender" value="female" id="female"><label for="female">女</label>
    7.           <input type="radio" name="gender" value="secret" id="secret" checked><label for="secret">隐藏</label>
    8.       </div>
    9.       <!--checked，默认值  -->
    11.       <!--for后面可随便填  -->
    12.       <label for="">兴趣</label>
    13.       <div>
    14.           <!-- 复选框的name值要写成数组的格式，这样服务器才能接受到一组值 -->
    15.           <input type="checkbox" name="hobby[]" value="game"><label for="">游戏</label>
    16.           <input type="checkbox" name="hobby[]" value="book" checked><label for="">读书</label>
    17.       </div>
  • 下拉列表/下拉框
    使用select标签和option
    1.       <label for="">学历</label>
    2.       <select name="edu" id="">
    3.           <option value="1">小学</option>
    4.           <option value="2">初中</option>
    5.           <option value="3">高中</option>
    6.           <option value="4">研究生</option>
    7.           <option value="5" label="老司机">博士</option>
    8.           <!-- label属性优先级高，国外常用 -->
    9.       </select>

  • 文件域与隐藏域

    1.       <!-- 1.请求类型必须是：post -->
    2.       <!-- 2.表单数据编码必须是 enctype="multipart/form-data" -->
    3.       <label for="user-pic">头像：</label>
    4.       <input type="hidden" name="MAX_FILE_SIZE" value="500000">
    5.       <input type="file" name="user_pic" id="user-pic" >
    7.       <label for="user-resume">简历：</label>
    8.       <!-- 隐藏域hidden，前端看不到，他的值供后端处理时用 -->
    9.       <input type="hidden" name="MAX_FILE_SIZE" value="5000000">
    10.       <input type="file" name="user_resume" id="user-resume" >
  • 文本域（多行文本框）
    使用特殊标签：textarea
    cols：列
    rows：行
    1.       <label for="comment">备注：</label>
    2.       <textarea name="comment" id="comment" cols="30" rows="5"></textarea>
  • form属性
    将控件与所属表单进行关联，可以写到其他地方，但不要这样做。
    1.   <form action="" id="register">
    2.       <p>用户名：<input type="text" form="register" name="username"></p>
    3.       <p>邮箱：<input type="text" form="register" name="emall"></p>
    4.       <p>秘密：<input type="password" form="register" name="password"></p>
    5.       <p><button>提交</button></p>
    6.   </form>
上一条：CSS选择器的优先级，提权以及CSS的属性简写下一条：box-sizing属性和元素居中方式
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多