尧图网站建设 
HTML5 Boilerplate 的默认 HTML 骨架index.html 与 404.html 实战指南【免费下载链接】html5-boilerplateA professional front-end template for building fast, robust, and adaptable web apps or sites.项目地址: https://gitcode.com/gh_mirrors/ht/html5-boilerplate本篇技术指南以 HTML5 Boilerplate 官方文档 docs/html.md 为骨架结合仓库中真实存在的 src/index.html、src/404.html、src/site.webmanifest 等文件展开。读完你将掌握如何在模板默认的两张 HTML 页面基础上正确配置lang、字符集、Meta 描述、移动端 viewport、Open Graph 社交分享元数据、Web App Manifest 与站点图标理解每个标签的规范依据与在项目中的实际落点并了解构建产物中 HTML 相关文件的校验机制。HTML5 Boilerplate 默认提供两张 HTML 页面index.html全站页面的基础骨架与404.html占位用的 404 错误页。本章即围绕这两张页面展开。index.html默认 HTML 骨架打开仓库中的 src/index.html可以看到模板默认的完整骨架!doctype html html lang head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 title/title link relstylesheet hrefcss/style.css meta namedescription content meta propertyog:title content meta propertyog:type content meta propertyog:url content meta propertyog:image content meta propertyog:image:alt content link relicon href/favicon.ico sizesany link relicon href/icon.svg typeimage/svgxml link relapple-touch-icon hreficon.png link relmanifest hrefsite.webmanifest meta nametheme-color content#fafafa /head body !-- Add your site or application content here -- pHello world! This is HTML5 Boilerplate./p script srcjs/app.js/script /body /html这张骨架的所有元素都可以在 docs/html.md 中找到对应的设计依据下面逐项展开。lang 语言属性请务必为你的内容指定语言在html标签的lang属性中写入一个 IANA 语言子标签 所定义的值例如html langen中文站点可写作html langzh-CN。注意模板默认留空html lang这是刻意为之——模板无法替你决定站点的语言需要你在初始化时补上。语言属性不仅影响屏幕阅读器发音与浏览器翻译行为也是搜索引擎理解页面内容语言的重要信号。title与meta标签的顺序字符集声明meta charsetutf-8必须完整包含在文档的前 1024 字节之内并且应尽可能早地声明。因此在 src/index.html 中它紧跟!doctype html之后、head的第一行出现这是模板刻意保持的顺序目的是避免浏览器在解析到字符集声明之前就已按错误编码读入后续内容。Meta Description 元描述descriptionmeta 标签为页面提供一段简短描述在某些情况下会被搜索引擎用作搜索结果摘要的一部分meta namedescription contentThis is a descriptionGoogle 的 Create good meta descriptions 文档提供了撰写有效描述的建议。模板中该标签与og:title、og:type等 Open Graph 标签一样默认留空content等待填充。Mobile Viewport 移动端视口viewportmeta 标签用于控制移动设备上页面的布局视口。HTML5 Boilerplate 自带一套适用于大多数通用场景的简单配置meta nameviewport contentwidthdevice-width, initial-scale1其中widthdevice-width让布局视口宽度等于设备宽度initial-scale1表示初始缩放比例为 1避免移动浏览器默认以桌面宽度渲染后再缩小。若你的页面需要适配 iPhone X/XS/XR 等全面屏设备的边缘到边缘显示可以参考 WebKit 官方博客Designing Websites for iPhone X添加viewport-fitcover等扩展参数并结合 CSS 的env(safe-area-inset-*)处理安全区。更完整的说明见 MDN 的 viewport meta 文档。Open Graph Metadata 社交分享元数据Open Graph 协议 允许你定义站点在第三方平台Facebook、X、LinkedIn 等被引用时的呈现方式。协议通过一系列 meta 元素定义站点详情其中必需属性包括标题、预览图、URL 与类型如 video、music、website、articlemeta propertyog:title content meta propertyog:type content meta propertyog:url content meta propertyog:image content meta propertyog:image:alt content除这四个必需属性外协议还提供了更多可选属性用于丰富站点描述。以下为 HTML5 Boilerplate 官网自身的 Open Graph 元数据示例在必需字段之外增加了og:description以便更详细地描述站点meta propertyog:url contenthttps://html5boilerplate.com/ meta propertyog:title contentHTML5 ★ BOILERPLATE meta propertyog:type contentwebsite meta propertyog:description contentThe web’s most popular front-end template which helps you build fast, robust, and adaptable web apps or sites. meta propertyog:image contenthttps://html5boilerplate.com/icon.png !-- Empty for decorative images. -- meta propertyog:image:alt content值得注意两点og:image通常应指向绝对 URL 以便第三方平台抓取og:image:alt对纯装饰性图片留空即可这与文档中 “Empty for decorative images” 的注释一致。在 src/index.html 中这五个 Open Graph 标签均已预留位置你只需填写content。Web App Manifest 网页应用清单HTML5 Boilerplate 附带一个极简的 Web App Manifest 文件。Web App Manifest 是一个简单的 JSON 文件用于控制应用在设备主屏幕上的呈现方式、启动时的外观以及启动行为从而对移动设备上被保存的站点或 Web App 的 UI 拥有更大的控制权。它在 HTML 中的引用方式为link relmanifest hrefsite.webmanifest仓库中对应的 src/site.webmanifest 仅包含一个骨架级别的 app 定义用于演示基本用法{ short_name: , name: , icons: [{ src: icon.png, type: image/png, sizes: 192x192 }], start_url: /?utm_sourcehomescreen, background_color: #fafafa, theme_color: #fafafa }你应根据站点或应用的真实信息填充该文件。上例中的字段含义short_name/name应用显示名称short_name用于图标下方空间受限的场景icons应用图标数组src指向图标路径type声明 MIME 类型sizes声明尺寸仓库默认配套的图标是 src/icon.png192×192start_url从主屏幕启动时打开的地址模板中的/?utm_sourcehomescreen用于区分启动来源background_color/theme_color应用启动画面背景色与主题色模板统一使用#fafafa与 src/index.html 中meta nametheme-color content#fafafa保持一致。Favicons 与 Touch Icon 站点图标快捷键图标shortcut icons应放置在站点的根目录。将favicon.ico放在根目录后浏览器会自动拾取它。HTML5 Boilerplate 自带一套默认图标含 favicon 与一个 Apple Touch Icon可作为你制作自有图标的基线。当前仓库根目录下的图标资源包括src/favicon.ico32×32 的传统浏览器标签页图标src/icon.svg矢量 SVG 图标在 src/index.html 中以link relicon href/icon.svg typeimage/svgxml引用现代浏览器优先使用src/icon.png192×192 的 PNG 图标同时被apple-touch-icon与 Web App Manifest 引用。src/index.html 中的完整引用方式如下link relicon href/favicon.ico sizesany link relicon href/icon.svg typeimage/svgxml link relapple-touch-icon hreficon.png其中apple-touch-icon是 iOS 用户把 Web App 添加到主屏幕时使用的图标。更详细的图标定制方案包括各 iOS 设备尺寸的适配请参阅文档的 Extend 章节 中 Apple Touch Icons 一节。Content Area 内容区域模板的主体body部分几乎是空的仅保留了一行示例文本与脚本引用。这是刻意为之——HTML5 Boilerplate 需要同时适用于网页web page与 Web Appweb app两种开发场景因此内容区交由你按需填充。从 src/index.html 可以看到默认只包含!-- Add your site or application content here -- pHello world! This is HTML5 Boilerplate./p script srcjs/app.js/script把注释与示例文本替换为你的真实内容并视需要在/body前追加你自己的脚本即可。404.html占位错误页模板提供的第二张页面是 src/404.html一个自包含inline style无外部资源依赖的 404 错误页!doctype html html langen head meta charsetutf-8 titlePage Not Found/title meta nameviewport contentwidthdevice-width, initial-scale1 style /* 居中布局 移动端适配的极小 CSS见源文件 */ /style /head body h1Page Not Found/h1 pSorry, but the page you were trying to view does not exist./p /body /html !-- IE needs 512 bytes: https://docs.microsoft.com/archive/blogs/ieinternals/friendly-http-error-pages --这张页面有三个值得注意的设计细节自包含样式错误页的 CSS 直接内联在style中即使站点的外部样式表加载失败404 页依然能正常呈现移动端适配内联样式内置了media only screen and (max-width: 280px)断点在极窄屏幕上缩小标题字号并放宽内容宽度IE 兼容注释页面末尾的注释提醒——旧版 IE 对小于 512 字节的错误页会显示自己的 friendly 错误页而非你自定义的内容因此 404 页面应保持足够体积该页面加上内联样式后已满足要求。与构建与测试的联动HTML5 Boilerplate 的 HTML 相关文件不仅在src/下存在还会随构建进入发布产物并有自动化测试守护其完整性根目录 package.json 的h5bp-configs.directories定义了src、dist、test等目录执行npm run build内部为gulp build后src/下的index.html、404.html、favicon.ico、icon.png、icon.svg、robots.txt、site.webmanifest等文件会被复制到dist/目录test/file_existence.mjs 中expectedFilesInDistDir数组明确断言了发布目录必须包含404.html、index.html、favicon.ico、icon.png、icon.svg、robots.txt、site.webmanifest等文件任何构建流程对 HTML 产物目录结构的破坏都会被npm test内部执行gulp archive mocha捕获根目录 src/robots.txt 是配合 HTML 页面的爬虫规则文件默认允许抓取全部内容User-agent: *Disallow:若你的站点需要隐藏页面或指定 sitemap可在该文件中追加规则也可参考 docs/extend.md 中 Search 一节的说明如meta namerobots contentnoindex、Sitemap:指令、link relcanonical等 SEO 相关扩展点。延伸阅读docs/extend.md更多可选的 HTML 扩展包括 DNS 预取link reldns-prefetch、RSS/Atom 订阅链接、Schema.org 微数据、iOS Web App meta 标签、color-scheme与theme-color扩展等docs/css.md默认 CSS构建后为css/style.css的使用指南docs/js.md默认 JavaScript构建后为js/app.js的使用指南docs/usage.md项目整体内容概览与上手方式。【免费下载链接】html5-boilerplateA professional front-end template for building fast, robust, and adaptable web apps or sites.项目地址: https://gitcode.com/gh_mirrors/ht/html5-boilerplate创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 HTML5 Boilerplate 的默认 HTML 骨架：index.html 与 404.html 实战指南
HTML5 Boilerplate 的默认 HTML 骨架index.html 与 404.html 实战指南【免费下载链接】html5-boilerplateA professional front-end template for building fast, robust, and adaptable web apps or sites.项目地址: https://gitcode.com/gh_mirrors/ht/html5-boilerplate本篇技术指南以 HTML5 Boilerplate 官方文档 docs/html.md 为骨架结合仓库中真实存在的 src/index.html、src/404.html、src/site.webmanifest 等文件展开。读完你将掌握如何在模板默认的两张 HTML 页面基础上正确配置lang、字符集、Meta 描述、移动端 viewport、Open Graph 社交分享元数据、Web App Manifest 与站点图标理解每个标签的规范依据与在项目中的实际落点并了解构建产物中 HTML 相关文件的校验机制。HTML5 Boilerplate 默认提供两张 HTML 页面index.html全站页面的基础骨架与404.html占位用的 404 错误页。本章即围绕这两张页面展开。index.html默认 HTML 骨架打开仓库中的 src/index.html可以看到模板默认的完整骨架!doctype html html lang head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 title/title link relstylesheet hrefcss/style.css meta namedescription content meta propertyog:title content meta propertyog:type content meta propertyog:url content meta propertyog:image content meta propertyog:image:alt content link relicon href/favicon.ico sizesany link relicon href/icon.svg typeimage/svgxml link relapple-touch-icon hreficon.png link relmanifest hrefsite.webmanifest meta nametheme-color content#fafafa /head body !-- Add your site or application content here -- pHello world! This is HTML5 Boilerplate./p script srcjs/app.js/script /body /html这张骨架的所有元素都可以在 docs/html.md 中找到对应的设计依据下面逐项展开。lang 语言属性请务必为你的内容指定语言在html标签的lang属性中写入一个 IANA 语言子标签 所定义的值例如html langen中文站点可写作html langzh-CN。注意模板默认留空html lang这是刻意为之——模板无法替你决定站点的语言需要你在初始化时补上。语言属性不仅影响屏幕阅读器发音与浏览器翻译行为也是搜索引擎理解页面内容语言的重要信号。title与meta标签的顺序字符集声明meta charsetutf-8必须完整包含在文档的前 1024 字节之内并且应尽可能早地声明。因此在 src/index.html 中它紧跟!doctype html之后、head的第一行出现这是模板刻意保持的顺序目的是避免浏览器在解析到字符集声明之前就已按错误编码读入后续内容。Meta Description 元描述descriptionmeta 标签为页面提供一段简短描述在某些情况下会被搜索引擎用作搜索结果摘要的一部分meta namedescription contentThis is a descriptionGoogle 的 Create good meta descriptions 文档提供了撰写有效描述的建议。模板中该标签与og:title、og:type等 Open Graph 标签一样默认留空content等待填充。Mobile Viewport 移动端视口viewportmeta 标签用于控制移动设备上页面的布局视口。HTML5 Boilerplate 自带一套适用于大多数通用场景的简单配置meta nameviewport contentwidthdevice-width, initial-scale1其中widthdevice-width让布局视口宽度等于设备宽度initial-scale1表示初始缩放比例为 1避免移动浏览器默认以桌面宽度渲染后再缩小。若你的页面需要适配 iPhone X/XS/XR 等全面屏设备的边缘到边缘显示可以参考 WebKit 官方博客Designing Websites for iPhone X添加viewport-fitcover等扩展参数并结合 CSS 的env(safe-area-inset-*)处理安全区。更完整的说明见 MDN 的 viewport meta 文档。Open Graph Metadata 社交分享元数据Open Graph 协议 允许你定义站点在第三方平台Facebook、X、LinkedIn 等被引用时的呈现方式。协议通过一系列 meta 元素定义站点详情其中必需属性包括标题、预览图、URL 与类型如 video、music、website、articlemeta propertyog:title content meta propertyog:type content meta propertyog:url content meta propertyog:image content meta propertyog:image:alt content除这四个必需属性外协议还提供了更多可选属性用于丰富站点描述。以下为 HTML5 Boilerplate 官网自身的 Open Graph 元数据示例在必需字段之外增加了og:description以便更详细地描述站点meta propertyog:url contenthttps://html5boilerplate.com/ meta propertyog:title contentHTML5 ★ BOILERPLATE meta propertyog:type contentwebsite meta propertyog:description contentThe web’s most popular front-end template which helps you build fast, robust, and adaptable web apps or sites. meta propertyog:image contenthttps://html5boilerplate.com/icon.png !-- Empty for decorative images. -- meta propertyog:image:alt content值得注意两点og:image通常应指向绝对 URL 以便第三方平台抓取og:image:alt对纯装饰性图片留空即可这与文档中 “Empty for decorative images” 的注释一致。在 src/index.html 中这五个 Open Graph 标签均已预留位置你只需填写content。Web App Manifest 网页应用清单HTML5 Boilerplate 附带一个极简的 Web App Manifest 文件。Web App Manifest 是一个简单的 JSON 文件用于控制应用在设备主屏幕上的呈现方式、启动时的外观以及启动行为从而对移动设备上被保存的站点或 Web App 的 UI 拥有更大的控制权。它在 HTML 中的引用方式为link relmanifest hrefsite.webmanifest仓库中对应的 src/site.webmanifest 仅包含一个骨架级别的 app 定义用于演示基本用法{ short_name: , name: , icons: [{ src: icon.png, type: image/png, sizes: 192x192 }], start_url: /?utm_sourcehomescreen, background_color: #fafafa, theme_color: #fafafa }你应根据站点或应用的真实信息填充该文件。上例中的字段含义short_name/name应用显示名称short_name用于图标下方空间受限的场景icons应用图标数组src指向图标路径type声明 MIME 类型sizes声明尺寸仓库默认配套的图标是 src/icon.png192×192start_url从主屏幕启动时打开的地址模板中的/?utm_sourcehomescreen用于区分启动来源background_color/theme_color应用启动画面背景色与主题色模板统一使用#fafafa与 src/index.html 中meta nametheme-color content#fafafa保持一致。Favicons 与 Touch Icon 站点图标快捷键图标shortcut icons应放置在站点的根目录。将favicon.ico放在根目录后浏览器会自动拾取它。HTML5 Boilerplate 自带一套默认图标含 favicon 与一个 Apple Touch Icon可作为你制作自有图标的基线。当前仓库根目录下的图标资源包括src/favicon.ico32×32 的传统浏览器标签页图标src/icon.svg矢量 SVG 图标在 src/index.html 中以link relicon href/icon.svg typeimage/svgxml引用现代浏览器优先使用src/icon.png192×192 的 PNG 图标同时被apple-touch-icon与 Web App Manifest 引用。src/index.html 中的完整引用方式如下link relicon href/favicon.ico sizesany link relicon href/icon.svg typeimage/svgxml link relapple-touch-icon hreficon.png其中apple-touch-icon是 iOS 用户把 Web App 添加到主屏幕时使用的图标。更详细的图标定制方案包括各 iOS 设备尺寸的适配请参阅文档的 Extend 章节 中 Apple Touch Icons 一节。Content Area 内容区域模板的主体body部分几乎是空的仅保留了一行示例文本与脚本引用。这是刻意为之——HTML5 Boilerplate 需要同时适用于网页web page与 Web Appweb app两种开发场景因此内容区交由你按需填充。从 src/index.html 可以看到默认只包含!-- Add your site or application content here -- pHello world! This is HTML5 Boilerplate./p script srcjs/app.js/script把注释与示例文本替换为你的真实内容并视需要在/body前追加你自己的脚本即可。404.html占位错误页模板提供的第二张页面是 src/404.html一个自包含inline style无外部资源依赖的 404 错误页!doctype html html langen head meta charsetutf-8 titlePage Not Found/title meta nameviewport contentwidthdevice-width, initial-scale1 style /* 居中布局 移动端适配的极小 CSS见源文件 */ /style /head body h1Page Not Found/h1 pSorry, but the page you were trying to view does not exist./p /body /html !-- IE needs 512 bytes: https://docs.microsoft.com/archive/blogs/ieinternals/friendly-http-error-pages --这张页面有三个值得注意的设计细节自包含样式错误页的 CSS 直接内联在style中即使站点的外部样式表加载失败404 页依然能正常呈现移动端适配内联样式内置了media only screen and (max-width: 280px)断点在极窄屏幕上缩小标题字号并放宽内容宽度IE 兼容注释页面末尾的注释提醒——旧版 IE 对小于 512 字节的错误页会显示自己的 friendly 错误页而非你自定义的内容因此 404 页面应保持足够体积该页面加上内联样式后已满足要求。与构建与测试的联动HTML5 Boilerplate 的 HTML 相关文件不仅在src/下存在还会随构建进入发布产物并有自动化测试守护其完整性根目录 package.json 的h5bp-configs.directories定义了src、dist、test等目录执行npm run build内部为gulp build后src/下的index.html、404.html、favicon.ico、icon.png、icon.svg、robots.txt、site.webmanifest等文件会被复制到dist/目录test/file_existence.mjs 中expectedFilesInDistDir数组明确断言了发布目录必须包含404.html、index.html、favicon.ico、icon.png、icon.svg、robots.txt、site.webmanifest等文件任何构建流程对 HTML 产物目录结构的破坏都会被npm test内部执行gulp archive mocha捕获根目录 src/robots.txt 是配合 HTML 页面的爬虫规则文件默认允许抓取全部内容User-agent: *Disallow:若你的站点需要隐藏页面或指定 sitemap可在该文件中追加规则也可参考 docs/extend.md 中 Search 一节的说明如meta namerobots contentnoindex、Sitemap:指令、link relcanonical等 SEO 相关扩展点。延伸阅读docs/extend.md更多可选的 HTML 扩展包括 DNS 预取link reldns-prefetch、RSS/Atom 订阅链接、Schema.org 微数据、iOS Web App meta 标签、color-scheme与theme-color扩展等docs/css.md默认 CSS构建后为css/style.css的使用指南docs/js.md默认 JavaScript构建后为js/app.js的使用指南docs/usage.md项目整体内容概览与上手方式。【免费下载链接】html5-boilerplateA professional front-end template for building fast, robust, and adaptable web apps or sites.项目地址: https://gitcode.com/gh_mirrors/ht/html5-boilerplate创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考