1219列表、表格、表彰-229911

列表、表格、表彰

相关信息：
时间：2020年12月19日
栏目：html

1、列表

列表有分三个类型，分别是：
1.1有序列表
概要说明：主要由<ol><li></li></ol>描述，前面有数据顺序

<p>购物车</p>
<ol>
<li>牛奶一箱</li>
<li>蛋糕一个</li>
<li>苹果10斤</li>
</ol>

1.2 无序列表
概要说明：主要由<ul><li></li></ul>描述，前面默认为黑色小圆点，可以通过css来修改

<p>购物车</p>
<ul>
    <li>牛奶一箱</li>
    <li>蛋糕一个</li>
    <li>苹果10斤</li>
</ul>

1.3 自定义列表
概要说明：主要由<dl><dt><dd></dd></dl>描述，根据<dt>标签中标题来分类dd列表项

<p>购物车</p>
<dl>
      <dt>名称:</dt>
      <dd>php中文网</dd>
      <dt>地址:</dt>
      <dd>合肥市政务新区置地广场</dd>
      <dt>联系</dt>
      <dd>电话: <a href="tel:1895****123">1895****123</a></dd>
      <dd>邮箱: <a href="mailto:admin@php.cn?subject=title&body=content">admin@php.cn</a></dd>
</dl>

2、表格

表格由以下tboday>caption标题>thead表头>tboday主体>tr>td组成，
caption为标题，在表格上方，
thead为表头，首行目录，里面的单元格为<tr><th></th></tr>
tbody为表格主体,里面的单元格为<tr><td></td></tr>，一个表格可以有多个主体
行合并：rowspan；列合并：colspan
代码示范：

     <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>
      </tbody>

3、表单

3.1 input标签：

文本

<label for="username">帐号:</label>
<!-- type: 控件类型 -->
<!-- name: 数据的变量名 -->
<!-- value: 数据的内容 -->
<input type="text" id="username" name="username" value="" placeholder="username" required />

密码

<label for="password">密码:</label>
<input type="password" id="password" name="password" value="" required placeholder="不少于6位" />

邮箱

<input type="email" id="email" name="email" value="" required placeholder="admin@php.cn"

提交

<input type="submit" value="确认提交"/>

3.2单选与复选

单选（同一组单选按钮的name属性必须一致）

<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>

复选：name属性一致，且传递值为数组

<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.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>

3.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>

3.5文本域

<label for="comment">备注:</label>
<textarea name="comment" id="comment" cols="30" rows="5"></textarea>