search

博客列表 >列表,表格,表单与框架

列表,表格,表单与框架

Jason药师
Jason药师原创
2020年12月12日 07:32:00638浏览

1、列表元素

1.1、无序列表

  • 无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
  • 无序列表始于 <ul> 标签。每个列表项始于 <li>
  • 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
  1. <ul>
  2.     <li>苹果</li>
  3.     <li>西瓜</li>
  4.     <li>香蕉</li>
  5. </ul>
  • 苹果
  • 西瓜
  • 香蕉

1.2、有序列表

  • 同样，有序列表也是一列项目，列表项目使用数字进行标记。
  • 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
  • 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
  1. <ol>
  2.     <li>苹果</li>
  3.     <li>西瓜</li>
  4.     <li>香蕉</li>
  5. </ol>

1、苹果
2、西瓜
3、香蕉

1.3、自定义列表

  • 自定义列表不仅仅是一列项目，而是项目及其注释的组合。
  • 自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
  • 定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
  1. <dl>
  2.     <dt>名称:</dt>
  3.     <dd>php中文网</dd>
  4.     <dt>地址:</dt>
  5.     <dd>合肥市政务新区置地广场</dd>
  6.     <dt>联系</dt>
  7.     <dd>电话: <a href="tel:1895****123">1895****123</a></dd>
  8. </dl>
  • 名称：
    • PHP中文网
  • 地址：
    • 合肥市政务新区置地广场
  • 联系：
    • 电话：1895**123

1.4、应用1：导航

  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.     <li><a href="">登录</a></li>
  7. </ul>

1.5、应用2：图文列表

  1. <ul class="list">
  2.       <li>
  3.         <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d24289c99b05106.jpg" alt="" /></a>
  4.         <a href="">web前端开发极速入门</a>
  5.       </li>
  6.       <li>
  7.         <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d24289c99b05106.jpg" alt="" /></a>
  8.         <a href="">web前端开发极速入门</a>
  9.       </li>
  10.       <li>
  11.         <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d24289c99b05106.jpg" alt="" /></a>
  12.         <a href="">web前端开发极速入门</a>
  13.       </li>
  14. </ul>

2、表格

  • 表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。
  • 字母 td 指表格数据（table data），即数据单元格的内容。
  • 数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
  • 表格也是用一组标签来描述:table,thead,tbody,tr,td/th
  • 所有的数据必须填充到td /th中, th是td的PLus+,自带了一个加粗和居中的样式
  1. <table class="product">
  2.       <!-- 表格标题 -->
  3.       <caption>
  4.         商品信息表
  5.       </caption>
  6.       <!-- 表头 -->
  7.       <thead>
  8.         <!-- 每添加一组表格数据,必须先添加一行 -->
  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>
  18.       <!-- 表格的主体,一个表格可以有多个主体,但只能有一个表头 -->
  19.       <tbody>
  20.         <tr>
  21.           <td>a100</td>
  22.           <td>手机</td>
  23.           <td>9999</td>
  24.           <td>部</td>
  25.           <td>1</td>
  26.           <td>9999</td>
  27.         </tr>
  28.         <tr>
  29.           <td>A102</td>
  30.           <td>电脑</td>
  31.           <td>19999</td>
  32.           <td>台</td>
  33.           <td>2</td>
  34.           <td>39998</td>
  35.         </tr>
  36.         <tr>
  37.           <td>A103</td>
  38.           <td>汽车</td>
  39.           <td>50000</td>
  40.           <td>台</td>
  41.           <td>1</td>
  42.           <td>100000</td>
  43.         </tr>
  44.       </tbody>
  45.       <tbody>
  46.         <tr>
  47.           <td>B201</td>
  48.           <td>猪肉</td>
  49.           <td>30</td>
  50.           <td>斤</td>
  51.           <td>10</td>
  52.           <td>300</td>
  53.         </tr>
  54.         <tr>
  55.           <td>B303</td>
  56.           <td>水杯</td>
  57.           <td>50</td>
  58.           <td>只</td>
  59.           <td>5</td>
  60.           <td>250</td>
  61.         </tr>
  62.         <tr>
  63.           <td>C404</td>
  64.           <td>住宅</td>
  65.           <td>2500000</td>
  66.           <td>套</td>
  67.           <td>2</td>
  68.           <td>5000000</td>
  69.         </tr>
  70.       </tbody>
  71. </table>

应用：课程表

  • rowspan 属性 是规定单元格可合并的行数。
  • colspan 属性 是规定单元格可合并的列数。
  1. <table class="lesson">
  2.       <caption>
  3.         小学课程表
  4.       </caption>
  5.       <thead>
  6.         <tr>
  7.           <th colspan="2"></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 class="rest">
  50.           <td colspan="7">中午休息</td>
  51.         </tr>
  53.         <tr>
  54.           <td rowspan="3">上午</td>
  55.           <td>5</td>
  56.           <td>数学</td>
  57.           <td>语文</td>
  58.           <td>语文</td>
  59.           <td>语文</td>
  60.           <td>数学</td>
  61.         </tr>
  62.         <tr>
  63.           <td>6</td>
  64.           <td>语文</td>
  65.           <td>语文</td>
  66.           <td>音乐</td>
  67.           <td>科学</td>
  68.           <td>美术</td>
  69.         </tr>
  70.         <tr>
  71.           <td>7</td>
  72.           <td>课外活动:</td>
  73.           <td colspan="4">各班自行组织,自愿参加</td>
  74.         </tr>
  75.       </tbody>
  76.     </table>

