# 构建银行应用程序第1部分:Web应用中的HTML模板和路由 ## 课前测验 [课前测验](https://ff-quizzes.netlify.app/web/quiz/41) ### 简介 自从浏览器中出现JavaScript以来,网站变得比以往更加互动和复杂。如今,Web技术常被用来创建直接在浏览器中运行的功能齐全的应用程序,我们称之为[Web应用程序](https://en.wikipedia.org/wiki/Web_application)。由于Web应用程序高度互动,用户不希望每次执行操作时都需要等待整个页面重新加载。因此,JavaScript被用来直接通过DOM更新HTML,以提供更流畅的用户体验。 在本课程中,我们将为创建银行Web应用程序奠定基础,使用HTML模板创建多个屏幕,这些屏幕可以显示和更新,而无需重新加载整个HTML页面。 ### 前置条件 你需要一个本地Web服务器来测试我们将在本课程中构建的Web应用程序。如果你没有,可以安装[Node.js](https://nodejs.org),然后在项目文件夹中使用命令`npx lite-server`。它会创建一个本地Web服务器并在浏览器中打开你的应用程序。 ### 准备工作 在你的电脑上创建一个名为`bank`的文件夹,并在其中创建一个名为`index.html`的文件。我们将从这个HTML[样板代码](https://en.wikipedia.org/wiki/Boilerplate_code)开始: ```html Bank App ``` --- ## HTML模板 如果你想为一个网页创建多个屏幕,一种解决方案是为每个屏幕创建一个HTML文件。然而,这种解决方案有一些不便之处: - 切换屏幕时需要重新加载整个HTML,这可能会很慢。 - 在不同屏幕之间共享数据会变得困难。 另一种方法是只使用一个HTML文件,并使用`