Article

构建快速健壮的 Web 应用或网站 HTML5 蓝本

HTML5 样本

专业的 HTML5 蓝本，用于建立快速，健壮和适应性强的 Web 应用程序或网站。以下 HTML5 样本是10多年的继承开发和社区知识的生成。它没有强加特定的开发理念或框架，因此您可以按照自己的方式自由地构建代码。

最基本的用法是创建一个静态网站或简单的应用程序。该过程如下所示：

设置站点的基本结构。
添加一些内容，样式和功能。
在本地运行您的网站以查看其外观。
部署网站到互联网。

基本结构

基本的 HTML5 框架最初应符合这种规范：

.
├── css
│   ├── main.css
│   └── normalize.css
├── doc
├── img
├── js
│   ├── main.js
│   ├── plugins.js
│   └── vendor
│       └── modernizr.min.js
├── .editorconfig
├── .htaccess
├── 404.html
├── browserconfig.xml
├── favicon.ico
├── humans.txt
├── icon.png
├── index.html
├── package.json
├── robots.txt
├── site.webmanifest
└── tile.png

css

该目录应包含项目的所有 CSS 文件。它包括一些初始 CSS，或容错项目比如 normalize.css 可帮助您从坚实的基础开始。

此目录应包含项目的所有 JS 文件。库，插件和自定义 JS 代码都可以包含在此处。

.htaccess

适用于网站托管在 Apache 服务器 Web 配置。.htaccess（超文本）文件是一个的Apache HTTP服务器的配置文件。 .htaccess 文件主要用于：

重写 URL
控制缓存
认证方式
服务器端包含项
重新导向（重定向）
压缩

Apache 以外的服务器可请参阅本站相应的服务器配置文档。

404.html

自定义该页面友好的告知访客或搜索引擎故障内容，而不是显示一个404错误，这对于 SEO 十分有用。

browserconfig.xml

该文件包含有关 IE11 和 Edge 自定义图块的所有设置，有关此主题的更多信息，请参考Microsoft’s Docs。

.editorconfig

提供该文件是为了鼓励和帮助您和您的团队在不同的编辑器和IDE之间定义和维护一致的编码样式。默认情况下，.editorconfig包括一些基本属性，这些基本属性反映了默认情况下提供的文件中的编码样式，但是您可以轻松更改它们以更好地满足您的需求。有关更多详细信息，请参考EditorConfig项目。

注意：如果不使用该配置时，强烈建议阻止 web 服务器以对 .editorconfig 文件的访问，因为可能泄露敏感信息！

index.html

HTML 的起始框架，通常是构成网站上所有页面的基础。如果使用服务器端模板框架，则需要将此起始 HTML与设置集成在一起，如果完全修改目录结构，请确保更新引用的CSS和JavaScript的URL。

humans.txt

编辑此文件，以包括在网站/应用程序上工作的团队以及为其提供支持的技术。

package.json

编辑此文件以描述应用程序，添加与基于节点的开发和 npm 注册表相关的依赖项，脚本和其他属性。

robots.txt

编辑此文件以包括需要从搜索引擎中隐藏的页面，设定搜索引擎收录规范和权限。

Icons

设定默认的 favicon.ico 网站图标。设置 Touch 设备的 tile.png、tile-wide.png 图标。尽管图标的尺寸在 iOS 设备和版本之间可能会有所不同，但只要在页面中设定 180×180 像素的 icon.png 足够：<link rel="apple-touch-icon" href="icon.png">。

默认页面

默认情况下，至少有两个 html 页面：

index.html - 默认的 HTML 起始页或框架
404.html - 404错误的占位页面

Index.html 样本

<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <meta property="og:title" content="">
  <meta property="og:type" content="">
  <meta property="og:url" content="">
  <meta property="og:image" content="">

  <link rel="manifest" href="site.webmanifest">
  <!-- 站点图标 favicon.ico 直接存放在根目录自动生效 -->
  <link rel="apple-touch-icon" href="icon.png">

  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">

  <meta name="theme-color" content="#fafafa">
