HTML头部标签解析

2022.05.16 Mon

<!DOCTYPE html>
简化后的文档类型声明标签，告知浏览器以 HTML5 规范渲染该页面。
<html lang="zh">
文档语言
<meta charset="utf-8">
文档字符编码，utf-8 是一个通用的字符集，它包含了任何人类语言中的大部分的字符，意味着该 web 页面可以显示任意的语言。

meta 标签

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

1
2
3

<!-- 以下两种方式都可以防止画面缩放，维持缩放比例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 优化标签

1
2
3

<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">
将页面作为搜索引擎，可以通过浏览器地址栏找到标记的页面搜索引擎

参考链接:
OpenGraph 协议
 Explain the First 10 Lines of Twitter’s Source Code to Me
HTML 基本的头部标签
 6 Tips to make your iOS PWA feel like a native app
apple-developer:Configuring Web Applications