使用
HTML5 Boilerplate最基本的用法是创建一个静态网站或简单的
app,一旦您下载或克隆了该项目,整个过程看起来就像:
- 设置网站的基本结构。
- 添加一些内容,样式和功能。
- 在本地运行您的网站,看看效果如何。
- 部署你的网站。
是不是很酷? 确实如此。也就是说,HTML5 Boilerplate提供的默认的基础元素、默认特性值和各种实用工具,可以作为你在构建时,任何感兴趣的项目的基础。
甚至通过自动化构建过程操纵代码,简单静态站点的基本用例也可以得到增强。完善的HTML5 Boilerplate可以与任何你正在使用的前端框架、CMS或者电子商务平台集成。使用你需要的东西,并丢弃其余部分。HTML5 Boilerplate只是一个开发起点,而不是最终目标。
基本结构
基本的HTML5 Boilerplate网站最初看起来像这样:
.
├── css
│ ├── main.css
│ └── normalize.css
├── doc
├── img
├── js
│ ├── main.js
│ ├── plugins.js
│ └── vendor
│ ├── jquery.min.js
│ └── modernizr.min.js
├── .editorconfig
├── .htaccess
├── 404.html
├── browserconfig.xml
├── favicon.ico
├── humans.txt
├── icon.png
├── index.html
├── robots.txt
├── site.webmanifest
├── tile.png
└── tile-wide.png
以下是每个主要部分的总体概述以及如何使用它们。
css
该目录应该包含项目的所有CSS文件。它包括一些初始CSS,以帮助你从坚实的基础开始。关于CSS。
doc
此目录包含所有的HTML5 Boilerplate文档。你可以将其用作自己项目文档的依据。
js
该目录应该包含项目的所有JS文件,库、插件和自定义代码文件都可以全部放到这里。它包括一些初始JS来帮助你起步。关于JavaScript。
.htaccess
默认的Web服务器配置适用于Apache。更多信息,请参考Apache Server Configs repository.
在Apache以外的服务器上托管你的站点?在我们的Server Configs上,你可能会找到相应的服务器配置项目。
404.html
一个有用的自定义404错误页面
browserconfig.xml
此文件包含有关IE11和Edge的自定义图块的所有设置。
有关此主题的更多信息,请参阅MSDN。
.editorconfig
提供该文件,以鼓励和帮助你和你的团队在不同的编辑器和IDE之间保持一致的编码风格。了解更多关于 .editorconfig
.
index.html
这是默认的HTML骨架,应构成您网站上所有页面的基础。如果你使用的是服务器端模板框架,那么你需要将此起始HTML与你的设置进行整合。
如果你修改了目录结构,请确保更新被引用的CSS和JavaScript的URL。
如果你正在使用Google Universal Analytics,请确保你编辑过的底部的相应代码段包含你的分析ID。
humans.txt
编辑此文件以包括在你的网站/app上工作的团队,以及为其提供的技术。
robots.txt
编辑此文件以包含你不想被搜索引擎抓取的页面。
Icons
用你自己的图标替换默认的 favicon.ico
, tile.png
, tile-wide.png
和 Apple
Touch图标。
如果要使用不同的Apple Touch图标适配不同的分辨率,请参考相关文档。