3、表单\<form>

  • 表单是一个包含表单元素的区域。
  • 表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
  • 表单使用表单标签 \<form> 来设置
  • form标签中有两个属性：action属性是处理表单的脚本程序（通常在服务器上），method属性是表单提交类型。
  • method的属性值有两种类型：默认的GET类型（数据直接放在url地址中）明文模式，POST类型（表单数据在请求体中）加密模式。
  • \<input> 元素有很多形态，根据不同的 type 属性有：文本类型、邮件类型、密码类型、单选框、多选框、文件类型等。
  • \<label>和\<input>相关联是通过：label标签的for属性值与input标签的id属性值设置成同一个单词，进行关联！
  • 下拉课表/下拉框是由\<select>与\<option>组合而成
  1. <h3 class="title">用户注册</h3>
  2.   <!-- action: 处理表单的程序 -->
  3.   <!-- method:表单提交类型 -->
  4.   <!-- 默认为GET: 数据直接放在url地址中 -->
  5.   <!-- POST: 表单的数据在请头体中 -->
  6.   <!-- demo4.html?username=admin&email=admin%40php.cn&password=123456 -->
  7. <form action="" method="POST" class="register" enctype="multipart/form-data">
  8.      <!-- 1. 单行文本框 -->
  9.    <label for="username">帐号:</label>
  10.      <!-- type: 控件类型 -->
  11.      <!-- name: 数据的变量名 -->
  12.      <!-- value: 数据的内容 -->
  13.    <input type="text" id="username" name="username" value="" placeholder="username" required />
  14.       <!-- type="text"这是通用文本框,还有一些专用的 -->
  15.       <!-- 邮箱型文本框 -->
  16.    <label for="email">邮箱:</label>
  17.    <input type="email" id="email" name="email" value="" required placeholder="demo@email.com" />
  18.       <!-- 密码型文本框/非明文 -->
  19.    <label for="password">密码:</label>
  20.    <input type="password" id="password" name="password" value="" required placeholder="不少于6位" />
  22.       <!-- 2. 单选按钮与复选框 -->
  23.    <label for="secret">性别:</label>
  24.   <div>
  25.         <!-- 一组单选按钮必须共用同一个名称的name属性值，否则无法实现值的唯一性 -->
  26.     <input type="radio" name="gender" value="male" id="male" /><label for="male">男</label>
  27.     <input type="radio" name="gender" value="female" id="female" /><label for="female">女</label>
  28.     <input type="radio" name="gender" value="secret" id="secret" checked /><label for="secret">保密</label>
  29.   </div>
  31.   <label for="#">兴趣:</label>
  32.   <div>
  33.         <!-- 复选框的name属性值应该写与数组的格式名称,这样才确保服务器可以接收到一组值 -->
  34.     <input type="checkbox" name="hobby[]" value="game" id="game" checked /> <label for="game">游戏</label>
  35.     <input type="checkbox" name="hobby[]" value="shoot" id="shoot" /> <label for="shoot">摄影</label>
  36.     <input type="checkbox" name="hobby[]" value="travel" id="travel" /> <label for="travel">旅游</label>
  37.     <input type="checkbox" name="hobby[]" value="program" id="program" checked /> <label for="program">编程</label>
  38.   </div>
  40.       <!-- 3. 下拉列表/下拉框 -->
  42.   <label for="edu">学历:</label>
  43.       <!-- <select name="edu" id="edu" multiple size="2"></select> -->
  44.   <select name="edu" id="edu">
  45.     <option value="1">初中</option>
  46.     <option value="2">高中</option>
  47.     <option value="3" selected>本科</option>
  48.     <option value="4">研究生</option>
  49.         <!-- label属性的优先级大于option内部的文本 -->
  50.         <!-- <option value="5" label="老司机">自学成长</option> -->
  51.   </select>
  53.       <!-- 4. 文件域与隐藏域 -->
  54.       <!-- 上传文件要注意二点:
  55.       1. 请求类型必须是: POST 
  56.       2. 将表单数据编码设置为:  -->
  57.   <label for="user-pic">头像:</label>
  58.       <!-- 隐藏域,在前端页面看不到的,它的值供后端处理时用 -->
  59.   <input type="hidden" name="MAX_FILE_SIZE" value="80000" />
  60.   <input type="file" name="user_pic" id="user-pic" />
  61.       <!-- 头像占位符 -->
  62.   <div class="user-pic" style="grid-column: span 2"></div>
  64.   <label for="user-resume">简历:</label>
  65.       <!-- 隐藏域,在前端页面看不到的,它的值供后端处理时用 -->
  66.   <input type="hidden" name="MAX_FILE_SIZE" value="100000" />
  67.   <input type="file" name="user_resume" id="user-resume" />
  68.       <!-- 简历占位符 -->
  69.   <div class="user-resume" style="grid-column: span 2"></div>
  71.       <!-- 5. 文本域 -->
  72.   <label for="comment">备注:</label>
  73.   <textarea name="comment" id="comment" cols="30" rows="5"></textarea>
  75.       <!-- 提交按钮 -->
  76.   <button>提交</button>
  77. </form>
上一条：PHP(多)文件上传实现和函数封装下一条：1211-自测题
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多