在写网页的过程中，第一步就是创建一个html文档。如下是最简单的 html5 文档。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

 </head>

 <body>

 </body>

 </html>

其中一个很重要的部分是 meta 标签，这个标签根据内容的不同有不同的作用。当然这些东西百度都可以找到。

上面第一个 meta 就是规定了文档的字符编码。

meta 元素可以提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键字。它不会显示在页面上，但是计算机可以识别。

meta 有一个必须属性是 content 定义与 http-equiv 或 name 属性相关的元信息。

可选属性有 三个 http-equiv、name、scheme。

name 属性主要用于描述网页。

1、定义文档关键字，用于搜索引擎。

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

2、用于web页面描述。

<meta name="description" content="Free Web tutorials on HTML and CSS">

3、定义作者。

<meta name="author" content="zhang san">

4、规定用于生成文档的一个软件包（不用于手写页面）

<meta name="generator" content="FrontPage 4.0">

5、规定页面所代表的 web 应用程序的名称。

<meta name="application-name" content="博客园">

6、用于标注版权信息。

<meta name="copyright" content="Guo">

7、renderer是为双核浏览器准备的，用于指定双核浏览器默认以何种方式渲染页面。

<meta name="renderer" content="webkit"> //默认webkit内核

<meta name="renderer" content="ie-comp"> //默认IE兼容模式

<meta name="renderer" content="ie-stand"> //默认IE标准模式

8、搜索引擎爬虫重访时间。如果页面不是经常更新，为了减轻搜索引擎爬虫对服务器带来的压力，可以设置一个爬虫的重访时间。如果重访时间过短，爬虫将按它们定义的默认时间来访问。

<meta name="revisit-after" content="7 days" >

http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。

1、每 30 秒刷新网页。

<meta http-equiv="refresh" content="30">

2、X-UA-Compatible 告知浏览器以何种版本来渲染页面。

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面

3、指定请求和相应遵循的缓存机制。

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

content 有 5种情况：

　　　　① no-cache : 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。

　　　　② no-store : 不允许缓存，每次都要去服务器上，下载完整的响应。为了安全。

　　　　③ public : 缓存所有响应，但并非必须。因为max-age也可以做到相同效果。

　　　　④ private : 只为单个用户缓存，因此不允许任何中继进行缓存。

　　　　⑤ max-age : 表示当前请求开始，该响应在多久内能被缓存和重用，而不用去服务器请求。例如：max-age=60表示响应可以再缓存和重用 60 秒。

4、用于禁止当前页面在移动端浏览时，被百度自动转码。虽然百度的本意是好的，但是转码效果很多时候却不尽人意。所以可以在head中加入例子中的那句话，就可以避免百度自动转码了。

<meta http-equiv="Cache-Control" content="no-siteapp" />

移动端 meta 。

1、强制保持文档宽度和设备宽度 1:1。并且初始化缩放不缩放。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

再加上 maximum-scale=1.0，表示最大缩放 为 1.0 倍。

再加上 minimum-scale = 1.0 表示最小缩放。

再加上 user-scalable=no 　　表示不允许用户点击屏幕缩放浏览。一般设置了这个就没必要设置上面两个了。

2、webapp 全屏模式，隐藏地址栏。

<meta name="apple-mobile-web-app-capable" content="yes" />

3、禁止百度转码显示。

<meta http-equiv="Cache-Control" content="no-siteapp">

4、 制定iphone中safari顶端的状态条的样式。（default:白色，black:黑色，black-translucent：半透明）

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

5、添加到 IOS 主屏后的标题。

<meta name="apple-mobile-web-app-title" content="标题名称">

6、将一连串数字识别为电话号码。默认为yes。email 识别。

 <meta name="format-detection"  content="telephone=no, email=no" />

7、删除默认的苹果工具栏和菜单。

 <meta name="apple-mobile-web-app-capable" content="yes" />

8、针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓：

<meta name="HandheldFriendly" content="true">