</head>

<body>

  <!-- 页面内容从这里添加 -->
  <p>Hello world!</p>

  <script src="js/vendor/modernizr.min.js"></script>
  <script src="js/plugins.js"></script>
  <script src="js/main.js"></script>

  <!-- 谷歌分析: 更改 UA-XXXXX-Y 站点 ID. -->
  <script>
    window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
    ga('create', 'UA-XXXXX-Y', 'auto'); ga('set', 'anonymizeIp', true); ga('set', 'transport', 'beacon'); ga('send', 'pageview')
  </script>
  <script src="https://www.google-analytics.com/analytics.js" async></script>
</body>

</html>

no-js 类

使用该 no-js 类是为了提供轻松、明确地添加基于 JavaScript 是否被禁用的自定义样式 .no-js 或启用 .js 。使用此设置有助于避免 FOUC（js 未加载完成时的 html 页面异常）。

document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/,'js');

语言属性

通过在属性中添加一个值来指定 html 内容的语言，如本例所示<html>中的lang：

<html class="no-js" lang="zh">

title、meta 顺序

字符集声明<meta charset="utf-8">必须完全包含在文档的前1024个字节中，并且应尽早指定（在攻击者可以控制的任何内容例如<title>元素之前），以避免可能的编码问题以及 Internet Explorer 中的相关安全问题。

description 描述

该 description meta 标签提供网页的简短说明。在某些情况下，此描述用作搜索结果中显示的摘录的一部分。

<meta name="description" content="这是一个描述">

移动设备定义

可以将一些不同的选项与 viewpor tmeta 标记一起使用。在 MDN 网络文档中有更多信息。下面的设置可以很好地平衡一般用例。

<meta name="viewport" content="width=device-width, initial-scale=1">

如果要利用 iPhone X / XS / XR 等设备的边缘显示特性，可以通过附加参数来实现。有关详细信息，请查看 WebKit 博客。

开放图谱协议

使用开放图谱协议，可以定义在第三方站点和应用程序（Facebook，Twitter，LinkedIn）上引用时显示站点的方式。该协议提供了一系列定义网站详细信息的元素。必需的属性定义标题，预览图像，URL 和类型（例如，视频，音乐，网站，文章）。

<meta property="og:title" content="code & remark">
<meta property="og:type" content="blog">
<meta property="og:url" content="https://lalayes.com">
<meta property="og:image" content="/imags/logo.webp">

除了这四个属性外，还可以使用许多其他属性来增加站点描述的丰富程度,以上只是最基本的实现，更详细的设置可参考 Open Graph protocol 官网。

Web App 清单

Web 应用程序清单是一个简单的 JSON 文件，可让您控制应用程序在设备主屏幕上的显示方式，在该上下文中启动时的外观以及启动时的状态。这样可以更好地控制移动设备上已保存的网站或 Web 应用的用户界面,它是从 HTML 链接获得，如下所示：

<link rel="manifest" href="site.webmanifest">

以上仅用于显示基本用法，应该用网站或应用程序的更多信息填写此文件，（PWA）详情。

网站图标

快捷方式图标应放在网站的根目录中，如果将 favicon.ico 其放置在根目录中，则会被浏览器自动拾取，Apple Touch 图标需另外创建，如：<link rel="apple-touch-icon" href="icon.png">。

normalize.css

Normalize.css 与许多重置功能的 CSS 不同，保留有用的默认值，规范各种元素的样式。更正错误和常见的浏览器不一致问题，通过细微的修改来提高可用性。

Modernizr.js

Modernizr.js 会根据不同浏览器向 html 元素添加类，并确保所有浏览器都可以使用 HTML5 元素（HTML5 Shiv 标准）。使基于浏览器支持的功能来定位 CSS 和 JavaScript 的各个部分。

从版本3开始，可以使用 modernizr-config.json 和 Modernizr 命令行实用程序自定义 Modernizr。

plugins

