转自http://www.cnblogs.com/javaee6/p/3730750.html

1 name=viewport

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

1、width : 控制viewport的大小，可以指定一个值，如600，或者特殊的值，如device-width为设备的宽度（单位为缩放为100%的CSS的像素）

2、height : 和width相对应，指定高度

3、initial-scale : 初始缩放比例，页面第一次加载时的缩放比例

4、maximum-scale : 允许用户缩放到的最大比例，范围从0到10.0

5、minimum-scale : 允许用户缩放到的最小比例，范围从0到10.0

6、user-scalable : 用户是否可以手动缩放，值可以是：①yes、 true允许用户缩放；②no、false不允许用户缩放

2 meta中的name属性

<!--用以说明生成工具-->
<meta  name="Generator"  content="">     <!--向搜索引擎说明你的网页的关键词-->
<meta  name="Keywords"    content="">
<!-- 告诉搜索引擎你的站点的主要内容-->
<meta name="Description"  content="">
<!-- 告诉搜索引擎你的站点的制作的作者 -->
<meta  name="Author"    content="你的姓名">
<meta  name="Robots"    content= "all|none|index|noindex|follow|nofollow">
<!--
设定为all：文件将被检索，且页面上的链接可以被查询；
设定为none：文件将不被检索，且页面上的链接不可以被查询；
设定为index：文件将被检索；
设定为follow：页面上的链接可以被查询；
设定为noindex：文件将不被检索，但页面上的链接可以被查询；
设定为nofollow：文件将不被检索，页面上的链接可以被查询。
-->

3 meta中的 http-equiv属性

<!--设置字符编码和文件格式-->
<meta http-equiv="Content-Type" content="text/html";charset=utf-8">
<!--设置定时刷新-->
<meta http-equiv="Refresh"  content="n;url=http://.......>
<!-- 告诉浏览器不要缓存页面-->
<meta http-equiv="Pragma"   content="no-cache">
<! -- //告诉浏览器不要缓存页面-->
<meta http-equiv="cache-control" content="no-cache">//告诉浏览器不要缓存页面
<!--禁用浏览器缓存此页面-->
<meta http-equiv="expires" content="0">
<!--设置ie的文档兼容模式,设置IE7+的浏览器以IE7的兼容模式查看页面-->
<meta http-equiv="X-UA-Compatible" content="IE=7">

4 html5中更多的meta与link

<!DOCTYPE html> <!-- HTML5 doctype 不区分大小写 -->
<html lang="zh"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa --><head>
<meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 优先使用IE最新版本和 Chrome -->
<meta name="renderer" content="webkit|ie-comp|ie-stand"> <!-- 360 浏览器内核控制 -->
<!--
content的取值为webkit,ie-comp,ie-stand之一，区分大小写，分别代表用webkit内核，IE兼容内核，IE标准内核。
若页面需默认用极速核，增加标签：<meta name="renderer" content="webkit">
若页面需默认用ie兼容内核，增加标签：<meta name="renderer" content="ie-comp">
若页面需默认用ie标准内核，增加标签：<meta name="renderer" content="ie-stand">
--><!-- width=device-width 会导致 iPhone 5 添加到主屏后以 WebAPP 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->
<meta name ="viewport" content ="initial-scale=1.0, maximum-scale=3, minimum-scale=1, user-scalable=no"><meta name="apple-mobile-web-app-title" content="标题"> <!-- 添加到主屏时的标题 --><meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 是否启用 WebAPP 全屏模式 --><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!-- 状态条颜色 --><meta name="format-detection" content="telephone=no" /> <!-- 屏蔽数字自动识别为电话号码 --><!-- favicon 图标 -->
<link type="image/x-icon" rel="icon" href="http://static.example.com/favicon.ico"/>
<link type="image/x-icon" rel="shortcut icon" href="http://static.example.com/favicon.ico"/>
<link type="image/x-icon" rel="bookmark" href="http://static.example.com/favicon.ico"/><!-- iOS 图标 begin -->
<!--默认 57x57 像素-->
<link rel="apple-touch-icon-precomposed" href="http://wanke.etao.com/assets/img/icon/57/apple-touch-icon-57x57-precomposed.png" />
<!--iPad 1 72x72 像素-->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://wanke.etao.com/assets/img/icon/72/apple-touch-icon-72x72-precomposed.png" />
<!--iPhone 4 114x114 像素-->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://wanke.etao.com/assets/img/icon/114/apple-touch-icon-114x114-precomposed.png" />
<!-- iOS 图标 end --><meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 --><!-- SEO 优化 -->
<meta name="description" content="" /> <!-- 页面描述 -->
<meta name="keywords" content=""/> <!-- 页面关键词 -->
<title>页面标题</title><!-- iOS 应用启动界面设置 begin -->
<!-- iPad Landscape – 1024 x 748 -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash-screen-1024x748.png" />
<!-- iPad Portrait – 768 x 1004 -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash-screen-768x1004.png" />
<!-- iPhone/iPod Touch Portrait – 320 x 480 (standard resolution) -->
<link rel="apple-touch-startup-image" href="img/splash-screen-320x480.png" />
<!-- iPhone/iPod Touch Portrait – 640 x 960 pixels (high-resolution) -->
<link rel="apple-touch-startup-image" sizes="640x960" href="img/splash-screen-640x960.png" />
<!-- iOS 应用启动界面设置 end --></head>

