列表、表格、表单练习

有序和无序列表

<h3>购物篮</h3>
<ul>
    <li>冰糖葫芦</li>
    <li>串串香</li>
    <li>大闸蟹</li>
</ul>
<h3>购物篮</h3>
<ol>
    <li>冰糖葫芦</li>
    <li>串串香</li>
    <li>大闸蟹</li>
</ol>

其它列表

<dl>
    <dt>地址 </dt>
    <dd>歼20</dd>
    <dt>电话</dt>
    <dd>强5歼击机</dd>
    <dt>邮件</dt>
    <dd>MAIL</dd>
    <dt>联系方式</dt>
    <dd>电话 <a href="tel:10000" >10000</a></dd>
    <dd>邮箱 <a href="mailto:chen@qq.com">chen@qq.com</a></dd>
    <dd><img src="https://www.php.cn/static/images/index_yunv.jpg" width="300" alt="玉女心经">二维码</dd>
</dl>

首页列表

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

图片列表

  <ul>
    <a href=""><img src="https://image.xcar.com.cn/attachments/a/day_201209/2020120921_51a572171ed2218273107da278b17044.jpg?imageView2/1/w/464/h/232"width=200 alt=""></a>
    <a href=""><img src="https://image.xcar.com.cn/attachments/a/day_201209/2020120921_51a572171ed2218273107da278b17044.jpg?imageView2/1/w/464/h/232"width=200 alt=""></a>
    <a href=""><img src="https://image.xcar.com.cn/attachments/a/day_201209/2020120921_51a572171ed2218273107da278b17044.jpg?imageView2/1/w/464/h/232"width=200 alt=""></a>
    <a href=""><img src="https://image.xcar.com.cn/attachments/a/day_201209/2020120921_51a572171ed2218273107da278b17044.jpg?imageView2/1/w/464/h/232"width=200 alt=""></a>
    <a href=""><img src="https://image.xcar.com.cn/attachments/a/day_201209/2020120921_51a572171ed2218273107da278b17044.jpg?imageView2/1/w/464/h/232"width=200 alt=""></a>
</ul>

表格

<!-- 表格用 TABLE THEAD CAPTION TBODY TR TD TH -->

<!-- 所有的数据都必须放到td和th中 th居中 加粗-->

<TABLE class="product">
<caption> 飞机外部损伤清单 </caption>
<THEAD>
    <tr>
        <th >机号</th >
        <th >描述</th >
        <th >参考章节</th >
        <th >损伤处理</th >
        <th >日期</th >
        <th >日期</th >
    </tr>
</THEAD>
<tbody>
    <tr>
        <td>6976 </td>
        <td>右大翼前缘损伤 </td>
        <td> 57-40 </td>
        <td> 保留故障 </td>
        <td> 2020-12-02 </td>
        <td> 2020-12-02 </td>
    </tr>
    <tr>
        <td> 6976 </td>
        <td>右大翼前缘损伤 </td>
        <td> 57-40 </td>
        <td> 保留故障 </td>
        <td> 2020-12-02 </td>
        <td> 2020-12-02 </td>
    </tr>
    <tr>
        <td> 6976 </td>
        <td>右大翼前缘损伤 </td>
        <td> 57-40 </td>
        <td> 保留故障 </td>
        <td> 2020-12-02 </td>
        <td> 2020-12-02 </td>
    </tr>
    <tr>
        <td> 6976 </td>
        <td>右大翼前缘损伤 </td>
        <td> 57-40 </td>
        <td> 保留故障 </td>
        <td> 2020-12-02 </td>
        <td> 2020-12-02 </td>
    </tr>
    <tr>
        <td> 6976 </td>
        <td>右大翼前缘损伤 </td>
        <td> 57-40 </td>
        <td> 保留故障 </td>
        <td> 2020-12-02 </td>
        <td> 2020-12-02 </td>
    </tr>
</tbody>
</TABLE>

分页标签

<!-- 分页用P标签 -->
<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>
</p>

表单

<h3 class="title">用户注册</h3>
<!-- form属性可以将控件写在任何位置 from写入 id=register   input中写入 form="register" -->
<form id="register" action="" method="" class="register" enctype="multipart/form-data">
 <label for="username">用户名</label>
    <input type="text" id="username" name="username" value="" placeholder="用户名" required>
    <label for="email">邮箱</label>
    <input type="email" id="email" name="email" value="" required>
    <label for="password">密码</label>
    <input type="password" id="password" name="password" value="" required>

单选

<label for="">性别</label>
    <div>
                   <input type="radio" id="gender" name="male" value="male"  > <label for="">男</label>
        <input type="radio" id="gender" name="female" value="female"  > <label for="">女</label>
    </div>

多选

<label for="">兴趣</label>
<div>
<input type="checkbox" name="hobby"     value="game" id="game" > <label for="game">游戏</label>
<input type="checkbox" name="hobby" value="photo" id="photo" > <label for="photo">摄影</label>
<input type="checkbox" name="hobby" value="learn" id="learn" > <label for="learn">学习</label>
</div>  <label for="apartment">部门:</label>

下拉选择

<select name="apartment" id="apartment">
<option value="1">航线车间</option>
<option value="2">宽全车间</option>
<option value="3">生产支援</option>
<option value="4">生产计划</option>

</select>

文件域

<!-- 文件域与隐藏域 请求类型必须 是POST   label 后的FOR跟的user-pic内容要各JS中一致，且和下一栏input中ID，DIV中class内容一致-->
<label for="user-pic">头像</label>
<!-- 隐藏域前端看不到，它的值供后端处理时使用 -->
<input type="hidden" name="max_pic_size" value="80000" >
<input type="file" id="user-pic" name="pic">
<!-- 头像占位符 -->
<div class="user-pic" style="grid-column: span 2;"  ></div>
<!-- 上传简历 -->
<label for="user-resume">简历</label>
<input type="hidden" name="max_file_size" value="200000">
<input type="file" name="resume" id="user-resume" >
<div class="user-resume" style="grid-column: span 2;"></div>

文本域

<label for="comment"  >备注</label>
  <textarea name="comment" id="comment" cols="30" rows="5"></textarea>
<button>提交</button>
</form></body></html>
<script src="yulan.js"> </script>