案例研究演示了如何构建一个完整的 <AppML> 互联网应用程序，具有针对数据库中的若干表进行信息列举、编辑和搜索的功能。

添加 HTML 模板

我们将演示如何向 HTML 页面添加 HTML 模板。

列出客户

HTML - View

<h1>Customers</h1>

<div id="List01"></div><br>

<table id="Template01" class="appmltable" style="display:none">

<tr>

<th>Customer</th>

<th>City</th>

<th>Country</th>

</tr>

<tr id="appml_row">

<td>#CustomerName#</td>

<td>#City#</td>

<td>#Country#</td>

</tr>

</table>

<script src="appml.js"></script>

<script>

var customers

customers=new AppML("appml.php","Models/Customers");

customers.run("List01","Template01");

</script>

过去的日子里，从头开始创建一个网站变得越来越容易。了解HTML、可能还有CSS的程序员，可以用很少的精力创建一个不错的网页，然后把它放在网络服务器上，就搞定了。比如：

当然，你可以选择这种创建方式，但有一些不错的改变，你可以试试。随着互联网的速度要求越来越快，浏览器变得越来越标准化和强大，网站的规模和复杂性也越来越多，即便是有经验的设计师都会使用具有高级功能的设计工具和代码编辑器来使开发过程更顺利。

如今，很少有程序员从头开始设计web网页了。大多数程序员都使用预制模板设计，自定义适合其内容管理系统的选择。即使是构建复杂Web应用程序的程序员也依赖于模板库。

但是，如果要为内容管理系统或静态站点生成器构建新模板，该怎么办？如果想使用单个目标网页或少量不太可能经常更改的静态网页构建简单网站，该怎么办？如果要编写JavaScript应用程序但不想使用复杂的框架或库来构建最终输出怎么办？

对我来说，最重要的是控制。随着时间的推移，网页越来越肥胖。程序员进行web开发时，应该以内容为重。问问自己，真的需要加载这个页面时显示这样的网络字体吗？必须用jQuery，还是可以用几行Vanilla JS完成同样的事情？

使用HTML模板和框架可以帮助程序员实现标准化，易于使用的布局网格，以及现代化的功能。与此同时，它们还很简单。这里有三个开源的HTML5模板以供参考。

1、Bootstrap

Twitter的Bootstrap也许是创建新网页最著名的模板框架之一。它的无所不在已经导致了网页设计界的反弹，Bootstrap很简单，几乎完全没有定制的实现。

Bootstrap可以轻松创建响应式设计，并具有许多开箱即用的功能：从图标到样式输入，并将标准化带到许多常见的页面元素，从breadcrumbs到警报到分页，同时还有大量现成的主题。

2、HTML5 Boilerplate

HTML5 Boilerplate包括大部分程序员会用到的元素，对很多项目开箱即用：分析片段以及一些默认的CSS和JavaScript模板。

HTML5 Boilerplate相当轻便，如果你不需要某个特定组件，很容易就可以剪掉。如果你在追求极简主义和功能全面之间的平衡，HTML5 Boilerplate可能是最佳选择。

3、Skeleton

Skeleton是一堆框架中最轻的。如果曾经使用过Web框架，并且发现它们太笨重，或者只是为了满足需要，可以考虑使用Skeleton来处理：一个简单的网格，格式很好的表单，列表，排版等基本要素，跨浏览器支持。

使用一些不错的模板和编辑器，程序员不需要复杂的JavaScript框架来构建一个简单的前端，无论是传统的页面还是轻量级Web应用程序。如果这三个都不满意，还可以考虑Initializr，一个可以预配置HTML5 Boilerplate的开源Web应用程序。

你最喜欢的web设计模板或框架是什么呢？你有哪些很棒的web设计方法呢？欢迎评论区交流