faruzzy/index.html

## index.html
<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">

<head>
  <!-- content-type, which overrides http equivalent header. Because of charset, this meta should be set at first. -->
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <!--  Overrides http equivalent header. This tells IE to use the most updated engine.  -->
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <!--  Tells crawlers how to crawl this page, and the role of this page. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta -->
  <meta name="robots" content="index, follow">
  <!--  One of the microformats. http://microformats.org/wiki/rel-home  -->
  <link rel="home" href="/">
  <!--  Page generator if your html file is generated by machine.  -->
  <meta name="generator" content="My bare hands">
  <!--  Probably the most well-known meta, but most of the search engine has abandon this tag. Avoid using this if possible. -->
  <!--   <meta name="keywords" content="key, words, something"> -->
  <!--  Defines a favicon which shows in address bar of desktop browsers. Most of the mobile browsers have no place to show it though.  -->
  <link rel="shortcut icon" href="/favicon.ico">
  <!--  Pretty similar to the one above. But gives size and png is also valid here.  -->
  <link rel="icon" type="image/png" href="/path/to/icons/favicon-192x192.png" sizes="192x192">
  <!--  iPhone stuff. This will be used as icon if you save this page as Web Clip.  -->
  <!--  Most of the icon things are described on https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html  -->
  <!--  -precomposed suffix indicates the image should not be added effects again.  -->
  <!-- For third-generation iPad with high-resolution Retina display. -->
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/image.png">
  <!-- For iPhone with high-resolution Retina display. -->
  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/image.png">
  <!-- For first- and second-generation iPad. -->
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/image.png">
  <!-- Fallback for ones above. For non-Retina iPhone, iPod Touch, and Android 2.1+ devices. -->
  <link rel="apple-touch-icon-precomposed" href="/image.png">
  <!--  suffix-free one.  -->
  <link rel="apple-touch-icon" sizes="180x180" href="/image.png">
  <!--  For launch screen.  -->
  <link rel="apple-touch-startup-image" href="/launch.png">
  <!--  And you can also add a title for launch screen icon.  -->
  <meta name="apple-mobile-web-app-title" content="AppTitle">
  <!--  If your site is a webapp, put this to make it even more like a native app.  -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <!--  You may change the status bar.  -->
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <!--  Android Chrome manifest. Does the similar things compared to those apple stuff. https://developer.chrome.com/multidevice/android/installtohomescreen -->
  <link rel="manifest" href="manifest.json">
  <!--  Open Search hint. This will be used in Chrome's omni bar if you press tab when focus on this site. http://www.opensearch.org/Specifications/OpenSearch/1.1  -->
  <link rel="search" type="application/opensearchdescription+xml" href="/search-api" title="Site Name">
  <!--  Hint for RSS feed. https://developer.mozilla.org/en-US/docs/Web/RSS/Getting_Started/Syndicating  -->
  <link rel="alternate" type="application/rss+xml" title="Site Name" href="/rss">
  <!--  Hint for Atom feed. People are using this, but I don't see any reliable source of this.  -->
  <link rel="alternate" type="application/atom+xml" title="Site Name" href="/atom">
  <!-- Tag for AMP project entry. If you have a AMP version of your site, put this to other pages. https://www.ampproject.org/ -->
  <link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
  <!--  set rules only for IE.  -->
  <!--[if lt IE 9]>
  <link rel="stylesheet" type="text/css" href="no-ie.css" />
  <![endif]-->
  <!--  Provides a JSON description of this page.  -->
  <link rel="alternate" type="application/json" href="https://example.com/page.json">
  <!--  The most canonical version of this page. Helps SEO. https://moz.com/blog/canonical-url-tag-the-most-important-advancement-in-seo-practices-since-sitemaps  -->
  <link rel="canonical" href="https://example.com/page">
  <!--  Other languages of this page.  -->
  <link rel="alternate" hreflang="zh-CN" href="https://example.com/zh-CN/page" title="内容">
  <!-- Also overrides http equivalent header, for CSP rules. https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
  <meta http-equiv="Content-Security-Policy" content="default-src localhost:8080 localhost:8080 *.example.com 'self' 'unsafe-inline' 'unsafe-eval' data:;">
  <!--  http equivalent header. This will protect your referrer from being abused or leaked. https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy  -->
  <meta http-equiv="Referrer-Policy" content="same-origin">
  <!--  viewport, this tells mobile browsers how to scale page content. https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag  -->
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <!-- Disable telephone number auto detection. This is optional, depends on your willingness. http://stackoverflow.com/questions/28027330/html-email-ios-format-detection -->
  <meta name="format-detection" content="telephone=no">
  <!-- Other formats. Also optional. -->
  <meta name="format-detection" content="date=no">
  <meta name="format-detection" content="address=no">
  <meta name="format-detection" content="email=no">
  <!-- Preload image if possible. https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/ -->
  <link rel="preload" href="//example.com/preload.png" as="image" crossorigin>
  <!-- Metas for OpenGraph protocol. Mainly about how to share this page via social networks. http://ogp.me/ -->
  <meta property="og:title" content="Title">
  <meta property="og:type" content="something.page">
  <meta property="og:url" content="https://example.com">
  <meta property="og:image" content="https://example.com/preview.jpg">
  <!-- Metas for Twitter share. -->
  <meta name="twitter:url" content="https://example.com">
  <meta name="twitter:title" content="Title">
  <!-- Stylesheet resource protected by Subresource Integrity. https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity -->
  <link crossorigin="anonymous" href="https://example.com/resource" integrity="sha256-17GUFcEII0uRrKwNDAIJHIYJk8E2h6dX7jRcwezTqdE=" media="all" rel="stylesheet">
  <!-- Finally, title. -->
  <!-- But actually there are even more meta extensions: https://wiki.whatwg.org/wiki/MetaExtensions -->
  <title>Sample HTML index file</title>
