Summary of some common information about tags in HTML5 header

Time：2021-3-4

preface

As we all know, in the development of mobile front-end, add some WebKit specific HTML5 header tags to help browsers better parse HTML code and better display mobile web front-end pages. This paper sorts out some common information of < meta > tags in HTML5 header. Error, please leave a message to correct, or can leave a message to add, welcome to exchange messages!

XML/HTML CodeCopy content to clipboard
  1. <! — Font encoding — >  
  2. <meta charset=“utf-8” />  
  3.   
  4. <! — Keyword — >  
  5. <meta name=“keywords” content=“” />  
  6.   
  7. <! — description — >  
  8. <meta name=“description” content=“” />  
  9.   
  10. <! — author — >  
  11. <meta name=“author” content=“” />  
  12.   
  13. <! — set document width, zoom or not — >  
  14. <meta name=“viewport” content=“width=device-width,initial-scale=1.0,user-scalable=no” />  
  15.   
  16. <! — the latest version of IE or chrome is preferred — >  
  17. <meta http-equiv=“X-UA-Compatible” content=“IE=edge,chrome=1” />  
  18.   
  19. <! — when 360 reads this tag, it immediately switches to speed mode — >  
  20. <meta name=“renderer” content=“webkit” />  
  21.   
  22. <! — prohibit Baidu transcoding — >  
  23. <meta http-equiv=“Cache-Control” content=“no-siteapp” />  
  24.   
  25. <! — UC forced vertical screen — >  
  26. <meta name=“screen-orientation” content=“portrait” />  
  27.   
  28. <! — QQ forced vertical screen — >  
  29. <meta name=“x5-orientation” content=“portrait” />  
  30.   
  31. <! — UC force full screen — >  
  32. <meta name=“full-scerrn” content=“yes” />  
  33.   
  34. <! — QQ forces full screen — >  
  35. <meta name=“x5-fullscreen” content=“ture” />  
  36.   
  37. <! — QQ application mode — >  
  38. <meta name=“x5-page-mode” content=“app” />  
  39.   
  40. <! — UC application mode — >  
  41. <meta name=“browsermode” content=“application”>  
  42.   
  43. <! — window phone lights up without highlight — >  
  44. <meta name=“msapplication-tap-highlight” content=“no” />  
  45.   
  46. <! — Android devices do not automatically recognize email addresses — >  
  47. <meta name=“format-detection” name=“email=no” />  
  48.   
  49. <! — IOS device — >  
  50.   
  51. <! — Title added to home screen — >  
  52. <meta name=“apple-mobile-web-app-title” content=“Title” />  
  53.   
  54. <! — enable webapp full screen — >  
  55. <meta name=“apple-mobile-web-app-capable” content=“yes” />  
  56.   
  57. <! — set the background color of the status bar to take effect when webapp mode is enabled — >  
  58. <meta name=“apple-mobile-web-app-status-bar-style” content=“black-translucent/black/default” />  
  59. <! — translucent / Black / default white — >  
  60.   
  61. <! — do not recognize numbers as phone numbers — >  
  62. <meta name=“format-detection” content=“telephone=no” />  
  63.   
  64. <! — add ad bar intelligently — >  
  65. <meta name=“apple-itunes-app” content=“app-id=myappstoreID,affiliate-data=myaffiliatedata,app-argument=myurl” />  

summary

This article is just a summary of some common information of < meta > tags in HTML5 header. I hope it can be helpful for you to learn or use HTML5. If you have any questions, you can leave a message. Thank you for your support for developer.

Tags: , ,

Recommended Today

Flutter series Xi: detailed explanation of the principle of flutter navigator 2.0

Navigator 2.0As a new generation of routing, it providesDeclarativeofAPI, more in line withFlutterStyle.Navigator 2.0Some new forward compatibleAPI, how andNavigator 1.0There is a big difference compared with. This article will analyze in detailNavigator 2.0So that we can have an in-depth understanding of it, so that it will be more handy in use. Background of navigator 2.0 […]