HTML标识meta总结,HTML5 head meta 特性梳理

序言

meta是html語言head区的1个輔助性标识。或许你觉得这些编码无关紧要。实际上假如你可以用好meta标识,会给你带来出乎意料的实际效果,meta标识的功效有:检索模块提升(SEO),界定网页页面应用語言,全自动更新并指向新的网页页面,完成网页页面变换时的动态性实际效果,操纵网页页面缓存,网页页面定级点评,操纵网页页面显示信息的对话框等!

html的meta总结

meta标识的构成:meta标识共有两个特性,它们各自是http-equiv特性和name特性,不一样的特性又有不一样的主要参数值,这些不一样的主要参数值就完成了不一样的网页页面作用。

 

<!DOCTYPE html> <!-- 应用 HTML5 doctype,不区别尺寸写 -->
<html lang="zh-cmn-Hans"> <!-- 更为规范的 lang 特性写法 http://zhi.hu/XyIa -->
<head>
    <!-- 申明文本文档应用的标识符编号 -->
    <meta charset='utf⑻'>
    <!-- 优先选择应用 IE 全新版本号和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!-- 网页页面叙述 -->
    <meta name="description" content="不超出150个标识符"/>
    <!-- 网页页面重要词 -->
    <meta name="keywords" content=""/>
    <!-- 网页页面作者 -->
    <meta name="author" content="name, email"/>
    <!-- 检索模块抓取 -->
    <meta name="robots" content="index,follow"/>
    <!-- 为挪动机器设备加上 viewport -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <!-- `width=device-width` 会致使 iPhone 5 加上到主屏后以 WebApp 全屏方式开启网页页面时出現黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->
 
    <!-- iOS 机器设备 begin -->
    <meta name="apple-mobile-web-app-title" content="题目">
    <!-- 加上到主屏后的题目(iOS 6 新增) -->
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <!-- 是不是开启 WebApp 全屏方式,删掉iPhone默认设置的专用工具栏和工具栏 -->
 
    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
    <!-- 加上智能化 App 广告宣传条 Smart App Banner(iOS 6+ Safari) -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <!-- 设定iPhone专用工具栏色调 -->
    <meta name="format-detection" content="telphone=no, email=no"/>
    <!-- 忽视网页页面中的数据鉴别为电話,忽视email鉴别 -->
    <!-- 开启360访问器的极速方式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 防止IE应用适配方式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 不让百度搜索转码 -->
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!-- 对于手持机器设备提升,关键是对于1些老的不鉴别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">
    <!-- iOS 标志 begin -->
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon⑸7x57-precomposed.png"/>
    <!-- iPhone 和 iTouch,默认设置 57x57 像素,务必有 -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon⑴14x114-precomposed.png"/>
    <!-- Retina iPhone 和 Retina iTouch,114x114 像素,能够沒有,但强烈推荐有 -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon⑴44x144-precomposed.png"/>
    <!-- Retina iPad,144x144 像素,能够沒有,但强烈推荐有 -->
    <!-- iOS 标志 end -->
 
    <!-- iOS 起动画面 begin -->
    <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen⑺68x1004.png"/>
    <!-- iPad 竖屏 768 x 1004(规范辨别率) -->
    <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen⑴536x2008.png"/>
    <!-- iPad 竖屏 1536x2008(Retina) -->
    <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait⑴024x748.png"/>
    <!-- iPad 横屏 1024x748(规范辨别率) -->
    <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen⑵048x1496.png"/>
    <!-- iPad 横屏 2048x1496(Retina) -->
 
    <link rel="apple-touch-startup-image" href="/splash-screen⑶20x480.png"/>
    <!-- iPhone/iPod Touch 竖屏 320x480 (规范辨别率) -->
    <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen⑹40x960.png"/>
    <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
    <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen⑹40x1136.png"/>
    <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
    <!-- iOS 起动画面 end -->
 
    <!-- iOS 机器设备 end -->
    <meta name="msapplication-TileColor" content="#000"/>
    <!-- Windows 8 磁贴色调 -->
    <meta name="msapplication-TileImage" content="icon.png"/>
    <!-- Windows 8 磁贴标志 -->
 
    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
    <!-- 加上 RSS 定阅 -->
    <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
    <!-- 加上 favicon icon -->

    <!-- sns 社交媒体标识 begin -->
    <!-- 参照新浪微博API -->
    <meta property="og:type" content="种类" />
    <meta property="og:url" content="URL详细地址" />
    <meta property="og:title" content="题目" />
    <meta property="og:image" content="照片" />
    <meta property="og:description" content="叙述" />
    <!-- sns 社交媒体标识 end -->
 
    <title>题目</title>
