JavaWeb学习之路(23)–HTML综合实例-阿里云开发者社区

开发者社区> 程序员大阳> 正文

JavaWeb学习之路(23)–HTML综合实例

简介: 本文目录 1. 背景 2. 开发流程 2.1 网站功能设计 2.2 建立网站目录结构 2.3 开发首页 2.2 生平简介页 2.3 经典诗词页 2.4 苏轼图集页 2.5 留言板 3. 小结
+关注继续查看

1. 背景

通过前面22篇文章的学习,我们对HTML有了一个比较全面的了解。


本篇,我们编写一个网站实例,来看看通过已经掌握的HTML知识,能开发出什么样子的网站。


2. 开发流程

2.1 网站功能设计

我们打算开发一个介绍苏轼的网站,没错,就是那个鼎鼎有名的大文人苏轼,网站我们就起名为【苏轼网】。


我们打算设计如下网页:


首页:展示网站标题【苏轼网】,及苏轼大图一张。

生平简介:展示一篇介绍苏轼生平的文章

经典诗词:通过表格展示苏轼经典的诗词

苏轼图集:展示苏轼相关的图片

留言板:提供网友填写留言的表单

2.2 建立网站目录结构

通过VSCode建立目录结构如下:


解释下,所有文件都放到项目文件夹023-html-demo下,表示第23篇博客-HTML相关-实例的意思。


内有5个网页,home是首页,introduce是生平简介,message是留言板,picture是苏轼图集,poem是经典诗词。


还有一个images文件夹,里面包含5张图片,是我从网上下载的苏轼相关图片,当做网站的图片资源,集中放到images文件夹下。


此处需要注意的是images文件夹和5个网页处于同一目录下,即项目文件夹023-html-demo下,而5张图片是处于images文件夹之内的。


2.3 开发首页

首页需要放置一个导航栏,导航栏可以展示所有页面的超级链接,然后需要放置网站标题和首页大图。


整体代码如下:


<html>


<head>

   <meta charset="utf-8">

   <title>首页</title>

</head>


<body>

   <!-- 导航栏 -->

   <div>

       <ul>

           <li><a href="home.html">首页</a></li>

           <li><a href="introduce.html">生平简介</a></li>

           <li><a href="poem.html">经典诗词</a></li>

           <li><a href="picture.html">苏轼图集</a></li>

           <li><a href="message.html">留言板</a></li>

       </ul>

   </div>

   <!-- 网站标题 -->

   <h1>苏轼网</h1>

   <!-- 首页大图 -->

   <img src="images/su01.png">

</body>


</html>


效果如下:



2.2 生平简介页

生平简介页面,导航栏跟首页是一样的,其实所有页面的导航栏都相同,因为导航是用于跳转任意网页的。


然后生平简介页面在导航下面还需要放置生平简介文章,所以代码如下:


<html>


<head>

   <meta charset="utf-8">

   <title>生平简介</title>

</head>


<body>

   <!-- 导航栏 -->

   <div>

       <ul>

           <li><a href="home.html">首页</a></li>

           <li><a href="introduce.html">生平简介</a></li>

           <li><a href="poem.html">经典诗词</a></li>

           <li><a href="picture.html">苏轼图集</a></li>

           <li><a href="message.html">留言板</a></li>

       </ul>

   </div>

   <!-- 内容 -->

   <p>

       苏轼(1037年1月8日—1101年8月24日),字子瞻,一字和仲,号铁冠道人、东坡居士,世称苏东坡、苏仙 、坡仙

       ,汉族,眉州眉山(今四川省眉山市)人,祖籍河北栾城,北宋文学家、书法家、美食家、画家,历史治水名人。

       苏轼是北宋中期文坛领袖,在诗、词、散文、书、画等方面取得很高成就。

   </p>

</body>


</html>


效果如下:



2.3 经典诗词页

经典诗词页,上面同样是导航栏,下面通过表格展示一些经典诗词即可。


<html>


<head>

   <meta charset="utf-8">

   <title>生平简介</title>

</head>


<body>

   <!-- 导航栏 -->

   <div>

       <ul>

           <li><a href="home.html">首页</a></li>

           <li><a href="introduce.html">生平简介</a></li>

           <li><a href="poem.html">经典诗词</a></li>

           <li><a href="picture.html">苏轼图集</a></li>

           <li><a href="message.html">留言板</a></li>

       </ul>

   </div>

   <!-- 诗词表格 -->

   <table border="1">

       <thead>

           <th>题目</th>

           <th>名句</th>

       </thead>

       <tbody>

           <tr>

               <td>念奴娇·赤壁怀古</td>

               <td>大江东去,浪淘尽,千古风流人物</td>

           </tr>

           <tr>

               <td>江城子·乙卯正月二十日夜记梦</td>

               <td>十年生死两茫茫。不思量,自难忘</td>

           </tr>

           <tr>

               <td>水调歌头·明月几时有</td>

               <td>人有悲欢离合,月有阴晴圆缺,此事古难全</td>

           </tr>

       </tbody>

   </table>

