练习HTML——简单的网页设计

用了一天的时间学习孙鑫老师的HTML视频,(视频只有2个小时)主要内容就是关于编写HTML语言的标记符号,深知这些符号是记不住的,所以除了跟着老师练习实例以外,自己也编写了一个简单的网页设计,当然了,对于后台代码没有实现,只是简单的进行了界面设计,整个网页内容涵盖了视频中讲到的所有的内容,自己做出一个最简单的网页,挺开心的,对于我的学习马上就正式的进入了B/S的阶段,对学习的内容充满兴趣就是最好的开始!

下面就是整个视频中涉及到的所有内容:

登陆界面:


HTML代码:

<html>
	<head><title>欢迎登陆HTML网站</title></head>
	<body>
		<center>	
		<h2><b><font color="red">欢迎登陆HTML网站</font></b></h2>
		
		<p>
			     <a href="http://blog.csdn.net/xh921"><b>制作人:肖红</b><br></a>
			<hr color="blue">
			用户名:<input type="text" name="user" value="" width="30"><br>
			密码: <input type="password" name="pwd" value="" width="30"><br>
			<table>
				<tr>
					<td>
						<input type="reset" value="退出">
						<a href="网站首页.html"><input type="submit" value="登录"></a>
					</td>
				</tr>					
			</table>
		<p>		
			<a href="注册信息.html"><b><i><font size="4" color="green">如果您是首次登陆,请点击这里注册您的登陆信息!!!	</font></i></b></a>	
		</center>
	</body>
</html>

其中用到了文本内容的样式和格式,用代码编写控件以及超链接

首次登陆需要注册信息,下面是注册界面:


HTML代码:

<html>
	<head><title>欢迎注册信息</title></head>
	<body>
		<center>
			<caption><b>注册信息</b></caption>
			<p>
			<form method="get" action="zhuce.html">
				<table>
					<tr>
						<td>用户名:</td>
						<td><input type="text" name="user" value="" width="30"></td>
					</tr>
					<tr>
						<td>密码:</td>
						<td><input type="password" name="pwd" value="" width="30"></td>
					</tr>
					<tr>
						<td>性别:</td>
						<td>
							<input type="radio" name="sex" value="0" checked>男
							<input type="radio" name="sex" value="1">女
						</td>
					</tr>
					<tr>
						<td>兴趣爱好:</td>
						<td>
							<input type="checkbox" name="interest" value="football">足球
							<input type="checkbox" name="interest" value="basketball">篮球
							<input type="checkbox" name="interest" value="volleyball">排球
							<input type="checkbox" name="interest" value="swim">游泳<br>
							<input type="checkbox" name="interest" value="tennis">网球
							<input type="checkbox" name="interest" value="traveling">旅游
						  <input type="checkbox" name="interest" value="painting">绘画
						  <input type="checkbox" name="interest" value="reading">读书
						</td>
					</tr>
					<tr>
						<td>最高学历</td>
						<td>
							<select size="1" name="education">
							<option value="" selected>...</optin>
							<option value="高中">高中</option>
							<option value="大专">大专</option>
							<option value="大学">大学</option>
							<option value="博士">硕士</option>
							<option value="博士">博士</option>
							</select>
						</td>
					</tr>
					<tr>
						<td valign="top">个人说明:</td>
						<td><textarea name="personal" rows="5" cols="30">个人简介</textarea></td>
					</tr>
					<tr>
						<td> <input type="reset" value="重置"></td>
						<td><input type="submit" value="注册"></td>
					</tr>
				</table>
			</form>
			<a href="网站首页.html"><font color="red"><b><font size="5">提示:</font></b>注册成功之后请点击这里您将直接登陆系统!</font></a>
		</center>	
	</body>
</html>

其中用到的主要就是交互式表单的制作。

下面是网站首页:


HTML代码:

<html>
	<head><title>欢迎登陆HTML网站首页</title></head>
	<body>
<a href="欢迎登陆HTML网站.html">
		<img src="网站首页图标.gif" width="80" height="50">
</a>
		<center>
			<h1><font size="15">HTML网站</font></h1>
			<hr color="blue">
			<p>
				<b><i><font size="3">
					该网站资源丰富,包含了不同级别网页设计师需要的各种资源<br>
					<p>
					有以系列为主的视频教程,有各种书籍以及各方专业人士的技<br>
					<p>
					术博客,您所需要的应有尽有!学习HTML,我们永远陪伴您!!
				</font></i></b>
		</center>
		<p>					
		<table border="1" align="center">
					<tr align="center" valign="middle">
						<td width="150" height="40"><b><font color="red">基础学习知识</font></b></td>
						<td width="150" height="40"><b><font color="red">学习教程</font></b></td>
						<td width="150" height="40"><b><font color="red">在线书籍阅读</font></b></td>
						<td width="150" height="40"><b><font color="red">练习基地</font></b></td>
					</tr>
					<tr align="center" valign="middle">
						<td width="150" height="40"><b><font color="red">代码大全</font></b></td>
						<td width="150" height="40"><b><font color="red">最新文章</font></b></td>
						<td width="150" height="40"><b><font color="red">视频教程</font></b></td>
						<td width="150" height="40"><b><font color="red">技术博客</font></b></td>
					</tr>
		</table>
	</body>
</html>

其中主要有表格的使用,加上了一个图片超链接

熟悉老师在视频中所讲的内容,应用这些最基本的东西自己制作了一个简单的网页,自己动手做一些小实例,不仅能够熟悉学习内容,更能增加自己学习的兴趣,时时刻刻给自己动力就是最好的学习的方式。


发布了163 篇原创文章 · 获赞 23 · 访问量 17万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览