html5-boilerplate中文翻译 - 使用篇(个人强烈推荐阅读,包含很多有价值、值得使用的知识点)

in cn •  7 years ago  (edited)

HTML5 Boilerplate 主页 | 目录

使用

HTML5 Boilerplate最基本的用法是创建一个静态网站或简单的
app,一旦您下载或克隆了该项目,整个过程看起来就像:

  1. 设置网站的基本结构。
  2. 添加一些内容,样式和功能。
  3. 在本地运行您的网站,看看效果如何。
  4. 部署你的网站。

是不是很酷? 确实如此。也就是说,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图标适配不同的分辨率,请参考相关文档

注:翻译中的链接现在还是原文中的链接(链接内容还是英文文档),当翻译到相关文章时,会进行相应替换。最后全部翻译完成时,就不会再有这种情况发生,到时大家可以到github上查看完整文档,现在还请大家多多谅解。

What you want, Go after It.


https://steemit.com 首发。感谢阅读。

欢迎Follow, Upvote, Reply, Resteem (repost)激励我创作更多更好的内容。

@syt

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!