</head>

上面得出了常见的1些meta特性,下面给1个对meta应用的了解。

meta是html語言head区的1个輔助性标识。或许你觉得这些编码无关紧要。实际上假如你可以用好meta标识,会给你带来出乎意料的实际效果,meta标识的功效有:检索模块提升(seo),界定网页页面应用語言,全自动更新并指向新的网页页面,完成网页页面变换时的动态性实际效果,操纵网页页面缓存,网页页面定级点评,操纵网页页面显示信息的对话框等!

meta标识的构成:meta标识共有两个特性,它们各自是http-equiv特性和name特性,不一样的特性又有不一样的主要参数值,这些不一样的主要参数值就完成了不一样的网页页面作用。

1、name特性

name特性关键用于叙述网页页面,与之对应的特性值为content,content中的內容关键是便于检索模块设备人搜索信息内容和归类信息内容用的。

meta标识的name特性英语的语法文件格式是:

<meta name="主要参数"content="实际的主要参数值">。 

在其中name特性关键有下列几种主要参数:

A、Keywords(重要字)

表明:keywords用来告知检索模块你网页页面的重要字是甚么。

举例:

<meta name="keywords"content="meta总结,html meta,meta特性,meta自动跳转"> 

B、description(网站內容叙述)

表明:description用来告知检索模块你的网站关键內容。

举例:

<meta name="description"content="haoroomsblog,html的meta总结,meta是html語言head区的1个輔助性标识。"> 

C、robots(设备人指导)

表明:robots用来告知检索设备人哪些网页页面必须数据库索引,哪些网页页面不必须数据库索引。

content的主要参数有all,none,index,noindex,follow,nofollow。默认设置是all。

举例:

<meta name="robots"content="none"> 

实际主要参数以下:

信息内容主要参数为all:文档将被查找,且网页页面上的连接能够被查寻;

信息内容主要参数为none:文档将不被查找,且网页页面上的连接不能以被查寻;

信息内容主要参数为index:文档将被查找;

信息内容主要参数为follow:网页页面上的连接能够被查寻;

信息内容主要参数为noindex:文档将不被查找,但网页页面上的连接能够被查寻;

信息内容主要参数为nofollow:文档将被查找,但网页页面上的连接不能以被查寻;

D、author(作者)

表明:标明网页页面的作者

举例:

<meta name="author"content="root,root"> 

E、generator

<meta name="generator"content="信息内容主要参数"/> 

meta标识的generator的信息内容主要参数,意味着表明网站的选用的甚么手机软件制做。

F、COPYRIGHT

<META NAME="COPYRIGHT"CONTENT="信息内容主要参数"> 

meta标识的COPYRIGHT的信息内容主要参数,意味着表明网站版权信息内容。

G、revisit-after

<META name="revisit-after"CONTENT="7days"> 

revisit-after意味着网站重访,7days意味着7天,依此类推。

2、http-equiv特性

http-equiv说白了,非常于http的文档头功效,它能够向访问器传回1些有效的信息内容,以协助正确和精准地显示信息网页页面內容,与之对应的特性值为content,content中的內容实际上便是各个主要参数的自变量值。

meta标识的http-equiv特性英语的语法文件格式是:

<meta http-equiv="主要参数"content="主要参数自变量值">;

在其中http-equiv特性关键有下列几种主要参数:

A、Expires(限期)

