列表,表格,表单与框架 - PHP学习

Home > List of blog posts > 列表,表格,表单与框架

Blogger Information

Blog 5

fans 0

comment 0

visits 3455

Special Recommendation

More>

Related recommendations

1、列表元素

1.1、无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于 <ul> 标签。每个列表项始于 <li>
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

<ul>
    <li>苹果</li>
    <li>西瓜</li>
    <li>香蕉</li>
</ul>

苹果
西瓜
香蕉

1.2、有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

<ol>
    <li>苹果</li>
    <li>西瓜</li>
    <li>香蕉</li>
</ol>

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

1.3、自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

<dl>
    <dt>名称:</dt>
    <dd>php中文网</dd>
    <dt>地址:</dt>
    <dd>合肥市政务新区置地广场</dd>
    <dt>联系</dt>
    <dd>电话: <a href="tel:1895****123">1895****123</a></dd>
</dl>

名称：
- PHP中文网
地址：
- 合肥市政务新区置地广场
联系：
- 电话：1895**123

1.4、应用1：导航

<ul class="menu">
    <li><a href="">首页</a></li>
    <li><a href="">教学视频</a></li>
    <li><a href="">社区问答</a></li>
    <li><a href="">资料下载</a></li>
    <li><a href="">登录</a></li>
</ul>

1.5、应用2：图文列表

<ul class="list">
      <li>
        <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d24289c99b05106.jpg" alt="" /></a>
        <a href="">web前端开发极速入门</a>
      </li>
      <li>
        <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d24289c99b05106.jpg" alt="" /></a>
        <a href="">web前端开发极速入门</a>
      </li>
      <li>
        <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d24289c99b05106.jpg" alt="" /></a>
        <a href="">web前端开发极速入门</a>
      </li>
</ul>

2、表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。
字母 td 指表格数据（table data），即数据单元格的内容。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格也是用一组标签来描述:table,thead,tbody,tr,td/th
所有的数据必须填充到td /th中, th是td的PLus+,自带了一个加粗和居中的样式

<table class="product">
      <!-- 表格标题 -->
      <caption>
        商品信息表
      </caption>
      <!-- 表头 -->
      <thead>
        <!-- 每添加一组表格数据,必须先添加一行 -->
        <tr>
          <th>ID</th>
          <th>品名</th>
          <th>单价</th>
          <th>单位</th>
          <th>数量</th>
          <th>金额</th>
        </tr>
      </thead>
      <!-- 表格的主体,一个表格可以有多个主体,但只能有一个表头 -->
      <tbody>
        <tr>
          <td>a100</td>
          <td>手机</td>
          <td>9999</td>
          <td>部</td>
          <td>1</td>
          <td>9999</td>
        </tr>
        <tr>
          <td>A102</td>
          <td>电脑</td>
          <td>19999</td>
          <td>台</td>
          <td>2</td>
          <td>39998</td>
        </tr>
        <tr>
          <td>A103</td>
          <td>汽车</td>
          <td>50000</td>
          <td>台</td>
          <td>1</td>
          <td>100000</td>
        </tr>
      </tbody>
      <tbody>
        <tr>
          <td>B201</td>
          <td>猪肉</td>
          <td>30</td>
          <td>斤</td>
          <td>10</td>
          <td>300</td>
        </tr>
        <tr>
          <td>B303</td>
          <td>水杯</td>
          <td>50</td>
          <td>只</td>
          <td>5</td>
          <td>250</td>
        </tr>
        <tr>
          <td>C404</td>
          <td>住宅</td>
          <td>2500000</td>
          <td>套</td>
          <td>2</td>
          <td>5000000</td>
        </tr>
      </tbody>
</table>

应用：课程表

rowspan 属性是规定单元格可合并的行数。
colspan 属性是规定单元格可合并的列数。

<table class="lesson">
      <caption>
        小学课程表
      </caption>
      <thead>
        <tr>
          <th colspan="2"></th>
          <th>星期一</th>
          <th>星期二</th>
          <th>星期三</th>
          <th>星期四</th>
          <th>星期五</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td rowspan="4">上午</td>
          <td>1</td>
          <td>数学</td>
          <td>语文</td>
          <td>语文</td>
          <td>语文</td>
          <td>数学</td>
        </tr>
        <tr>
          <td>2</td>
          <td>语文</td>
          <td>语文</td>
          <td>音乐</td>
          <td>科学</td>
          <td>美术</td>
        </tr>
        <tr>
          <td>3</td>
          <td>语文</td>
          <td>美术</td>
          <td>数学</td>
          <td>数学</td>
          <td>语文</td>
        </tr>
        <tr>
          <td>4</td>
          <td>科学</td>
          <td>数学</td>
          <td>语文</td>
          <td>体育</td>
          <td>道法</td>
        </tr>
        <tr class="rest">
          <td colspan="7">中午休息</td>
        </tr>
        <tr>
          <td rowspan="3">上午</td>
          <td>5</td>
          <td>数学</td>
          <td>语文</td>
          <td>语文</td>
          <td>语文</td>
          <td>数学</td>
        </tr>
        <tr>
          <td>6</td>
          <td>语文</td>
          <td>语文</td>
          <td>音乐</td>
          <td>科学</td>
          <td>美术</td>
        </tr>
        <tr>
          <td>7</td>
          <td>课外活动:</td>
          <td colspan="4">各班自行组织,自愿参加</td>
        </tr>
      </tbody>
    </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>组合而成

