在写网页的过程中，第一步就是创建一个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. touch.js - 移动设备上的手势识别与事件库
			
    Touch.js 是移动设备上的手势识别与事件库, 由百度云Clouda团队维护,也是在百度内部广泛使用的开发工具.Touch.js手势库专为移动设备设计.Touch.js对于网页设计师来说,是一款不 ...
    
			
    2. 
						
  2. springboot项目POM文件第一行报错 Unknown Error
			
    改成 war 不错了,但是打包麻烦 pom 文件报错 UnKnown Error第一次碰到这个问题,花了几个小时才解决,除了UnKnown 没有任何提示.网上搜的大部分情况都不是我遇到的. 还是没有解 ...
    
			
    3. 
						
  3. Springboot如何打包部署项目
			
    原文地址 目录 前言 1. 导入插件 2.idea中快速打包 3.java –jar运行项目 4.访问项目 5.发布到服务器 前言 用心写好每一篇文章,真心对待每一个读者 文章首发地址: www.ja ...
    
			
    4. 
						
  4. Nginx Cache-Control
			
    转自:https://www.cnblogs.com/sfnz/p/5383647.html HTTP协议的Cache-Control指定请求和响应遵循的缓存机制.在请求消息或响应消息中设置 Cach ...
    
			
    5. 
						
  5. c# System.Net.Sockets =》TcpListener用法
			
     private TcpListener _listener;#region 初始化 listener public override void Init() { try { DevInfo.Read ...
    
			
    6. 
						
  6. 基于WEB的网上购物系统-ssh源码
			
    基于WEB的网上购物系统主要功能包括:前台用户登录退出.注册.在线购物.修改个人信息.后台商品管理等等.本系统结构如下:(1)商品浏览模块:        实现浏览最新商品        实现按商品名 ...
    
			
    7. 
						
  7. Java生鲜电商平台-商品价格的设计与架构
			
    Java生鲜电商平台-商品价格的设计与架构 说明:Java开源生鲜电商平台-商品价格的设计与架构,主要是对商品的价格进行研究与系统架构. 一.常见的电商价格 市场价(List Price):这个价格仅 ...
    
			
    8. 
						
  8. 电信NBIOT 4 - NB73模块上行测试(NB73-电信平台-自己平台)
			
    电信NBIOT 1 - 数据上行(中国电信开发者平台对接流程) 电信NBIOT 2 - 数据上行(中间件获取电信消息通知) 电信NBIOT 3 - 数据下行 电信NBIOT 4 - NB73模块上行测 ...
    
			
    9. 
						
  9. python 自带模块 os模块
			
    os模块 首先可以打开cmd输入python进入交互界面  然后输入 dir(os) 就可以看到os的全部用法了  我们简单的举几个例子就行了. 写入os.getcwd()  可以查看当前所在路径 i ...
    
			
    10. 
						
  10. Shel脚本-初步入门之《02》
			
    Shel脚本-初步入门-什么是 Shell 脚本 2.什么是 Shell脚本 当命令或程序语句不在命令行下执行,而是通过一个程序文件来执行时,改程序就被称为 Shell 脚本.如果在 Shell 脚本 ...
    
			
    11.