如果需要在项目中包含 polyfill 插件，则必须确保在其他 JavaScript 之前先加载 polyfill.js 。什么是 Polyfill ？

关于 Modernizr 和 polyfills 很多人会有一些误解。重要只需了解，Modernizr 仅处理功能检查，而不是自动填充。

Google 跟踪代码

项目分析统计例如：analytics.js 。默认情况下，Google Analytics（分析）当前是最受欢迎的跟踪解决方案之一。但是，它不是一成不变的，可以探索替代方法，以适用实际需求。

Mian.css 样本

为了使浏览器更一致地呈现所有元素并符合现代标准，推荐包括 Normalize.css，当然可以根据实际情况选择其他标准，下面仅仅只是一个例子：

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

textarea {
  resize: vertical;
}

.hidden,
[hidden] {
  display: none !important;
}

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

.invisible {
  visibility: hidden;
}

.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}

以上提供了基本的排版设置，以提高文本的可读性，防止text-shadow在文本突出显示期间出现不必要的情况，调整一些元素的默认取向（例如：img，video， fieldset，textarea）…

.hidden

.hidden可被添加到要隐藏的视觉和屏幕阅读器的任何元素。它可能是将要填充并显示的元素，也可能是使用 JavaScript 隐藏的元素。

.sr-only

.sr-only可以添加到要在视觉上隐藏的任何元素，而仍然有内容提供给屏幕阅读器。

.invisible

invisible可被添加到要隐藏的视觉和屏幕阅读器，但不会影响布局的任何元素。与.hidden有效地从布局中删除元素的类相反，.invisible类将仅使元素不可见，同时将其保留在流程中，并且不影响周围内容的位置。

.clearfix

.clearfix可以添加到任何元素，以确保它总是完全包含其子元素。一直以来，clearfix hack 有很多变种，但推荐 micro clearfix 该方法进一步减少了所需的CSS数量。

_mqs.css

占位符媒体查询，帮助建立移动样式，以实现更大的视口和高分辨率显示。建议根据站点的内容来调整媒体查询，而不要镜像特定设备的固定尺寸。如果不想采用移动优先的方法，则可以简单地编辑或删除这些媒体查询。一种可能性是从宽视口向下工作，而改用 max-width媒体查询例如：@media only screen and (max-width: 480px)。

_print.css

一些有用的打印样式，这些样式可以优化打印过程，并使打印的页面清晰更易于阅读。去除所有背景颜色，将字体颜色更改为黑色，然后删除text-shadow以帮助节省打印机墨水并加快打印过程。对链接进行下划线和扩展以包括URL这样做是为了使用户知道要引用的位。扩展缩写以包含完整的描述，使读者知道缩写代表什么。防止块引用，预格式化的文本，不被拆分在不同的打印页面。

Css 应该避免额外的 HTTP 请求，合并形式存在，将自定义内容包括在最后，以便覆盖其他样式。

JavaScript 约定

如果需要增强交互，默认情况下，会建立一个名为 main.js 的文件用于高级渲染，这很酷。

如果用于包含插件所支持的 js 框架，例如 jQuery 插件和其他用于优化网站的第三方脚本，会存在一个约定命名为 plugins.js 的文件放在 main.js 之前，通常位置是</body>之前，例如：

...省略若干内容...
     <script src="js/plugins.js"></script>
     <script src="js/main.js"></script>
  </body>
</html>

这里有一个实用的微型 JS 脚本，以避免浏览器中的 console 错误。该脚本将确保，如果控制台没有值，则该方法将具有 empty 函数的值，从而防止浏览器引发错误。

// Avoid `console` errors in browsers that lack a console.
(function() {
  var method;
  var noop = function () {};
  var methods = [
    'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
    'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
    'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
    'timeline', 'timelineEnd', 'timeStamp', 'trace', 'warn'
  ];
  var length = methods.length;
  var console = (window.console = window.console || {});

  while (length--) {
    method = methods[length];

    // Only stub undefined methods.
    if (!console[method]) {
      console[method] = noop;
    }
  }
}());