Fe-interview: [html] 第166天 meta的属性有哪些组成？说说它们的分别有什么作用？

[haizhilin2013]

第166天 meta的属性有哪些组成？说说它们的分别有什么作用？

98,#971

[cychenyan1995]

1.chartset='utf-8' 声明文档的字符编码
2.http-equiv="X-UA-Compatible" 文档兼容模式
3.name="viewport" content="width=device-width, initial-scale=1.0" 用户网页的可视区域

[encountermm]

https://www.jianshu.com/p/04a4021b2a44

[wwqin]

charset
此特性声明当前文档所使用的字符编码，但该声明可以被任何一个元素的 lang 特性的值覆盖。

http-equiv

• content-language 指定页面使用的默认语言
• content-security-policy 它允许页面作者定义当前页的 内容策略。 内容策略主要指定允许的服务器源和脚本端点，这有助于防止跨站点脚本攻击。
• default-style 这个属性指定了在页面上使用的首选样式表.

name

• author 就是这个文档的作者名称，可以用自由的格式去定义。
• description 其中包含页面内容的简短和精确的描述。 一些浏览器，如Firefox和Opera，将其用作书签页面的默认描述。
• generator 包含生成页面的软件的标识符。
• keywords 包含与逗号分隔的页面内容相关的单词。
• referrer 控制所有从该文档发出的 HTTP 请求中HTTP Referer 首部的内容。

[vkboo]

• 基本概念

  • content属性是必要的，还有3个非必要属性:http-equiv/name/scheme(不常用)

• 添加服务器发送到浏览器的http头部内容

<!-- 浏览器的头部就会包括这些: charset:iso-8859-1 expires:31 Dec 2008 -->
<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">
<!-- 5s后重定向到Google -->
<meta http-equiv="Refresh" content="5;url=https://www.google.com" />

• 解析方式定义

<!-- 用webkit内核进行解析 -->
<meta name="renderer" content="webkit">

* 常用的meta标签
<!-- 声明文档使用的字符编码，一定要写第一行(有以下两种写法) -->
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!-- 禁止百度转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />

<!-- 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">

<!-- viewport主要是影响移动端页面布局的 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

- content 参数：
    - width viewport 宽度(数值/device-width)
    - height viewport 高度(数值/device-height)
    - initial-scale 初始缩放比例
    - maximum-scale 最大缩放比例
    - minimum-scale 最小缩放比例
    - user-scalable 是否允许用户缩放(yes/no)

<!-- 移动端常用 -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- 删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 设置苹果工具栏颜色 -->
<meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略页面中的数字识别为电话，忽略email识别 -->
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别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="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- 适应移动端end -->