前端手札--meta标记篇
通用类:
声明编码
<meta charset='utf-8' />
SEO页面关键词
<meta name="keywords" content="your tags" />
SEO页面描述
<meta name="description" content="150 words" />
页面重定向和刷新
content内的数字代表时间(秒),既多少时间后刷新。如果加url,则会重定向到指定网页(搜索引擎能够自动检测,也很容易被引擎视作误导而受到惩罚)。
<meta http-equiv="refresh" content="0;url=" />
移动端类:
viewport
禁用不必要的自动缩放,优化移动浏览器显示
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 -->
<!-- user-scalable=no 安卓的Chrome可以去除浏览器的300ms点击延时 -->
忽略识别为电话号码 和 邮箱
防止HTML有改变而导致可能的部分JS执行错误,据实测如果识别为电话号码则苹果会把修改html,在数字外套一层<a>标签,可能会在产品编号这一类用途的数字造成干扰
<!--禁止自动识别为电话号码链接,主要为苹果-->
<meta name="format-detection" content="telephone=no" />
<!--禁止自动识别邮箱,主要为安卓-->
<meta name="format-detection" content="email=no" />
其它一些移动端实用META
<!-- 针对手持设备优化,主要是针对一些老的不识别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="screen-orientation" content="landscape">
<!-- QQ强制横屏 -->
<meta name="x5-orientation" content="landscape">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- Safari全屏?未确认 注意是在viewport里面直接附加下面这个属性 -->
<meta name="viewport" content="minimal-ui"/> <!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- Safari 启用 WebApp 应用全屏模式,这个只会在你保存为桌面应用后从中打开才会全屏,在浏览器中不会全屏 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
添加到主屏(苹果 IOS Safari)
<!-- 启用 WebApp 应用全屏模式,这个只会在你保存为桌面应用后从中打开才会全屏,在浏览器中不会全屏 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!--保存某个页面到桌面的时候的应用标题-->
<meta name="apple-mobile-web-app-title" content="标题">
<!--保存某个页面到桌面的时候使用这张图作为桌面图标,尺寸和iphone上的一致,是57*57px-->
<link rel="apple-touch-icon" href="custom_icon.png">
<!--启动图,只使用一张114*114的图片即可-->
<link rel="apple-touch-icon-precomposed" href="startup/apple-touch-icon-114x114-precomposed.png" />
避免百度转码
<meta http-equiv="Cache-Control" content="no-siteapp" />
PC端:
IE 优先使用已安装的最新IE版本和Chrome外挂插件(需用户已安装Google Chrome Frame)
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
360双核浏览器选择默认内核(首次打开有效,用户可更改且会记住用户记录),搜狗浏览器暂无此支持
<meta name="renderer" content="webkit"><!--使用极速核-->
<meta name="renderer" content="ie-comp"> <!--使用IE兼容核-->
<meta name="renderer" content="ie-stand"><!--使用IE标准核-->
网页标题栏的图标
<link rel="shortcut icon" type="image/x-icon" href="/Public/pub/image/favicon.ico"><!--大小为16*16-->
如果在网站项目根目录下放一个favicon.ico图标文件,那么上面这句不写也可以达到浏览器标签栏有图标的效果。
注:本文大部分转自“菜鸟笔记”,原文链接http://www.runoob.com/w3cnote/meta.html
前端手札--meta标记篇的更多相关文章
- web前端-《手机移动端WEB资源整合》——meta标签篇
前端网页meta元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词.meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向 ...
- 好程序员web前端分享HTML基础篇
好程序员web前端分享HTML基础篇,最近遇到很多新手,都会问,如果要学web前端开发,需要学什么?难不难学啊?多久能入门之类的问题?那么今天好程序员就先来给大家分享一下web前端学习路线:HTML基 ...
- HTML学习日记之元信息meta标记
所谓meta标记就是用来描述一个HTML网页文档的属性,也称为元信息,这些信息并不会显示在浏览器的页面中,例如作者.日期和时间.网页描述.页面刷新等. 基本语法: <meta name = &q ...
- 移动前端常用meta标签
移动前端常用meta标签 移动前端head常用meta标签 原文链接:http://caibaojian.com/mobile-meta.html //code from http://caibaoj ...
- [转载]ViewPort <meta>标记
ViewPort <meta>标记用于指定用户是否可以缩放Web页面,如果可以,那么缩放到的最大和最小缩放比例是什么.使用 ViewPort <meta>标记还表示文档针对移动 ...
- XSS报警机制(前端防火墙:第二篇)
XSS报警机制(前端防火墙:第二篇) 在第一章结尾的时候我就已经说了,这一章将会更详细的介绍前端防火墙的报警机制及代码.在一章出来后,有人会问为什么不直接防御,而是不防御报警呢.很简单,因为防御的话, ...
- ViewPort <meta>标记
ViewPort <meta>标记用于指定用户是否可以缩放Web页面,如果可以,那么缩放到的最大和最小缩放比例是什么.使用ViewPort <meta>标记还表示文档针对移动设 ...
- [解决]JS失效,提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
上网找了找,木有找到相关的解决办法,索性自己试了试. 原页面是这样写的: <html> <head> <meta http-equiv="Content-Typ ...
- 部署基于Gitlab+Docker+Rancher+Harbor的前端项目这一篇就够了
部署基于Gitlab+Docker+Rancher+Harbor的前端项目这一篇就够了 安大虎 momenta 中台开发工程师 6 人赞同了该文章 就目前的形势看,一家公司的运维体系不承载在 Do ...
随机推荐
- Sublime Text插件:HTML-CSS-JS Prettify
该插件依赖到nodejs环境 1.安装 在Sublime Text中,按下Ctrl+Shift+P调出命令面板; 输入install 调出 Install Package 选项并回车; 输入prett ...
- Sublime更换默认字体的方法
Sublime是一款很不错的编辑器,不过默认安装后的字体却不尽人意,并且Sublime竟然连个完整的设置页面都没有(直接让你编辑配置文件).于是很多人对这字体就忍气吞声了.其实只要添加一行代码就可以完 ...
- 一篇博客理解Recyclerview的使用
从Android 5.0开始,谷歌公司推出了RecylerView控件,当看到RecylerView这个新控件的时候,大部分人会首先发出一个疑问,recylerview是什么?为什么会有recyler ...
- linux下mysql开启远程访问权限及防火墙开放3306端口
默认mysql的用户是没有远程访问的权限的,因此当程序跟数据库不在同一台服务器上时,我们需要开启mysql的远程访问权限. 主流的有两种方法,改表法和授权法. 相对而言,改表法比较容易一点,个人也是比 ...
- my_mosaic
//功能:输入想要打马赛克的坐标点,宽,高以及每个边需要划分的块数进行打马赛克 //只能处理位图,根据不同色深定义depth即可 //还没写从文件头读取图片分辨率 #include<unistd ...
- 快速操作Linux终端命令行的快捷键列表
终端有很多快捷键,不太好记,常用的在这里 Ctrl+r 实现快速检索使用过的历史命令.Ctrl+r中r是retrieve中r.Ctrl+a:光标回到命令行首. (a:ahead)Ctrl+e:光标回到 ...
- C#编程普通型计算器 经验与感悟
先贴图: 这是用C# 语言编写的普通型计算器,功能基本模仿Windows8自带计算器程序(版本6.3,内部版本9600).支持加.减.乘.除.退格.清除.平方根.倒数.相反数.连续四则.连续等号.自动 ...
- Vim命令大全
1.进入vi的命令 vi filename :打开或新建文件,并将光标置于第一行首 vi +n filename :打开文件,并将光标置于第n行首 vi + filename :打开文件,并将光标置于 ...
- 买错的电影票,含着泪也得看-LAMP搭建&Linux基础
hi 没说过,上周五室友过生请客,在龙湖里吃嗨了喝爽了,回去的路上侃侃而谈.说好的这周一起去看年内最后的大片,火星救援的,谁知道老子眼神不好,买错了电影的时间...把周六的约定提前到了今儿个下午,ma ...
- MySQL注射的过滤绕过技巧[1]
SQL注射的绕过技巧较多,此文仅做一些简单的总结. 前文已经提到,最好利用的注射点: 支持Union 可报错 支持多行执行.可执行系统命令.可HTTP Request等额外有利条件 若非以上类型,则可 ...