HTML从头开始——很常见却很少琢磨的<meta>

本文地址:http://www.wuxiaohu.com/2017/04/05/710.html

< meta >标签提供关于HTM大发快3L文档的元数据。

元数据不会显大发快3示在页面上,但是对于机器是可读的。

它可用于浏览器(如何显示内容或重新加载页面),搜索引擎关键词),或其他 web 服务。

习惯性的复制粘贴,很多时候会让我们忽略很多东西,于是乎,我稍微做那么一点总结,什么时候来看看都好!

常用的几个功能包括:

 

  • 手机移动设备显示

这绝对是现在又常见又必须懂的东西:

 
  1. <!-- viewport:能优化移动浏览器的显示。如果不是响应式网站,不要使用initial-scale或者禁用缩放。-->  
  2.   
  3. <meta name="viewport" content=" width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">  
  4.   
  5. <!--   
  6.         大部分4.7-5寸设备的viewport宽设为360px;  
  7.         5.5寸设备设为400px;  
  8.         iphone6设为375px;  
  9.   &nbs大发快3p;     ipone6 plus设为414px。  
  10.  -->  
  1. width:宽度(数值 / device-width)(范围从200 到10,000,默认为980 像素)
  2. height:高度(数值 / device-height)(范围从223 到10,000)
  3. initial-scale:初始的缩放比例 (范围从>0 到10)
  4. minimum-scale:允许用户缩放到的最小比例
  5. maximum-scale:允许用户缩放到的最大比例
  6. user-scalable:用户是否可以手动缩 (no,yes)

很多人使用initial-scale=1到非响应式网站上,这会让网站以100%宽度渲染,用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1,则用户将不能放大/缩小网页来看到全部的内容。

'width=device-width' 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边

其他一些移动端用到的:

 
  1. <!-- WebApp全屏模式 -->
  2. <大发快3;meta 大发快3;name="apple-mobile-web-app-capable" content="yes" >
  3. <!-- 隐藏状态栏/设置状态栏颜色 -->
  4. <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" >
  5. <!-- 添加到主屏后的标题 -->
  6. <met大发快3a 大发快3;name="apple-mobile-web-app-title" content="标题">
  7. <!-- 忽略数字自动识别为电话号码 -->
  8. <meta content="telephone=no" name="format-detection" >大发快3;
  9. <!-- 忽略识别邮箱 -->
  10. <meta 大发快3;content="email=no" 大发快3;name="format-detection" >
  11. <!-- 添加智能 App 广告条 Smart App Banner:告诉浏览器这个网站对应的app,并在页面上显示下载banner -->
  12. <met大发快3a name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
  13. <!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
  14. <met大发快3a name="HandheldFriendly" content="true">大发快3;
  15. <!-- 微软的老式浏览器 -->
  16. <meta nam大发快3e="MobileOpt大发快3imized" content="320">大发快3;
  17. <!-- uc强制竖屏 -->
  18. <meta name="sc大发快3reen-orientation" content="portrait">
  19. <!-- QQ强制竖屏 -->
  20. <meta name="x5-orientation" content="portrait">
  21. <!-- UC强制全屏 -->
  22. <meta name="full-大发快3screen" content="yes">
  23. <!-- QQ强制全屏 -->
  24. <met大发快3a name="x5-fullscreen" content="true">
  25. <!-- UC应用模式 -->
  26. <meta 大发快3;name="browsermode" content="application">
  27. <!-- QQ应用模式 -->
  28. <meta name="x5-page-mode" content="app">
  29. <!-- windows phone 点击无高光 -->
  30. <大发快3;meta name="msapplication-tap-highlight" content="no">

 

  • 优先使用IE最新版本和chrome

当然也可以选择用某个版本的IE,但是,谁会这么做呢。。。

 
  1. <meta http-equiv="X-UA-Compatible" 大发快3;content="IE=edge,chrome=1" >  
  2. <!-- 关于X-UA-Compatible, 使用IEX版本 -->  
  3. <meta http-equiv="X-UA-Compatible" content="IE=X" >  

 

  • 浏览器内核选择

国内双核浏览器默认内核模式如下:
1. 搜狗高速浏览器、QQ大发快3浏览器:IE内核(兼容模式)
2. 360极速浏览器、遨游浏览器大发快3:Webkit内核(极速模式)

&n大发快3bsp;
  1. <meta name="renderer" content="webkit|ie-comp|ie-stand">  
  2. <!--  
  3.     webkit : webkit内核高速浏览  
  4.     ie-comp : IE内核兼容模式  
  5.     ie-stand : IE内核兼容标准模式  
  6. -->  

 

  • 规定文档字符集

HTML5 让书写变得更简洁:

  1. <!--HTML 4.01 版本中: -->
  2. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  3. <!--HTML 5 版本中: -->
  4. <大发快3;meta 大发快3;charset="UTF-8">大发快3;

UTF大发快3-8 :Unicode 字符编码

ISO-8859-1 :拉丁字母表的字大发快3符编码

在理论上,可以大发快3使用任何字符编码,但并不是所有浏览器都能够理解它们。某种字符编码使用的范围越广,浏览器就越有可能理解它。

 

