练习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>

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

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

练习HTML——简单的网页设计相关推荐

HTML5期末大作业：漫画网站设计——海贼王基地(5页) 学生动漫网页设计模板下载海贼王大学生HTML网页制作作品简单漫画网页设计成品 dreamweaver学生网站模板
HTML5期末大作业:漫画网站设计--海贼王基地(5页) 学生动漫网页设计模板下载海贼王大学生HTML网页制作作品简单漫画网页设计成品 dreamweaver学生网站模板常见网页设计作业题材有 ...
web网页设计实例作业 ——中国茶文化(30页) HTML网页制作作品简单文化网页设计成品 dreamweaver学生网站模板
web网页设计实例作业 --中国茶文化(30页) HTML网页制作作品简单文化网页设计成品 dreamweaver学生网站模板常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. ...
div+css静态网页设计 web网页设计实例作业 ——中国茶文化(30页) HTML网页制作作品简单文化网页设计成品 dreamweaver学生网站模板
web网页设计实例作业 --中国茶文化(30页) HTML网页制作作品简单文化网页设计成品 dreamweaver学生网站模板常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. ...
HTML+CSS简单漫画网页设计成品--(红猪（9页）带注释)
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 网页设计作业 | 动漫网页设计 | 动漫网页设计成品 | 动漫 ...
TML5期末大作业：动漫网站设计——神偷奶爸(10页) HT简单个人网页设计作业静态动漫主题网页作业 DW个人网站模板下载大学生简单个人网页作品代码
HTML5期末大作业:动漫网站设计--神偷奶爸(10页) HT简单个人网页设计作业静态动漫主题网页作业 DW个人网站模板下载大学生简单个人网页作品代码常见网页设计作业题材有个人. 美食. 公司 ...
B1HTML5期末大作业：动漫网站设计——海贼王中乔巴漫画(5页) 学生动漫网页设计模板下载海贼王大学生HTML网页制作作品简单漫画网页设计成品 dreamweaver学生网站模板
HTML5期末大作业:动漫网站设计--海贼王中乔巴漫画(5页) 学生动漫网页设计模板下载海贼王大学生HTML网页制作作品简单漫画网页设计成品 dreamweaver学生网站模板常见网页设计作业题 ...
HTML5期末大作业：动漫网站设计——斗破苍穹动漫(6页) HTML+CSS+JavaScript 学生动漫网页设计模板下载斗破大学生HTML网页制作作品简单漫画网页设计成品 dreamweav
HTML5期末大作业:动漫网站设计--斗破苍穹动漫(6页) HTML+CSS+JavaScript 学生动漫网页设计模板下载斗破大学生HTML网页制作作品简单漫画网页设计成品 dreamweave ...
HTML5+CSS期末大作业：篮球明星个人网站设计——篮球明星介绍(6页) 简单的学生DW网页设计作业成品 web课程设计网页规划与设计简单个人网页设计作业静态HTML旅行主题网页作业 DW
HTML5+CSS期末大作业:篮球明星个人网站设计--篮球明星介绍(6页) 简单个人网页设计作业静态HTML旅行主题网页作业 DW个人网站模板下载大学生简单个人网页作品代码常见网页设计作业题材有 ...
HTML+CSS简单漫画网页设计成品大学生个人HTML响应式--(海贼王 6页)
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 网页设计作业 | 动漫网页设计 | 动漫网页设计成品 | 动漫 ...

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

练习HTML——简单的网页设计相关推荐

最新文章

热门文章