文章目录
-
- 1、练习常用标签的使用
- 2、无序列表和有序列表练习
- 4、表格的使用
- 5、表单的使用
整理大一时期的前端html、css的实训练习
1、练习常用标签的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>这是我做的一个网页</title>
</head>
<style>
p{font-size: 14px;text-indent: 28px;}
div{
width: 700px;
}
</style>
<body>
<div><center><h2>各科小常识</h2></center>
<dl>
<dt><h3>语文</h3></dt>
<dd>三国演义是中国四大古典名著之一，元末明初小说家罗贯中所著，是中国第一部章回体历史演义的小说，描写了从东汉末年到西晋初年近100年的历史风云</dd><hr /></dl>
<h3>数学</h3>
<p>勾股定理直角三角形：a<sup>2</sup>=b<sup>2</sup>+c<sup>2</sup></p><hr />
<h3>英语</h3>
<p>No pain ,No gain </p><hr />
<h3>化学</h3>
<p>H<sub>2</sub>SO<sub>4</sub>是一种重要的工业原料，可用与制作肥料、洗涤剂等</p><hr />
<h3>经济</h3>
<p>版权符号:©</p>
<p>注册商标：®</p><hr />
</div>
</body>
</html>
- 测试结果
2、无序列表和有序列表练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title><h1>问卷调查</h1></title>
</head>
<body><div>
<h1><caption>问卷调查</caption></h1>
<h3>1、你是通过什么途径来到绿叶学习网的？</h3><br />
<ol type="A">
<li>百度搜素</li><br />
<li>谷歌搜素</li><br />
<li>其他途径</li><br />
</ol>
<h3>2、你觉得绿叶学习网网页面设计怎么样？</h3><br />
<ol type="A">
<li>酷炫大方</li><br />
<li>比较普通</li><br />
<li>非常粗糙</li><br />
</ol>
<h3>你觉得这本书怎么样？（多选）</h3><br />
<ul type="disc">
<li>通俗易懂，轻松幽默</li><br />
<li>内容丰富，技巧很多</li><br />
<li>三个字，非常好</li><br />
</ul>
</div>
</body>
</html>
- 运行结果
3、表格
3、<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
table,tr,td,th{border: 1px solid silver;}
</style>
</head>
<body>
<table>
<caption>学生成绩表</caption>
<tr><th>姓名</th><th>性别</th><th>成绩</th></tr>
<tr><td>张三</td><td>男</td><td>250</td></tr>
<tr><td>李四</td><td>男</td><td>520</td></tr>
<tr><td>平均分</td><td colspan="2">385</td><</tr>
</table>
</body>
</html>
- 运行结果
4、表格的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style >
body{background:#eee;}
table{width: 100%;
height: 300px;
border: 1px solid gainsboro;
}
td{width: 18%;
border: 2px solid gainsboro;}
img{width: 100%;}
a{text-decoration: none;}
span{color: blue;}
</style>
</head>
<body>
<table>
<tr>
<td><h5>大家电年度盛典</h5><h6><span>疯抢300元优惠卷</span></h6></br><img src="img/冰箱.jpg" /></td>
<td><h5>大家电年度盛典</h5><h6><span>疯抢300元优惠卷</span></h6><img src="img/孕妇.jpg" /></td>
<td><h5>大家电年度盛典</h5><h6><span>疯抢300元优惠卷</span></h6><img src="img/鞋子.jpg" /></td>
<td><h5>大家电年度盛典</h5><h6><span>疯抢300元优惠卷</span></h6><img src="img/小汽车.jpg" /></td>
<td><h5>大家电年度盛典</h5><h6><span>疯抢300元优惠卷</span></h6><img src="img/花.jpg" /></td></tr>
</table>
</body>
</html>
- 运行结果
5、表单的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<center><h3>注册页面</h3></center>
<form method="post">
昵称：<input type="text" size="27" maxlength="9"/><br />
密码：<input type="password" size="27" maxlength="9" /><br />
邮箱：<input type="text" size="27" maxlength="9"/><select>
<option>qq.com</option>
<option>萱蕚</option>
<option>选择</option>
</select><br />
性别：<input type="radio" name="age" value="男" />男
<input type="radio" name="age" value="女" />女<br />
爱好：<input type="checkbox" name="fruit" value="man" />旅游
<input type="checkbox" name="fruit" value="" />摄影
<input type="checkbox" name="fruit" value="orange" />运动<br />
个人简介：<br />
<textarea rows="10"cols="36">
</textarea><br />
上传个人照片：<br />
<input type="submit" value="上传文件" />未选择任何文件<br /><hr />
<center>
<input type="button" value="立即注册" /><br />
</center>
</form>
</body>
</html>
- 运行结果
