【teemo】[20161122][html学习笔记]<meta>标签的所有作用

1、W3C School上的说明

　　http://www.w3school.com.cn/html5/html5_meta.asp

2、W3C School上的重点内容

• TIY实例说明非常的棒：声明网页使用的字符编码、网页版本说明、网页作者信息说明、提供给搜索引擎的关键字、网页自动跳转功能；
• meta标签的基本用法、语法、基本取值；

3、目前<meta>标签的所有用法

• viewport网页缩放
• 声明文档使用的字符编码
• SEO搜索引擎的相关设置：提供网页关键字、作者信息、网站版本信息、网站开发工具信息等等；
• ios设备的相关设置
• 各种个样浏览器的相关设置
• WP手机的相关设置
• weibo相关的社交标签的设置
• 等等等等

4、上述<meta>用法的详细说明

参考来源：http://www.studyofnet.com/news/1064.html

更多详细使用方法如上⬆️

html5 meta标签

本文导读：我们在移动前端开发中，经常需要添加一些webkit专属的HTML5头部meta标签，帮助浏览器更好解析html代码，更好地将移动web前端页面表现出来。下面介绍html5移动页面中常用的meta标签

一、viewport网页缩放

 

<meta name ="viewport" content ="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
   content 参数解释：
    width  　　　　 viewport 宽度(数值/device-width)
   height            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">

 

 

二、声明文档使用的字符编码

 

<meta charset="utf-8" />

 

三、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 

 

 

四、iOS 设备

 

<meta name="apple-mobile-web-app-title" content="标题"> //添加到主屏后的标题（iOS 6 新增）

<meta name="apple-mobile-web-app-capable" content="yes" />//是否启用 WebApp 全屏模式

<!-- 禁用自动识别电话号码 -->

<meta name="format-detection" content="telephone=no" />

<!-- 禁用自动识别电子邮件 -->

<meta name="format-detection" content="email=no" />

<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 ,网页内容充满整个屏幕，顶部会被状态栏遮挡。  

 

五、Safari浏览器相关设置

 

<!-- 强制全屏 -->

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

<!-- 设置状态栏颜色 -->

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

<!-- 设置添加至主屏标题 -->

<meta name="apple-mobile-web-app-title" content="..." />

 

六、UC浏览器相关设置

 

<!-- 强制竖屏 -->

<meta name="screen-orientation" content="portrait" />

<!-- 强制全屏 -->

<meta name="full-screen" content="yes" />

<!-- 应用模式 -->

<meta name="browsermode" content="application" />

 

七、QQ浏览器相关设置

 

<!-- 强制竖屏 -->

<meta name="x5-orientation" content="portrait" />

<!-- 强制全屏 -->

<meta name="x5-fullscreen" content="true" />

<!-- 应用模式 -->

<meta name="x5-page-mode" content="app" />

 

八、360浏览器相关设置

 

<!-- 启用极速模式 -->

<meta name="renderer" content="webkit" />

 

九、WP手机相关设置

 

<!-- 禁用点击高光效果 -->

<meta name="msapplication-tap-highlight" content="no" />

 

十、Weibo社交标签相关设置

 

<!-- 展示标题 -->

<meta property="og:title" content="..." />

<!-- 展示描述 -->

<meta property="og:description" content="..." />

<!-- 展示类型 -->

<meta property="og:type" content="..." />

<!-- 展示图片 -->

<meta property="og:image" content="..." />

<!-- 展示链接 -->

<meta property="og:url" content="..." />