|
" c8 Z# `7 i7 j9 J) g: O% \ 今天查Html手册时，又有了新的发现也就这机会，好好总结下HTML中Meta的使用 HTML 标签，所有浏览器都支持 标签它提供关于HTML文档的元数据元数据不会显示在页面上，但是对于机器是可读的。
' v' j- O Y3 x5 b 它可用于浏览器（如何显示内容或重新加载页面），对搜索引擎和更新频度的描述和关键词，或其他 web 服务 标签位于文档的头部，不包含任何内容 标签的属性定义了与文档相关联的名称/值对。 , |/ @4 j: c# r: M% b% k
在 HTML 中， 标签没有结束标签,在 XHTML 中， 标签必须被正确地关闭。  1 B" f8 B. S) P8 O9 N
必要属性属性值描述contentsome text定义与http-equiv或name属性相关的元信息可选属性属性值描述http-equivcontent-type / expire / refresh / set-cookie把content属性关联到HTTP头部。 : x0 W u& O. U' C! a- T+ q
nameauthor / description / keywords / generator / revised / others把 content 属性关联到一个名称contentsome text定义用于翻译 content 属性值的格式。
2 t9 X, w* W, V* r* T: ?5 R SEO优化 
9 P5 I! O& y( Y0 v- _- M9 G0 ~6 G 关键词:类似这样的 meta 标签可能对于进入搜索引擎的索引有帮助.使用人们可能会搜索，并准确描述网页上所提供信息的描述性和代表性关键字及短语标记内容太短，则搜索引擎可能不会认为这些内容相关,标记不应超过 874 个字符。 $ G- k; L+ V- e0 R2 H$ _. H
页面描述，每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签 9 A$ ]$ p. K$ W- W' ?
搜索引擎索引方式，robotterms是一组使用逗号(,)分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow确保正确使用nofollow和noindex属性值。 ( k9 p: O( C1 A5 |! Y" t) m
3 G* r! q Z) ~* |$ Z g& S& I 页面重定向和刷新：content内的数字代表时间（秒），既多少时间后刷新如果加url,则会重定向到指定网页（搜索引擎能够自动检测，也很容易被引擎视作误导而受到惩罚）。/ c! y/ s* B9 S! e& s: V. [
. I9 P7 X( ?+ R4 w% P9 C, V- _
移动设备 viewport：能优化移动浏览器的显示如果不是响应式网站，不要使用initial-scale或者禁用缩放。
( T2 G( d5 f! v2 M; V$ s 大部分4.7-5寸设备的viewport宽设为360px；5.5寸设备设为400px；iphone6设为375px；ipone6 plus设为414px很多人使用initial-scale=1到非响应式网站上，这会让网站以100%宽度渲染，用户需要手动移动页面或者缩放。 & U$ X. W& Q+ x0 H
如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1，则用户将不能放大/缩小网页来看到全部的内容 content 参数： width viewport 宽度(数值/device-width) 8 e1 j9 v3 C- U; n4 H% z) S
height viewport 高度(数值/device-height) initial-scale 初始缩放比例 maximum-scale 最大缩放比例 minimum-scale 最小缩放比例 2 q- q' n- _8 J- d) W) u3 h6 J
user-scalable 是否允许用户缩放(yes/no) 2 m( P. B) k4 A& B! J0 Y* L8 C$ P: u
各浏览器平台 
- v5 F9 _1 ~! _5 o1 {6 M4 Y Microsoft Internet Explorer : G! Y% F! f' R# X8 P. o
Google Chrome - q9 i: n9 s) z ?& P8 ?; h& b
360浏览器 UC手机浏览器
- U, ?. ^8 b H( n* S' z QQ手机浏览器 1 b3 A5 X0 J$ R- t' ]$ ?
Apple iOS p2 j4 H& w& E- ?
Google Android
# Y ?& A% G) p* V App Links : t2 q0 l. i2 y. z, y" o: x
其它常用的meta # B2 A; l& K2 B& A5 f0 t P
网页相关 网页编码：以下两种charset定义方式均可
) g* Y6 r ?. a" d 禁止缓存：禁止浏览器从本地机的缓存中调阅页面内容，网页不保存在缓存中，每次访问都刷新页面这样设定，访问者将无法脱机浏览。
0 @/ M. y7 w% | 网页过期：指定网页在缓存中的过期时间，一旦网页过期，必须到服务器上重新调阅注意：必须使用GMT的时间格式，或直接设为0（数字表示多少时间后过期）。 " r. m# y y; \0 X# `& P7 S
Cookie设置：注意：必须使用GMT的时间格式
% K% K8 h: i0 I/ K3 r/ |7 Z 显示窗口的设定：强制页面在当前窗口以独立页面显示，这个属性是用来防止别人在框架里调用你的页面Content选项：_blank、_top、_self、_parent.。 1 F) I5 w2 W6 L( O+ s: {* p
进入与退出：这个是页面被载入和调出时的一些特效这个有好多特效，可以查询Page-Exit去了解更多 。 0 M4 f' Y7 T/ z
安全相关 内容安全策略CSP（Content-Security-Policy）,可以参考https://blog.csdn.net/u014465934/article/details/84199171
0 |4 q! f/ p6 @9 d" U 喜欢小编的可以点个赞关注小编哦，小编每天都会给大家分享文章我自己是一名从事了多年的前端老程序员，。
4 a# [5 D/ X5 i) S& y6 s. } 小编为大家准备了新出的前端编程学习资料，免费分享给大家！如果你也想学习前端，可以观看【置顶】文章。也可以私信【1】拿
. k- L/ D' g. j& I" U! {/ C( r' [
1 ], w* D1 p5 f; i% Q# P ]' r& @- x, ^! R0 H: F
& @) a; a1 \- N6 c4 M7 a* ?6 I
( |- W( G4 ]; W# C" R- e
| 
