HTML5 Boilerplate 完整教程
目录
- 什么是 HTML5 Boilerplate？
- 为什么要使用它？
- 如何快速开始？
- 核心文件与目录结构详解
- 关键特性与最佳实践解析
index.html- 语义化与性能优化css/- CSS 构建策略js/- JavaScript 最佳实践.htaccess- 服务器配置（Apache）package.json- 项目管理与构建
- 如何将 H5BP 集成到你的项目中？
- 手动下载
- 使用命令行工具
- 进阶：使用构建工具（如 Gulp, Webpack）
- 总结与最佳实践
什么是 HTML5 Boilerplate？
HTML5 Boilerplate (简称 H5BP) 不是一个框架，而是一个专业、成熟、灵活的前端项目模板，它为你提供了一个坚实、高性能、跨浏览器兼容的网站起点。
（图片来源网络，侵删）
你可以把它想象成盖房子前打下的“地基”，这个地基包含了所有现代网站都需要的最佳实践，包括：
- 经过优化的 HTML5 文档结构。
- 跨浏览器兼容的 CSS 重置。
- 高性能的 JavaScript 初始化模式。
- 用于提升性能和安全性的服务器配置（
.htaccess）。 - 现代化的开发工作流建议（通过
package.json）。
它的核心目标是：让你专注于网站的独特内容，而不是重复搭建基础架构。
为什么要使用它？
直接从空白文件开始开发,很容易忽略一些细节，使用 H5BP 的好处显而易见：
- 最佳实践的集合：它集成了社区多年总结出的最佳实践，帮你避免常见的坑。
- 性能优化：内置了性能优化策略，如预加载、缓存、资源压缩等，让你的网站加载更快。
- 跨浏览器兼容性：通过 Modernizr 和 CSS 重置，确保你的网站在旧版浏览器上也能优雅降级。
- 安全性增强：提供了防止 XSS、点击劫持等常见攻击的配置。
- 可扩展性：它是一个“脚手架”，而不是一个“框架”，你可以根据项目需求自由地添加或修改任何部分。
- 统一标准：在团队开发中，使用 H5BP 可以确保项目有一个统一、高质量的起点。
如何快速开始？
最简单的方式是访问其官方网站：html5boilerplate.com
（图片来源网络，侵删）
点击 "Download" 按钮，你会得到一个包含所有初始文件的 ZIP 压缩包，解压后，你就可以开始编辑 index.html 文件来构建你的网站了。
核心文件与目录结构详解
一个典型的 H5BP 项目结构如下：
your-project/
├── css/
│ ├── main.css # 主要的样式文件
│ └── normalize.css # CSS 重置，让所有浏览器默认样式一致
├── js/
│ ├── main.js # 主要的 JavaScript 文件
│ └── plugins.js # 用于存放第三方库（如 jQuery）
├── img/
│ └── ... # 存放图片
├── .htaccess # Apache 服务器的配置文件（非常重要）
├── index.html # 主 HTML 文件
├── favicon.ico # 网站图标
├── apple-touch-icon.png # 苹果设备上的主屏幕图标
├── humans.txt # 声明网站的开发团队信息
├── robots.txt # 指引搜索引擎爬虫的规则
└── package.json # 项目依赖和脚本管理关键特性与最佳实践解析
index.html - 语义化与性能优化
这是项目的核心,让我们分解一下其中的关键部分：
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">HTML5 Boilerplate</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<!-- 预加载关键资源 -->
<link rel="preload" href="js/main.js" as="script">
<link rel="preload" href="css/main.css" as="style">
</head>
<body>
<p>你的内容在这里...</p>
<!-- Modernizr 在 head 中加载，用于特性检测 -->
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
<!-- 在 body 底部加载 JS，避免阻塞渲染 -->
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</body>
</html>
关键点解析：
（图片来源网络，侵删）
<!doctype html>：声明文档类型，让浏览器以标准模式渲染。<html class="no-js" lang="en">：lang="en"：指定网站语言，有助于 SEO 和屏幕阅读器。class="no-js"：这是一个巧妙的技术，默认情况下，HTML 有no-js类，如果你的 JavaScript 成功加载，一个简单的脚本会把这个类替换为js，这样你就可以在 CSS 中写.no-js { ... }来为未启用 JS 的用户提供样式，然后通过.js .my-element { ... }来覆盖 JS 环境下的样式。
<meta http-equiv="x-ua-compatible" content="ie=edge">：强制使用 IE 的最新渲染模式。<meta name="viewport">：响应式设计的基石，告诉浏览器如何控制页面的尺寸和缩放。<link rel="preload">：性能优化，告诉浏览器在页面加载初期就优先下载关键资源（如 JS 和 CSS），减少渲染阻塞。<script src="..."></script>放在</body>前：这是经典的性能优化技巧，将脚本放在底部可以防止它们加载和执行时阻塞页面的渲染，让用户能更快地看到内容。
css/ - CSS 构建策略
normalize.css：它不像旧的reset.css那样粗暴地将所有元素的样式清零。normalize.css只修复了不同浏览器之间的不一致性，并保留了浏览器有意义的默认样式，更加现代化和友好。main.css：你将在这里编写你的所有自定义样式，H5BP 的main.css初始为空，给你一个干净的开始。
js/ - JavaScript 最佳实践
vendor/或plugins.js：用于存放第三方库（如 jQuery, Lodash），将它们和你的业务代码（main.js）分开是一个好习惯。main.js：你自己的 JavaScript 代码。modernizr-3.x.min.js：一个轻量级的库，用于检测浏览器对新 Web 特性的支持情况，你可以在 CSS 中使用它来为不支持某些特性的浏览器提供回退方案（.no-flexbox .my-element { display: block; }）。
.htaccess - 服务器配置（Apache）
这个文件是 H5BP 的“秘密武器”，它包含了大量服务器端的优化和安全配置，
- MIME 类型：确保服务器能正确提供各种文件类型。
- 缓存控制：通过
Expires和Cache-Control头，让浏览器缓存静态资源（JS, CSS, 图片），极大提升二次访问速度。 - 压缩：启用
mod_deflate或mod_gzip，在服务器端压缩传输内容，减少文件大小。 - 安全：防止点击劫持、目录列表、访问隐藏文件等。
- URL 重写：配置
404错误页面等。
注意：这个文件仅适用于 Apache 服务器，对于 Nginx，你需要将配置转换为 Nginx 的语法。
package.json - 项目管理与构建
这是现代前端项目的标配,它定义了：
- 项目信息：名称、版本、描述等。
- 依赖：项目运行所需的库（如
jquery）。 - 开发依赖：构建和开发工具（如
gulp,webpack）。 - 脚本：可以自定义命令，
npm run build或 `
