2021-06-02

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>列表标签</title>
</head>
<body>
  <h2>搜索引擎排名</h2>
  <ol>
    <li>Google</li>
    <li>Baidu</li>
    <li>Bing</li>
    <li>Gogou</li>
  </ol>
  <h2>软件编程语言</h2>
  <ul>
    <li>Java</li>
    <li>C++</li>
    <li>Python</li>
    <li>JavaScript</li>
  </ul>
  <h2>健康食品</h2>
  <dl>
    <dt>水果</dt>
      <dd>苹果</dd>
      <dd>香蕉</dd>
    <dt>蔬菜</dt>
      <dd>西兰花</dd>
      <dd>菠菜</dd>
  </dl>
</body>
</html>

小说排行榜练习效果如下:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <div><h2 align="center"><strong> 小说排行榜</strong></p></div>
<table width="600" border="1" align="center" cellpadding="4" cellspacing="0" bordercolor="#FFFFFF" bgcolor="#ECF5FF">
  <tr>
    <td><div align="center"><strong> 排名</strong></div></td>
    <td><div align="center"><strong> 关键词</strong></div></td>
    <td><div align="center"><strong> 趋势</strong></div></td>
    <td><div align="center"><strong> 今日搜索</strong></div></td>
    <td><div align="center"><strong> 最近七日</strong></div></td>
    <td><div align="center"><strong> 相关链接</strong></div></td>
  </tr>
  <tr>
    <td><div >1</div></td>
    <td><div >鬼吹灯</div></td>
    <td><div ><img src="D:\sxun\up.jpg" ></div></td>
    <td><div ">356</div></td>
    <td><div >3560</div></td>
    <td><div ><a href="https://tieba.baidu.com/f?fr=ala0&kw=%B9%ED%B4%B5%B5%C6&loc=rec">贴吧&nbsp;</a>
        <a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=02003390_hao_pg&wd=%E9%AC%BC%E5%90%B9%E7%81%AF%E5%9B%BE%E7%89%87&oq=%25E9%25AC%25BC%25E5%2590%25B9%25E7%2581%25AF%25E8%25B4%25B4%25E5%2590%25A7&rsv_pq=c97c2c3f001dc98f&rsv_t=dbecO7M2s0GUkVg%2BgFyLdr%2F5WGayi4isRNixgqQ1GQdZdj3Xn9I2rYpEVVFafwI%2BQTpBPiMm&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_sug3=9&rsv_sug1=9&rsv_sug7=100&bs=%E9%AC%BC%E5%90%B9%E7%81%AF%E8%B4%B4%E5%90%A7">图片&nbsp;</a>
        <a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin">百科</a></div></td>
  </tr>
  <tr>
    <td><div >1</div></td>
    <td><div >鬼吹灯</div></td>
    <td><div ><img src="D:\sxun\down.jpg" ></div></td>
    <td><div>356</div></td>
    <td><div>3560</div></td>
    <td><div ><a href="https://tieba.baidu.com/f?fr=ala0&kw=%B9%ED%B4%B5%B5%C6&loc=rec">贴吧&nbsp;</a>
        <a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=02003390_hao_pg&wd=%E9%AC%BC%E5%90%B9%E7%81%AF%E5%9B%BE%E7%89%87&oq=%25E9%25AC%25BC%25E5%2590%25B9%25E7%2581%25AF%25E8%25B4%25B4%25E5%2590%25A7&rsv_pq=c97c2c3f001dc98f&rsv_t=dbecO7M2s0GUkVg%2BgFyLdr%2F5WGayi4isRNixgqQ1GQdZdj3Xn9I2rYpEVVFafwI%2BQTpBPiMm&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_sug3=9&rsv_sug1=9&rsv_sug7=100&bs=%E9%AC%BC%E5%90%B9%E7%81%AF%E8%B4%B4%E5%90%A7">图片&nbsp;</a>
        <a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin">百科</a></div></td>
  </tr>
  <tr>
    <td><div ">1</div></td>
    <td><div >鬼吹灯</div></td>
    <td><div ><img src="D:\sxun\up.jpg" ></div></td>
    <td><div >356</div></td>
    <td><div >3560</div></td>
    <td><div ><a href="https://tieba.baidu.com/f?fr=ala0&kw=%B9%ED%B4%B5%B5%C6&loc=rec">贴吧&nbsp;</a>
        <a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=02003390_hao_pg&wd=%E9%AC%BC%E5%90%B9%E7%81%AF%E5%9B%BE%E7%89%87&oq=%25E9%25AC%25BC%25E5%2590%25B9%25E7%2581%25AF%25E8%25B4%25B4%25E5%2590%25A7&rsv_pq=c97c2c3f001dc98f&rsv_t=dbecO7M2s0GUkVg%2BgFyLdr%2F5WGayi4isRNixgqQ1GQdZdj3Xn9I2rYpEVVFafwI%2BQTpBPiMm&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_sug3=9&rsv_sug1=9&rsv_sug7=100&bs=%E9%AC%BC%E5%90%B9%E7%81%AF%E8%B4%B4%E5%90%A7">图片&nbsp;</a>
        <a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin">百科</a></div></td>
  </tr>
  <tr>
    <td><div >1</div></td>
    <td><div >鬼吹灯</div></td>
    <td><div>1</div></td>
    <td><div >356</div></td>
    <td><div >3560</div></td>
    <td><div ><a href="https://tieba.baidu.com/f?fr=ala0&kw=%B9%ED%B4%B5%B5%C6&loc=rec">贴吧&nbsp;</a>
        <a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=02003390_hao_pg&wd=%E9%AC%BC%E5%90%B9%E7%81%AF%E5%9B%BE%E7%89%87&oq=%25E9%25AC%25BC%25E5%2590%25B9%25E7%2581%25AF%25E8%25B4%25B4%25E5%2590%25A7&rsv_pq=c97c2c3f001dc98f&rsv_t=dbecO7M2s0GUkVg%2BgFyLdr%2F5WGayi4isRNixgqQ1GQdZdj3Xn9I2rYpEVVFafwI%2BQTpBPiMm&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_sug3=9&rsv_sug1=9&rsv_sug7=100&bs=%E9%AC%BC%E5%90%B9%E7%81%AF%E8%B4%B4%E5%90%A7">图片&nbsp;</a>
        <a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin">百科</a></div></td>
  </tr>
  <tr>
    <td><div >1</div></td>
    <td><div >鬼吹灯</div></td>
    <td><div >1</div></td>
    <td><div >356</div></td>
    <td><div >3560</div></td>
    <td><div ><a href="https://tieba.baidu.com/f?fr=ala0&kw=%B9%ED%B4%B5%B5%C6&loc=rec">贴吧&nbsp;</a>
        <a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=02003390_hao_pg&wd=%E9%AC%BC%E5%90%B9%E7%81%AF%E5%9B%BE%E7%89%87&oq=%25E9%25AC%25BC%25E5%2590%25B9%25E7%2581%25AF%25E8%25B4%25B4%25E5%2590%25A7&rsv_pq=c97c2c3f001dc98f&rsv_t=dbecO7M2s0GUkVg%2BgFyLdr%2F5WGayi4isRNixgqQ1GQdZdj3Xn9I2rYpEVVFafwI%2BQTpBPiMm&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_sug3=9&rsv_sug1=9&rsv_sug7=100&bs=%E9%AC%BC%E5%90%B9%E7%81%AF%E8%B4%B4%E5%90%A7">图片&nbsp;</a>
        <a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin">百科</a></div></td>
  </tr>
  <tr>
    <td><div >1</div></td>
    <td><div >鬼吹灯</div></td>
    <td><div >1</div></td>
    <td><div >356</div></td>
    <td><div >3560</div></td>
    <td><div ><a href="https://tieba.baidu.com/f?fr=ala0&kw=%B9%ED%B4%B5%B5%C6&loc=rec">贴吧&nbsp;</a>
        <a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=02003390_hao_pg&wd=%E9%AC%BC%E5%90%B9%E7%81%AF%E5%9B%BE%E7%89%87&oq=%25E9%25AC%25BC%25E5%2590%25B9%25E7%2581%25AF%25E8%25B4%25B4%25E5%2590%25A7&rsv_pq=c97c2c3f001dc98f&rsv_t=dbecO7M2s0GUkVg%2BgFyLdr%2F5WGayi4isRNixgqQ1GQdZdj3Xn9I2rYpEVVFafwI%2BQTpBPiMm&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_sug3=9&rsv_sug1=9&rsv_sug7=100&bs=%E9%AC%BC%E5%90%B9%E7%81%AF%E8%B4%B4%E5%90%A7">图片&nbsp;</a>
        <a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin">百科</a></div></td>
  </tr>
  <tr>
    <td><div >1</div></td>
    <td><div>鬼吹灯</div></td>
    <td><div >1</div></td>
    <td><div >356</div></td>
    <td><div >3560</div></td>
    <td><div ><a href="https://tieba.baidu.com/f?fr=ala0&kw=%B9%ED%B4%B5%B5%C6&loc=rec">贴吧&nbsp;</a>
        <a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=02003390_hao_pg&wd=%E9%AC%BC%E5%90%B9%E7%81%AF%E5%9B%BE%E7%89%87&oq=%25E9%25AC%25BC%25E5%2590%25B9%25E7%2581%25AF%25E8%25B4%25B4%25E5%2590%25A7&rsv_pq=c97c2c3f001dc98f&rsv_t=dbecO7M2s0GUkVg%2BgFyLdr%2F5WGayi4isRNixgqQ1GQdZdj3Xn9I2rYpEVVFafwI%2BQTpBPiMm&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_sug3=9&rsv_sug1=9&rsv_sug7=100&bs=%E9%AC%BC%E5%90%B9%E7%81%AF%E8%B4%B4%E5%90%A7">图片&nbsp;</a>
        <a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin">百科</a></div></td>
  </tr>
