自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

HTML <head> 標簽大全，看了一定不后悔

作者：Joshbuchea
開發(fā) 前端
本文介紹一份關于任何可以寫入到你的文檔中 <head> 部分的清單，包括最小推薦、網(wǎng)頁元素、Meta 標簽等，仔細看看吧。

[[205147]]

一份關于任何可以寫入到你的文檔中 <head> 部分的清單。

最小推薦

下面是基本的、最低限度的網(wǎng)站基本標簽：

  1. <meta charset="utf-8"> 
  2. <meta http-equiv="x-ua-compatible" content="ie=edge"> 
  3. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
  4. <!-- 以上 3 個 meta 標簽 *必須* 放在 head 的最前面；其他任何的 head 內(nèi)容必須在這些標簽的 *后面* --> 
  5. <title>頁面標題</title> 

網(wǎng)頁元素

  1. <!-- 文檔標題 --> 
  2. <title>頁面標題</title> 
  3. <!-- 基本 URL 作用于文檔中所包含的所有相對 URL --> 
  4. <base href="https://example.com/page.html"> 
  5. <!-- 外部的 CSS --> 
  6. <link rel="stylesheet" href="styles.css"> 
  7. <!-- 文檔內(nèi)的 CSS --> 
  8. <style> 
  9.   /* ... */ 
  10. </style> 
  11. <!-- JavaScript --> 
  12. <script src="script.js"></script> 
  13. <noscript><!--無 JS 時的替代--></noscript> 

Meta 標簽

  1. <!-- 設置文檔的字符編碼 --> 
  2. <meta charset="utf-8"> 
  3. <meta http-equiv="x-ua-compatible" content="ie=edge"> 
  4. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
  5. <!-- 以上 3 個 meta 標簽 *必須* 放在 head 的最前面；其他任何的 head 內(nèi)容必須在這些標簽的 *后面* --> 
  6. <!-- 允許控制資源的過度加載 --> 
  7. <meta http-equiv="Content-Security-Policy" content="default-src 'self'"> 
  8. <!-- 盡早地放置在文檔中 --> 
  9. <!-- 僅應用于該標簽下的內(nèi)容 --> 
  10. <!-- Web 應用的名稱（僅當網(wǎng)站被用作為一個應用時才使用）--> 
  11. <meta name="application-name" content="應用名稱"> 
  12. <!-- 針對頁面的簡短描述（限制 150 字符）--> 
  13. <!-- 在*某些*情況下，該描述是被用作搜索結果展示片段的一部分 --> 
  14. <meta name="description" content="一個頁面描述"> 
  15. <!-- 控制搜索引擎的抓取和索引行為 --> 
  16. <meta name="robots" content="index,follow"><!-- 所有搜索引擎 --> 
  17. <meta name="googlebot" content="index,follow"><!-- 僅對 Google 有效 --> 
  18. <!-- 告訴 Google 不顯示網(wǎng)站鏈接的搜索框 --> 
  19. <meta name="google" content="nositelinkssearchbox"> 
  20. <!-- 告訴 Google 不提供此頁面的翻譯 --> 
  21. <meta name="google" content="notranslate"> 
  22. <!-- 驗證 Google 搜索控制臺的所有權 --> 
  23. <meta name="google-site-verification" content="verification_token"> 
  24. <!-- 驗證 Yandex 網(wǎng)站管理員的所有權 --> 
  25. <meta name="yandex-verification" content="verification_token"> 
  26. <!-- 驗證 Bing 網(wǎng)站管理員中心的所有權 --> 
  27. <meta name="msvalidate.01" content="verification_token"> 
  28. <!-- 驗證 Alexa 控制臺的所有權 --> 
  29. <meta name="alexaVerifyID" content="verification_token"> 
  30. <!-- 驗證 Pinterest 控制臺的所有權 --> 
  31. <meta name="p:domain_verify" content="code from pinterest"> 
  32. <!-- 驗證 Norton 安全站點的所有權 --> 
  33. <meta name="norton-safeweb-site-verification" content="norton code"> 
  34. <!-- 用來命名軟件或用于構建網(wǎng)頁（如 - WordPress、Dreamweaver）--> 
  35. <meta name="generator" content="program"> 
  36. <!-- 關于你的網(wǎng)站主題的簡短描述 --> 
  37. <meta name="subject" content="你的網(wǎng)站主題"> 
  38. <!-- 基于網(wǎng)站內(nèi)容給出一般的年齡分級 --> 
  39. <meta name="rating" content="General"> 
  40. <!-- 允許控制 referrer 信息如何傳遞 --> 
  41. <meta name="referrer" content="no-referrer"> 
  42. <!-- 禁用自動檢測和格式化可能的電話號碼 --> 
  43. <meta name="format-detection" content="telephone=no"> 
  44. <!-- 通過設置為 “off” 完全退出 DNS 預取 --> 
  45. <meta http-equiv="x-dns-prefetch-control" content="off"> 
  46. <!-- 在客戶端存儲 cookie，web 瀏覽器的客戶端識別 --> 
  47. <meta http-equiv="set-cookie" content="name=value; expires=date; path=url"> 
  48. <!-- 指定要顯示在一個特定框架中的頁面 --> 
  49. <meta http-equiv="Window-Target" content="_value"> 
  50. <!-- 地理標簽 --> 
  51. <meta name="ICBM" content="latitude, longitude"> 
  52. <meta name="geo.position" content="latitude;longitude"> 
  53. <meta name="geo.region" content="country[-state]"><!-- 國家代碼 (ISO 3166-1): 強制性, 州代碼 (ISO 3166-2): 可選; 如 content="US" / content="US-NY" --> 
  54. <meta name="geo.placename" content="city/town"><!-- 如 content="New York City" --> 

