e8e496c15ba93d81f6ea4fe5f55a2244-Element kann Metainformationen über die Seite bereitstellen (Meta-Infürmation), wie z für die Suche Index Qing und Aktualisierung Beschreibungen und Schlüsselwörter der Häufigkeit.
Das Obige ist die Erklärung zu w3c. Metainformationen sind Daten, die zur Beschreibung von Daten verwendet werden, d. h. sie werden verwendet, um einige Informationen der aktuellen Seite zu beschreiben. Zum Beispiel: Seitenbeschreibung, Schlüsselwörter, Autor usw. definieren.
enthält das -Attribut
1.name-Attribut
name Das Attribut stellt den Namen im Name/Wert-Paar bereit (und das später zu erwähnende Inhaltsattribut ist der dem Namen entsprechende Wert). Wenn wir uns eine Seite als physisches Objekt in unserem Leben vorstellen, können wir einen Lebenslauf als Analogie verwenden. Name, Geschlecht, Herkunftsort, Fähigkeiten, Projekterfahrung usw. können alle als Namensattribute eines Lebenslaufs und als Inhalt angesehen werden Das Attribut entspricht den Werten, die diesen Namen entsprechen.
<meta name="名称" content="具体的描述">
2.Inhaltsattribut
Das Inhaltsattribut liefert den Wert im Name/Wert-Paar. Der Wert kann eine beliebige gültige Zeichenfolge sein.
Das Inhaltsattribut sollte immer zusammen mit dem Namensattribut oder dem http-equiv-Attribut verwendet werden.
3.http-equiv-Attribut
equiv ist die Abkürzung für „äquivalent“, was „gleich“ und „äquivalent“ bedeutet. Es ist nicht schwer zu verstehen, dass es der Datei-Header-Funktion von http entspricht. Es kann einige nützliche Informationen an den Browser zurückgeben, um den Inhalt der Webseite korrekt und genau anzuzeigen eigentlich jeder Die Variable Wert des Parameters. (Studenten, die http nicht verstehen, können relevante Informationen finden, um mehr zu erfahren.)
<meta http-equiv="名称" content="具体的描述">
Häufig verwendete Name/Wert-Paare
1. Schlüsselwords (Schlüsselwort)
Beschreibung: Wird verwendet, um der Suchmaschine die Schlüsselwörter Ihrer Webseite mitzuteilen. Beispiel:
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />
Beschreibung: Wird verwendet, um Suchmaschinen mitzuteilen, dass Sie Der Hauptinhalt der Website. Beispiel:
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
3.author (Autor)
Beschreibung: Wird verwendet, um den Autor des zu kennzeichnen Webseite. Beispiel:
<meta name="author" content="Lxxyx,841380530@qq.com">
4.rEndeerer (Dual-Core-Browser-Rendering-Methode)
Beschreibung: Der Renderer ist für Dual-Core-Browser vorbereitet und wird verwendet, um anzugeben, wie der Dual-Core-Browser die Seite standardmäßig rendert. Zum Beispiel 360-Browser. Beispiel:
<meta name="renderer" content="webkit"> //默认webkit内核 <meta name="renderer" content="ie-comp"> //默认IE兼容模式 <meta name="renderer" content="ie-stand"> //默认IE标准模式
5.Ansichtsfenster(mobiles Fenster)
Erklärung: Ansichtsfenster gilt als Attribut des Designs mobiler Endgeräte
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" name="viewport">
Breite – Breite des Ansichtsfensters
-
height – die Höhe des Ansichtsfensters
initial-scale – das anfängliche Skalierungsverhältnis
Minimum -scale – Minimaler Maßstab, auf den der Benutzer zoomen darf
maximum-scale – Maximaler Maßstab, auf den der Benutzer zoomen darf
Benutzerskalierbar – Ob der Benutzer manuell zoomen kann Zoom
说明：用于设定网页字符集，便于浏览器解析与渲染页面举例：
<meta http-equiv="content-Type" content="text/html;charset=utf-8"> //旧的HTML，不推荐 <meta charset="utf-8"> //HTML5设定网页字符集的方式，推荐使用UTF-8
7.X-UA-Compatible(浏览器采取何种版本渲染当前页面)
说明：用于告知浏览器以何种版本来渲染页面。（一般都设置为最新模式，在各大框架中这个设置也很常见。）举例：
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面
8.refresh(自动刷新并指向某页面)
说明：网页将在设定的时间内，自动刷新并调向设定的网址。举例:
<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" /> //5秒后重定向到w3c官网
额额额，一个一个的太累了，下面是一大坨meta标签：
<!-- 声明文档使用的字符编码 --> <meta charset='utf-8'> <!-- 优先使用 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@gmail.com"/> <!-- 搜索引擎抓取 --> <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 全屏模式，删除苹果默认的工具栏和菜单栏 --> <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"/> <!-- 设置苹果工具栏颜色 --> <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" /> <!-- 针对手持设备优化，主要是针对一些老的不识别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-57x57-precomposed.png"/> <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/> <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/> <!-- Retina iPad，144x144 像素，可以没有，但推荐有 --> <!-- iOS 图标 end --> <!-- iOS 启动画面 begin --> <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/> <!-- iPad 竖屏 768 x 1004（标准分辨率） --> <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/> <!-- iPad 竖屏 1536x2008（Retina） --> <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/> <!-- iPad 横屏 1024x748（标准分辨率） --> <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/> <!-- iPad 横屏 2048x1496（Retina） --> <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/> <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) --> <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/> <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) --> <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.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 -->