<!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">贴吧 </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">图片 </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">贴吧 </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">图片 </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">贴吧 </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">图片 </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">贴吧 </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">图片 </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">贴吧 </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">图片 </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">贴吧 </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">图片 </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">贴吧 </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">图片 </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>
#小结