web手机移动端各种表单按钮美化特效
下载资源()次
阅读次数()次
发布时间：
用法简介：
web手机移动端各种表单按钮美化特效。手机移动端各种按钮的代码，支持iOS，Android（暂不支持WP）等系统以webkit为内核的浏览器，建议在PC端用以webkit为内核的浏览器（如：Google Chrome）中缩小浏览器窗口宽度查看效果,PC端查看效果需要用鼠标按住导航拖动以模拟手机上手指拖动的效果。文件引用：&script&type=&text/javascript&&src=&js/zepto.js&&&/script&
&script&type=&text/javascript&&src=&js/mobileevent2pc.js&&&/script&&!--此js为在PC端方便查看效果，用在手机上，可去掉此js--&
&script&type=&text/javascript&&src=&js/zepto.extend.js&&&/script&
&script&type=&text/javascript&&src=&js/zepto.highlight.js&&&/script&
&script&type=&text/javascript&&src=&js/zepto.ui.js&&&/script&
&script&type=&text/javascript&&src=&js/widget/button.js&&&/script&
&script&type=&text/javascript&&src=&js/widget/button.input.js&&&/script&
&&&&$('.button').button();
&&&&$('#button11,&#button12,&#button13,&#button14,&#button15').button();
$('#btn1').button({
&&&&&&&&click:&function()&{
&&&&&&&&&&&&this.disable();
&&&&$.ui.button({
&&&&&&&&label:&'复选按钮1',
&&&&&&&&type:&'checkbox',
&&&&&&&&container:&'#btsn_create'
&&&&$.ui.button({
&&&&&&&&label:&'复选按钮2',
&&&&&&&&type:&'checkbox',
&&&&&&&&container:&'#btsn_create'
&&&&$.ui.button({
&&&&&&&&type:&'radio',
&&&&&&&&label:&'单选1',
&&&&&&&&attributes:&{
&&&&&&&&&&&&name:&'test'
&&&&&&&&},
&&&&&&&&container:&'#btsn_create'
&&&&$.ui.button({
&&&&&&&&type:&'radio',
&&&&&&&&label:&'单选2',
&&&&&&&&selected:&true,
&&&&&&&&attributes:&{
&&&&&&&&&&&&name:&'test'
&&&&&&&&},
&&&&&&&&container:&'#btsn_create'
相关标签：
网友评论：
一、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家社会集体的和公民的合法权益，不得利用本站制作、复制和传播不法有害信息！
二、互相尊重，对自己的言论和行为负责。
什么是邮箱订阅？
邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式，用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮，当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。15 款优秀的 HTML5 jQuery 插件
如果你在寻找能优化网站，使其更具有创造力和视觉冲击的工具，那么这里刚好要介绍能为博客或者网站添彩的 jQuery 插件。在这篇文章中我们手机了一系列的令人兴奋的 HTML5 jQuery 插件，帮助你创建更具吸引力，更漂亮的网站和博客。从改善标准 HTML 列表的易用性到在网页上放置 HTML5 驱动的音频播放器，以下的 jQuery 插件能为你的网站提供各种各样强大的功能。好好欣赏下面的 HTML5 jQuery 插件列表吧，希望大家能喜欢这篇文章，在列表中找到对你有用的 jQuery 插件。
1. Dynatable
是个 jQuery 插件，能很好的改善标准 HTML 列表的可用性。一旦初始化，插件就会通过列表的行和列转换成 JSON 对象数组，时刻准备操作。它可以提供强大的排序，过滤，分页或者是搜索 API，同时可以用简单的方式处理所有操作，可以被用于其他架构的 HTML 元素，比如 list。
2. Least.js
创建随机响应式的 HTML5 和& CSS3 图像库，包括 。它非常容易安装和使用，而且最终效果都是非常华美和漂亮。
3. Echo.js
是个独立的 JavaScript 延迟加载图像工具。Echo 使用 HTML5 data-* 属性，速度非常的快。Echo 可以在 IE8+ 的浏览器运行， 它是非常简单的图像延迟加载工具，大小最小为 1KB ，是个 library agnostic（没有 jQuery/Zepto/other）Lazy-loading 只会在元素将要被查看时才会请求从服务器中加载图像，通过简单的修改图像 src 属性就可以自动运行。同时这也是异步操作的一个优势所在。
4. Slippery
是个 jQuery 图像库插件，拥有很多现代化时尚元素。首先，它使用 HTML5-CSS3 标记，在响应式布局（可选）上运行的非常好。它可以变成 Sass 或者是 CSS 样式，有多种转换选择，其中包括 Ken Burns 效果。 滑块可以设置为自动滑动，显示标题，后退-前进+导航控制。它提供重大事件函数的回调，多个示例和一个详细文档。
5. jQuery. Deviantartmuro
jQuery.deviantartmuro 是个 jQuery 插件，提供方便的 deviantART muro HTML5 绘制应用的嵌入式 API 封装，允许用户提供图片绘制和编辑的第三方网站。网站上嵌入的 deviantART muro 允许用户从网站传递图片到 deviantART muro，用户可以编辑那些图像，编辑后保存数据再传递回网站中。用户可以制作相关脚本来使用大量的 deviantATR muro 工具，比如过滤器。&
6. AudioPlayer.js
是可以在任何 web 页面快速放置 HTML5 驱动的 jQuery 音频播放器插件。这款插件的界面非常别致（不使用任何图片），有个响应式的布局，支持触摸。它有着主要的控制功能（播放，暂停，音量和播放时间）；大小只有 4 kb。&
7. HTML5 Sortable
是个创建可排序列表和网格的 jQuery 插件，使用本地 HTML5 拖拽 API。它有类似& jQuery UI 的 API + 行为。这是个轻量级插件（压缩后小于 1kb），支持 “连接列表（在不同列表转移条目）”，最厉害的是兼容所有主流浏览器。
8. Acron Media Player
Acorn Media Player 是个 jQuery 插件，用来创建一个无障碍环境的自定义 HTML5 媒体播放器。它可以完全由键盘控制i（标准的基于 tab 的菜单导航），支持屏幕阅读和访问主题，各种其他的无障碍环境调整。这款插件支持封闭的字母，从选择的字幕中生成动态的文字副本。
9. jPlayer
是个完全免费和开源的媒体库 (media library)。作为jQuery插件的一员，使用jPlayer可以在你的网页上轻松加入跨平台的音乐和视频。通过jPlayer的API，你可以构想出具有创意的影音解决方案。jPlayer 还支持 1.0 +编译模块的数据。
10. Cuepoint JS
是一个为 HTML5 视频增加提示点和字幕的插件，几秒就显示一组字幕。它提供一个设置时间的事件，可以用来附加任何元素跳到多媒体第二个提示点。
11. jCanvas
是个 jQuery 插件，提供各种方法简化 HTML5 canvas 的使用。它提供许多准备好的形状，比如：三角形，椭圆形和圆弧，提供使用图像或者文本的方法。它可以定义画布的尺寸，从哪里开始绘制，开始点（x，y）和 其他更多强大的功能。关于样式风格，可以使用名字，HEX，RGB 或者是 RGBA 来定义颜色，可以使用梯度渐变或者模型。
12. Droparea
是个 HTML5 拖拽文件上传 jQuery 插件，服务端包含一个 PHP 脚本。简单的拖拽图片文件进去指定的区域，图片就会自动的上传到你的服务器。在上传的同时，用户可以看到上传的进度。目前测试结果支持 Google Chrome 和 Mozilla Firefox。
13. Turn.js
是一个轻量级的 (15kb) jQuery/html5 插件用来创建类似书本和杂志翻页效果，支持触摸屏设备。
Turn.js 支持硬件加速来让翻页效果更加平滑。
可通过 API 来获取当前显示的页号，并提供选项来定制默认页号、加速器、阴影和延时。
14. jQuery.HTML5Form
jQuery.Html5form 是个 jQuery 插件，添加没有 HTML5 表格验证功能到非兼容的浏览器中，不要求任何自定义函数或者代码。用户只要用 HTML5 语法创建表格，它就会自动执行。同时，这个插件还提供额外的一些功能，比如错误信息提示等错误处理方案，用户可以自行选择自己需要的。
15. Visualize
是个 jQuery 插件，使用 HTML5 canvas 标签把列表转换成图标或者图像。使用屏幕阅读技术或者其他辅助技术，用户可以很方便浏览已经格式化的数据，这是非常有用的一个功能。
jQuery 的详细介绍：
jQuery 的下载地址：
转载请注明：文章转载自 开源中国社区
本文标题：15 款优秀的 HTML5 jQuery 插件
本文地址：2015年7月 Web 开发大版内专家分月排行榜第三
2015年7月 Web 开发大版内专家分月排行榜第三
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。32668人阅读
html5（30）
文章同步我的另外的博客：&
一、大众机型常用meta标签name的设置
1、name之viewport
&meta name=&viewport& content=&&&
说明：屏幕的缩放
content的几个属性：
& & width viewport的宽度[device-width | pixel_value]width如果直接设置pixel_value数值，大部分的安卓手机不支持，但是ios支持；
& & height – viewport 的高度 （范围从 223 到 10,000 ）
& & user-scalable [yes | no]是否允许缩放
& & initial-scale [数值] 初始化比例（范围从 & 0 到 10）
& & minimum-scale [数值] 允许缩放的最小比例
& & maximum-scale [数值] 允许缩放的最大比例
& & target-densitydpi 值有以下（一般推荐设置中等响度密度或者低像素密度，后者设置具体的值dpi_value，另外webkit内核已不准备再支持此属性）
& & & & &-- dpi_value 一般是70-400//没英寸像素点的个数
& & & & &-- device-dpi设备默认像素密度
& & & & &-- high-dpi 高像素密度
& & & & &-- medium-dpi 中等像素密度
& & & & &-- low-dpi 低像素密度
完整案例：
&meta name=&viewport& content=&width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1,target-densitydpi=device-dpi &&
2、name之format-detection忽略电话号码和邮箱
&meta name=&format-detection& content=&telephone=no&&
说明：忽略页面中的数字识别为电话号码
&meta name=&format-detection& content=&email=no&/&
说明：忽略页面中的邮箱格式为邮箱
也可以写成：
&meta name=&format-detection& content=&telphone=no, email=no&/&
3、name之设置作者姓名及联系方式
说明：设置作者姓名及联系方式
&meta name=&author& contect=&name, & /&
& & &!-- 声明文档使用的字符编码 --&
& & &meta charset='utf-8'&
& & &!-- 优先使用 IE 最新版本和 Chrome --&
& & &meta http-equiv=&X-UA-Compatible& content=&IE=edge,chrome=1&/&
& & &!-- 页面描述 --&
& & &meta name=&description& content=&不超过150个字符&/&
& & &!-- 页面关键词 --&
& & &meta name=&keywords& content=&&/&
& & &!-- 搜索引擎抓取 --&
& & &meta name=&robots& content=&index,follow&/&
& & &!-- 启用360浏览器的极速模式(webkit) --&
& & &meta name=&renderer& content=&webkit&&
& & &!-- 避免IE使用兼容模式 --&
& & &meta http-equiv=&X-UA-Compatible& content=&IE=edge&&
& & &!-- 不让百度转码 --&
& & &meta http-equiv=&Cache-Control& content=&no-siteapp& /&
& & &!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 --&
& & &meta name=&HandheldFriendly& content=&true&&
& & &!-- 微软的老式浏览器 --&
& & &meta name=&MobileOptimized& content=&320&&
& & &!-- uc强制竖屏 --&
& & &meta name=&screen-orientation& content=&portrait&&
& & &!-- QQ强制竖屏 --&
& & &meta name=&x5-orientation& content=&portrait&&
& & &!-- UC强制全屏 --&
& & &meta name=&full-screen& content=&yes&&
& & &!-- QQ强制全屏 --&
& & &meta name=&x5-fullscreen& content=&true&&
& & &!-- UC应用模式 --&
& & &meta name=&browsermode& content=&application&&
& & &!-- QQ应用模式 --&
& & &meta name=&x5-page-mode& content=&app&&
& &&&!-- 添加 RSS 订阅 --&
& & &link rel=&alternate& type=&application/rss+xml& title=&RSS& href=&/rss.xml&/&
& & &!-- 添加 favicon icon --&
& & &link rel=&shortcut icon& type=&image/ico& href=&/favicon.ico&/&
& & &!-- sns 社交标签 begin --&
& & & & &!-- 参考微博API --&
& & & & &meta property=&og:type& content=&类型& /&
& & & & &meta property=&og:url& content=&URL地址& /&
& & & & &meta property=&og:title& content=&标题& /&
& & & & &meta property=&og:image& content=&图片& /&
& & & & &meta property=&og:description& content=&描述& /&
& & &!-- sns 社交标签 end --&
& & &!-- Windows 8 磁贴颜色 --&
& & &meta name=&msapplication-TileColor& content=&#000&/&
& & &!-- Windows 8 磁贴图标 --&
& & &meta name=&msapplication-TileImage& content=&icon.png&/&
& &&&&!-- windows phone 点击无高光 --&
& & &meta name=&msapplication-tap-highlight& content=&no&&
二、ios系统的meta/link设置：
1、开启对web app程序的支持
&meta name=&apple-mobile-web-app-capable& content=&yes&&
& & 网站开启对web app程序的支持，其实意思就是删除默认的苹果工具栏和菜单栏，开启全屏显示
2、&改变顶部状态条的颜色；
&meta name=&apple-mobile-web-app-status-bar-style& content=&black& /&
& & 在 web app 应用下状态条（屏幕顶部条）的颜色；
& & 默认值为 default（白色），可以定为 black（黑色）和 black-translucent（灰色半透明）；
3、设置“添加到主屏幕图标
Safari 浏览器有一个“添加到主屏幕”的功能，用户可以像保存书签一样把一个网站添加到主屏幕，下次用户直接点击主屏幕上的图标就能进入网站。
这个功能不仅方便用户快速访问我们的网站，而且也使我们的 WebApp 更像一个原生应用
iOS 分辨率，所以 icon.png 图片的尺寸也各不相同，我们可以通过sizes属性来分别定义，iOS
系统会自动获取向匹配的图片：
&span style=&font-size:14&&&!-- iOS 图标 begin --&
&link rel=&apple-touch-icon-precomposed& href=&/apple-touch-icon-57x57-precomposed.png&/&
&!-- iPhone 和 iTouch，默认 57x57 像素，必须有 --&
&link rel=&apple-touch-icon-precomposed& sizes=&114x114& href=&/apple-touch-icon-114x114-precomposed.png&/&
&!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 --&
&link rel=&apple-touch-icon-precomposed& sizes=&144x144& href=&/apple-touch-icon-144x144-precomposed.png&/&
&!-- Retina iPad，144x144 像素，可以没有，但推荐有 --&
&!-- iOS 图标 end --&&/span&
为用户加上提示
通过添加一个JavaScript代码来邀请用户添加到主屏幕，该库使用了的本地存储跟踪是否已经显示过了，以避免重复出现。
目前使用比较多和有在更新的一个库来自这里：
4、设置桌面图标的标题，
为了在主屏达到最好的显示效果，title最好限制在六个中文长度内，超长的内容会被隐藏：
添加到主屏后的标题（iOS
&span style=&font-size:14&&&meta name=&apple-mobile-web-app-title& content=&标题&&&/span&
5、设置启动画面
当用户点击主屏图标打开 WebApp 时，系统会展示启动画面，在未设置情况下系统会默认显示该网站的首页截图，当然这个体验不是很好，所以我们需要通过以下代码来自定义启动画面：
&link rel=&apple-touch-startup-image& href=&Startup.png& /&
根据 iOS 设备的分辨率，其启动画面的图片尺寸也各不相同所以：
&!-- iOS 启动画面 begin --&
&link rel=&apple-touch-startup-image& sizes=&768x1004& href=&/splash-screen-768x1004.png&/&
&!-- iPad 竖屏 768 x 1004（标准分辨率） --&
&link rel=&apple-touch-startup-image& sizes=&& href=&/splash-screen-.png&/&
&!-- iPad 竖屏 （Retina） --&
&link rel=&apple-touch-startup-image& sizes=&& href=&/Default-Portrait-.png&/&
&!-- iPad 横屏 （标准分辨率） --&
&link rel=&apple-touch-startup-image& sizes=&& href=&/splash-screen-.png&/&
&!-- iPad 横屏 （Retina） --&
&link rel=&apple-touch-startup-image& href=&/splash-screen-320x480.png&/&
&!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) --&
&link rel=&apple-touch-startup-image& sizes=&640x960& href=&/splash-screen-640x960.png&/&
&!-- iPhone/iPod Touch 竖屏 640x960 (Retina) --&
&link rel=&apple-touch-startup-image& sizes=&640x1136& href=&/splash-screen-640x1136.png&/&
&!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) --&
&!-- iOS 启动画面 end --&或者以下代码，具体没有实践，还需考证&!!-- iPhone SPLASHSCREEN--&
&!link href=&/html/&apple-touch-startup-image-320x460.png& media=&(device-width: 320px)& rel=&apple-touch-startup-image& /&
&!!-- iPhone (Retina) SPLASHSCREEN--&
&!link href=&apple-touch-startup-image-640x920.png& media=&(device-width: 320px) and (-webkit-device-pixel-ratio: 2)& rel=&apple-touch-startup-image& /&
&!!-- iPad (portrait) SPLASHSCREEN--&
&!link href=&apple-touch-startup-image-768x1004.png& media=&(device-width: 768px) and (orientation: portrait)& rel=&apple-touch-startup-image& /&
&!!-- iPad (landscape) SPLASHSCREEN--&
&!link href=&apple-touch-startup-image-748x1024.png& media=&(device-width: 768px) and (orientation: landscape)& rel=&apple-touch-startup-image& /&
&!!-- iPad (Retina, portrait) SPLASHSCREEN--&
&!link href=&apple-touch-startup-image-.png& media=&(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)& rel=&apple-touch-startup-image& /&
&!!-- iPad (Retina, landscape) SPLASHSCREEN--&
&link href=&apple-touch-startup-image-.png&media=&(device-width: 1536px)
and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)&rel=&apple-touch-startup-image& /&
6、 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）
&meta name=&apple-itunes-app& content=&app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL&&
==================
比较常用的meta
&以下代码参考网址：view-source:三个w点adinnet点cn斜杠service斜杠3d点html
&!--[if lt IE 7 ]&&html class=&oldie ie ie6&& &![endif]--&
&!--[if IE 7 ]&&html class=&oldie ie ie7&& &![endif]--&
&!--[if IE 8 ]&&html class=&ie ie8&& &![endif]--&
&!--[if (gte IE 9)|!(IE)]&&!--&&html& &!--&![endif]--&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&title&&/title&
&meta name=&keywords& content=&& /&
&meta name=&description& content=&& /&
&meta name=&title& content=&& /&
&meta name=&author& content=&-06& /&
&meta name=&Copyright& content=&& /&
&!-- 让IE浏览器用最高级内核渲染页面 还有用 Chrome 框架的页面用webkit 内核
================================================== --&
&meta http-equiv=&X-UA-Compatible& content=&IE=edge,chrome=1&&
&!-- IOS6全屏 Chrome高版本全屏
================================================== --&
&meta name=&apple-mobile-web-app-capable& content=&yes&&
&meta name=&mobile-web-app-capable& content=&yes&&
&!-- 让360双核浏览器用webkit内核渲染页面
================================================== --&
&meta name=&renderer& content=&webkit&&
&!-- Mobile Specific Metas
================================================== --&
&!-- !!!注意 minimal-ui 是IOS7.1的新属性，最小化浏览器UI --&
&meta name=&viewport& content=&width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui&&
&meta name=&format-detection& content=&telephone=no&&
================================================== --&
&link href=&/css/reset.css& rel=&stylesheet& type=&text/css&&
&link href=&/css/magicwall.css& rel=&stylesheet& type=&text/css&&
href=&/css/jquery.gridster.css& rel=&stylesheet& type=&text/css&&
&link href=&/css/case.css& rel=&stylesheet& type=&text/css&&
&link href=&/css/case_1280.css& rel=&stylesheet& type=&text/css&&
&link href=&/css/case_1024.css& rel=&stylesheet& type=&text/css&&
&link href=&/css/case_640.css& rel=&stylesheet& type=&text/css&&
&link href=&/css/case_320.css& rel=&stylesheet& type=&text/css&&
&link href=&/css/style_retina.css& rel=&stylesheet& type=&text/css&&
&!--[if lt IE 9]&
&script src=&/html5shiv/r29/html5.js&&&/script&
&![endif]--&
&!-- Favicons
================================================== --&
&link rel=&shortcut icon& href=&favicon.ico& &
&!-- Android 主屏图标
================================================== --&
&link rel=&icon& sizes=&196x196& href=&/images/apple-touch-icon-152x152.png&&
&!-- IOS 主屏图标
================================================== --&
&link rel=&apple-touch-icon-precomposed& href=&/images/apple-touch-icon-76x76.png&&
&link rel=&apple-touch-icon-precomposed& sizes=&76x76& href=&/images/apple-touch-icon-76x76.png&&
&link rel=&apple-touch-icon-precomposed& sizes=&120x120& href=&/images/apple-touch-icon-120x120.png&&
&link rel=&apple-touch-icon-precomposed& sizes=&152x152& href=&/images/apple-touch-icon-152x152.png&&
&link rel=&apple-touch-startup-image& href=&/startup-748x1024.jpg&
media=&screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)& &
&link rel=&apple-touch-startup-image& href=&/startup-768x1004.jpg&
media=&screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)& &
或者说&!-- 启用360浏览器的极速模式(webkit) --&
&meta name=&renderer& content=&webkit&&
&!-- 避免IE使用兼容模式 --&
&meta http-equiv=&X-UA-Compatible& content=&IE=edge&&
&!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 --&
&meta name=&HandheldFriendly& content=&true&&
&!-- 微软的老式浏览器 --&
&meta name=&MobileOptimized& content=&320&&
&!-- uc强制竖屏 --&
&meta name=&screen-orientation& content=&portrait&&
&!-- QQ强制竖屏 --&
&meta name=&x5-orientation& content=&portrait&&
&!-- UC强制全屏 --&
&meta name=&full-screen& content=&yes&&
&!-- QQ强制全屏 --&
&meta name=&x5-fullscreen& content=&true&&
&!-- UC应用模式 --&
&meta name=&browsermode& content=&application&&
&!-- QQ应用模式 --&
&meta name=&x5-page-mode& content=&app&&
&!-- windows phone 点击无高光 --&
&meta name=&msapplication-tap-highlight& content=&no&&整理====
meta属性在HTML中占据了很重要的位置。如：针对搜索引擎的SEO，文档的字符编码，设置刷新缓存等。虽然一些网页可能没有使用meta，但是作为正规军，我们还是有必要了解一些meta的属性，并且能够熟练使用它们。&
1、声明文档使用的字符编码
&meta charset='utf-8'&2、声明文档的兼容模式
&meta http-equiv=&X-UA-Compatible& content=&IE=edge& /& 指示IE以目前可用的最高模式显示内容
&meta http-equiv=&X-UA-Compatible& content=&IE=Emulate IE7& /&指示IE使用 &!DOCTYPE& 指令确定如何呈现内容。标准模式指令以IE7 标准模式显示，而 Quirks 模式指令以 IE5 模式显示。3、SEO 优化&meta name=&description& content=&不超过150个字符& /&页面描述
&meta name=&keywords& content=&html5, css3, 关键字&/&页面关键词
&meta name=&author& content=&魔法小栈& /&定义网页作者
&meta name=&robots& content=&index,follow& /&定义网页搜索引擎索引方式，robotterms是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。4、为移动设备添加
&meta name =&viewport& content =&width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no&&
content 参数解释：
　　　　 viewport 宽度(数值/device-width)
viewport 高度(数值/device-height)
initial-scale
初始缩放比例
maximum-scale
最大缩放比例
minimum-scale
最小缩放比例
user-scalable
是否允许用户缩放(yes/no)
minimal-ui
iOS 7.1 beta 2 中新增属性，可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：
&meta name=&viewport& content=&width=device-width, initial-scale=1, minimal-ui&&5、iOS 设备&meta name=&apple-mobile-web-app-title& content=&标题&&添加到主屏后的标题（iOS 6 新增）
&meta name=&apple-mobile-web-app-capable& content=&yes& /&是否启用 WebApp 全屏模式
&meta name=&apple-mobile-web-app-status-bar-style& content=&black-translucent& /&设置状态栏的背景颜色
只有在 &apple-mobile-web-app-capable& content=&yes& 时生效
content 参数：
default 默认值。
black 状态栏背景是黑色。
black-translucent 状态栏背景是黑色半透明。
设置为 default 或 black ,网页内容从状态栏底部开始。
设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。6、iOS 图标 rel 参数
apple-touch-icon 图片自动处理成圆角和高光等效果。
apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图。
&link rel=&apple-touch-icon-precomposed& href=&/apple-touch-icon-57x57-precomposed.png& /&iPhone 和 iTouch，默认 57x57 像素，必须有
&link rel=&apple-touch-icon-precomposed& sizes=&72x72& href=&/apple-touch-icon-72x72-precomposed.png& /&iPad，72x72 像素，可以没有，但推荐有
&link rel=&apple-touch-icon-precomposed& sizes=&114x114& href=&/apple-touch-icon-114x114-precomposed.png& /&Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有
&link rel=&apple-touch-icon-precomposed& sizes=&144x144& href=&/apple-touch-icon-144x144-precomposed.png& /&Retina iPad，144x144 像素，可以没有，推荐大家使用
&meta name=&apple-mobile-web-app-title& content=&标题&&title最好限制在六个中文长度内，超长的内容会被隐藏，添加到主屏后的标题（iOS 6 新增）7、iOS 启动画面
iPad 的启动画面是不包括状态栏区域的。
iPad 竖屏 768 x 1004（标准分辨率）
&link rel=&apple-touch-startup-image& sizes=&768x1004& href=&/splash-screen-768x1004.png& /&iPad 竖屏 （Retina）
&link rel=&apple-touch-startup-image& sizes=&& href=&/splash-screen-.png& /&iPad 横屏 （标准分辨率）
&link rel=&apple-touch-startup-image& sizes=&& href=&/Default-Portrait-.png& /&iPad 横屏 （Retina）
&link rel=&apple-touch-startup-image& sizes=&& href=&/splash-screen-.png& /&
iPhone 和 iPod touch 的启动画面是包含状态栏区域的。
iPhone/iPod Touch 竖屏 320x480 (标准分辨率)
&link rel=&apple-touch-startup-image& href=&/splash-screen-320x480.png& /&iPhone/iPod Touch 竖屏 640x960 (Retina)
&link rel=&apple-touch-startup-image& sizes=&640x960& href=&/splash-screen-640x960.png& /&iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)
&link rel=&apple-touch-startup-image& sizes=&640x1136& href=&/splash-screen-640x1136.png& /&
&link rel=&apple-touch-startup-image& href=&Startup.png& /&
当用户点击主屏图标打开 WebApp 时，系统会展示启动画面，在未设置情况下系统会默认显示该网站的首页截图，当然这个体验不是很好8、Windows 8&meta name=&msapplication-TileColor& content=&#000&/& Windows 8 磁贴颜色
&meta name=&msapplication-TileImage& content=&icon.png&/&Windows 8 磁贴图标9、不常用的
&link rel=&alternate& type=&application/rss+xml& title=&RSS& href=&/rss.xml& /&添加 RSS 订阅
&link rel=&shortcut icon& type=&image/ico& href=&/favicon.ico& /&添加 favicon icon
&meta name=&format-detection& content=&telephone=no& /&禁止数字识自动别为电话号码
&meta name=&format-detection& content=&email=no& /&不让android识别邮箱
&meta name=&renderer& content=&webkit&&启用360浏览器的极速模式(webkit)
&meta http-equiv=&X-UA-Compatible& content=&IE=edge&&避免IE使用兼容模式
&meta name=&HandheldFriendly& content=&true&&针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓
&meta name=&MobileOptimized& content=&320&&微软的老式浏览器
&meta name=&x5-orientation& content=&portrait&&QQ强制竖屏
&meta name=&full-screen& content=&yes&&UC强制全屏
&meta name=&x5-fullscreen& content=&true&&QQ强制全屏
&meta name=&browsermode& content=&application&&UC应用模式
&meta name=&x5-page-mode& content=&app&&QQ应用模式
&meta http-equiv=&Cache-Control& content=&no-siteapp& /&禁止百度转码
&meta name=&msapplication-tap-highlight& content=&no&&windows phone 点击无高光
&meta name=&keywords& content=&& /&
&meta name=&description& content=&& /&
&meta name=&title& content=&& /&
&meta name=&author& content=&-06& /&
&meta name=&Copyright& content=&& /&
&meta http-equiv=&X-UA-Compatible& content=&IE=edge,chrome=1&&
让IE浏览器用最高级内核渲染页面 还有用 Chrome 框架的页面用webkit 内核
&meta name=&apple-mobile-web-app-capable& content=&yes&&
&meta name=&mobile-web-app-capable& content=&yes&&
Chrome高版本全屏
&meta name=&renderer& content=&webkit&&
让360双核浏览器用webkit内核渲染页面
&meta name=&apple-itunes-app& content=&app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL&& 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）10、sns 社交标签&
参考微博API
&meta property=&og:type& content=&类型& /&
&meta property=&og:url& content=&URL地址& /&
&meta property=&og:title& content=&标题& /&
&meta property=&og:image& content=&图片& /&
&meta property=&og:description& content=&描述& /&
文章同步我的另外的博客：&
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1247005次
积分：10198
积分：10198
排名：第1413名
原创：201篇
转载：74篇
评论：99条
(1)(1)(1)(2)(3)(3)(1)(10)(1)(1)(5)(2)(1)(3)(10)(9)(11)(1)(7)(6)(16)(6)(8)(18)(15)(15)(10)(20)(16)(15)(8)(7)(2)(11)(6)(1)(5)(18)