<h3 class="title">用户注册</h3>
  <!-- action: 处理表单的程序 -->
  <!-- method:表单提交类型 -->
  <!-- 默认为GET: 数据直接放在url地址中 -->
  <!-- POST: 表单的数据在请头体中 -->
  <!-- demo4.html?username=admin&email=admin%40php.cn&password=123456 -->
<form action="" method="POST" class="register" enctype="multipart/form-data">
     <!-- 1. 单行文本框 -->
   <label for="username">帐号:</label>
     <!-- type: 控件类型 -->
     <!-- name: 数据的变量名 -->
     <!-- value: 数据的内容 -->
   <input type="text" id="username" name="username" value="" placeholder="username" required />
      <!-- type="text"这是通用文本框,还有一些专用的 -->
      <!-- 邮箱型文本框 -->
   <label for="email">邮箱:</label>
   <input type="email" id="email" name="email" value="" required placeholder="demo@email.com" />
      <!-- 密码型文本框/非明文 -->
   <label for="password">密码:</label>
   <input type="password" id="password" name="password" value="" required placeholder="不少于6位" />
      <!-- 2. 单选按钮与复选框 -->
   <label for="secret">性别:</label>
  <div>
        <!-- 一组单选按钮必须共用同一个名称的name属性值，否则无法实现值的唯一性 -->
    <input type="radio" name="gender" value="male" id="male" /><label for="male">男</label>
    <input type="radio" name="gender" value="female" id="female" /><label for="female">女</label>
    <input type="radio" name="gender" value="secret" id="secret" checked /><label for="secret">保密</label>
  </div>
  <label for="#">兴趣:</label>
  <div>
        <!-- 复选框的name属性值应该写与数组的格式名称,这样才确保服务器可以接收到一组值 -->
    <input type="checkbox" name="hobby[]" value="game" id="game" checked /> <label for="game">游戏</label>
    <input type="checkbox" name="hobby[]" value="shoot" id="shoot" /> <label for="shoot">摄影</label>
    <input type="checkbox" name="hobby[]" value="travel" id="travel" /> <label for="travel">旅游</label>
    <input type="checkbox" name="hobby[]" value="program" id="program" checked /> <label for="program">编程</label>
  </div>
      <!-- 3. 下拉列表/下拉框 -->
  <label for="edu">学历:</label>
      <!-- <select name="edu" id="edu" multiple size="2"></select> -->
  <select name="edu" id="edu">
    <option value="1">初中</option>
    <option value="2">高中</option>
    <option value="3" selected>本科</option>
    <option value="4">研究生</option>
        <!-- label属性的优先级大于option内部的文本 -->
        <!-- <option value="5" label="老司机">自学成长</option> -->
  </select>
      <!-- 4. 文件域与隐藏域 -->
      <!-- 上传文件要注意二点:
      1. 请求类型必须是: POST 
      2. 将表单数据编码设置为:  -->
  <label for="user-pic">头像:</label>
      <!-- 隐藏域,在前端页面看不到的,它的值供后端处理时用 -->
  <input type="hidden" name="MAX_FILE_SIZE" value="80000" />
  <input type="file" name="user_pic" id="user-pic" />
      <!-- 头像占位符 -->
  <div class="user-pic" style="grid-column: span 2"></div>
  <label for="user-resume">简历:</label>
      <!-- 隐藏域,在前端页面看不到的,它的值供后端处理时用 -->
  <input type="hidden" name="MAX_FILE_SIZE" value="100000" />
  <input type="file" name="user_resume" id="user-resume" />
      <!-- 简历占位符 -->
  <div class="user-resume" style="grid-column: span 2"></div>
      <!-- 5. 文本域 -->
  <label for="comment">备注:</label>
  <textarea name="comment" id="comment" cols="30" rows="5"></textarea>
      <!-- 提交按钮 -->
  <button>提交</button>
</form>

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

前端开发环境的搭建与HTML初体验

2020-12-10 00:35:56