鏈接

  1. <!-- 表明一個 CSS 樣式表 --> 
  2. <link rel="stylesheet" href="https://example.com/styles.css"> 
  3. <!-- 有助于防止出現(xiàn)內(nèi)容重復的問題 --> 
  4. <link rel="canonical" href="https://example.com/2010/06/9-things-to-do-before-entering-social-media.html"> 
  5. <!-- 之前用于包含 icon 鏈接，但已被廢棄并不再使用 --> 
  6. <link rel="shortlink" href="https://example.com/?p=42"> 
  7. <!-- 鏈接到當前文檔的一個 AMP HTML 版本 --> 
  8. <link rel="amphtml" href="https://example.com/path/to/amp-version.html"> 
  9. <!-- 鏈接到一個指定 Web 應用程序“安裝”證書的 JSON 文件 --> 
  10. <link rel="manifest" href="manifest.json"> 
  11. <!-- 鏈接到文檔的作者 --> 
  12. <link rel="author" href="humans.txt"> 
  13. <!-- 指向一個適用于鏈接內(nèi)容的版權申明 --> 
  14. <link rel="license" href="copyright.html"> 
  15. <!-- 給出可能的你的另一種語言的文檔位置參考 --> 
  16. <link rel="alternate" href="https://es.example.com/" hreflang="es"> 
  17. <!-- 提供了關于作者或其他人的信息 --> 
  18. <link rel="me" href="https://google.com/profiles/thenextweb" type="text/html"> 
  19. <link rel="me" href="mailto:name@example.com"> 
  20. <link rel="me" href="sms:+15035550125"> 
  21. <!-- 鏈接到一個描述歷史記錄、文檔或其他具有歷史意義的材料的集合的文檔。 --> 
  22. <link rel="archives" href="https://example.com/archives/"> 
  23. <!-- 鏈接到層次結構中的頂級資源 --> 
  24. <link rel="index" href="https://example.com/"> 
  25. <!-- 給出一個自我參考 - 當文檔有多個可能的參考時非常有用 --> 
  26. <link rel="self" type="application/atom+xml" href="https://example.com/atomFeed.php?page=3"> 
  27. <!-- 分別是在一系列文件中的第一個、下一個、上一個和最后一個 --> 
  28. <link rel="first" href="https://example.com/atomFeed.php"> 
  29. <link rel="next" href="https://example.com/atomFeed.php?page=4"> 
  30. <link rel="prev" href="https://example.com/atomFeed.php?page=2"> 
  31. <link rel="last" href="https://example.com/atomFeed.php?page=147"> 
  32. <!-- 當使用第三方服務來維護 blog 時使用 --> 
  33. <link rel="EditURI" href="https://example.com/xmlrpc.php?rsd" type="application/rsd+xml" title="RSD"> 
  34. <!-- 當另一個 WordPress 博客鏈接到你的 WordPress 博客或文章時形成一個自動化的評論 --> 
  35. <link rel="pingback" href="https://example.com/xmlrpc.php"> 
  36. <!-- 當你在自己的頁面上鏈接到一個 url 時通知它 --> 
  37. <link rel="webmention" href="https://example.com/webmention"> 
  38. <!-- 加載一個外部的 HTML 文件到當前 HTML 文件中 --> 
  39. <link rel="import" href="/path/to/component.html"> 
  40. <!-- 打開搜索 --> 
  41. <link rel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Search Title"> 
  42. <!-- Feeds --> 
  43. <link rel="alternate" href="https://feeds.feedburner.com/example" type="application/rss+xml" title="RSS"> 
  44. <link rel="alternate" href="https://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3"> 
  45. <!-- 預取，預載，預瀏覽 --> 
  46. <link rel="dns-prefetch" href="//example.com/"> 
  47. <link rel="preconnect" href="https://www.example.com/"> 
  48. <link rel="prefetch" href="https://www.example.com/"> 
  49. <link rel="prerender" href="https://example.com/"> 
  50. <link rel="preload" href="image.png" as="image"> 
  51. <!-- 更多信息：https://css-tricks.com/prefetching-preloading-prebrowsing/ --> 