</body>


</html>


效果如下:




2.4 苏轼图集页

除了导航栏外,添加一些苏轼相关图片即可。


<html>


<head>

   <meta charset="utf-8">

   <title>苏轼图集</title>

</head>


<body>

   <!-- 导航栏 -->

   <div>

       <ul>

           <li><a href="home.html">首页</a></li>

           <li><a href="introduce.html">生平简介</a></li>

           <li><a href="poem.html">经典诗词</a></li>

           <li><a href="picture.html">苏轼图集</a></li>

           <li><a href="message.html">留言板</a></li>

       </ul>

   </div>

   <!-- 图集 -->

   <img src="images/su02.png"><br>

   <img src="images/su03.png"><br>

   <img src="images/su04.png"><br>

   <img src="images/su05.png"><br>

</body>


</html>


效果如下:



2.5 留言板

除了导航栏之外,我们可以通过表单制作一个留言板。当然由于我们目前只学习了HTML,所以留言板只能显示一个界面,并不能真正将留言提交给我们的后台,这个留待以后完善。


留言板代码如下:


<html>


<head>

   <meta charset="utf-8">

   <title>留言板</title>

</head>


<body>

   <!-- 导航栏 -->

   <div>

       <ul>

           <li><a href="home.html">首页</a></li>

           <li><a href="introduce.html">生平简介</a></li>

           <li><a href="poem.html">经典诗词</a></li>

           <li><a href="picture.html">苏轼图集</a></li>

           <li><a href="message.html">留言板</a></li>

       </ul>

   </div>

   <!-- 图集 -->

   <form action="#" method="get">

       请输入姓名:<input type="text" name="username"><br>

       请输入留言:<input type="text" name="content"><br>

       <input type="submit" value="提交留言">

   </form>

</body>


</html>


效果如下:



3. 小结

通过23篇文章的学习,并且编写了一个综合实例,如果认真学习的话,现在想必对HTML网页世界有了一个完全不一样的认识。


实际上这23片文章的内容并不多,1天学习两三篇也是很正常的事情,1天学习1篇也不算慢。难的是持之以恒,凡事积小成多,努力努力再努力,直到量变引起质变。


哪有什么天赋异禀,谁的本事不是刻苦学来的。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
2020年,我们该如何学习 WEB 前端开发
每当想要开始学习,脑子里总会跳出一系列问题:WEB前端的学习先后顺序是什么?PC端必须要掌握哪些知识和框架?移动端要掌握哪些知识和框架?TypeScript和node.js是否为可学可不学?新手应该按照什么先后次第学习呢?本文是阿里巴巴淘系技术部高级前端工程师——小问的个人经验总结,希望帮到处于迷茫期的你!
2796 0
MySQL---数据库从入门走向大神系列(十七)-JavaWeb分页技术实例演示2
分页,是一种将所有数据分段展示给用户的技术.用户每次看到的不 是全部数据,而是其中的一部分,如果在其中没有找到自己想要的内容,用户可以通过指定页码或是点上/下一页的方式进行翻页。 本例演示静态分页,也就是先设置好每页显示10行,再根据总行数,来算出总页数,并且只显示10个页码。
1102 0
Java I/O学习(附实例和详解)
版权声明:本文为博主原创文章,转载注明出处http://blog.csdn.net/u013142781 目录(?)[+] 一、Java I/O类结构以及流的基本概念 在阅读Java I/O的实例之前我们必须清楚一些概念,我们先看看Java I/O的类结构图: Java I/O主要以流的形式进行读写数据。
2329 0
算法学习之路|部分A+B
正整数A的“DA(为1位整数)部分”定义为由A中所有DA组成的新整数PA。例如:给定A = 3862767,DA = 6,则A的“6部分”PA是66,因为A中有2个6。
885 0
C#版Websocket实例
Demo地址:www.awbeci.xyz websocket有java、nodejs、python,Php等等版本,我使用的是C#版本,服务器端是Fleck,github地址:https://github.
2233 0
HTML5 FormData实现文件上传实例
原文:HTML5 FormData实现文件上传实例 表单提交,文件上传是一个常用又十分麻烦的功能,以前要上传文件通常都是借助插件或者flash来实现,噼里啪啦的加载一大堆东西。自从有了HTML5的FormData后,老板再也不用担心我的上传了。
1238 0
从零开始学习 webservice第一集,java webservice简单实例入门教程
现在从零开始学习webservice 概念自己百度搜,总之,webservice就相当于一个接口,就像你走进了一家售货店,你不需要知道这家店怎么卖给你东西,你拿着钱去,说我要一包玉溪,人家就会给你返回一包玉溪烟,这就是webservice。
1478 0
+关注
程序员大阳
努力努力再努力
588
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载