[TOC]
你，是一名S市的普通大学生，就读于S市一所没什么名气的大学。在半年前，你拿到了富淡大学 沙发销售系（Sofa Sell）的录取通知书，凭你的能力也就能考到这里了。尽管不是很满意，但在父母的期盼下，你还是只身来到了S市，开始了你为期四年的SS系的学习。
天边的夕阳透过窗帘洒下淡淡的光，漫到了你书桌上的装饰花的叶子上。此时的你坐在电脑桌前，百无聊赖的敲打着键盘，想着晚饭吃西红柿炒蛋还是酸辣粉。你眼前的电脑跳出来一个对话框，问你是否有兴趣参与一个"拯救世界"的计划。你看了半天，既没有找到拒绝按钮，也没有找到关闭页面的叉叉。你暗自骂了一声，以为自己的电脑中了病毒，便伸手去按下了关机按钮。突然，一束光从按钮中迸发出来……
再次醒来的时候，你已经躺在一个陌生的房间的床上，身上穿着臃肿的铠甲。一个声音传来：
“欢迎来到 World Evil Bureau，被选召的勇者。“
你诧异着这是个什么东西，你的英文并不好。
“你可能对这里不太熟悉，你只要知道这里是 WEB 就可以了。”一个优雅的女子走来 ”你是被选中来拯救这个世界的勇者，我是你的指引人，叫我 Tiffany Adele 就好。“
”你叫 TA ？你们把我抓过来要做什么？“你打算先问清楚。
“我知道，你是从 人界 过来的，不理解整个宇宙的运行规律，这很正常，我先跟你介绍一下。我们这里，是神界专门对抗邪恶的敌人的地方。宇宙中，存在着很多很多跟人界差不多的世界。人界一直是和平的状态，可其他的世界，却经常被邪恶所侵袭。我们从和平的世界选择出有能力的人，帮助我们战胜邪恶。”
“所以你们就把我抓过来当敢死队？你这叫绑架！“
”当然，在这个任务结束之后，我们会根据你的完成情况给你相应的 奖励。如果你能够完美的拯救这个世界，我会给你一个精英勋章，也叫A勋章。在六界之中，他可以帮助你完成任何一个愿望，我保证。即使你没有完全完成任务，我还是会给你一个B徽章或者C奖牌，他们也有一定的用处，但是可能就不能很好的满足你的愿望了哟。“
你猛然打起了精神，你早就想去读S市知名大学——焦桐大学 的SS系了，那可是全国最好的学院啊！A勋章能实现愿望？这是一个好机会。
“那我要做什么呢？”你问道。
Tiffany Adele说到：”你要去的这个世界已经被邪恶所占据，他化身为五个守护者，保证邪恶在这个世界的绝对统治权力。你所要做的，就是利用你自己的能力，打败这五个大魔王。他们分别是:
-
负责整个邪恶组织 整体架构 的 “虎头魔龙”（Hu Tou Mo Long）
-
负责邪恶组织对外 宣传美化 工作的 ”春色僧“（Chun Se Seng）
-
负责邪恶组织 前端 所有 活动 、响应各种 事件 的 ”酒神“（Jiu Shen）
-
负责邪恶组织 后端整体逻辑 的 ”炮灰婆“（Pao Hui Po）
-
储存整个邪恶组织的 重要文件和数据 的 “马云 · 沙奇里“（Ma Yun · Sha Qi Li）
在你的第一个任务中，你需要凭借你自己的能力来对抗 HTML 和 CSS 守护者，任务的详细内容我已经放在下面了。加油吧，勇者！“
你整理好自己的铠甲，拿起了自己的任务手册。
“完成这些任务，我就能去焦桐大学了么？”
你开始了自己的朝圣之旅。
课程Project 的目的主要是帮助同学们实践课上学到的原理性知识，提高同学们的代码能力和调试能力，帮助同学们独立完成一个小型网站建设和开发的全过程。同时，在完成整个项目的过程中，同学们将会了解到如何高效地利用网络资源来解决问题，提高自己 problem solving 的能力。
本课程的Project 共有两个，两个Project 完成后，同学们可以得到一个包括前端与后端，并且可以正常运行的网站。项目的内容是搭建一个旅游图片分享平台，网站包含基本的登录注册、图片浏览、图片搜索、上传收藏等多种功能。其中，Project 1主要完成前端页面的布局与设计，技术栈局限在 HTML和CSS两种语言中，要求实现正常的显示、跳转等逻辑，为Project 2 添加数据与动作打下基础。在正常的任务需求中，为了适应课程的进度，只会涉及到少量的JS。同时，为了满足学有余力的同学的需求，我们将会增设bonus部分，同学们可以根据自己的时间能力以及老师的讲课进度决定是否完成，bonus不做必须要求。本文档描述的为Project 1 的内容，PJ 1 任务量较小，约占整个项目的40%。
同学们如果对项目 需求 方面存在疑问，请登录elearning，在该课程的讨论区中有一个名为 “PJ 1项目需求疑问” 的帖子，同学们可以先浏览一下有没有相似的疑问。如果有，则利用助教的回复解决问题；如果没有或者没有解答你的疑惑，可以回复该帖子，助教会定期进行回复。
同学们如果对项目的 实现细节 方面存在疑问，请参照 [7.4 当你遇到问题时...](#7.4 当你遇到问题时...) 这一章节解决技术问题。
如果还有其他问题，欢迎大家私戳 PJ 1负责TA 张云哲进行讨论（邮箱：[email protected])
Project 1 截止时间：暂定为4月5日23:59（第五周周末）。
Project 1 面试时间：根据疫情发展酌情处理。
延期一天在项目总得分中扣除 5%，延期两天扣除 10%，依此类推。请大家尽快开始 Project 1 的设计和开发工作，切忌在 Deadline 临近时突击赶工。
页面结构应当符合图片网站的页面结构，布局合理，用户体验自然流畅。 功能区之间间隔合理，避免紧靠或造成视觉上的不适感。不能出现明显的区块错位现象，禁止使用图片替代本该用代码实现的布局样式。
页面中应当有一定的背景色和装饰图片，背景色和图片不应当影响主题内容的辨识度。页面字体大小适当、统一。页面颜色搭配美观和谐，整体效果应当令人感到舒适。避免出现过多的颜色，或者使用颜色对比过于强烈的图片作为背景纹理。
所有页面应当一致使用UTF-8编码，做到正确支持中英文字符的显示和输入，任何页面的任何位置都不应当出现乱码。
页面应在如下浏览器中有较为一致的显示(“较为一致”指的是各功能区位置相对关系、色彩、背景图片及其位置、文本显示样式、元素存在性没有明显差异，不包括 浏览器内建的HTML5控件的显示差异): Chrome最新版本 Firefox最新版本。
页面在浏览器中的显示效果应当与提交的截图较为一致。
代码应有适当的缩进和注释。若没有合理理由，尽量不要使用内联样式。尽力使用外部CSS，避免HTML代码和CSS代码混杂的情况。前台代码应考虑到Project 2中的后续实现，使用HTML标签时考虑语义。 合理设置HTML标签的id和class，合理使用CSS的选择器，尽量避免使用!important改变样式的优先级。 所有的文件引用应当使用相对路径，避免使用绝对路径，确保外联CSS以及图片能够正确载入。
本次PJ不给出设计图，但是给出一个基本功能已经实现的网站示例的截图。我们鼓励同学们参考其他优秀的网站自行进行网页设计，但是请自己编写代码，不得抄袭他人或者网络上的现成代码。
TA在需求文档和说明文档中提供的设计及截图仅供参考，鼓励同学们采用不同于 TA的设计，但是每个页面必须完成的得分点不能忽略。
在设计和开发过程中使用到的图片素材尽量采用版权自由的图像，避免侵权所需图像。
PJ1不允许使用Bootstrap等CSS框架，但是可以使用 SASS、LESS 等 CSS 预处理器 (使用不会有额外分数奖励)；也不允许使用诸如React、Vue等前端框架，但是使用 JQuery 是允许的。原因是PJ1是对基础html和css的实践，所以我们希望大家体验原生html和css搭建网站的过程，也方便日后学会使用框架后再度评判优劣。
我们在elearning上放置了PJ 1所需要的图片和文件素材，网站中的图片需要使用提供的图片素材作为展示图片，其他网页修饰图片可以自行获取。
提供的素材图片中有了两个文件夹，分别是 normal 文件夹和 square 文件夹。同学们在展示图片（如主页显示图片、我的收藏、浏览图片等界面）的时候使用square文件夹中提供的正方形图片素材即可，方便排版；但图片的详情页和上传页需要使用 normal 中的完整图片。
因为本次的PJ着重于页面设计，而且考虑到课程的进度问题。所以我们尽量在PJ1 的基础需求中不涉及任何 JavaScript 相关的操作，但也因此会缺乏许多逻辑性。我们将功能不完善的部分在具体需求的“功能缺陷”部分写出，这表示这里存在一些功能上的缺陷，我们在PJ 1中不需要实现，但是我们会在稍后的PJ 2中加以实现。
功能缺陷主要存在于以下两个部分：
- 1、由于 JavaScript 和 JQuery 的部分在本节中基本是略去的，所以相关的功能都不能实现，比如按钮的点击和网络请求等，我们只需要同学们在点击相关按钮的时候做出提示警告即可。一个简单的方式如下：
<div class="refresh" onclick="alert('图片已刷新')">refresh</div> 在任务描述中，所有后面表明"(alert)"字段的功能，只需要出现窗口提示即可，不需要完成详细功能。
- 2、由于目前没有数据库用于储存图片信息，所以涉及到所有图片相关信息的部分使用同样的信息即可。
导航栏界面：下面的三个页面属于导航栏条目可以跳转的页面
本页是登录之后的第一个页面，主要是给访问者的第一印象，带有热门图片的展示。
-
导航栏：导航栏主要分为两部分
导航条目和个人中心，Home条目高亮。-
导航条目是导航栏的主要组成部分，包括首页、浏览页、搜索页，功能和样式要求如下如下：- 1、点击导航栏条目可以跳转到对应的页面
- 2、鼠标移动到
导航条目上会出现样式变化 - 3、在当前
导航条目下导航栏条目显示“高亮”（比如颜色变化、下划线等醒目的标示）
-
个人中心主要索引与个人相关的内容，功能和样式要求如下：-
1、鼠标移动到
个人中心条目上时显示下拉菜单，菜单中包括上传、我的照片、我的收藏、登入四个部分，点击相关部分条目可以跳转到相关页面。功能缺陷：此时的网页无法保存用户的登录状态，所以这里暂时只需要让
登入条目跳转到登陆界面即可 -
2、鼠标移动到下拉菜单的条目上显示高亮，下拉菜单的条目内容前需要有合适的图标。
-
注：导航栏作为一个公用的组件，会被多个页面使用。在之后的页面中如果需要导航栏，则与这里的需求相同。
-
-
头图：展示网站引人注目的内容，选择一张nice的高清大图即可。
-
图片展示：用于展示网站的热门图片。
-
1、至少展示6张图片，图片布局合理。每张图片都带有
图片标题和图片描述的缩略版，用于介绍图片。 -
2、点击图片后，跳转到相应图片的
详情页。功能缺陷：这里的跳转不需要根据点击的图片跳转到相应的页面，只需要跳转到相同的页面即可。
-
-
页脚：展示网站版权信息等
- 一般来说主页的页脚是一些法律条文、备案号、联系方式之类的，可多可少，不作要求。但要求需要有带有自己个人ID的一些彩蛋（如微信二维码，备案号是自己的学号之类的），大家可以自行发挥。
- 其他页面的页脚简单即可
- 页脚链接无需跳转
-
辅助图标：在主页页面的右下角需要有两个悬浮的按钮，并且随着页面的滑动始终固定在页面右下角，分别用于 刷新图片素材（alert） 和 回到页面顶部。
- 刷新图片素材：首页有一部分的图片用于展示，而我们也需要一个刷新按钮来让使用者更换一批图片素材来浏览。（Alert即可）
- 回到页面顶部：当使用者浏览到长页面的下部分的时候，需要一个合理的按钮让使用者可以快速的回到页面顶部进行其他动作。这个按钮涉及到界面的展示，所以同学们需要用 JS 以及 JQuery 去实现。
这个页面主要可以通过标题、主题、国家、城市等多种标签筛选图片。
- 导航栏：同上，Browser条目高亮。
- 页脚：一行即可。
左侧边栏共分为三个部分，标题浏览、热门国家快速浏览、热门城市快速浏览。
标题浏览：用户可以通过输入标题进行图片的浏览，包括输入框和搜索按钮（alert）两个部分。热门国家快速浏览、热门城市快速浏览：在这两个列表中罗列出热门的国家和城市，用户可以通过点击的方式直接显示相应国家或城市的浏览结果。（这里的 ‘热门’ 自己选定即可）
主要区域分为两个部分：
-
多级选择栏：用户可以通过下拉选项实现对
主题、国家、城市的多级筛选，点击筛选按钮查看筛选结果（alert）。- 我们需要同学们实现 Select 选择器的二级联动，即根据 “国家” 选择器选择的内容选择 ”地区“选择器的选择范围。国家和地区的相关文件已经在提供的cities.json中给出，也可以自己编写配置文件或者静态的写在web中，具体的国家和地区不需要写太多，能够展示功能即可。
-
浏览结果展示：用于展示浏览的结果
-
1、图片布局合理，图片保证大小一致，仅显示图片即可，不需要其他文字描述。
功能缺陷：这里不需要展示真实的筛选结果，只需要简单的图片摆列即可。
-
2、点击图片后，跳转到相应图片详情页。
功能缺陷：这里的跳转不需要根据点击的图片跳转到相应的页面，只需要跳转到相同的页面即可。
-
3、浏览结果的最下方需要有页码显示，根据页码进行不同页的跳转浏览，最左和最后是跳转到首页和跳转到尾页的icon。每页展示的图片不限制。
功能缺陷：这里的页码不需要真正可以跳转，只需要简单的展示即可。
-
这个页面主要是可以使用图片的标题或者描述进行搜索。
- 导航栏 + 页脚：同上。
主要区域分为两个部分：
-
筛选部分：用户可以通过单选选项选择使用标题筛选或者描述筛选，并可以在输入框中输入搜索文字之后点击下方按钮进行搜索（alert）。默认通过标题筛选。
-
搜索结果：展示满足搜索条件的图片信息
- 图片信息包括图片、图片标题、图片描述。
- 每一项结果的左边是缩略图，右边是标题和描述，标题与描述有区分。
- 描述需要有多行，如果超出描述框以省略号显示。
- 下方使用页码进行多个搜索结果页的跳转。
功能缺陷：这里的搜索结果只需要展示一些重复的结果即可，并且页码同上，不需要可以跳转。
个人界面：下面三个属于用户个人私有界面
这个页面可以上传你自己的照片。
- 导航栏 + 页脚同上。
- upload按钮可以从本地上传图片，未上传时显示未上传提示文字，上传完成后在页面内显示图片。
- 这里我们需要同学利用 JS 和 JQuery 实现图片的上传，并在上传完成后展示在界面中
- 用户可以输入
图片标题、图片描述、拍摄国家、拍摄城市，最后点击下方的提交按钮，进行提交（alert）。 - 提交完成后，跳转到我的照片界面。
这个页面用于展示你自己的所有照片。
-
导航栏 + 页脚同上
-
显示部分：
-
1、每张照片的信息独占一栏，其中包括图片、图片标题、图片描述。点击图片跳转到图片详情页面。每一项结果的左边是缩略图，右边是标题和描述，标题与描述有区分。
-
2、每一栏包括两个按钮，分别用来修改图片信息和删除图片（alert），点击修改图片信息按钮需要跳转到上传界面，在上传页面修改原有的图片信息。
功能缺陷：在跳转到上传界面的时候应该需要在上传界面中填充图片原有的信息，但是本次PJ只需要跳转到上传界面即可，无需填充。
-
整个部分下方显示页码（无需实现页码功能）
-
- 导航栏 + 页脚同上
- 显示部分：
- 1、每张照片的信息独占一栏，其中包括图片、图片标题、图片描述。点击图片跳转到图片详情页。
- 2、每一栏有一个按钮，用于取消对这张图片的收藏（alert）
- 3、下方显示页码（无需实现功能）
其他界面
用户进行登录的界面，只有登录才可以进入主页。
-
无需导航栏，只需页脚
-
1、用户通过用户名、密码进行登录，登陆密码不得显示明文。点击登录之后跳转到主页。
-
2、引导没有注册的用户进行注册，点击提示按钮/文字跳转到注册页面。
功能缺陷：无需进行用户名和密码的验证以及违规字符判断，直接跳转到主页即可。
用户注册账户
-
无需导航栏，只需页脚
-
1、用户通过用户名、邮箱、密码进行注册，登陆密码不得显示明文。并且需要用户确认密码，验证相同后才可以注册。
-
2、点击注册后跳转到登录界面，用户需要再次登陆才可以进入主页。
功能缺陷：暂时无需确认两个密码相同，且无需保存注册的内容，跳转即可。
###4.9 图片详情页
展示一个图片的所有信息
- 导航栏 + 页脚
- 1、该页面需要展示图片、图片标题、拍摄者、图片描述、主题、拍摄国家、拍摄城市，并且布局合理，展示美观。
- 2、页面需要展示该照片已被收藏的数量，并有一个收藏按钮（alert），让用户收藏自己喜欢的照片。
我们在提供的素材图片文件夹 travel-images 中设置了两个文件夹，分别是 normal 文件夹和 square 文件夹，分别表示自由版式的图片和已经裁剪好方便排版的正方形图片。我们在项目需求中要求同学们使用square中的正方形文件即可，但是由于用户上传的图片不可能一直都是是正方形的图片，所以在我们展示图片的时候经常是对自由版式的图片进行处理，这就要求我们必须将自由版式的图片展示为固定版式的图片才可以，也就是 图片裁剪。
我们希望有能力的同学可以在整个网站中不使用 sqaure文件夹中的图片，只使用normal文件夹中的自由版式图片进行排版，这些图片在主页、浏览页、我的收藏等页面该如何变成你希望的固定板式的图片呢？请想出你的解决方法或Google一下采纳其他人的优秀solution。如果你完成了这个任务，请在报告中说明你完成了这个bonus 5.1，并大致写出你的解决方法。
因为浏览器的宽度会根据用户的使用所改变，并且打开网页的设备也不一定是宽度大于高度的显示器，也有可能是手机、iPad等移动设备。所以，这就要求我们的网页在运行在不同长宽比的设备上时，尽量不失去原有的排版和设计。
我们希望有能力的同学可以完成网站的 响应式布局 设计，保证可以在以下两种情况中不会出现太大的排版和设计上的错乱。
-
1、不过分改变浏览器宽度
-
2、在大部分移动设备上打开网页
当然，完美的完成响应式布局几乎是不可能的，我们希望同学们尽力而为，从各方搜索知识并使用原生CSS来完成设计，但是不允许使用外部框架或者库（比如bootstrap，这与PJ 1的理念背道而驰）。我们会根据你的布局设计来给予相应的bonus分数。如果你完成了这个任务，请在报告中说明你完成了这个bonus 5.2，并大致描述出你的解决方法。
美观、整洁的界面时所有网站所需要的，所以我们在评分的时候，会以个人视觉评判对网站的界面进行一个大致的打分。当然我们也不希望同学们在这方面花掉太多时间，所以我们不会以界面的好坏作为主要的评价标准，功能性才是最重要的。
同学们需要新建一个 PJ 1 专属的 Github repo，将自己的文件按照如下方式进行组织：
-
1、项目工程文件：所有的项目工程文件放在 /src 文件夹下，src 文件夹中的文件排布请自行有组织有条理的设置。
- 但是需要注意的是 index.html 必须放置在根目录下，方便我们之后对静态页面的设置。
-
2、图片文件：所有的图片文件请放置在 /img 文件夹下，img 文件夹中的文件排布请自行有组织有条理的设置。
-
3、程序的说明文档：命名为readme.md，放置在根目录下。文档内容可以包括：
- 你的姓名、学号
- Github 地址和 Github Pages 地址
- 你的项目完成情况
- Bonus的完成情况和解决方法
- 你对 PJ 1 和本门课程的意见和建议
当然，撰写 readme.md 需要你学习markdown的文件格式，你也可以使用其他方式写作，但是需要导出为 PDF 并放在根目录下。
- 我们推荐使用 markdown 格式进行写作，markdown 内置大量的小工具（包括公式、图床等），是代码工程师经常使用的文本编辑格式。而且，Github 对 markdown 有天然的支持，使用根目录下的 Readme.md 会自动渲染你的文件到页面上。
-
4、如果有其他文件，请合理进行排布。
大致的项目目录如下所示（网址和Git无效）
项目完成后，请将其提交到你新建的Github repo上，并参考 [7.5 Github Pages](#7.5 Github Pages) 设置为Github的静态页面，这样你就可以直接在网上浏览自己的静态在线页面啦！
我们会在ddl前在elearning上发布作业，同学们到时提交自己的 repo URL 即可。
具体的每个页面以及Bonus的评分标准请见 grade.pdf 文档，大家可以参照该文档进行最后的功能排查，防止因为功能理解不全而导致的扣分现象。
选用一款好用的编辑器可以极大地提高编码效率。不要使用记事本或者 Dreamweaver进行代码的编写。推荐大家使用SublimeText (http://www.sublimetext.com/) 、WebStorm(www.jetbrains.com/webstorm/)、VSCode（https://code.visualstudio.com/）等优秀的 IDE。这些IDE都有优秀的插件，帮助同学们高效的编写代码，具体插件和用法请自行Google查询，也可以浏览之前的 TA 们写的帮助文档（https://github.com/fudansswebfundamental/Docs/blob/master/%e5%bc%80%e5%8f%91%e5%b7%a5%e5%85%b7%e4%bb%8b%e7%bb%8d.md）
推荐大家使用Chrome浏览器进行调试：ChromeChrome Developer Tools，具体的调试方法已经在 lab 0 中阐述，大家也可以自行学习。
- 菜鸟教程：https://www.runoob.com/ 一个前后端技术栈非常全面的网站，可以帮助同学们快速入门Web开发，并可以实时运行html组件。
- MDN：https://developer.mozilla.org/zh-CN/ 文档式网站，可以方便的查询几乎所有Web开发相关的组件或函数的文档。
- 阿里巴巴矢量图标库：https://www.iconfont.cn/ 包含大量的无背景图标图片，可自由调整颜色以及下载。
- Font Awesome：http://www.fontawesome.com.cn/ 网页嵌入式icon组件，将icon变为文字组件，插入icon方便快捷（推荐）
- 1、首先，请登录 Google / Baidu / CSDN / StackOverflow 等，这些是最大型的自学编程网站。当你有技术问题的时候，请先自行搜索解决。在我们 TA 这几年的 Coding 生涯中，几乎大部分的编程能力都是从 博客 中学到的。如果你是抽象的问题请直接百度，如果你已经定位了问题到某个函数或者某个组件那么就去找响应的文档。当然，网络上的博客良莠不齐，所以在你无法断定哪一篇博客是正确的时候（特别是CSS的实践过程中），请参照步骤2。
- 2、当你不理解或者不确定某个问题时，做实验是一个不错的办法。你可以很简单的打开终端或者新建一个test.html 网页，在上面复现你的问题并进行调试，这样子可以非常方便快捷的实践你的知识并更加全面的认识他。
- 3、当你真的有问题无法得到解答或者有Bug调试不出来的时候，避免一个人死抠在电脑桌前坐两个小时，搞崩你的电脑的同时搞崩你的大脑。请不要吝惜你的移樽就教，主动请求老师同学基友闺蜜TA的帮助是一个很好的方法。中国伟大的哲学家鲁迅曾经说过：“你有一个iPhone，我有一个iPhone，我们互相交换，我们还是每人都有一个iPhone；但当你有一个知识，我有一个知识，我们互相交换，我们每人就有两个知识。”
- 4、遇到 Bug 不要心急，毕竟每个人在 coding 的路上都是新手，如果你写的代码没有 bug 那就去申请免修吧。在你的混乱的代码中学会 debug 将是非常重要的一种能力，努力提升你的 debug 水平，在你无法避免错误的时候尝试更快的解决错误。
本节将会帮助你将自己的静态网站发布到自己的Github，主要内容参照：https://pages.github.com/，大家也可以通过该网站自行学习。
1、首先，将已完成的项目提交到 Github 上，并记住将 index.html 放置到根目录下
2、点击上方分栏中的 Setting 条目，滑动到最下方找到 GitHub Pages 板块
3、将Source选项从None改为master branch，待页面刷新之后，会出现下图中蓝色框框内的字样，并提供你的静态网页的 url。此时 Github 的后台服务器正在创建你的页面但是还没有完成，现在访问网页是404的返回。
4、等待一段时间后，会刷新后会出现成功的字样，如下图所示。这就表示你的静态网站已经建立成功了，你成功的在人类的互联网上留下了你的足迹。
5、需要注意的是，由于Github的服务器在外网的原因，第一次加载图片可能会有些慢；而且，代码的更新可能不能很快速的表现在网页上。所以，请大家在coding的时候还是使用本地浏览器调试，GitHub Pages只作为提交的标准。