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

淡淡的烟草味﹌ 2022-09-15 05:33 184阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  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建立目录结构如下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_9_color_FFFFFF_t_70_g_se_x_16]  
解释下，所有文件都放到项目文件夹`023-html-demo`下，表示第23篇博客-HTML相关-实例的意思。

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

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

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

## 2.3 开发首页 ##

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

整体代码如下：

效果如下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16]

## 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>

效果如下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16 1]

## 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>

效果如下：

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16 2]

## 2.4 苏轼图集页 ##

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

效果如下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16 3]

## 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>

效果如下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16 4]

# 3. 小结 #

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

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

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

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_9_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/ee6a8c0d8c27452fa601e363e991bbbb.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/6d86650259014acdb688ebc57a6c975f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/753e6f2f186c4d43ab27d1db0bbdd6db.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/e3b8a26a64644e619f3cab486bbf13ae.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/c52a5403a8164639be1dd50a6ffef112.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220828/061abbf3595e460583ba11d7f4a972da.png