HTML 头部标签解析
-
<!DOCTYPE html>简化后的文档类型声明标签，告知浏览器以 HTML5 规范渲染该页面。 -
<html lang="zh">文档语言 -
<meta charset="utf-8">文档字符编码，utf-8 是一个通用的字符集，它包含了任何人类语言中的大部分的字符，意味着该 web 页面可以显示任意的语言。
meta 标签
-
<meta name="viewport" content="width=device-width,initial-scale=1"><!-- 以下两种方式都可以防止画面缩放，维持缩放比例 100% --> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover" /> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" /> -
<meta property="og:site_name" content="Twitter">Open Graph 协议标签，Facebook 发起 Open Graph 协议以便在社交网站分享页面时能更优雅地以卡片呈现网页信息。 常用的 og 标签<meta property="og:image" content="" /> <meta property="og:url" content="" /> <meta property="og:description" content="" /> <meta property="og:title" content="" /> <meta property="og:locale" content="zh-CN" /> -
苹果 Safari 浏览器属性标签
<!-- 删除默认的苹果工具栏和菜单栏，全屏显示页面。默认值为 no，即显示工具栏和菜单栏 --> <meta name="mobile-web-app-capable" content="yes" /> <!-- 设置苹果状态栏颜色，只有在全屏模式下才会生效，可供设置的值 black、white、translucent black，translucent black 会将状态栏设置成黑色透明，网页内容占据整块屏幕，会出现状态栏覆盖的情景。 --> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!-- 将网页添加到主屏后名称 --> <meta name="apple-mobile-web-app-title" content="Twitter" /> -
<meta name="theme-color" content="##1f1f1f">设置移动设备用户界面主题色 -
seo 优化标签
<meta name="keywords" content="your keywords" /> <meta name="description" content="your description" /> <meta name="author" content="author,email address" />
link 标签
-
<link rel="canonical" href="https://babybluue.github.io/">seo 优化，帮助搜索引擎理解相似链接是否来自同一个网站的内容 -
<link rel="manifest" href="/manifest.webmanifest">指定提供 Web 应用程序信息的 JSON 清单文件，以方便将 Web 应用程序安装到设备的主屏幕 -
<link rel="apple-touch-icon" sizes="192x192" href="/images/app-icon">苹果设备将 Web 应用添加到桌面时显示的图标 -
<link rel="apple-touch-startup-image" href="/launch.png">苹果设备桌面 Web 应用打开时的启动图 -
<link rel="icon" href="/images/favicon.ico">网站图标，不需要 shortcut -
<link rel="alternate" title="MDN" href="https://developer.mozilla.org/" hreflang="zh">告知浏览器页面的其他语言版本 -
<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="Twitter">将页面作为搜索引擎，可以通过浏览器地址栏找到标记的页面搜索引擎
参考链接：