转载于:https://www.cnblogs.com/shuishuowobushihuiyuan/p/3732020.html

html中的meta详解相关推荐

GAZEBO 中 sdf文件详解
转载自:https://blog.csdn.net/weixin_44900096/article/details/103017522 GAZEBO 中 sdf文件详解木木木一 2019-11-11 ...
Http meta详解
html meta标签使用总结 meta标签作用 META标签是HTML标记HEAD区的一个关键标签,提供文档字符集.使用语言.作者等基本信息,以及对关键词和网页等级的设定等,最大的作用是能够做搜索引 ...
Windows10中Emscripten 安装详解
Windows10中Emscripten 安装详解 Emscripten编译器,是WebAssembly开发的重要工具之一,主要是通过emcc(Emscripten Compiler Frontend ...
ALSA声卡驱动中的DAPM详解之四：在驱动程序中初始化并注册widget和route
前几篇文章我们从dapm的数据结构入手,了解了代表音频控件的widget,代表连接路径的route以及用于连接两个widget的path.之前都是一些概念的讲解以及对数据结构中各个字段的说明,从本章开 ...
Asp.net中GridView使用详解(引)【转】
Asp.net中GridView使用详解(引) GridView无代码分页排序 GridView选中,编辑,取消,删除 GridView正反双向排序 GridView和下拉菜单DropDownList ...
Linux中iptraf命令详解(IP局域网监控工具)
2019独角兽企业重金招聘Python工程师标准>>> Linux中iptraf命令详解(IP局域网监控工具) 发布时间:2017-12-27 20:46:03 作者:佚名 ...
ArcGIS Engine中的Symbols详解
转自原文 ArcGIS Engine中的Symbols详解本文由本人翻译ESRI官方帮助文档.尊重劳动成果,转载请注明来源. Symbols ArcObjects用了三种类型的Symbol(符号样式 ...
js路由在php上面使用,React中路由使用详解
这次给大家带来React中路由使用详解,React中路由使用的注意事项有哪些,下面就是实战案例,一起来看一下. 路由通过 URL 映射到对应的功能实现,React 的路由使用要先引入 react-r ...
Linux中etc目录详解
Linux中etc目录详解 /etc目录包含很多文件.许多网络配置文件也在/etc 中. /etc/rc or/etc/rc.d or/etc/rc*.d 启动.或改变运行级时运行的sc ...

html中的meta详解

1 name=viewport

2 meta中的name属性

3 meta中的 http-equiv属性

4 html5中更多的meta与link

html中的meta详解相关推荐

最新文章

热门文章