暂时总结这么多，以后遇到再补充。



												


											
html头部中各式各样的meta的更多相关文章
	

    
								
  1. 移动端网站如何开发(电脑端网站到手机端网站我们需要在html代码中添加哪个meta标签)
		
    移动端网站如何开发(电脑端网站到手机端网站我们需要在html代码中添加哪个meta标签) 一.总结 一句话总结: 添加viewport标签:meta name="viewport" ...
    
		
    2. 
						
  2. 防止网页被别人的网站iframe，服务端如何设置HTTP头部中的X-Frame-Options信息？
		
    一.现象:in a frame because it set 'X-Frame-Options' to 'deny'. 二.服务配置 因为,有时候为了防止网页被别人的网站iframe,我们可以通过在服 ...
    
		
    3. 
						
  3. Django model 中的 class Meta 详解
		
    Django model 中的 class Meta 详解 通过一个内嵌类 "class Meta" 给你的 model 定义元数据, 类似下面这样: class Foo(mode ...
    
		
    4. 
						
  4. 移动前端头部标签(HTML5 head meta)
		
    移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码,更好地将移动web前端页面表现出来.本文整理一些常用的meta标签. <!DOCTYPE html&g ...
    
		
    5. 
						
  5. 移动前端头部标签(HTML5 head meta)转载
		
    移动web页面头部书写 字数2516 阅读1128 评论0 喜欢30 HTTP 标题信息(http-equiv) 和页面描述信息(name) http-equiv:该枚举的属性定义,可以改变服务器和用 ...
    
		
    6. 
						
  6. 在html中添加缩放meta
		
    见代码(html) <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://w ...
    
		
    7. 
						
  7. [转]scrapy中的request.meta
		
    作者:知乎用户链接:https://www.zhihu.com/question/54773510/answer/146971644 meta属性是字典,字典格式即{'key':'value'},字典 ...
    
		
    8. 
						
  8. html5中viewport与meta详解
		
    网上解释手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中 ...
    
		
    9. 
						
  9. vue-router中元信息meta的妙用
		
    { path:"/test", name:"test", component:()=>import("@/components/test&quo ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Algorithm： CRT、EX-CRT & Lucas、Ex-Lucas
			
    中国剩余定理 中国剩余定理,Chinese Remainder Theorem,又称孙子定理,给出了一元线性同余方程组的有解判定条件,并用构造法给出了通解的具体形式. \[ \begin{aligne ...
    
			
    2. 
						
  2. 项目整合SpringDataRedis
			
    1:准备工作 先导入redis和jedis依赖,在配置redis-config.properties 和applicationContext-redis.xml (详细配置信息及入门demo见我上一篇 ...
    
			
    3. 
						
  3. 移动端rem布局，用户调整手机字体大小或浏览器字体大小后导致页面布局出错问题
			
    一.用户修改手机字体设置大小,影响App里打开的web页面. 手机字体设置大小,影响App的页面.Android的可以通过webview配置webview.getSettings().setTextZ ...
    
			
    4. 
						
  4. 修改linux内核加载顺序
			
    修改内核启动顺序:1.查看当前系统所有的内核# awk -F\' '$1=="menuentry " {print i++ " : " $2}' /etc/gr ...
    
			
    5. 
						
  5. Window权限维持（一）：注册表运行键
			
    在红队行动中在网络中获得最初的立足点是一项耗时的任务.因此,持久性是红队成功运作的关键,这将使团队能够专注于目标,而不会失去与指挥和控制服务器的通信.在Windows登录期间创建将执行任意负载的注册表 ...
    
			
    6. 
						
  6. WPF-介绍一款能够自动格式化XAML界面代码的的插件
			
    因为之前有小伙伴问格式化XAMl的快捷键按钮,所以在这里分享一款格式化XAMl的插件,非常好用. 直接在工具-->扩展和更新里搜索XamlStyler下载安装即可. 安装后按CTRL+S保存后就 ...
    
			
    7. 
						
  7. 部署Azure环境Web应用程序不能直接访问JSON文件解决方案
			
    问题: 部署在Azure环境Web应用程序的JSON文件,直接通过浏览器或Web应用访问出现 404 的错误信息. 以下通过Firfox浏览器直接访问JSON文件返回的提示错误信息: “HTML 文档 ...
    
			
    8. 
						
  8. Linux磁盘信息查询及删除文件操作
			
    查询磁盘容量 $df -hl 删除文件固定行数 (1)删除第一行 $sed -i '1d' a.txt (2)删除指定行数 $sed -i '1,100d' a.txt 删除末尾行 $sed -i ' ...
    
			
    9. 
						
  9. Fundebug 微信小游戏异常监控插件更新至 0.5.0，支持监控 HTTP 慢请求
			
    摘要: 支持监控 HTTP 慢请求,同时修复了记录的 HTTP 响应时间偏小的 BUG. Fundebug是专业微信小游戏 BUG 监控服务,可以第一时间捕获线上环境中小游戏的异常.错误或者 BUG, ...
    
			
    10. 
						
  10. 获得用户的真实ip HTTP_X_FORWARDED_FOR
			
    工作中经常会有有获得用户真实ip的情况,HTTP_X_FORWARDED_FOR总是忘记,所以我这里记录下来吧. 在PHP 中使用 [“REMOTE_ADDR”] 来取得客户端的 IP 地址,但如果客 ...
    
			
    11.