常用的就是“关键字”和“描述”了:

 
  1. <!-- 关键字 -->  
  2. <meta name="keywords" content="your tags">  

使用人们可能会搜索,并准确描述网页上所提供信息的描述性和代表性关键字及短语。

标记内容太短,则搜索引擎可能不会认为这些内容相关。另外标记不应超过 874 个字符。

&n大发快3bsp;
  1. <!-- 描述 -->
  2. <meta name="description" content="大发快3150 words">

这是一个不超过 150 个字符且能准确反映网页内容的描述标签。

然后就是一个不常用的属性,搜索引擎的索引方式,用的不多,重在了解:

 
  1. <meta 大发快3;name="robots" co大发快3ntent="index,follow">  
  2. <!--  
  3.     all:文件将被检索,且页面上的链接可以被查询;  
  4.     none:文件将不被检索,且页面上的链接不可以被查询;  
  5.     index:文件将被检索;  
  6.     follow:页面上的链接可以被查询;  
  7.     noindex:文件将不被检索;  
  8.     nofollow:页面上的链接不可以被查询。  
  9.  -->&大发快3nbsp; 

以上列出来的就大发快3是 content 的可取值,以及其含义;

robots 表示针对搜索引擎全部搜索引擎

既然如此,自然也就有针对个别的搜索引擎关键字:

该列表来源网络,也不能保证其百分百的准确性,所以了解了解就好了

 
  1. <!--  
  2.   搜索引擎            关键词  
  3.   All                name="robots"  
  4.   Google             name="googlebot"
  5.   MSN Search         name="msnbot"
  6.   Yahoo              name="yahoo-slurp"
  7.   Baidu              name="baiduspider"
  8.   Ask/Teoma          name="teoma"
  9.   Cuil               name="twiceler"
  10.   GigaBlast          name="gigabot"
  11.   Scrub The Web      name="scrubby"
  12.   DMOZ Checker       name="robozilla"
  13.   Nutch              name="nutch"
  14.   Alexa/Wayback      name="ia_archiver" 
  15.   Naver              name="naverbot"
  16.   AltaVista          name="scooter"
  17.   AllTheWeb          name="FAST-WebCrawler"
  18.   Inktomi            name="Slurp"
  19. -->  

针对国外 “google” “yahoo” 搜索,content 也有特殊的两个值:“noodp”,“noydir”

NOODP(No Open Directory Project):在搜索结果中不使用Open Directory Project中的描述信息作为其摘要信息。
NOYDIR(No Yahoo Directory):在搜索结果中不使用Yahoo Directory中的描述信息作为其摘要信息。
网站如果提交到Yah大发快3oo Directory或者DMOZ这些开放分类目录中,这些目录将记录网站说明信息。有时搜索引擎很可能采用开放目录里面网站的信息,而不采用现有的网址信息,导致搜索引擎的信息和网站的现有信息不匹配。
NOODP 和 NOYDIR 就是要让搜索引擎不使用这些开放分类目录上的信息,而使用网站的现有信息。)

&n大发快3bsp;

  • 页面刷新
 
  1. <!-- 页面重定向和刷新 -->  
  2. <meta http-equi大发快3v="re大发快3fresh" content="0;url=" >  

content内的数字代表时间(秒),既多少时间后刷新。如果加url,则会重定向到指定网页搜索引擎能够自动检测,也很容易被引擎视作误导而受到惩罚)。

 

  • 作者、版权、其他
 
  1. <!-- 定义网页作者 -->    
  2. <meta name="author" content="author name" >    
  3.   
  4. <!-- 定义网站版权 -->    
  5. <meta 大发快3;name="copyright" content="content" >大发快3;    
  6.   
  7. <!-- 禁止浏览器从本地计算机的缓存中访问页面内容:这样设定,访问者将无法脱机浏览 -->    
  8. <meta http-equiv="Pragma" content="no-cache">  
  9.   
  10. <!-- 站点适配:主要用于PC-手机页的对应关系 -->    
  11. <meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url">  
  12. <!--  
  13.     [wml|xhtml|html5]根据手机页的协议语言,选择其中一种;  
  14.    &n大发快3bsp;url="url" 后者代表当前PC页所对应的手机页URL,两者必须是一一对应关系。  
  15.  -->  
  16.   
  17.   
  18. <!-- 转码申明:用百度打开网页可能会对其进行转码(比如贴广告),避免转码可添加如下meta -->    
  19. <大发快3;meta http-equiv="Cache-Control" content="no-siteapp" 大发快3;>  

非常荣幸你能看到这一行字

o(* ̄▽ ̄*)ブ  谢谢阅读!  o(* ̄▽ ̄*)ブ


发布时间:2017-12-18 18:40 Monday
  • 版权声明:除非注明,文章均为【seo大发快3】原创,欢迎转载!转载请注明本文地址,谢谢!

  • 作者:seo大发快3

    要做就做最好的网赚资讯博客。欢迎喜欢网赚的朋友加我了解各类网赚动态。扫码添加微信即可

    返回列表
    上一篇:
    下一篇:

    发表评论

    快捷回复: