详解HTML中的meta标签的作用

  • 10,450 views

一、name=viewport

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

详解HTML中的meta标签的作用

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不允许用户缩放

二、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:文件将不被检索,页面上的链接可以被查询。
-->

三、meta中的 http-equiv属性

<!--设置字符编码和文件格式-->

<meta http-equiv="Content-Type" content="text/html";charset=utf-8">

<!--设置定时刷新-->

<!--更多精彩内容:http://www.bianceng.cn/web/Html/-->

<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">

四、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>

weinxin
我的微信
分享SEO优化、SEM营销、新媒体知识,交流营销运营经验,提供网站制作、SEO、竞价托管和公众号代运营服务。
王发利
  • 本文由 发表于 2015 年 8 月 11 日
  • 转载请务必保留本文链接:http://wangfali.com/html/4286.html
html页面优化有哪些方法? html代码

html页面优化有哪些方法?

html页面优化有哪些方法? 从事网站优化或者运营的童鞋相比都很清楚,做好html页面优化对于提升用户体验至关重要,那么html页面优化有哪些方法呢,下面分享一二: 一、加载优化 减少HTTP请求。 ...
html代码的head标签中信息详解 html代码

html代码的head标签中信息详解

html代码的head标签中信息详解。HTML head 头部分的标签、元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: