整理 H5 meta 标签的详解

持续会添加一些新的内容：

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

整理 H5 meta 标签的详解相关推荐

h5列表 php,H5的标签使用详解
这次给大家带来H5的标签使用详解,使用H5标签的注意事项有哪些,下面就是实战案例,一起来看一下. 不允许写结束标记的标签:area(定义图像映射中的区域).base(为页面上的所有链接规定默认地址或默 ...
JSP中meta标签之详解
JSP中meta标签之详解 2013年01月26日 16:09:27 阅读数:5589 JSP标签 <meta.....>作用总结 <metahttp-equiv="pra ...
h5新标签video详解
HTML5播放器细谈,从大众自带浏览器到 wechat和QQ以x5内核的浏览器,以及UC其他特殊的浏览器在此不再细谈:)当然也会分析iphone iOS系统和Android手机系统的差别. [基本属 ...
Meta http-equiv属性详解
Meta http-equiv属性详解博客分类: Web综合 HTML浏览器IECache搜索引擎 http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮 ...
什么是Viewport Meta（width详解）及在手机上的应用
查看视频地址: 什么是Viewport Meta(width详解)及在手机上的应用 viewport 是专为手机浏览器设计的一个meta标签: 有些屏幕很小有智能手机,但分辩率却可以做得很大,比如小米 ...
04-HTML标签图文详解（一）
一.排版标签注释标签  段落标签<p> <p>This is a paragraph</p> <p>This is ...
HTML标签图文详解（二）
上篇博文我们对HTML有了大致的认识并且熟悉了一些基本的标签 HTML标签图文详解(一) 接下来我们开始更加深入的学习 <body>标签的属性其属性有: bgcolor:设置整个网页的背 ...
audio标签的controls属性_HTML5教程 audio标签属性详解
本篇教程探讨了HTML5教程 audio标签属性详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < src:String型,所播放音频的 url. auto ...
html标签非成对,深入document.write()与HTML4.01的非成对标签的详解
深入document.write()与HTML4.01的非成对标签的详解 (一)HTML4.01中的非成对标签: 注释标签: 严格来讲不算HTML标签的:文档声明标签设置页面元信息的:标签设置网页 ...

整理 H5 meta 标签的详解

整理 H5 meta 标签的详解相关推荐

最新文章

热门文章