</table>

</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人简历</title>
  <style>
    form {
      width: 702px;
      margin: auto;
    }

    input {
      border: none;
      outline: none;
      width: 80px;
      padding: 0;
    }

    .title {
      text-align: center;
    }
  </style>
</head>
<body>
  <form action="">
    <h3 class="title">个人简历</h3>
    <table border="1">
      <colgroup span="7" width="100px"></colgroup>
      <tr height="30px" align="center">
        <td>姓名</td>
        <td><input type="text"></td>
        <td>性别</td>
        <td><input type="text"></td>
        <td>出生年月</td>
        <td><input type="text"></td>
        <td rowspan="4"><input type="file" id="input" onchange="handleFiles(this.files)"></td>
      </tr>
      <tr height="30px" align="center">
        <td>民族</td>
        <td><input type="text"></td>
        <td>政治面貌</td>
        <td><input type="text"></td>
        <td>身高</td>
        <td><input type="text"></td>
      </tr>
      <tr height="30px" align="center">
        <td>学制</td>
        <td><input type="text"></td>
        <td>学历</td>
        <td><input type="text"></td>
        <td>户籍</td>
        <td><input type="text"></td>
      </tr>
      <tr height="30px" align="center">
        <td>专业</td>
        <td><input type="text"></td>
        <td colspan="2">毕业学校</td>
        <td colspan="2"><input type="text" style="width: 160px;"></td>
      </tr>
      <tr height="30px" align="center">
        <th colspan="7">技能、特长或爱好</th>
      </tr>
      <tr height="30px" align="center">
        <td>外语等级</td>
        <td colspan="2"><input type="text" style="width: 160px;"></td>
        <td>计算机</td>
        <td colspan="3"><input type="text" style="width: 240px;"></td>
      </tr>
      <tr height="30px" align="center">
        <th colspan="7">个人履历</th>
      </tr>
      <tr height="30px" align="center">
        <td>时间</td>
        <td colspan="2">单位</td>
        <td colspan="4">经历</td>
      </tr>
      <tr height="30px" align="center">
        <td><input type="text"></td>
        <td colspan="2"><input type="text" style="width: 160px;"></td>
        <td colspan="4"><input type="text" style="width: 320px;"></td>
      </tr>
      <tr height="30px" align="center">
        <td><input type="text"></td>
        <td colspan="2"><input type="text" style="width: 160px;"></td>
        <td colspan="4"><input type="text" style="width: 320px;"></td>
      </tr>
      <tr height="30px" align="center">
        <td><input type="text"></td>
        <td colspan="2"><input type="text" style="width: 160px;"></td>
        <td colspan="4"><input type="text" style="width: 320px;"></td>
      </tr>
      <tr height="30px" align="center">
        <th colspan="7">联系方式</th>
      </tr>
      <tr height="30px" align="center">
        <td>通信地址</td>
        <td colspan="2"><input type="text" style="width: 160px;"></td>
        <td>联系电话</td>
        <td colspan="3"><input type="text" style="width: 240px;"></td>
      </tr>
      <tr height="30px" align="center">
        <td>E-mail</td>
        <td colspan="2"><input type="text" style="width: 160px;"></td>
        <td>邮编</td>
        <td colspan="3"><input type="text" style="width: 240px;"></td>
      </tr>
      <tr height="30px" align="center">
        <th colspan="7">自我评价</th>
      </tr>
      <tr height="30px">
        <td colspan="7"><input type="text" style="width: 240px;"></td>
      </tr>
    </table>
  </form>
</body>
</html>

#小结
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值