<!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. ArrayList,Vector线程安全性测试

    import java.util.ArrayList; import java.util.List; //实现Runnable接口的线程 public class HelloThread implem ...

  2. SVN---脱离SVN控制

    创建一个记事本文件,然后吧这句话复制进去for /r . %%a in (.) do @if exist "%%a\.svn" rd /s /q "%%a\.svn&qu ...

  3. WCF z

    终结点与服务寄宿 由于最近可能要使用WCF做开发,开始重读蒋金楠的<WCF全面解析>,并整理个人学习WCF的笔记. 蒋金楠的书是我的第一本WCF入门书,虽说硬着头皮啃下来了,但是原理内容太 ...

  4. What is the difference between <%, <%=, <%# and -%> in ERB in Rails?

    http://stackoverflow.com/questions/998979/difference-between-and-in-rails/25617607#25617607 http://s ...

  5. 新建的表如果还没有数据，用exp导的时候会忽略

    源地址:http://www.07net01.com/2015/07/884873.html

  6. 怎么在logcat中显示system.com.print中的打印信息

    在logcat中显示信息可以用Log.v() Log.d() Log.i() Log.w() 以及 Log.e() 1.Log.v 的调试颜色为黑色的,任何消息都会输出: 2.Log.d的输出颜色是蓝 ...

  7. JqGrid单选

    You have to do some more stuff: 1. Set multiboxonly to true and multiselect to true 2. Define the ev ...

  8. Arrays

    Arrays:用于操作数组对象的工具类,里面都是静态方法. asList方法:将数组转换成list集合. String[] arr = {"abc","kk", ...

  9. 转载：Cocos2D-x 游戏接入 Windows 设备所需做的六件事

    原文地址:http://msopentech.com/zh-hans/blog/2014/05/09/cocos2d-x-%E6%B8%B8%E6%88%8F%E6%8E%A5%E5%85%A5-wi ...

  10. 移动开发 android 入门开发 阶段视频

    一直想把 android 的开发学习录制成视频,这里录制了一部分供大家学习. http://www.chuanke.com/s5402069.html 到这里,文档,源码,视频基本就全了,祝愿大家能够 ...