網(wǎng)站圖標

  1. <!-- 針對 IE 10 及以下版本 --> 
  2. <!-- 如果將 `favicon.ico` 放在根目錄下，則無需標簽 --> 
  3. <!-- 對于 IE 11、Chrome、Firefox、Safari 和 Opera --> 
  4. <link rel="icon" type="image/png" sizes="16x16" href="/path/to/favicon-16x16.png"> 
  5. <link rel="icon" type="image/png" sizes="32x32" href="/path/to/favicon-32x32.png"> 
  6. <link rel="icon" type="image/png" sizes="96x96" href="/path/to/favicon-96x96.png"> 
  7. <!-- 更多信息: https://bitsofco.de/all-about-favicons-and-touch-icons/ --> 

社交

Facebook Open Graph

  1. <meta property="fb:app_id" content="123456789"> 
  2. <meta property="og:url" content="https://example.com/page.html"> 
  3. <meta property="og:type" content="website"> 
  4. <meta property="og:title" content="Content Title"> 
  5. <meta property="og:image" content="https://example.com/image.jpg"> 
  6. <meta property="og:description" content="Description Here"> 
  7. <meta property="og:site_name" content="Site Name"> 
  8. <meta property="og:locale" content="en_US"> 
  9. <meta property="article:author" content=""> 

Facebook Instant Articles

  1. <meta charset="utf-8"> 
  2. <meta property="op:markup_version" content="v1.0"> 
  3. <!-- 你的文章的 Web 版網(wǎng)址 --> 
  4. <link rel="canonical" href="http://example.com/article.html"> 
  5. <!-- 用于該文章的樣式 --> 
  6. <meta property="fb:article_style" content="myarticlestyle"> 

Twitter Cards

  1. <meta name="twitter:card" content="summary"> 
  2. <meta name="twitter:site" content="@site_account"> 
  3. <meta name="twitter:creator" content="@individual_account"> 
  4. <meta name="twitter:url" content="https://example.com/page.html"> 
  5. <meta name="twitter:title" content="Content Title"> 
  6. <meta name="twitter:description" content="Content description less than 200 characters"> 
  7. <meta name="twitter:image" content="https://example.com/image.jpg"> 
  • Twitter 名片：入門指南
  • Twitter 名片驗證

Google+ / Schema.org

  1. <link href="https://plus.google.com/+YourPage" rel="publisher"> 
  2. <meta itemprop="name" content="內(nèi)容標題"> 
  3. <meta itemprop="description" content="內(nèi)容描述少于 200 個字符"> 
  4. <meta itemprop="image" content="https://example.com/image.jpg"> 

Pinterest

根據(jù)他們的幫助中心可知，Pinterest 允許你禁止他人保存你網(wǎng)站里的內(nèi)容。description 為可選。

  1. <meta name="pinterest" content="nopin" description="Sorry, you can't save from my website!"> 

OEmbed

  1. <link rel="alternate" type="application/json+oembed" 
  2.   href="http://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&amp;format=json" 
  3.   title="oEmbed Profile: JSON"> 
  4. <link rel="alternate" type="text/xml+oembed" 
  5.   href="http://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&amp;format=xml" 
  6.   title="oEmbed Profile: XML"> 

瀏覽器 / 平臺

Apple iOS

  1. <!-- 智能應用 Banner --> 
  2. <meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT"> 
  3. <!-- 禁用自動檢測和格式化可能的電話號碼 --> 
  4. <meta name="format-detection" content="telephone=no"> 
  5. <!-- 添加到主屏幕 --> 
  6. <meta name="apple-mobile-web-app-capable" content="yes"> 
  7. <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
  8. <meta name="apple-mobile-web-app-title" content="應用標題"> 
  9. <!-- 觸摸圖標 --> 
  10. <!-- 在大多數(shù)情況下，在 `<head>` 中，一個 180×180px 觸摸圖標就已經(jīng)足夠了 --> 
  11. <link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png"> 
  12. <!-- 注意：iOS 7 上的 Safari 不會對圖標產(chǎn)生效果。 --> 
  13. <!-- 較早版本的 Safari 不會對以 `-precomposed.png` 后綴命名的圖標文件產(chǎn)生效果。 --> 
  14. <!-- 啟動畫面（已無效） --> 
  15. <link rel="apple-touch-startup-image" href="path/to/startup.png"> 
  16. <!-- iOS 應用深層鏈接 --> 
  17. <meta name="apple-itunes-app" content="app-id=APP-ID, app-argument=http/url-sample.com"> 
  18. <link rel="alternate" href="ios-app://APP-ID/http/url-sample.com"> 

