前言
在开发前端项目时，构建一个规范的 HTML 页面是至关重要的。HTML5 Boilerplate 是一个流行的前端项目模板，也是一个不错的起点。为了方便使用，H5BP 团队将其打包成了一个 npm 包，可以通过 npm 快速安装和使用。
本文将介绍如何使用 npm 包 h5bp 构建 HTML 页面。
安装
npm 包 h5bp 的安装非常简单，只需要在你的项目目录中运行以下命令即可：
npm install h5bp --save
用法
安装完成后，我们可以在 HTML 模板中引入所需的 H5BP 文件。
CSS
HTML5 Boilerplate 中的样式表包含了网站常用的重置、布局和一些常见的 ui 组件，如按钮、表格等。可以通过以下方式引入 H5BP 的 CSS 文件：
<link rel="stylesheet" href="/node_modules/h5bp/dist/css/main.css">
JavaScript
HTML5 Boilerplate 中集成了一些重要的 JavaScript 库和插件，比如 Modernizr、jQuery、Respond 和 html5shiv。可以引入所需的文件：
<script src="/node_modules/h5bp/dist/js/vendor/modernizr-3.11.2.min.js"></script> <script src="/node_modules/h5bp/dist/js/vendor/jquery-3.6.0.min.js"></script> <script src="/node_modules/h5bp/dist/js/vendor/respond.min.js"></script> <script src="/node_modules/h5bp/dist/js/vendor/html5shiv-3.7.3.min.js"></script>
Meta 标签
HTML5 Boilerplate 中默认包含了一系列的 meta 标签，如 charset、viewport、X-UA-Compatible 等等。可以通过以下方式添加 meta 标签：
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
示例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------- ---------------
----- ------------------ ---------- ----------- -- -- ---------
----- --------------- ---------------------------- -----------------
----- ---------------- --------------------------------------------
------- -------------------------------------------------------------------------
-------
------
---- ---- ---
------- ---------------------------------------------------------------------
------- ----------------------------------------------------------------
------- ------------------------------------------------------------------------
-------
-------小结
npm 包 h5bp 是一个方便快捷的创建规范 HTML 页面的工具，使用它可以提高我们的开发效率和代码质量。希望本文能对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/77174