<!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. unity jiaoben

    transform.Translate(Input.GetAxis("Horizontal")*Time.deltaTime,0,0); 移动 transform.Translat ...

  2. MySQL 开启与关闭远程访问&&授权前需执行GRANT USAGE ON *.* TO 'cai'@'%' IDENTIFIED BY 'caigan2015';才能终端访问

    MySQL 开启与关闭远程访问 (1)通过MySQL用户去限制访问 权限系统目的: MySQL基于安全考虑root账户一般只能本地访问,但是在开发过程中可能需要打开root的远程访问权限,今天介绍的就 ...

  3. SVN---脱离SVN控制

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

  4. AndroidStudio 问题汇总

    Error:A problem occurred configuring root project 'testProject'. > Could not open cp_proj class c ...

  5. [Flex] ButtonBar系列——flex3 ButtonBar圆角菜单的运用

    <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="h ...

  6. rsync 目录 斜杠

    源: 不带:同步  目录和内容 带/: 只同步内容 target目录: 待. -Warv --delete -W, --whole-file            copy files whole ( ...

  7. C Primer Plus(第五版)8

    第 8 章 字符输入/输出和输入确认 在本章中你将学习下列内容: · 有关输入,输出以及缓冲和非缓冲输入之间的区别的更多内容. · 从键盘模拟文件结尾条件的方法. · 如何重定向将你的程序与文件相连接 ...

  8. C++primer 练习11.33：实现你自己版本的单词转换程序

    // 11_33.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<iostream> #include< ...

  9. SQL SERVER树型数据处理时，函数递归调用问题，查询根节点，子节点函数

    /* 标题:查询指定节点及其所有子节点的函数 作者:爱新觉罗.毓华(十八年风雨,守得冰山雪莲花开) 时间:2008-05-12 地点:广东深圳 */ ) , pid ) , name )) ' , n ...

  10. 初探接口测试框架--python系列7

    点击标题下「蓝色微信名」可快速关注 坚持的是分享,搬运的是知识,图的是大家的进步,没有收费的培训,没有虚度的吹水,喜欢就关注.转发(免费帮助更多伙伴)等来交流,想了解的知识请留言,给你带来更多价值,是 ...