Apple Safari

  1. <!-- 固定網(wǎng)站 --> 
  2. <link rel="mask-icon" href="path/to/icon.svg" color="red"> 

Google Android

  1. <meta name="theme-color" content="#E64545"> 
  2. <!-- 添加到主屏幕 --> 
  3. <meta name="mobile-web-app-capable" content="yes"> 
  4. <!-- 更多信息：https://developer.chrome.com/multidevice/android/installtohomescreen --> 

Google Chrome

  1. <link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/APP_ID"> 
  2. <!-- 禁用翻譯提示 --> 
  3. <meta name="google" content="notranslate"> 

Google Chrome Mobile (只針對 Android)

從 Chrome 31 開始，你可以設置你的 Web 應用為“app mode”，如 Safari。

  1. <!-- 鏈接到一個 manifest 并定義 manifest 的元數(shù)據(jù)。--> 
  2. <!-- manifest.json 中的例子也可以通過以下鏈接找到。--> 
  3. <link rel="manifest" href="manifest.json"> 
  4. <!-- 定義你的網(wǎng)頁為 Web 應用 --> 
  5. <meta name="mobile-web-app-capable" content="yes"> 
  6. <!-- 主屏幕圖標 --> 
  7. <link rel="icon" sizes="192x192" href="highres-icon.png"> 

