点此查看 所有教程、项目、源码导航

本文目录

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="data: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="data:images/su02.png"><br><img src="data:images/su03.png"><br><img src="data:images/su04.png"><br><img src="data: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篇也不算慢。难的是持之以恒，凡事积小成多，努力努力再努力，直到量变引起质变。

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

零基础HTML入门教程(23)--HTML综合实例相关推荐

零基础Bootstrap入门教程(0)--教程背景与目录
点此查看所有教程.项目.源码导航本文目录 1. 背景 2. 教程目录 3. 源码下载 1. 背景在学习完成HTML/CSS/JS/jQuery零基础入门教程后,自然而然我们要进入Bootstra ...
零基础SSM入门教程(0)--教程背景与目录
点此查看零基础JavaWeb全栈文章目录及源码下载 1. 背景本教程的出发点是写一个比较条理,比较全面的SSM系列教程,首先造福自己.理顺自己的知识体系,然后也造福大众,因为网上现存的资源相对比较 ...
取得数组下标_《零基础C++入门教程》——（8）搞定二维数组与循环嵌套
一.学习目标了解二维数组的使用方法了解循环嵌套的使用方法目录预备第一篇,使用软件介绍在这一篇,C++与C使用的软件是一样的,查看这篇即可:<零基础看得懂的C语言入门教程>--(二) ...
sql数据库教程百度云_【推荐】零基础水彩画入门教程|零基础水彩教程百度云...
零基础水彩画入门教程|零基础水彩教程百度云! 照着教程画却总是画不好,这些水彩技法你真的学会了吗? 盲目地照着葫芦画瓢,不懂控制确实很难学会,可以关注一下公众号:每日学绘画,可以领取水彩电子书和全套视 ...
零基础CSS入门教程(1)–初识CSS
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. HTML与CSS区别 3. CSS有哪些功能 4. 如何学习CSS 1. 前言学习CSS是离不开HTML的,HTML是CSS的基础,如 ...
【PR】零基础快速入门教程
[PR]零基础快速入门教程 PR(Premiere)能做什么? PR欢迎界面及新建项目工作区及窗口说明导入文件建立序列视频剪辑添加字幕导出视频使用软件:Premiere2020 新年卷起 ...
零基础JavaScript入门教程(1)–走进JavaScript的世界
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. JS的历史 3. JS的地位 4. JS与HTML.CSS的区别 5. JS是真正的编程语言 6. JS的组成部分 7. 小结 1. 前 ...
大数据零基础如何入门教程
程序员必看大数据教程最全1024G学习资料免费赠送详解,大数据工作者可以施展拳脚的领域非常广泛,从国防部.互联网创业公司到金融机构,到处需要大数据项目来做创新驱动.数据分析或数据处理的岗位报酬也非常丰 ...
零基础GitHub入门教程
最近Github很火,暑期的时候也注册了一个账号,可是其实一直没用.主要呢,是不知道那到底干什么用.现在要照着自己的学习记录一个像我这种完全零基础的人的入门教程. 首先,让我们先知道GitHub到底是 ...

零基础HTML入门教程(23)--HTML综合实例

本文目录

1. 背景

2. 开发流程

2.1 网站功能设计

2.2 建立网站目录结构

2.3 开发首页

2.2 生平简介页

2.3 经典诗词页

2.4 苏轼图集页

2.5 留言板

3. 小结

零基础HTML入门教程(23)--HTML综合实例相关推荐

最新文章

热门文章