What is a meta tag information class
The so-called meta-information, refers to the description of the information itself, meta informational tags, HTML is used to describe a class label document itself, which usually appear in the head tag, in general, will not be displayed on the page (the other hand, other labels, such as a semantic category label, the service description).
Under most circumstances is meta-information to the browser, search engines and other machines to read, sometimes the information is displayed to the user in addition to the page, and sometimes does not. The small number of meta-information category labels, I am here to introduce you one by one.
head tag
First, let's look at the head tag, head tag itself does not carry any information, it is mainly used as a bloom other semantic category labeled containers.
head tag defines itself must be the first html tag in the tag, it must contain a title, and can only contain a base. If the document as an iframe, or there are other ways to specify a document title, you may permit does not contain a title tag.
title tags
title tag indicates the document's title, literally it is very easy to understand.
base label
base label is actually a legacy label. Its role is to provide a foundation for all the relative URL address of the page. base labels can only have one, it changes the global link address, it is a very dangerous label, likely to cause problems with with JavaScript, so in actual development, I suggest you compare the use of JavaScript to replace the base label.
meta tags
meta tags is a key-value pair, which is a generic meta tag information indicates.
Meta tags can appear any number in the head. Meta tags generally defined by two name and content attributes. meta name representing the name information, content value is used to represent meta-information. It is the basic usage such as the following, you can try it yourself:
<meta name=application-name content="lsForums">
This label indicates the page on which the web-application, called IsForums. Here name is a more liberal agreement, http standard specifies the name of some consensus as we use, but also to encourage people to invent their own name to be used. In addition to basic usage, meta tags and some variants, it is mainly used to simplify the way of writing or declare automation behavior. Here I will pick a few to focus on content respectively explain.
meta charset attribute has
HTML5 from the beginning, in order to simplify the wording, meta tags added charset attribute. Add a charset attribute of meta tags do not need to have a name and content.
<meta charset="UTF-8" >
charset type meta tag is critical, it describes the HTML document encoding form itself. Therefore, I suggest that the first head of the label on.
<html>
<head>
<meta charset="UTF-8">
……
In this way, before the browser reads the label, all the characters are treated ASCII characters, we all know, ASCII characters in UTF-8 character encoding and the vast majority subset, so, before you read meta, most browsers understand the document encoding format will not go wrong, so you can ensure maximum distortion does not occur. Under normal circumstances, http server via http head specify the correct encoding, but there are some special circumstances, such as the use of file protocol to open an HTML file, there is no http header, this time, charset meta is very important.
meta http-equiv attribute has
http-equiv meta tag has attributes, expressed execute a command, such as meta tags may not need a name attribute. For example, the following piece of code, the content-type is equivalent to adding the http header, and specifies http encoding.
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
In addition to content-type, as well as the following command:
- content-language specified language content;
- default-style to specify the default style sheet;
- refresh refresh;
- http analog set-cookie set-cookie header, disposed Cookie;
- x-ua-compatible analog http header x-ua-compatible, compatibility ua declaration;
- content-security-policy simulation http header content-security-policy, security policy contents of the statement.
The name for the viewport meta
In fact, meta tags can be freely defined, as long as the two sides agreed to write and read a good name and content formats it. We introduce a meta type, it is not defined in the HTML standard, but it is the de facto standard mobile terminal development: it is the name for the viewport meta.
meta name attribute such as the viewport, its content is a complex structure, are comma-separated value pairs, form key is key = value.
E.g:
<meta name="viewport" content="width=500, initial-scale=1">
Here only specifies two properties, width, and scaling, in fact, more controllable viewport, it can express all the properties as follows:
- width: the width of the page, the value may be specific numbers or may be a device-width, showing the device with equal width.
- height: page height, you can take the values specific numbers, can also be a device-height, represents the height equal with the device.
- initial-scale: initial scale.
- minimum-scale: minimum scale.
- maximum-scale: the maximum zoom ratio.
- user-scalable: whether to allow the user to zoom.
For mobile terminal has already done the adaptation of the web page, the user should zoom out function is disabled, the width of the device is set to the width of a standard meta follows:
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
Other pre-defined meta
In the HTML standard, also defines a number of meta tag name, can be seen as a kind of meta convention, I listed here, you can easily find out.
application-name: If the page is a Web application, indicate the name of the application with this label.
- author: page author.
- description: page description, this property could be used for a search engine or other occasions.
- generator: page generation tool used mainly for visual editor, if it is handwritten HTML pages do not need to add this meta.
- keywords: page keywords for SEO scene is critical.
- referrer: Jump policy is a security measure.
- theme-color: color page style, and it will not affect the actual page, but the browser may be adjusted accordingly UI (such as a window frame or tab colors) outside the page.
Finally, here are some for everyone in development and may use the meta tag attribute values:
<!-- 默认使用最新浏览器 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- 不被网页(加速)转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp">
<!-- 搜索引擎抓取 -->
<meta name="robots" content="index,follow">
<!-- 删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- 设置苹果工具栏颜色 -->
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- UC应用模式-->
<meta name="browsermode" content="application">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- iOS 设备 添加到主屏后的标题（iOS 6 新增） -->
<meta name="apple-mobile-web-app-title" content="标题">
<!-- 启用WebApp全屏模式，删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
<!-- 设置苹果工具栏颜色 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!-- 忽略页面中的数字识别为电话，忽略email识别 -->
<meta name="format-detection" content="telphone=no, email=no"/>