到这里,你已经完成了HTML学习的所有核心课程!现在,你不再是一个旁观者,而是一个真正的“建筑师”。是时候将所有学到的知识融会贯通,建造你的第一个完整的多页面网站了。 理论学习固然重要,但没有什么比亲手创造一个完整的项目更能巩固知识、带来成就感。
我们将构建一个包含三个页面的个人作品集网站。它将包括:
index.html: 网站主页,展示欢迎信息和你的照片。about.html: 关于我页面,介绍你的背景和技能。contact.html: 联系我页面,放置一个联系表单。首先,在你的电脑上创建一个新的项目文件夹,就叫 my-portfolio 吧。然后,在 my-portfolio 内部,创建如下的目录结构:
|my-portfolio/ ├── index.html ├── about.html ├── contact.html └── images/
index.html, about.html, contact.html。images 的子文件夹,用来存放网站图片。你可以找一张自己的照片或者喜欢的头像,命名为 profile.jpg 并放入该文件夹。index.html)这是访客打开你的网站时看到的第一个页面。它需要一个清晰的导航,链接到其他页面。
将以下代码完整地复制到你的 index.html 文件中,然后尝试进行修改成你想要的样子:
|<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>王小明 | 个人主页</title> </head> <body> <header> <h1>欢迎来到我的个人网站</h1> </header> <nav> <a href="index.html">主页</a> | <a href="about.html">关于我</a> | <a href="contact.html">联系我</a> </nav> <hr> <main> <h2>我是王小明,一位未来的Web开发者</h2> <p>我对用代码创造美妙的数字体验充满热情。</p> <img src="images/profile.jpg" alt="王小明的头像" width="200"> </main> <hr> <footer> <p>© 2023 王小明. 保留所有权利。</p> </footer> </body> </html>
<header>, <nav>, <main>, <footer>。<nav>部分包含了到所有三个页面的链接。注意,我们使用的是相对路径。<img>标签的src指向了images文件夹下的profile.jpg。请确保你的图片路径正确!about.html)这个页面用来详细介绍你自己。注意看,它的<header>, <nav>, <footer>部分和主页是完全一样的。这种一致性是专业网站的重要特征。
将以下代码完整地复制到你的 about.html 文件中,然后尝试进行修改成你想要的样子:
|<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>关于我 | 王小明</title> </head> <body
contact.html)最后,我们来创建一个包含表单的联系页面,让别人可以给你“留言”。
将以下代码完整地复制到你的 contact.html 文件中,然后尝试进行修改成你想要的样子:
|<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>联系我 | 王小明</title> </head> <body
现在,用浏览器打开你的index.html文件。
你看到了什么?一个可以工作的、由你亲手构建的网站!你可以点击导航栏在三个页面之间自由跳转。主页有你的欢迎词和照片,关于页面有你的技能清单,联系页面有一个功能完备的表单。
你可以为自己简单的鼓个掌了! 你已经将零散的HTML知识,凝聚成了一个具体、完整的项目。这是你开发之旅上的一个重要里程碑。
当然,现在它看起来可能还很朴素。但你别担心,你已经搭建了坚实的骨架,任何你在未来看到的复杂的网页,在原理上,它脱离不了我们所学习的骨架。
如果你完成了上面的所有步骤,并且渴望更多挑战,可以尝试在现有项目的基础上完成以下任务,来检验你的学习成果:
添加新页面: 创建一个 portfolio.html 页面,用来展示你的“项目”。在页面上至少放置两个虚构的项目,每个项目包含一个标题、一张图片和一段简短的描述。别忘了在所有页面的导航栏中都添加指向这个新页面的链接!
优化“关于我”页面: 回到 about.html,尝试将“我的技能”部分从无序列表<ul>改造为描述列表<dl>。使用<dt>来放置技能名称(如HTML),使用<dd>来放置熟练度描述(如“熟练”)。
添加邮件链接: 在所有页面的<footer>(页脚)中,添加一个mailto:链接,指向你自己的邮箱地址。
设置网站图标: 寻找一个你喜欢的 .png 或 .ico 图标文件,将它命名为 favicon.png 并放入 images 文件夹。然后,修改所有HTML文件,在<head>部分添加正确的<link>标签来引用这个图标。
完成这些挑战,将证明你已经真正掌握了HTML,并准备好进入下一个更精彩的学习阶段了!