您的位置：首页 > Web前端 > HTML

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

2014-06-18 17:56 441 查看
用了一天的时间学习孙鑫老师的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>

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

熟悉老师在视频中所讲的内容，应用这些最基本的东西自己制作了一个简单的网页，自己动手做一些小实例，不仅能够熟悉学习内容，更能增加自己学习的兴趣，时时刻刻给自己动力就是最好的学习的方式。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航