通过HTML知识简单做一个网页

216 阅读1分钟

对于前面学习的知识点做一个小练习


运用用工具

软件: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>

结果展示

结果.png


心得总结

知识点没有人和技巧,死记硬背才是真道理。目前学习知识点较简单,更复杂更炫酷的网页需要继续深入学习。还有一些易错点需牢记: 1、注意空格:标签里符号的空格;标签与标签的空格; 2、单选框实现单选功能需要加上name来区别;3、提交和重置按钮需要在<form>中书写