<!DOCTYPE html><!--HTML5 doctype-->

<html>

<head>

<title>xxx</title>

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

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

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

　　这是一个HTML5为语言标准的说明文档。第一组meta标签，大家比较常见。这个是经常用到的。它表明的意思是它的内容是html文档，且网页编码采用的是utf-8编码。utf-8编码主要针对是简体中文和英文。正确的编码定义很有必要。否则会导致网页上的文字变成乱码。

第二组meta标签就是移动端特属的标签了。它表明的意思是它是一个视图窗口。其视图窗口内容的宽度等于移动端设备的默认宽度。inital-scale表示的初始的缩放比例.一般设置为1.0倍。maximum-scale=1.0表示的允许用户缩放的最大比例。user-scalable=no表示是否支持用户手动进行缩放。

第三组和第四组meta标签都是针对IOS系统的专属标签。第三组meta标签表示的意思是是否启动webapp功能。说通俗一点。就是当点击网页添加至主屏幕功能时，会在主屏幕上生成一个图标。点击该图标会进入webapp功能。就是模拟本地应用的模式来浏览web页面。生成的图标可以自定义，启动webapp时的开始时的图片也可以定义。这个是link标签的作用，我会在介绍link标签时，单独进行说明。

第四组meta标签表示的是当启动webapp功能时，显示手机信号、时间、电池的顶部导航栏的颜色。默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。这个主要是根据实际的页面设计的主体色为搭配来进行设置。

注：SEO 优化部分

页面标题<title>标签(head 头部必须)

<title>your title</title>

页面关键词 keywords

<meta name="keywords" content="your keywords">

页面描述内容 description

<meta name="description" content="your description">

定义网页作者 author

<meta name="author" content="author,email address">

定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。

<meta name="robots" content="index,follow">

ios设备需要：

禁止数字识自动别为电话号码

<meta name="format-detection" content="telephone=no" /> <!-- 禁止数字识自动别为电话号码 -->

移动端的头部标签和meta的更多相关文章

  1. 移动端的头部标签和 meta

    使用 HTML5 doctype,不区分大小写 <!DOCTYPE html> 更加标准的 lang 属性写法 http://zhi.hu/XyIa <html lang=" ...

  2. 移动前端头部标签(HTML5 meta)

    在移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码 <!DOCTYPE html>  使用 HTML5 doctype,不区分大小写 <he ...

  3. HTML5头部标签中<meta>常用信息

    整理一些平时常用的,方便查阅 <!-- 字体编码 --> <meta charset="utf-8" /> <!-- 关键字 --> <m ...

  4. HTML 常用头部标签（meta）

    先来看下常用的标签列表,后文会一一介绍: <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> <html lang=&quo ...

  5. 移动端head头部常用meta标签

    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum- ...

  6. 移动端web页面开发常用的头部标签设置

    在移动端web页面开发中,我们常需要设置各种头部标签以帮助浏览器更好的解析页面,将页面完美呈现,这里列出了工作中常用的各种头部标签,以备查询. viewport <meta name=" ...

  7. web前端-《手机移动端WEB资源整合》——meta标签篇

    前端网页meta元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词.meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向 ...

  8. 移动前端头部标签(HTML5 head meta)转载

    移动web页面头部书写 字数2516 阅读1128 评论0 喜欢30 HTTP 标题信息(http-equiv) 和页面描述信息(name) http-equiv:该枚举的属性定义,可以改变服务器和用 ...

  9. 移动前端头部标签(HTML5 head meta)

    移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码,更好地将移动web前端页面表现出来.本文整理一些常用的meta标签. <!DOCTYPE html&g ...

随机推荐

  1. JS定时执行，循环执行

    从http://www.jb51.net/article/23863.htm  转载 Document自带的方法: 循环执行:var timeid = window.setInterval(“方法名或 ...

  2. CSS根据屏幕分辨率应用相应样式

    当屏幕尺寸小于1200px时,应用下面的CSS样式 @media screen and (max-width: 1200px) { /*当屏幕尺寸小于1200px时,应用下面的CSS样式*/ .ind ...

  3. Android之BroadcastReceiver 监听系统广播

    绑定广播有两种方式 一.配置文件绑定,在程序未启动也能监听 二.代码方式绑定,在程序启动后才能监听 1.绑定和取消绑定广播 public class MainActivity extends Acti ...

  4. Java中Split函数的用法技巧

    在java.lang包中也有String.split()方法,与.net的类似,都是返回是一个字符型数组,但使用过程中还有一些小技巧.如执行:"2|33|4".split(&quo ...

  5. Innosetup中将bat文件压缩到压缩包中

      有时候在安装的过程中需要调用某些文件(bat或者exe等文件),但是只需要使用一次,然后就可以删掉该文件, 在Innosetup中应该这样操作: 1.在.iss脚本的[Files]章节写下: So ...

  6. Ext 中xtype一览

    基本组件: xtype Class 描述 button Ext.Button 按钮 splitbutton Ext.SplitButton 带下拉菜单的按钮 cycle Ext.CycleButton ...

  7. StrictMode对SharedPreferences的检查出来的IO操作

    在使用StrictMode时,发现会爆出 StrictMode policy violation;~duration=1949 ms: android.os.StrictMode$StrictMode ...

  8. net start mysql服务名无效

    解决方案:(参考以下命令) 1.win+R键输入cmd敲回车进入dos界面: 2.输入cd d:/mysql-5.5.25/bin敲回车,发现没变化: 3.输入d:敲回车,定位到d:\mysql-5. ...

  9. Ubuntu Qt arm-linux-androideabi-gcc: Command not found

    :-1: error: /opt/Qt/android-ndk-r9c/toolchains/arm-linux-androideabi-4.8/prebuilt/linux-x86/bin/arm- ...

  10. oracle 表空间管理

    1.创建表空间 03:01:55 sys@ORADB11G> create tablespace TSPITR datafile '/u01/app/oracle/oradata/TSPITR0 ...