我目前的HTML BOULERPLATE

我用于HTML文档的基本结构的每个元素，具有解释原因。

通常，当我开始一个新项目时，我要么复制我建造的最后一个站点的HTML结构，也可以将其接头到HTML5样板并复制它们的样板。最近我没有开始一个新项目，但我必须记录我们在我们构建的网站上使用的结构。因此，只需复制和粘贴不是一个选择，我必须了解所做的选择。由于我花了很多时间研究和将结构放在一起，我决定与你分享。

＆lt ;! ＆gt;唯一页面标题 - 我的网站文档.documentElement .classlist。删除（＆＃39; no-js＆＃39;）;文档.DocumentElement .ClassList。添加（＆＃39; js＆＃39;）; ＆lt;！ - 内容 - ＆gt;

对于您中的旧学习者来说，您不需要任何您所学到的其他文档类型。这是唯一的。即使今天没有其他真实选择，也必须出于兼容性原因存在。

Lang属性是HTML中最重要的属性之一，因为它对许多事情都很强大和负责。您可以在使用Lang属性和Lang属性时阅读更多信息：浏览器告诉谎言，告诉甜蜜的小谎言。应用于HTML元素，它定义了页面的自然语言。它包含一个“语言标签”，以标记为标识语言（BCP47）的标签，例如英语，德语，德语或ru for俄语。

我使用No-JS类，以防我想在不支持JavaScript的浏览器中将样式应用于特定组件。将在支持和执行现代JavaScript的浏览器中删除此类。

此属性声明文档的字符编码。将其熄灭可能会导致某些浏览器中错误地显示特定字符​​。

以下是Safari如何使用Charset元标记显示我的名称。

它必须在＆lt; title＆gt之前出现。元素以避免页面标题中的错误字符。

视口元标签允许我们更改视口的宽度，这对于响应式Web设计所需的宽度。宽度=设备 - 宽度将视口宽度设置为屏幕宽度。首次加载页面时，初始缩放控制缩放级别。

我不确定是否需要设置初始标度= 1。我相信我读到某个地方，只需要徒步旅行iOS 9，但我找不到这篇文章了。

ViewPort Meta标签应在文档中尽早到期，以确保正确的文档渲染。

页面的唯一标题。它在许多地方显示，例如，在浏览器选项卡上，在搜索引擎结果中，当您将页面保存为书签等时。

我在js模块支持下切割芥末。如果浏览器支持JavaScript模块，这意味着它是一个支持现代JavaScript的浏览器，例如模块，ES 6语法，获取等。我仅向这些浏览器发货，我在CSS中使用JS类，如果样式，则使用JS类当JS处于活动状态时，组件不同。

例如，页面上的唯一描述在搜索结果页面上显示。它可以是任何长度，但搜索引擎截断转换为〜155-160个字符。

页面的唯一标题。由URL刮板在社交媒体平台上使用，如Twitter或Facebook。

页面的唯一描述。由URL刮板在社交媒体平台上使用，如Twitter或Facebook。

将链接与社交媒体，聊天应用程序或删除URL的其他站点共享到页面时显示的图像。

理想情况下，它应该是一个正方形图像，其重要内容放在具有2：1比例的矩形中的正方形中间。这将确保图像在带矩形和方形图像的卡片中看起来很好。

Twitter规则：此卡的图像支持宽高比为2：1，最小尺寸为300x157或最多4096x4096像素。图像的大小必须小于5MB。支持JPG，PNG，WEPP和GIF格式。

图像的描述。如果图像纯粹是装饰性的，请不要使用此元标记，并且不提供任何有意义的信息。如果我们不提供alt文本，屏幕读者忽略图像。

一个可选的打开图形属性，但推荐。它定义了页面的自然语言。

您正在共享的内容类型，例如网站，文章或视频。有效打开图形页面所需的属性。

此元标记定义了在Twitter上共享时卡片的外观。网站，摘要和summary_large_image有两个选项。

您可以看到我正在使用正方形图像，以确保卡在两种变化中都好。我涂上了卡粉红色的顶部和底部，以便您可以看到这些部件将在Sumbase_Large_Image中切断。

主题颜色为具有CSS颜色提供浏览器，以自定义页面的显示或周围的用户界面的显示。

用于传统浏览器的32×32px Favicon。它应该生活在您的网站根中。

大多数现代浏览器支持SVG Favicons。 Favicon.svg的好处是它在缩放时看起来更好，因为它是一个向量而不是光栅图像，我们可以将HTML和CSS添加到SVG，这意味着我们可以支持黑暗模式。

路径{填充：＃153A51; @Media（更喜欢 - 颜色方案：黑暗）{路径{填充：#ffffff; }}

如果将页面添加到主屏幕，则将使用180×180px图标苹果设备。

对于Android设备，我们需要一个.webmanifest文件，它提供浏览器，其中包含主屏幕所需的图标和PWAS的飞溅屏幕。

{＆＃34;姓名＆＃34; ：＆＃34; matuzo.at＆＃34; ，＆＃34;图标＆＃34; ：[{＆＃34; src＆＃34; ：＆＃34; / icon-192.png" ，＆＃34;类型＆＃34; ：＆＃34;图像/ png＆＃34; ，＃34;尺寸＆＃34; ：＆＃34; 192x192＆＃34; }，{＆＃34; src＆＃34; ：＆＃34; / icon-512.png" ，＆＃34;类型＆＃34; ：＆＃34;图像/ png＆＃34; ，＃34;尺寸＆＃34; ：＆＃34; 512x512＆＃34; }]}

使用规范链接元素来防止通过指定多个URL上可用的页面的原始源来防止由重复内容引起的SEO问题。

如果我想在不支持模块的浏览器上专门针对的JavaScript，我添加了Nomodule属性，它会使脚本仅在传统浏览器中运行，即IE 11。

javascript与type =＆＃34;模块＆＃34;只会在支持模块的浏览器中运行，它与Nomodule属性相反。

这不是绝对的最低限度，但它是我构建的大多数网站中所需要的。 要圆满努力，我已经向这篇文章添加了一堆标签，我们可能不再需要，以及你可能需要的其他一些你可能需要的东西。 如果您想了解有关＆lt; head＆gt的更多信息。 元素及其子女，查看Josh Buchea的梦幻般的存储库头。 我有没有错过或我错过了什么？ 请在推特或通过电子邮件告诉我。 从IE11开始，弃用文档模式，不再使用，除非暂时。 从IE11开始，边缘模式是首选文档模式; 它代表了对浏览器可用的现代标准的最高支持。 由于Safari 12，我们不再需要单独的图标变体为固定选项卡。 如果要确保在页面生命周期中早先提供特定资源，请使用预护。