初识列表表格与表单

列表表单与表格

列表当容器使用，列表内可以放置任何类型的元素

列表

1.无序列表

ul + li
用一组标签定义
如果一个元素不是一个标签定义，用一组元素定义的，叫复合标签

<h3>购物车</h3>
      <ul>
          <li>牛奶一箱</li>
          <li>苹果二斤</li>
          <li>蛋糕三块</li>
      </ul>
      <hr>

2.有序列表

ol + li

<ol>
        <li>牛奶</li>
        <li>苹果</li>
        <li>蛋糕</li>
    </ol>

3.自定义列表

dl + dt + li

<dl>
        <dt>名称:</dt>
        <dd>php中文网</dd>
        <dt>地址：</dt>
        <dd>xxxx</dd>
        <dt>联系：</dt>
        <dd>电话：<a href="tel:135****">135****</a></dd>
        <dd>email: <a href="mailto:xxx@xxx.com?subject=这是邮件主题&body=这是邮件内容">xxx@xxx.com</a> </dd>
    </dl>

列表的应用

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

应用2： 图文列表

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

表格

列表是特殊表格
一组相关联的数据应该用表格
表格也是由一组标签来描述的：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>1</td>
                <td>台</td>
                <td>9999</td>
            </tr>
            <tr>
                <td>b200</td>
                <td>汽车</td>
                <td>99999</td>
                <td>1</td>
                <td>台</td>
                <td>99999</td>
            </tr>            
        </tbody>
    </table>
    <p class="page">
        <a href="">首页</a>
        <a href="">...</a>
        <a href="">5</a>
        <a href="" class="active">6</a>
        <a href="">7</a>
        <a href="">8</a>
        <a href="">...</a>
        <a href="">尾页</a>
    </p>

案例二：行列合并 课程表案例

需要注意
1.合并方向问题

• colspan=”2” 是向右侧合并1列，包括本列共2列合并
• rowspan=”4” 向下方合并3行，包含本行共4行合并

2.合并的时候对应的被合并的行列要删除代码，可以理解为既然合并了就不用再存在了。
比如
colspan=”2” 后对应的右侧列要去掉1列
rowspan=”4” 后对应的下方行要去掉3行

<table class="lesson">
        <caption>
            课程表
        </caption>
        <thead>
            <tr>
                <th colspan="2"></th>
                <!-- <th></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>上午</td> -->
                <td>2</td>
                <td>语文</td>
                <td>数学</td>
                <td>数学</td>
                <td>语文</td>
                <td>美术</td>
            </tr> 
            <tr>
                <!-- <td>上午</td> -->
                <td>3</td>
                <td>数学</td>
                <td>音乐</td>
                <td>科学</td>
                <td>语文</td>
                <td>数学</td>
            </tr>   
            <tr>
                <!-- <td>上午</td> -->
                <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>下午</td> -->
                <td>6</td>
                <td>数学</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
                <td>数学</td>
            </tr>   
            <tr>
                <!-- <td>下午</td> -->
                <td>7</td>
                <td>课外活动：</td>
                <td colspan="4">各班自行组织自愿参加</td>
            </tr>                         
        </tbody>
    </table>

表单

服务器获取用户请求主要通过表单，同时也是风险来源。
需要考虑表单数据过滤等

<!-- action: 处理表单的程序
    method：表单的提交类型
        GET 默认属性，数据直接放在url地址中，发送一些不敏感的数据，比如页数
        POST 表单的数据在请求体中 ,更多使用-->
    <form action="" method="" class="register" enctype="multipart/form-data">
        <!-- 1. 单行文本框 -->
        <!-- 增加用户体验，单击标签焦点落在文本框里
            标签文本框的绑定
          label 的for属性值与需要绑定的文本框的id值一致 -->
        <!--input 的 type: 控件的类型
                - type="text" 文本框
                - type="email"邮箱
                - type="password" 密码 非明文 此类型 value属性失效，但是在method为GET时会显示在URL中
                - radio 单选框
                - checkbox 复选框
                - file 文件类型
        name: 控件属性的标识符，数据的变量名
        value: 值 数据的内容
        required: 必填项
        -->
        <label for="userName">账号:</label>
        <input type="text" id="userName" name="userName" value="admin" placeholder="用户名" required>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" value="xx@xx.com" placeholder="demo@emailname" required>
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" value="111111" placeholder="不少于6位" required>
        <!-- 2. 单选按钮与复选框 -->
        <!-- 一组单选按钮必须共用同一个name值属性，否则不能实现单选，不能保证值的唯一性 -->
        <!-- 将label的for属性设置为默认radio的id值 就可以实现点击标签回到默认状态 -->
        <label for="secret">性别：</label>
        <div>
            <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属性值应该写成数组的格式名称，这样才确保服务器可以接受到一组值 -->
        <!-- 注意radio checkbox的值有什么区别 -->
        <label for="#">兴趣：</label>
        <div>
            <input type="checkbox" name="hobby[]" value="read" id="read"><label for="read">读书</label>
            <input type="checkbox" name="hobby[]" value="shoot" id="shoot"><label for="shoot">摄影</label>
            <input type="checkbox" name="hobby[]" value="travel" id="travel" checked><label for="travel">旅游</label>
            <input type="checkbox" name="hobby[]" value="program" id="program" checked><label for="program">编程</label>
        </div>
        <!-- 3. 下拉列表 -->
        <!-- 默认第一个option为默认值 如果想修改默认可以在对应的option中增加 selected属性 -->
        <!-- 如果在option 标签中出现label 显示label 
            label 属性的优先级大于option 内部的文本 -->
        <label for="">学历</label>
        <select name="edu" id="">
            <option value="1">初中</option>
            <option value="2">高中</option>
            <option value="3" selected>大学</option>            
            <option value="4" label="老司机">教授</option>
        </select>
        <!-- 如果想要实现多选需要增加 select 的 multiple size="2" 这种情况很少使用，一般不会这么做-->
        <label for="">喜欢的编程语言</label>
        <select name="edu2" id="" multiple size="2">
            <option value="1">Javascript</option>
            <option value="2">Java</option>
            <option value="3">C#</option>
            <option value="4">C</option>
            <option value="5">C++</option>
            <option value="6">Python</option>
        </select>
        <!-- 4. 文件域和隐藏域 -->
        <!-- 上传文件：
        1. 请求类型必须是POST
        2. 表单数据必须取消所有的默认编码，使用二进制流 
        使用form的 enctype="multipart/form-data"属性
         - application/x-www-form-urlencoded：使用默认编码 
         - multipart/form-data:使用二进制原始数据传输
        变量命名规则：字母下划线开头，不能使用-连接符name是元素的变量
        限制文件大小  隐藏域 type="hidden",前端看不到，供后端处理使用
    -->
        <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>
        <!-- <span class="tips">输入内容不能不能多于 <em>120</em> 字符</span> -->
        <!-- 提交按钮 -->
        <button>提交</button>
    </form>

总结：

列表表单和表格是重要的容器，呈现数据和收集用户信息的重要载体。应用的在合适的位置，才能更好的发挥作用。需要注意 input 标签的 type属性的几个值，file类型时注意隐藏域的限制大小；表单form 的 method 属性GET和POST区别，上传文件是必须使用 method=”POST”,enctype=”multipart/form-data”属性。