列表、表格和表单标签的常用属性归纳,如下图所示:
一、列表标签举例
列表标签的应用,源代码如下所示:
<!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>
<h1>搜索引擎排名</h1>
<ol>
<li>Google</li>
<li>Baidu</li>
<li>Bing</li>
<li>Sogou</li>
</ol>
<h1>软件编程语言</h1>
<ul>
<li>Java</li>
<li>C++</li>
<li>Python</li>
<li>JavaScript</li>
</ul>
<h1>健康食品</h1>
<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>个人简历</title>
</head>
<style>
h2{
text-align: center;
}
input{
width: 100%;
height: 100%;
border:0px;
}
td{
width: 95px;
height: 30px;
overflow: hidden;
}
table{
text-align: center;
margin: auto;
}
</style>
<body>
<form>
<h2>个人简历</h2>
<table border="1" >
<tr>
<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"></td>
</tr>
<tr>
<td>民族</td>
<td><input type="text"></td>
<td>政治面貌</td>
<td><input type="text"></td>
<td>身高</td>
<td><input type="text"></td>
</tr>
<tr>
<td>学制</td>
<td><input type="text"></td>
<td>学历</td>
<td><input type="text"></td>
<td>户籍</td>
<td><input type="text"></td>
</tr>
<tr>
<td>专业</td>
<td><input type="text"></td>
<td colspan="2">毕业学校</td>
<td colspan="2"><input type="text"></td>
</tr>
<tr>
<td colspan="7">技能、特长或爱好</td>
</tr>
<tr>
<td>外语等级</td>
<td colspan="2"><input type="text"></td>
<td>计算机</td>
<td colspan="3"><input type="text"></td>
</tr>
<tr>
<td colspan="7">个人履历</td>
</tr>
<tr>
<td>时间</td>
<td colspan="2">单位</td>
<td colspan="4">经历</td>
</tr>
<tr>
<td><input type="text"></td>
<td colspan="2"><input type="text"></td>
<td colspan="4"><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td colspan="2"><input type="text"></td>
<td colspan="4"><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td colspan="2"><input type="text"></td>
<td colspan="4"><input type="text"></td>
</tr>
<tr>
<td colspan="7">联系方式</td>
</tr>
<tr>
<td>通讯地址</td>
<td colspan="2"><input type="text"></td>
<td>联系电话</td>
<td colspan="3"><input type="text"></td>
</tr>
<tr>
<td>E-mail</td>
<td colspan="2"><input type="text"></td>
<td>邮编</td>
<td colspan="3"><input type="text"></td>
</tr>
<tr>
<td colspan="7">自我评价</td>
</tr>
<tr>
<td colspan="7"><input type="text"></td>
</tr>
</table>
</form>
</body>
</html>
程序运行结果如下图所示:
这次就分享这么多,如有不足,欢迎大家留言讨论。