html中的meta详解

来源：互联网发布：姚明身体数据编辑：程序博客网时间：2024/05/29 08:08

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>

作者：天魂地煞

网站：http://www.mypad.tk

出处：http://www.cnblogs.com/javaee6/p/3730750.html

如果，您认为阅读这篇博客让您有些收获，不妨收藏起来，给予评论下！

如果，您希望更容易地发现我的新博客，不妨关注下我！

如果，您对我的博客所讲述的内容有兴趣，请继续关注我的后续博文！

本博客中未标明原文地址的文章归作者天魂地煞，欢迎转载，希望在文章页面明显位置给出原文连接！

阅读全文

0 0