</head>
<body>
</body>

</html>
	<!DOCTYPE html>
	<html prefix="og: http://ogp.me/ns#">

	<head>
	<!-- content-type, which overrides http equivalent header. Because of charset, this meta should be set at first. -->
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<!-- Overrides http equivalent header. This tells IE to use the most updated engine. -->
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<!-- Tells crawlers how to crawl this page, and the role of this page. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta -->
	<meta name="robots" content="index, follow">
	<!-- One of the microformats. http://microformats.org/wiki/rel-home -->
	<link rel="home" href="/">
	<!-- Page generator if your html file is generated by machine. -->
	<meta name="generator" content="My bare hands">
	<!-- Probably the most well-known meta, but most of the search engine has abandon this tag. Avoid using this if possible. -->
	<!-- <meta name="keywords" content="key, words, something"> -->
	<!-- Defines a favicon which shows in address bar of desktop browsers. Most of the mobile browsers have no place to show it though. -->
	<link rel="shortcut icon" href="/favicon.ico">
	<!-- Pretty similar to the one above. But gives size and png is also valid here. -->
	<link rel="icon" type="image/png" href="/path/to/icons/favicon-192x192.png" sizes="192x192">
	<!-- iPhone stuff. This will be used as icon if you save this page as Web Clip. -->
	<!-- Most of the icon things are described on https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html -->
	<!-- -precomposed suffix indicates the image should not be added effects again. -->
	<!-- For third-generation iPad with high-resolution Retina display. -->
	<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/image.png">
	<!-- For iPhone with high-resolution Retina display. -->
	<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/image.png">
	<!-- For first- and second-generation iPad. -->
	<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/image.png">
	<!-- Fallback for ones above. For non-Retina iPhone, iPod Touch, and Android 2.1+ devices. -->
	<link rel="apple-touch-icon-precomposed" href="/image.png">
	<!-- suffix-free one. -->
	<link rel="apple-touch-icon" sizes="180x180" href="/image.png">
	<!-- For launch screen. -->
	<link rel="apple-touch-startup-image" href="/launch.png">
	<!-- And you can also add a title for launch screen icon. -->
	<meta name="apple-mobile-web-app-title" content="AppTitle">
	<!-- If your site is a webapp, put this to make it even more like a native app. -->
	<meta name="apple-mobile-web-app-capable" content="yes">
	<!-- You may change the status bar. -->
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<!-- Android Chrome manifest. Does the similar things compared to those apple stuff. https://developer.chrome.com/multidevice/android/installtohomescreen -->
	<link rel="manifest" href="manifest.json">
	<!-- Open Search hint. This will be used in Chrome's omni bar if you press tab when focus on this site. http://www.opensearch.org/Specifications/OpenSearch/1.1 -->
	<link rel="search" type="application/opensearchdescription+xml" href="/search-api" title="Site Name">
	<!-- Hint for RSS feed. https://developer.mozilla.org/en-US/docs/Web/RSS/Getting_Started/Syndicating -->
	<link rel="alternate" type="application/rss+xml" title="Site Name" href="/rss">
	<!-- Hint for Atom feed. People are using this, but I don't see any reliable source of this. -->
	<link rel="alternate" type="application/atom+xml" title="Site Name" href="/atom">
	<!-- Tag for AMP project entry. If you have a AMP version of your site, put this to other pages. https://www.ampproject.org/ -->
	<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
	<!-- set rules only for IE. -->
	<!--[if lt IE 9]>
	<link rel="stylesheet" type="text/css" href="no-ie.css" />
	<![endif]-->
	<!-- Provides a JSON description of this page. -->
	<link rel="alternate" type="application/json" href="https://example.com/page.json">
	<!-- The most canonical version of this page. Helps SEO. https://moz.com/blog/canonical-url-tag-the-most-important-advancement-in-seo-practices-since-sitemaps -->
	<link rel="canonical" href="https://example.com/page">
	<!-- Other languages of this page. -->
	<link rel="alternate" hreflang="zh-CN" href="https://example.com/zh-CN/page" title="内容">
	<!-- Also overrides http equivalent header, for CSP rules. https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
	<meta http-equiv="Content-Security-Policy" content="default-src localhost:8080 localhost:8080 *.example.com 'self' 'unsafe-inline' 'unsafe-eval' data:;">
	<!-- http equivalent header. This will protect your referrer from being abused or leaked. https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy -->
	<meta http-equiv="Referrer-Policy" content="same-origin">
	<!-- viewport, this tells mobile browsers how to scale page content. https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag -->
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<!-- Disable telephone number auto detection. This is optional, depends on your willingness. http://stackoverflow.com/questions/28027330/html-email-ios-format-detection -->
	<meta name="format-detection" content="telephone=no">
	<!-- Other formats. Also optional. -->
	<meta name="format-detection" content="date=no">
	<meta name="format-detection" content="address=no">
	<meta name="format-detection" content="email=no">
	<!-- Preload image if possible. https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/ -->
	<link rel="preload" href="//example.com/preload.png" as="image" crossorigin>
	<!-- Metas for OpenGraph protocol. Mainly about how to share this page via social networks. http://ogp.me/ -->
	<meta property="og:title" content="Title">
	<meta property="og:type" content="something.page">
	<meta property="og:url" content="https://example.com">
	<meta property="og:image" content="https://example.com/preview.jpg">
	<!-- Metas for Twitter share. -->
	<meta name="twitter:url" content="https://example.com">
	<meta name="twitter:title" content="Title">
	<!-- Stylesheet resource protected by Subresource Integrity. https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity -->
	<link crossorigin="anonymous" href="https://example.com/resource" integrity="sha256-17GUFcEII0uRrKwNDAIJHIYJk8E2h6dX7jRcwezTqdE=" media="all" rel="stylesheet">
	<!-- Finally, title. -->
	<!-- But actually there are even more meta extensions: https://wiki.whatwg.org/wiki/MetaExtensions -->
	<title>Sample HTML index file</title>
	</head>
	<body>
	</body>

	</html>