表明:能够用于设置网页页面的期满時间。1旦网页页面到期,务必到服务器上再次传送。

用法:

<meta http-equiv="expires"content="Fri,12Jan200118:18:18GMT"> 

留意:务必应用GMT的時间文件格式。

B、Pragma(cache方式)

表明:严禁访问器从当地测算机的缓存文件中浏览网页页面內容。

用法:

<meta http-equiv="Pragma"content="no-cache"> 

留意:这样设置,浏览者将没法离线访问。

C、Refresh(更新)

表明:全自动更新并指向新网页页面。

用法:

<meta http-equiv="Refresh"content="2;URL=https://www.jb51.net"> //(留意后边的引号,各自在秒数的前面和网站地址的后边) 

留意:在其中的2是指滞留2秒钟后全自动更新到URL网站地址。

D、Set-Cookie(cookie设置)

表明:假如网页页面到期,那末存盘的cookie将被删掉。

用法:

<meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan⑵00118:18:18GMT;path=/"> 

留意:务必应用GMT的時间文件格式。

E、Window-target(显示信息对话框的设置)

表明:强制性网页页面在当今对话框以单独网页页面显示信息。

用法:

<meta http-equiv="Window-target"content="_top"> 

留意:用来避免他人在架构里启用自身的网页页面。

F、content-Type(显示信息标识符集的设置)

表明:设置网页页面应用的标识符集。

用法:

<meta http-equiv="content-Type"content="text/html;charset=gb2312"> 

实际以下:

meta标识的charset的信息内容主要参数如GB2312时,意味着表明网站是选用的编号是简体汉语;

meta标识的charset的信息内容主要参数如BIG5时,意味着表明网站是选用的编号是繁体汉语;

meta标识的charset的信息内容主要参数如iso⑵022-jp时,意味着表明网站是选用的编号是日文;

meta标识的charset的信息内容主要参数如ks_c_5601时,意味着表明网站是选用的编号是韩文;

meta标识的charset的信息内容主要参数如ISO⑻859⑴时,意味着表明网站是选用的编号是英文;

meta标识的charset的信息内容主要参数如UTF⑻时,意味着全球通用性的語言编号;

G、content-Language(显示信息語言的设置)

用法:

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

H、Cache-Control特定恳求和回应遵照的缓存文件体制。

Cache-Control特定恳求和回应遵照的缓存文件体制。在恳求信息或回应信息中设定Cache-Control其实不会改动另外一个信息解决全过程中的缓存文件解决全过程。恳求时的缓存文件命令包含no-cache、no-store、max-age、max-stale、min-fresh、on
ly-if-cached,回应信息中的命令包含public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。各个信息中的命令含意以下
Public标示回应可被任何缓存文件区缓存文件
Private标示针对单独客户的全部或一部分回应信息,不可以被共享资源缓存文件解决。这容许服务器仅仅叙述当客户的一部分回应信息,此回应信息针对别的客户的恳求失效
no-cache标示恳求或回应信息不可以缓存文件
no-store用于避免关键的信息内容被不经意的公布。在恳求信息中推送将使得恳求和回应信息都不应用缓存文件。
max-age标示顾客机能够接受存活期不超过特定時间(以秒为企业)的回应
min-fresh标示顾客机能够接受回应時间小于当今時间再加特定時间的回应
max-stale标示顾客机能够接受超过请求超时期内的回应信息。假如特定max-stale信息的值,那末顾客机能够接受超过请求超时期特定值以内的回应信息。

J、http-equiv="imagetoolbar"

<meta http-equiv="imagetoolbar"content="false"/> 

特定是不是显示信息照片专用工具栏,当为false意味着无法显示,当为true意味着显示信息。

K、Content-Script-Type

<Meta http-equiv="Content-Script-Type"Content="text/javascript"> 

W3C网页页面标准,指明网页页面中脚本制作的种类。

HTML < base > 标识

为网页页面上全部连接特定默认设置开启方法:

比如:

<base target="_self">

特定网页页面中全部标识全是本页开启!