Microsoft Internet Explorer

  1. <meta http-equiv="x-ua-compatible" content="ie=edge"> 
  2. <meta name="skype_toolbar" content="skype_toolbar_parser_compatible"> 
  3. <!-- IE10: 禁用鏈接點擊高亮 (https://blogs.windows.com/buildingapps/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10/) --> 
  4. <meta name="msapplication-tap-highlight" content="no"> 
  5. <!-- 固定網(wǎng)站 (https://msdn.microsoft.com/en-us/library/dn255024(v=vs.85).aspx) --> 
  6. <meta name="application-name" content="Sample Title"> 
  7. <meta name="msapplication-tooltip" content="A description of what this site does."> 
  8. <meta name="msapplication-starturl" content="http://example.com/index.html?pinned=true"> 
  9. <meta name="msapplication-navbutton-color" content="#FF3300"> 
  10. <meta name="msapplication-window" content="width=800;height=600"> 
  11. <meta name="msapplication-task" content="name=Task 1;action-uri=http://host/Page1.html;icon-uri=http://host/icon1.ico"> 
  12. <meta name="msapplication-task" content="name=Task 2;action-uri=http://microsoft.com/Page2.html;icon-uri=http://host/icon2.ico"> 
  13. <meta name="msapplication-badge" value="frequency=NUMBER_IN_MINUTES;polling-uri=http://example.com/path/to/file.xml"> 
  14. <meta name="msapplication-TileColor" content="#FF3300"> 
  15. <meta name="msapplication-TileImage" content="path/to/tileimage.jpg"> 
  16. <meta name="msapplication-config" content="http://example.com/browserconfig.xml"> 
  17. <meta name="msapplication-notification" content="frequency=60;polling-uri=http://example.com/livetile;polling-uri2=http://example.com/livetile2"> 
  18. <meta name="msapplication-task-separator" content="1"> 

應用鏈接

  1. <!-- iOS --> 
  2. <meta property="al:ios:url" content="applinks://docs"> 
  3. <meta property="al:ios:app_store_id" content="12345"> 
  4. <meta property="al:ios:app_name" content="App Links"> 
  5. <!-- Android --> 
  6. <meta property="al:android:url" content="applinks://docs"> 
  7. <meta property="al:android:app_name" content="App Links"> 
  8. <meta property="al:android:package" content="org.applinks"> 
  9. <!-- Web 回退 --> 
  10. <meta property="al:web:url" content="http://applinks.org/documentation"> 
  11. <!-- 更多信息：http://applinks.org/documentation/ --> 

國內(nèi)的瀏覽器

360 瀏覽器

  1. <!-- 選擇渲染引擎 --> 
  2. <meta name="renderer" content="webkit|ie-comp|ie-stand"> 

QQ 移動瀏覽器

  1. <!-- 在指定方向上鎖定屏幕（鎖定橫/豎屏） --> 
  2. <meta name="x5-orientation" content="landscape/portrait"> 
  3. <!-- 全屏顯示此頁面 --> 
  4. <meta name="x5-fullscreen" content="true"> 
  5. <!-- 頁面將以“應用模式”顯示（全屏等）--> 
  6. <meta name="x5-page-mode" content="app"> 

UC 移動瀏覽器

  1. <!-- 在指定方向上鎖定屏幕（鎖定橫/豎屏） --> 
  2. <meta name="screen-orientation" content="landscape/portrait"> 
  3. <!-- 全屏顯示此頁面 --> 
  4. <meta name="full-screen" content="yes"> 
  5. <!-- 即使在“文本模式”下，UC 瀏覽器也會顯示圖片 --> 
  6. <meta name="imagemode" content="force"> 
  7. <!-- 頁面將以“應用模式”顯示（全屏、禁止手勢等） --> 
  8. <meta name="browsermode" content="application"> 
  9. <!-- 在此頁面禁用 UC 瀏覽器的“夜間模式” --> 
  10. <meta name="nightmode" content="disable"> 
  11. <!-- 簡化頁面，減少數(shù)據(jù)傳輸 --> 
  12. <meta name="layoutmode" content="fitscreen"> 
  13. <!-- 禁用的 UC 瀏覽器的功能，“當此頁面中有較多文本時縮放字體” --> 
  14. <meta name="wap-font-scale" content="no"> 

注意

性能

當啟用 GZIP 時，移動 href 屬性到該元素的開頭以提高壓縮，因為 href 屬性被用于 a、base 和 link 標簽。

示例:

  1. <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet"> 

其他資源

相關項目

其他格式

翻譯

  • 英語/English
  • 巴西葡萄牙語/Brazilian Portuguese
  • 意大利語/Italian
  • 日語/Japanese
  • 俄羅斯語/Russian/Русский
  • 土耳其語/Turkish/Türkçe
  • 韓語/Korean

貢獻

開啟一個 issue 或一個 pull 請求來提出修改或補充。

指南

HEAD 倉庫由兩個分支組成：

1、master

對該分支包含的 README.md 文件的修改會自動反映在 <Head> Cheat Sheet 網(wǎng)站上。 所有對照表內(nèi)容的更改都應該針對此文件。

請按照下列步驟 pull 請求：

  • 只修改一個標簽，或一次一組相關的標簽
  • 對屬性使用雙引號
  • 請不要在自我閉合的元素中使用斜線 —— 即便 HTML5 規(guī)范中說，他們是可選的
  • 考慮在文檔中加入鏈接以支持你所提到的變化

2. gh-pages

該分支負責 <Head> Cheat Sheet 網(wǎng)站。我們使用 Jekyll 通過 GitHub Pages 服務來部署 README.md Markdown 文件。所有網(wǎng)站相關的修改必須集中在這里。

你可能需要通過 Jekyll 文檔 來了解 Jekyll 是如何在該分支上工作的。 

責任編輯：龐桂玉 來源： Linux中國
前端HTML標簽大全
相關推薦

2020-08-30 14:31:40

Python編程語言開發(fā)

2014-03-17 09:34:01

HTMLHTML閉合

2015-03-30 10:48:17

大數(shù)據(jù)大數(shù)據(jù)處理Hadoop

2021-02-26 09:04:22

數(shù)組ArrayListHashMap

2011-04-07 09:32:49

遞歸

2013-09-03 09:09:30

大數(shù)據(jù)

2019-01-21 08:20:17

通信4G5G

2015-06-17 11:18:01

WiFi

2017-10-16 18:29:36

數(shù)據(jù)庫Oracle常用語句

2018-01-03 10:26:51

前端JavaScript模塊

2021-01-19 11:00:14

CPU核心單核

2022-08-01 07:07:41

TCP協(xié)議后端

2022-08-26 08:17:32

Webshiro關系

2019-11-12 08:53:00

線上命令日志

2021-06-01 20:38:04

Vuex對象import

2015-03-17 15:18:02

私有云公共云數(shù)據(jù)中心

2022-11-16 11:55:22

網(wǎng)絡連接命令

2016-11-28 11:19:48

術語神秘

2022-12-26 09:16:45

Guava架構模型

2017-01-19 17:57:47

大數(shù)據(jù)
點贊
收藏

51CTO技術棧公眾號