Properties of the role of the HTML meta

In writing the front page, often overlooked job of meta tags, just paste some code common habitual, many do not understand meta There are many other uses, the following is part of my finishing.
consisting of meta tags:
meta tag originally had two properties, they are http-equiv and name attributes, after h5 released a new attribute charset; each attribute has a different parameter values, these different parameter values is realized different page functions; here we introduce the property;

  • charset (h5 increased property)

    charset attribute specifies the character encoding of an HTML document; html will bring in property;

    <meta charset="UTF-8">

  • name attribute;
    name attribute is mainly used to describe the page content attribute value, the contents of the content used in the SEO.
    <meta name = "parameter" content = "a specific parameter value">.
  • Keywords (keywords)
    keywords to tell the search engines what keywords this page is mainly for SEO optimization
    <meta name = "keywords" content = " keyword articles, the keywords to be searched">
  • description (content of the website description)
    the Description used to tell the search engine the main content of the site, with a brief general description of the site text, also mainly for SEO optimization.
    <meta name = "description" content = " short description of the site">
  • robots (robot wizard)
    robots used to tell search robots which pages need to be indexed and which pages need not be indexed.
    <meta name = "robots" content = "all / none / index / noindex / follow / nofollow">
    specific parameters are as follows:
    information parameter is all: the file can be retrieved, and the links on the page can be queried;
    information parameter is none : the file can not be retrieved, and the links on the page can not be queried;
    information parameters for the index: files will be retrieved;
    information parameters as follow: a link on the page can be inquiries;
    information parameters noindex: document will not be retrieved, but link on the page can be inquiries;
    information parameters nofollow: document can be retrieved, but the link on the page can not be queried;
  • author (web developer)

    Tagging web developers;
    for example:
    <Meta name = "author" Content = "name, email">

  • viewport (controls whether the page can be scaled, mainly used in mobile terminal)

    At the end of the layout of the mobile, css is not equal to 1px 1px physical, and now the phone screen resolution has become increasingly high, but high-pixel screen size has not changed much, which shows a real physical pixels the stuffed several pixels.
    So in doing mobile terminal development, in order to move the page end of the same size on different mobile phones to show that we can be the width of the page is fixed, then get the width of the device, you can be the width of the device before we set width proportion, then use the HTML5 new viewport to zoom in on the page, and not allow users to re-scaling fixed.
    <meta name = "viewport" content
    = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, minimum-scale = 1.0, user-scalable = 0" /> Detailed parameters are as follows:
    width setting layout the width of the viewport, is a positive integer, string "width-device" represents the width of the device
    initial-scale scaled initial value of the page, a number that can be decimals
    minimum-scale allows the user the minimum scaling value, is a number , can take fractional
    maximum-scale users allowed maximum scaling value for a number, may be decimals
    user-scalable whether to allow the user to zoom, is "no" or "yes", no representatives allowed, allowing for yes

  • the After-Revisit
    Revisit the After-parameter indicates how long after the re-visit the site, 1days on behalf of one day, and so on.
    <meta name = "revisit-after " content = "1days">
  • generator parameters, representatives explain what the software used in the production site.
  • COPYRIGHT
    information parameters COPYRIGHT, expressed Notes Copyright information on this site.

<Meta name = "COPYRIGHT" content = "copyright">

  • http-equiv attribute

       http-equiv可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,对应的属性值为content;
       meta标签的http-equiv属性语法格式是:
       ***<meta http-equiv="参数"content="参数变量值">***
       http-equiv属性有以下几种参数:
    
  • Expires (period)

       用于设定网页的到期时间。时间到时网页自动过期,页面必须到服务器上重新传输。
       ***<meta http-equiv="expires"content="Fri,12Jan200118:18:18GMT"> 注意:必须使用GMT的时间格式。***
    
  • Pragma (cache mode)

       Pragma禁止浏览器从本地计算机的缓存中访问页面内容,每一次的加载页都是从网络服务器中加载;这样设定,访问者将无法脱机浏览,必须在联网的状态下浏览页面;
       ***<meta http-equiv="Pragma"content="no-cache">*** 
    
  • Refresh (set auto-refresh)

       设置页面在等待多久时间后自动刷新页面或者指向新页面,跳转页面。
       ***<meta http-equiv="Refresh"content="10;URL=http://www.haorooms.com"> //(注意后面的引号,分别在秒数的前面和网址的后面,此例子为10秒后跳转)*** 
    
  • Set-Cookie (cookie deletion)

       网页过期时,本地计算机中的cookie将自动被删除。
       ***<meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT;path=/"> 注意:必须使用GMT的时间格式。***
    
  • Window-target (the default setting display setting window)

       强制改变页面在当前窗口的显示方式为独立显示,可以用来防止别人在框架里调用自己的页面。
       ***<meta http-equiv="Window-target"content="_top">*** 
    
  • content-Language (the language setting)

<meta http-equiv="Content-Language"content="zh-cn"/>

  • Other meta

       忽略数字自动识别为电话号码
       <meta content="telephone=no" name="format-detection" />
       忽略识别邮箱
       <meta content="email=no" name="format-detection" />
    
  • The WebApp (full screen mode: camouflage app, offline applications).

       ***<meta name="apple-mobile-web-app-capable" content="yes" /><!-- 启用 WebApp 全屏模式 -->***

    meta in the usage of mobile end

       <!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
       <meta name="HandheldFriendly" content="true">
       <!-- 微软的老式浏览器 -->
       <meta name="MobileOptimized" content="320">
       <!-- uc强制竖屏 -->
       <meta name="screen-orientation" content="portrait">
       <!-- QQ强制竖屏 -->
       <meta name="x5-orientation" content="portrait">
       <!-- UC强制全屏 -->
       <meta name="full-screen" content="yes">
       <!-- QQ强制全屏 -->
       <meta name="x5-fullscreen" content="true">
       <!-- UC应用模式 -->
       <meta name="browsermode" content="application">
       <!-- QQ应用模式 -->
       <meta name="x5-page-mode" content="app">
       <!-- windows phone 点击无高光 -->
       <meta name="msapplication-tap-highlight" content="no">
    

HTML <base> tag
defaults for all links on a page:
For example:

    ***<base href="连接地址">***
    <base> 标签为页面上的所有链接规定默认地址或默认目标

All links on the page to specify the default Open (and meta of Window-target role similar):
For example:

    ***<base target="_self">***
    target指定页面中所有标签都是本页打开

Guess you like

Origin www.cnblogs.com/jlfw/p/12203151.html