Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

In HTML, the main content has been to start with tags, from what HTML is, to the world of div, to html5 article,section, etc., but there is very little talk about meta tags in HTML tags.

I’ll do it today, because it’s not as frequent as some of the other common tags in HTML, and many of the attributes are straightforward, so I’ll comment the code directly.


<! DOCTYPEhtml> <! -- Use HTML5 docType, case insensitive -->
<html lang="zh-cmn-Hans"> <! -- more standard writing of lang properties http://zhi.hu/XyIa -->
<head>
    <! Declare the character encoding used in the document -->
    <meta charset='utf-8'>
    <! -- Prefer the latest version of Internet Explorer and Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <! -- Page description -->
    <meta name="description" content="No more than 150 characters"/>
    <! -- Page keywords -->
    <meta name="keywords" content=""/>
    <! -- Page writer -->
    <meta name="author" content="name, [email protected]"/>
    <! -- Search engine crawl -->
    <meta name="robots" content="index,follow"/>
    <! -- Add viewPort for mobile devices -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <! -- 'width=device-width' -- 'width=device-width' -- 'width=device-width' --
 
    <! -- iOS devices begin -->
    <meta name="apple-mobile-web-app-title" content="Title">
    <! -- Add titles to the home screen (new in iOS 6) -->
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <! -- Whether to enable WebApp full-screen mode, delete Apple's default toolbar and menu bar -->
 
    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
    <! -- Add Smart App Banner (iOS 6+ Safari) -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <! -- Set apple toolbar color -->
    <meta name="format-detection" content="telphone=no, email=no"/>
    <! -- Ignore the number in the page as phone, ignore the email recognition -->
    <! -- Enable webKit in 360 browser -->
    <meta name="renderer" content="webkit">
    <! Avoid compatibility mode in IE -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <! -- don't let Baidu transcode -->
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <! -- Optimized for handheld devices, mainly for older browsers that don't recognize viewports, such as blackberry -->
    <meta name="HandheldFriendly" content="true">
    <! -- Microsoft's old browser -->
    <meta name="MobileOptimized" content="320">
    <! -- UC forced portrait -->
    <meta name="screen-orientation" content="portrait">
    <! -- QQ forced portrait screen -->
    <meta name="x5-orientation" content="portrait">
    <! -- UC mandatory full screen -->
    <meta name="full-screen" content="yes">
    <! -- QQ mandatory full screen -->
    <meta name="x5-fullscreen" content="true">
    <! UC Application Mode -->
    <meta name="browsermode" content="application">
    <! -- QQ application mode -->
    <meta name="x5-page-mode" content="app">
    <! -- Windows Phone Click No Highlights -->
    <meta name="msapplication-tap-highlight" content="no">
    <! -- iOS icon begin -->
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
    <! -- iPhone and iTouch, default 57x57 pixels, must have -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
    <! -- Retina iPhone and Retina iTouch, 114x114 pixels, available but recommended -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
    <! -- Retina iPad, 144x144, available, but recommended -->
    <! -- iOS icon end -->
 
    <! -- iOS startup screen begin -->
    <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
    <! IPad Portrait 768 x 1004 (standard resolution) -->
    <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
    <! -- iPad Portrait 1536x2008 (Retina) -->
    <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
    <! -- iPad Landscape 1024x748 (standard resolution) -->
    <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
    <! -- iPad Landscape 2048x1496 (Retina) -->
 
    <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>
    <! -- iPhone/iPod Touch Portrait 320x480 (standard resolution) -->
    <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
    <! -- iPhone/iPod Touch Portrait 640x960 (Retina) -->
    <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>
    <! -- iPhone 5/iPod Touch 5 Portrait 640x1136 (Retina) -->
    <! -- iOS launch screen end -->
 
    <! -- iOS end -->
    <meta name="msapplication-TileColor" content="# 000"/>
    <! -- Windows 8 tiles color -->
    <meta name="msapplication-TileImage" content="icon.png"/>
    <! -- Windows 8 tiles icon -->
 
    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
    <! -- Add RSS feed -->
    <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
    <! Add favicon icon -->

    <! -- BEGIN -->
    <! -- Refer to the Weibo API -->
    <meta property="og:type" content="Type" />
    <meta property="og:url" content="URL" />
    <meta property="og:title" content="Title" />
    <meta property="og:image" content="Image" />
    <meta property="og:description" content="Description" />
    <! -- SNS social tag end -->
 
    <title>The title</title>
</head>
Copy the code