对于前面学习的知识点做一个小练习
运用用工具
软件:Hbuilder
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>制作一个简单的表单网页</title>
</head>
<!--网页背景选择一个浅蓝色-->
<body bgcolor="powderblue">
<!--我采用居中对齐的格式-->
<div align="center">
<!--开始书写内容-->
<h2>美好的一天</h2>
<!--截取一些莎士比亚的诗句-->
<p>旭日不曾以如此温馨的蜜吻;给予蔷薇上晶莹的黎明清露</p>
<p>皓月不曾以如此璀璨的光箭;穿过深海里透明澄澈的波心</p>
<!--换行保持整洁-->
<br />
<!--插入图片做点缀,单击图片可查看图片来源-->
<a href="http://www.baidu.com">
<img src="img/people.jpg" width="500px" height="300px" />
</a>
<br />
<!--开始制作表单-->
<form action="http://www.baidu.com" method="post">
<!--下拉菜单--心情选择-->
<span>今天的心情</span>
<select>
<option>--心情选择--</option>
<option>开心</option>
<option>平静</option>
<option>难过</option>
</select>
<br />
<!--多选--做一个日常记录-->
<span>今天需要完成的事情</span>
<input type="checkbox" /> <span>观看前端教学视频</span>
<input type="checkbox" /> <span>完成知识点总结</span>
<input type="checkbox" /> <span>运动</span>
<input type="checkbox" /> <span>阅读</span>
<br />
<!--提交按钮-->
<input type="submit" value="提交"/>
<!--重置按钮-->
<br />
<input type="reset" value="重置" />
</form>
</body>
</html>
结果展示
心得总结
知识点没有人和技巧,死记硬背才是真道理。目前学习知识点较简单,更复杂更炫酷的网页需要继续深入学习。还有一些易错点需牢记:
1、注意空格:标签里符号的空格;标签与标签的空格;
2、单选框实现单选功能需要加上name来区别;3、提交和重置按钮需要在<form>中书写