列表,表格,表单与框架

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>

1、列表元素

1.1、无序列表

1.2、有序列表

1.3、自定义列表

1.4、应用1：导航

1.5、应用2：图文列表

2、表格

应用：课程表

3、表单\<form>

相关文章