# Html探索系列 Meta标签 META 标签是 HTML 语言 HEAD 区的一个辅助性标签。**它提供关于 HTML 文档的元数据**。它不会显示在页面上，但是对于机器是可读的。可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。 ## 什么是元数据？ 元数据（Metadata）被定义为：描述数据的数据，对数据及信息资源的描述性信息。 比如一本书的元数据：书名、作者、出版社、总页数、出版时间、书的描述（是关于什么的书）等。 HTML 文档的元数据：**字符集、页面描述、日期时间、页面刷新、关键字、文档作者和视口设置**等。 ## meta有什么用？ META 标签用来描述一个 HTML 网页文档的元数据。它提供的信息用户是不可见，它主要是供机器解读的，告诉机器该如何解析这个页面。另外，还有一个用途是可以添加服务器发送到浏览器的 http 头部内容。 * 搜索引擎（SEO）优化 meta 标签的一个很重要的功能就是设置关键字，来帮助网页被各大搜索引擎登录，提高网站的访问量。在这个功能中，最重要的就是对 **keywords** 和 **description** 的设置。因为按照搜索引擎的工作原理，搜索引擎首先派出机器人自动检索页面中的 keywords 和 decription，并将其加入到自己的数据库，然后再根据关键词的密度将网站排序。 * 定义页面使用语言 * 定义 http 头部内容 * 自动刷新页面 * 控制页面缓存 * 实现网页转换时的动画效果 （IE 浏览器） * 网页定级评价 在IE的 internet 选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过 meta 属性来设置的。 级别的评定是由美国RSAC，即娱乐委员会的评级机构评定的。如果你需要评价自己的网站，可以连接到网站，按要求提交表格，那么 RSAC 会提供一段 meta 代码给你，复制到自己网页里就可以了。 ```html ``` * 控制页面显示的窗口 * 等等… META 标签定义的元数据的类型： | content | 定义与 http-equiv 或 name 属性相关的元信息。 | | ---------- | ------------------------------- | | name | 描述文档级别的元数据，应用于整个页面 | | http-equiv | 编译指令，提供的信息与类似命名的HTTP头部相同 | | charset | 一个字符集声明，告诉文档使用哪种字符编码 | | scheme | 定义用于翻译 content 属性值的格式。h5不支持 | ## content属性 meta 标签有 http-equiv 或 name 属性时，一定要有 content 属性对其进行说明。 ## name属性 name 属性主要用于描述网页，对应于网页内容，以便于搜索引擎机器人查找、分类。 如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。如： ```html ``` name 常见参数有： | 属性 | 说明 | | ---------------- | -------------------------- | | application-name | 定义正运行在该网页上的网络应用名称 | | keywords | 告诉搜索引擎网页的关键字是什么 | | description | 告诉搜索引擎网页的主要内容 | | author | 标注网页的作者 | | generator | 标注网站是采用什么软件制作的 | | copyright | 标注版权 | | viewport | 控制浏览器窗口的大小和缩放的，在移动端浏览器非常常用 | | robots | 告诉搜索机器人哪些页面需要索引，哪些页面不需要索引 | ```html ``` ### viewport参数 一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下： ```html ``` * width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。 * height：和 width 相对应，指定高度。 * initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。 * maximum-scale：允许用户缩放到的最大比例。 * minimum-scale：允许用户缩放到的最小比例。 * user-scalable：用户是否可以手动缩放 ### robots参数 Robots 用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。默认是 all。 ```html ``` * all：文件将被检索，且页面上的链接可以被查询 * none：文件将不被检索，且页面上的链接不可以被查询；与 `noindex, no follow` 起相同作用 * index：文件将被检索（让机器人或爬虫登录） * follow：页面上的链接可以被查询 * noindex：文件将不被检索，但页面上的链接可以被查询；(不让机器人或爬虫登录) * nofollow：文件将不被检索，页面上的链接可以被查询。(不让机器人或爬虫顺着此页的连接往下探找) ### revisit-after参数 如果页面不是经常更新，为了减轻搜索引擎爬虫对服务器带来的压力，可以设置一个爬虫的重访时间。如果重访时间过短，爬虫将按它们定义的默认时间来访问。 ```html ``` ### renderer参数 renderer 是为双核浏览器准备的，用于指定双核浏览器默认以何种方式渲染页面。比如说360浏览器。 ```html ``` ### referrer参数 控制所有从该文档发出的 HTTP 请求中 HTTP Referer 首部的内容，默认 no-referrer-when-downgrade。 如修改为 origin： ![image-20200829201150240](https://my-files-1259410276.cos.ap-chengdu.myqcloud.com/md_images/image-20200829201150240.png) ```html ``` * no-referrer：不要发送 HTTP Referer 首部 * origin：发送当前文档的 origin * no-referrer-when-downgrade：当目的地是先验安全的（https->https）则发送 origin 作为 referrer ，但是当目的地是较不安全的 （https -> http）时则不发送 referrer 。这个是默认的行为。 * origin-when-crossorigin：在同源请求下，发送完整的URL (不含查询参数) ，其他情况下则仅发送当前文档的 origin。 * unsafe-URL：在同源请求下，发送完整的URL (不含查询参数)。 **动态地插入**`` (通过 `document.writ`e 或者 `appendChild`) 是不起作用的。同样注意如果同时有多个彼此冲突的策略被定义，那么 `no-referrer` 策略会生效。 ### 其他参数 ```html ``` ## http-equiv属性 http-equiv 顾名思义，相当于 http 的文件头作用。http-equiv 属性是添加 http 头部内容，对一些自定义的，或者需要额外添加的 http 头部内容，需要发送到浏览器中，我们就可以是使用这个属性。 http-equiv 属性主要有以下几种参数： ### content-type参数 content-type 用于设定网页字符集，便于浏览器解析与渲染页面。 ```html ``` ### content-language参数 用以说明主页制作所使用的文字以及语言。 ```html ``` 还可以是：EN、FR等语言代码。 ### refresh参数 设置一个周期（以秒为单位），之后，将从服务器重新加载当前页面，还可以指定要加载的其他URL。 ```html ``` ### default-style参数 设置默认 CSS 样式表组的名称。content 属性的值必须与同一文档中的脚本或链接元素上的title属性匹配。 ```html ``` \*\*注意：\*\*上面 content 属性的值必须匹配同一文档中的一个 link 元素上的 title 属性的值，或者必须匹配同一文档中的一个 style 元素上的 title 属性的值。 ### X-UA-Compatible参数 用于告知浏览器以何种版本来渲染页面。一般都设置为最新模式，在各大框架中这个设置也很常见。 ```html ``` ### cache-control参数 指定浏览器如何缓存某个响应以及缓存多长时间。 ```html ``` 共有以下几种用法： * no-cache：先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。 * no-store：直接禁止浏览器以及所有中间缓存存储任何版本的返回响应。 * public：即使有关联的 HTTP 身份验证，甚至响应状态代码通常无法缓存，也可以缓存响应，即**内容可以被客户端和代理服务器缓存**。 大多数情况下，它不是必需的，因为明确的缓存信息（例如 `max-age`）已表示响应是可以缓存的。 * private：通常只为单个用户缓存，因此不允许任何中间缓存对其进行缓存，**即客户端可以缓存，代理服务器不可缓存**。 例如，用户的浏览器可以缓存包含用户私人信息的 HTML 网页，但 CDN 却不能缓存。 * maxage：表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=60表示响应可以再缓存和重用 60 秒。 * must-revalidation/proxy-revalidation：如果缓存的内容失效，请求必须发送到服务器/代理以进行重新验证。 禁止百度自动转码： ```html ``` ### pragma参数 禁止浏览器从本地计算机的缓存中访问页面内容。 ```html ``` ### expires参数 用于设定网页的到期时间，过期后网页必须到服务器上重新传输。 ```html ``` ### Set-Cookie参数 如果网页过期。那么这个网页存在本地的cookies也会被自动删除。 ```html ``` > `Blocked setting the` user=lizh; path=/; expires=Thu, 01 Jan 1970 00:00:02 GMT`cookie from a tag.` > > 为了减轻跨站点脚本（XSS）攻击的风险，此行为已从最新的HTML规范和Firefox 68中删除[.Google Chrome 65](https://www.chromestatus.com/feature/6170540112871424)已于2018年3月停止支持。 ### Window-target参数 强制页面在当前窗口以独立页面显示，用来防止别人在框架里调用自己的页面。 ```html ``` ### content-security-policy参数 定义当前页面的内容策略。内容策略主要指定允许的服务器地址和脚本端点，这有助于防止 cross-site scripting 攻击。 CSP 的实质就是白名单制度，开发者明确告诉客户端，哪些外部资源可以加载和执行，等同于提供白名单。它的实现和执行全部由浏览器完成，开发者只需提供配置。 CSP 大大增强了网页的安全性。攻击者即使发现了漏洞，也没法注入脚本，除非还控制了一台列入了白名单的可信主机。 两种方法可以启用 CSP： * 服务器端配置 * 通过 HTTP 头信息的 Content-Security-Policy 的字段 ```html ``` 以下是常用的指令名说明，多个指令用分号隔开: | 指令名 | 说明 | | ----------- | ----------------------------------- | | default-src | 默认策略，可以应用于js文件/图片/css/ajax请求等所有访问 | | script-src | 定义js文件的过滤策略 | | style-src | 定义css文件的过滤策略 | | img-src | 定义图片文件的过滤策略 | | connect-src | 定义请求连接文件的过滤策略 | | font-src | 定义字体文件的过滤策略 | | object-src | 定义页面插件的过滤策略。如object、embed、applet。 | | media-src | 定义媒体的过滤策略。audio、video | | frame-src | 定义加载子frmae的策略 | | sandbox | 沙盒模式，会阻止页面弹窗、js执行等。可以通过添加策略来放开相应的操作 | | report-uri | - | 常用的指令值：所有以 -src 结尾的指令都可以用一下的值来定义过滤规则，多个规则之间可以用空格来隔开。 | 指令值 | 说明 | | ------------------ | ------------------------------------------- | | \* | 允许任意地址的url，但是不包括 blob: filesystem: schemes. | | 'none' | 所有地址的咨询都不允许加载 | | 'self' | 同源策略,即允许同域名同端口下,同协议下的请求 | | data: | 允许通过data来请求咨询 (比如用Base64 编码过的图片). | | domain.example.com | 允许特性的域名请求资源 | | .example.com | 允许从 example.com下的任意子域名加载资源 | | | 仅仅允许通过https协议来从指定域名下加载资源 | | https: | 只允许通过https协议加载资源 | | 'unsafe-inline' | 允许行内代码执行 | | 'unsafe-eval' | 允许不安全的动态代码执行，比如 JavaScript 的 eval()方法 | ### 网页过渡效果 在IE5.5及以上版本的浏览器中，页面被载入和退出时的一些过渡效果。 具体值有： * Page-Enter : 进入页面 * Page-Exit : 离开页面 * Site-Enter : 进入网站 * Site-Exit : 离开网站 content 表示页面过渡的效果设置，这里的两个属性表示分别表示： * Duration : 过渡速度 * Transition : 可选项。整数值(Integer)。具体数值可查看 [网页过渡效果](https://blog.csdn.net/cl61917380/article/details/39206715)。 ```html ``` 注：ie 9 以上已经不支持。 ### 其他参数 ```html ``` ## charset属性 charset 属性是 HTML5 中的新功能，它声明 HTML 文档使用的字符集（字符编码）。如果使用了这个属性，其值必须是与 ASCII 大小写无关 的 `utf-8`。 charset 有两种写法，下面两种写法是等价的，不过更推荐使用第一种写法： ```html ``` ## 特定场景的使用 ### 移动端 ```html ``` ### IE浏览器 ```html ``` ### chrome浏览器 ```html ``` ### UC浏览器 ```html ``` ### QQ手机浏览器 ```html ``` ### IOS ```html ``` ## 参考资料 [HTML meta标签总结与属性使用介绍](https://segmentfault.com/a/1190000004279791) [HTTP 缓存](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching?hl=zh-cn#cache-control) [前端安全配置之Content-Security-Policy(csp)](https://www.cnblogs.com/heyuqing/p/6215761.html) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://lizh.gitbook.io/knowledge/html-tan-suo-xi-lie/03html-tan-suo-xi-lie-meta-biao-qian.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.