html中的meta详解

当前位置 : 首页 > 网页制作 > CSS > html中的meta详解

html中的meta详解

来源: 作者: 时间:2016-01-25 10:01
1 name=viewportmeta name=viewport content=width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no 1、width : 控制viewport的大小,可以指定一个值,如600, 或
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 5中更多的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://www.2cto.com/uploadfile/2014/0516/20140516084658820.png" />
<!--iPad 1 72x72 像素-->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href=http://www.2cto.com/uploadfile/2014/0516/20140516084658506.png" />
<!--iPhone 4 114x114 像素-->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href=http://www.2cto.com/uploadfile/2014/0516/20140516084658362.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>
Tag:
网友评论

<