整理 H5 meta 标签的详解
程序员文章站
2024-01-24 22:42:28
...
持续会添加一些新的内容：
<meta charset="UTF-8"> <!-- 设置 H5 的编码格式 charset 是字符集的意思 设置 UTF-8 编码 需要使用 charset 为网页提供了一种编码方式，否则页面很可能出现乱码。 UTF-8 是一种字符编码，除此之外在国内网站常用的还有GB2312和GBK。 GB2312 和 GBK 主要用于汉字编码，utf-8 是国际编码，实用性比较强。 --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <!-- viewport 意思是视图 width 设置视觉窗口的宽度，为一个正整数，或字符串"width-device" initial-scale 设置页面的初始缩放值，为一个数字，可以带小数 minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数 maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数 height 设置视觉窗口的高度，这个属性对我们并不重要，很少使用 user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许 -->
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"> <!--设置定时刷新--> <meta http-equiv="Refresh" content="8;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>
基本的meta设置：
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maxinum-scale=1,width=device-width"> <meta content="telephone=no" name="format-detection"> <meta name="applicable-device" content="mobile"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no,email=no">
<meta charset="utf-8"> <meta name="renderer" content="webkit"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"> <!-- 启用webAPP全屏模式--> <meta name="apple-mobile-web-app-capable" content="yes"> <!-- 隐藏状态栏或者设置状态栏的颜色--> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- 忽略数字自动识别为电话号码--> <meta name="format-detection" content="telephone=no"> <!--控制缓存的失效日期 --> <meta http-equiv="Expires" content="-1"> <!-- 禁止转码--> <meta http-equiv="Cache-Control" content="no-cache"> <!-- 禁止缓存访问页面--> <meta http-equiv="Pragma" content="no-cache"> <meta name="applicable-device" content="mobile"> <!-- X5内核下强制横屏或者竖屏--> <meta name="x5-orientation" content="portrait" /> <!--X5下设置全屏--> <meta name="x5-fullscreen" content="true" /> <!-- UC强制竖屏或横屏--> <meta name="screen-orientation" content="portrait"> <!-- UC全屏显示--> <meta name="full-screen" content="yes"> <!--禁止识别电话号码和邮箱--> <meta name="format-detection" content="telephone=no, email=no" /> <!-- 页面关键词--> <meta content="" name="keywords"> <meta name="description" content="">
上一篇： 站长 白帽SEO和黑帽SEO和灰帽SEO
下一篇： ITeye社区人气博客专栏评选活动结束！