Html头部meta标签

以下内容摘自Web前端开发最佳实践--党建著

meta元素有4个属性：name、http-equiv、content、charset.meta标签通过name属性来表述页面文档的元信息，通过http-equiv属性设置http请求指令，通过charset设置页面的字符编码。按照属性设置分类，meta可以分为三类:

name属性和content属性组合,构成名称/值对，用于描述网站信息.

标准的meta名称包括application-name、author、description、generator等。
示例代码：

其中keywords和description这两个名称的使用率最高，是搜索引擎优化的主要手段之一，推荐读者使用。
http-equiv属性和content属性组合，设置特定的http指令;
? 其中content-type、default-style和refresh已经确定,content-language和set-cookie还未正式确定.
此类型meta应该谨慎使用。不推荐使用,某些搜索引擎遇到此meta时会停止解析页面剩余的部分。在实际的场景中很少使用
charset属性,设置页面字符编码。
此属性提供了保存和传输文档的编码格式。

等价于

但是第一种形式更简洁好记，并且得到了所有主流浏览器的支持，所有不存在浏览器兼容问题。为了让浏览器能准确识别编码格式，务必在标签之前设置charset,保证标题能正确显示。</span></p> <pre><span style="font-size: 16px"><code style="display: block; overflow-x: auto; background: rgba(30, 30, 30, 1); line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -0.3px; padding: 18px; color: rgba(244, 244, 244, 1); white-space: pre-wrap">除了W3C定义的规范中定义的这些meta之外，还有大量的自定义meta类型。这些meta类型主要是由互联网公司或者浏览器厂商为了实现特定的功能而定制的。这些自定义的meta不能通过W3C提供的标准校验，但并不是说这些meta不标准。介绍一些常用的meta </code></span></pre> <p style="line-height: 160%; box-sizing: content-box; color: rgba(51, 51, 51, 1); margin: 0"><span style="font-size: 16px"><strong style="line-height: 160%; box-sizing: content-box; font-weight: bold">设置IE浏览器的兼容模式</strong></span><br> <span style="font-size: 15px">从IE8浏览器开始支持一种设置页面兼容模式的meta类型，示例代码如下:</span><br><span style="font-size: 15px"> <meta http-equiv="X-UA-Compatible" content="IE=8"/></span><br><span style="font-size: 15px"> 根据html规范，浏览器是按照页面开头定义的文档类型来解析页面的。例如，使用html5的文档类型声明：</span><br><span style="font-size: 15px"> <!DOCTYPE html></span><br><span style="font-size: 15px"> IE就会以标准模式解析HTML文档。但是某些已有页面由于各种原因不能在最新标准模式下正确显示，只支持特定的标准。针对这种情况，IE浏览器提供了一种兼容的方案，通过设置X-UA-Compatible指定页面在IE浏览器中渲染时执行的标准。</span><br><span style="font-size: 15px"> 此外还有一种很常见的设置值，即:</span><br><span style="font-size: 15px"> <meta http-equiv="X-UA-Compatible" content="chrome=1"/></span><br><span style="font-size: 15px"> IE定义的meta为什么会出现chrome呢？其实设置为chrome=1时，则会在IE9及以下浏览器中激活Chrome Frame,强制IE使用Chrome Frame渲染页面。</span></p> </li> </ul> <center style="display: none !important; visibility: collapse !important; height: 0 !important; white-space: nowrap; width: 100%; overflow: hidden">%0A%0A%23%23%23%23%23%20%26emsp%3B%26emsp%3B%20meta%E5%85%83%E7%B4%A0%E6%9C%894%E4%B8%AA%E5%B1%9E%E6%80%A7%EF%BC%9Aname%E3%80%81http-equiv%E3%80%81content%E3%80%81charset.meta%E6%A0%87%E7%AD%BE%E9%80%9A%E8%BF%87name%E5%B1%9E%E6%80%A7%E6%9D%A5%E8%A1%A8%E8%BF%B0%E9%A1%B5%E9%9D%A2%E6%96%87%E6%A1%A3%E7%9A%84%E5%85%83%E4%BF%A1%E6%81%AF%EF%BC%8C%E9%80%9A%E8%BF%87http-equiv%E5%B1%9E%E6%80%A7%E8%AE%BE%E7%BD%AEhttp%E8%AF%B7%E6%B1%82%E6%8C%87%E4%BB%A4%EF%BC%8C%E9%80%9A%E8%BF%87charset%E8%AE%BE%E7%BD%AE%E9%A1%B5%E9%9D%A2%E7%9A%84%E5%AD%97%E7%AC%A6%E7%BC%96%E7%A0%81%E3%80%82%E6%8C%89%E7%85%A7%E5%B1%9E%E6%80%A7%E8%AE%BE%E7%BD%AE%E5%88%86%E7%B1%BB%EF%BC%8Cmeta%E5%8F%AF%E4%BB%A5%E5%88%86%E4%B8%BA%E4%B8%89%E7%B1%BB%3A%0A%0A%0A*%20**name%E5%B1%9E%E6%80%A7%E5%92%8Ccontent%E5%B1%9E%E6%80%A7%E7%BB%84%E5%90%88%2C%E6%9E%84%E6%88%90%E5%90%8D%E7%A7%B0%2F%E5%80%BC%E5%AF%B9%EF%BC%8C%E7%94%A8%E4%BA%8E%E6%8F%8F%E8%BF%B0%E7%BD%91%E7%AB%99%E4%BF%A1%E6%81%AF.**%0A%0A%20%20%20%20%20%26emsp%3B%26emsp%3B%20%E6%A0%87%E5%87%86%E7%9A%84meta%E5%90%8D%E7%A7%B0%E5%8C%85%E6%8B%ACapplication-name%E3%80%81author%E3%80%81description%E3%80%81generator%E7%AD%89%E3%80%82%0A%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81%EF%BC%9A%0A%3Cmeta%20name%3D%22keywords%22%20content%3D%22british%2Ctypeface%2Cfont%2Cfonts%22%2F%3E%0A%0A%20%20%20%E5%85%B6%E4%B8%ADkeywords%E5%92%8Cdescription%E8%BF%99%E4%B8%A4%E4%B8%AA%E5%90%8D%E7%A7%B0%E7%9A%84%E4%BD%BF%E7%94%A8%E7%8E%87%E6%9C%80%E9%AB%98%EF%BC%8C%E6%98%AF%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E%E4%BC%98%E5%8C%96%E7%9A%84%E4%B8%BB%E8%A6%81%E6%89%8B%E6%AE%B5%E4%B9%8B%E4%B8%80%EF%BC%8C%E6%8E%A8%E8%8D%90%E8%AF%BB%E8%80%85%E4%BD%BF%E7%94%A8%E3%80%82%0A%0A*%20%20%20%20**http-equiv%E5%B1%9E%E6%80%A7%E5%92%8Ccontent%E5%B1%9E%E6%80%A7%E7%BB%84%E5%90%88%EF%BC%8C%E8%AE%BE%E7%BD%AE%E7%89%B9%E5%AE%9A%E7%9A%84http%E6%8C%87%E4%BB%A4%3B**%0A%20%20%20%26emsp%3B%E5%85%B6%E4%B8%ADcontent-type%E3%80%81default-style%E5%92%8Crefresh%E5%B7%B2%E7%BB%8F%E7%A1%AE%E5%AE%9A%2Ccontent-language%E5%92%8Cset-cookie%E8%BF%98%E6%9C%AA%E6%AD%A3%E5%BC%8F%E7%A1%AE%E5%AE%9A.%0A%20%20%20%E6%AD%A4%E7%B1%BB%E5%9E%8Bmeta%E5%BA%94%E8%AF%A5%E8%B0%A8%E6%85%8E%E4%BD%BF%E7%94%A8%E3%80%82%E4%B8%8D%E6%8E%A8%E8%8D%90%E4%BD%BF%E7%94%A8%3Cmeta%20http-equiv%3D%22refresh%22%20content%3D%22300%22%2F%3E%2C%E6%9F%90%E4%BA%9B%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E%E9%81%87%E5%88%B0%E6%AD%A4meta%E6%97%B6%E4%BC%9A%E5%81%9C%E6%AD%A2%E8%A7%A3%E6%9E%90%20%E9%A1%B5%E9%9D%A2%E5%89%A9%E4%BD%99%E7%9A%84%E9%83%A8%E5%88%86%E3%80%82%3Cmeta%20http-equiv%3D%22default-style%22%3E%E5%9C%A8%E5%AE%9E%E9%99%85%E7%9A%84%E5%9C%BA%E6%99%AF%E4%B8%AD%E5%BE%88%E5%B0%91%E4%BD%BF%E7%94%A8%0A%0A*%20**charset%E5%B1%9E%E6%80%A7%2C%E8%AE%BE%E7%BD%AE%E9%A1%B5%E9%9D%A2%E5%AD%97%E7%AC%A6%E7%BC%96%E7%A0%81%E3%80%82**%0A%20%20%E6%AD%A4%E5%B1%9E%E6%80%A7%E6%8F%90%E4%BE%9B%E4%BA%86%E4%BF%9D%E5%AD%98%E5%92%8C%E4%BC%A0%E8%BE%93%E6%96%87%E6%A1%A3%E7%9A%84%E7%BC%96%E7%A0%81%E6%A0%BC%E5%BC%8F%E3%80%82%0A%20%20%3Cmeta%20charset%3D%22utf-8%22%3E%0A%20%20%E7%AD%89%E4%BB%B7%E4%BA%8E%0A%20%20%3Cmeta%20http-equiv%3D'Content-Type'%20content%3D'Type%3Dtext%2Fhtml%3B%20charset%3Dutf-8'%3E%0A%20%20%E4%BD%86%E6%98%AF%E7%AC%AC%E4%B8%80%E7%A7%8D%E5%BD%A2%E5%BC%8F%E6%9B%B4%E7%AE%80%E6%B4%81%E5%A5%BD%E8%AE%B0%EF%BC%8C%E5%B9%B6%E4%B8%94%E5%BE%97%E5%88%B0%E4%BA%86%E6%89%80%E6%9C%89%E4%B8%BB%E6%B5%81%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E6%94%AF%E6%8C%81%EF%BC%8C%E6%89%80%E6%9C%89%E4%B8%8D%E5%AD%98%E5%9C%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E9%97%AE%E9%A2%98%E3%80%82%E4%B8%BA%20%E4%BA%86%E8%AE%A9%E6%B5%8F%E8%A7%88%E5%99%A8%E8%83%BD%E5%87%86%E7%A1%AE%E8%AF%86%E5%88%AB%E7%BC%96%E7%A0%81%E6%A0%BC%E5%BC%8F%EF%BC%8C%E5%8A%A1%E5%BF%85%E5%9C%A8%3Ctitle%3E%E6%A0%87%E7%AD%BE%E4%B9%8B%E5%89%8D%E8%AE%BE%E7%BD%AEcharset%2C%E4%BF%9D%E8%AF%81%E6%A0%87%E9%A2%98%E8%83%BD%E6%AD%A3%E7%A1%AE%E6%98%BE%E7%A4%BA%E3%80%82%0A%0A%20%20%20%20%20%20%E9%99%A4%E4%BA%86W3C%E5%AE%9A%E4%B9%89%E7%9A%84%E8%A7%84%E8%8C%83%E4%B8%AD%E5%AE%9A%E4%B9%89%E7%9A%84%E8%BF%99%E4%BA%9Bmeta%E4%B9%8B%E5%A4%96%EF%BC%8C%E8%BF%98%E6%9C%89%E5%A4%A7%E9%87%8F%E7%9A%84%E8%87%AA%E5%AE%9A%E4%B9%89meta%E7%B1%BB%E5%9E%8B%E3%80%82%E8%BF%99%E4%BA%9Bmeta%E7%B1%BB%E5%9E%8B%E4%B8%BB%E8%A6%81%E6%98%AF%E7%94%B1%E4%BA%92%E8%81%94%E7%BD%91%E5%85%AC%E5%8F%B8%E6%88%96%E8%80%85%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%82%E5%95%86%E4%B8%BA%E4%BA%86%E5%AE%9E%E7%8E%B0%E7%89%B9%E5%AE%9A%E7%9A%84%E5%8A%9F%E8%83%BD%E8%80%8C%E5%AE%9A%E5%88%B6%E7%9A%84%E3%80%82%E8%BF%99%E4%BA%9B%E8%87%AA%E5%AE%9A%E4%B9%89%E7%9A%84meta%E4%B8%8D%E8%83%BD%E9%80%9A%E8%BF%87W3C%E6%8F%90%E4%BE%9B%E7%9A%84%E6%A0%87%E5%87%86%E6%A0%A1%E9%AA%8C%EF%BC%8C%E4%BD%86%E5%B9%B6%E4%B8%8D%E6%98%AF%E8%AF%B4%E8%BF%99%E4%BA%9Bmeta%E4%B8%8D%E6%A0%87%E5%87%86%E3%80%82%E4%BB%8B%E7%BB%8D%E4%B8%80%E4%BA%9B%E5%B8%B8%E7%94%A8%E7%9A%84meta%0A%0A%20%20**%E8%AE%BE%E7%BD%AEIE%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E5%85%BC%E5%AE%B9%E6%A8%A1%E5%BC%8F**%0A%20%20%20%E4%BB%8EIE8%E6%B5%8F%E8%A7%88%E5%99%A8%E5%BC%80%E5%A7%8B%E6%94%AF%E6%8C%81%E4%B8%80%E7%A7%8D%E8%AE%BE%E7%BD%AE%E9%A1%B5%E9%9D%A2%E5%85%BC%E5%AE%B9%E6%A8%A1%E5%BC%8F%E7%9A%84meta%E7%B1%BB%E5%9E%8B%EF%BC%8C%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81%E5%A6%82%E4%B8%8B%3A%0A%20%20%20%3Cmeta%20http-equiv%3D%22X-UA-Compatible%22%20content%3D%22IE%3D8%22%2F%3E%0A%20%20%20%E6%A0%B9%E6%8D%AEhtml%E8%A7%84%E8%8C%83%EF%BC%8C%E6%B5%8F%E8%A7%88%E5%99%A8%E6%98%AF%E6%8C%89%E7%85%A7%E9%A1%B5%E9%9D%A2%E5%BC%80%E5%A4%B4%E5%AE%9A%E4%B9%89%E7%9A%84%E6%96%87%E6%A1%A3%E7%B1%BB%E5%9E%8B%E6%9D%A5%E8%A7%A3%E6%9E%90%E9%A1%B5%E9%9D%A2%E7%9A%84%E3%80%82%E4%BE%8B%E5%A6%82%EF%BC%8C%E4%BD%BF%E7%94%A8html5%E7%9A%84%E6%96%87%E6%A1%A3%E7%B1%BB%E5%9E%8B%E5%A3%B0%E6%98%8E%EF%BC%9A%0A%20%20%20%3C!DOCTYPE%20html%3E%0A%20%20%20IE%E5%B0%B1%E4%BC%9A%E4%BB%A5%E6%A0%87%E5%87%86%E6%A8%A1%E5%BC%8F%E8%A7%A3%E6%9E%90HTML%E6%96%87%E6%A1%A3%E3%80%82%E4%BD%86%E6%98%AF%E6%9F%90%E4%BA%9B%E5%B7%B2%E6%9C%89%E9%A1%B5%E9%9D%A2%E7%94%B1%E4%BA%8E%E5%90%84%E7%A7%8D%E5%8E%9F%E5%9B%A0%E4%B8%8D%E8%83%BD%E5%9C%A8%E6%9C%80%E6%96%B0%E6%A0%87%E5%87%86%E6%A8%A1%E5%BC%8F%E4%B8%8B%E6%AD%A3%E7%A1%AE%E6%98%BE%E7%A4%BA%EF%BC%8C%E5%8F%AA%E6%94%AF%E6%8C%81%E7%89%B9%E5%AE%9A%E7%9A%84%E6%A0%87%E5%87%86%E3%80%82%E9%92%88%E5%AF%B9%E8%BF%99%E7%A7%8D%E6%83%85%E5%86%B5%EF%BC%8CIE%E6%B5%8F%E8%A7%88%E5%99%A8%E6%8F%90%E4%BE%9B%E4%BA%86%E4%B8%80%E7%A7%8D%E5%85%BC%E5%AE%B9%E7%9A%84%E6%96%B9%E6%A1%88%EF%BC%8C%E9%80%9A%E8%BF%87%E8%AE%BE%E7%BD%AEX-UA-Compatible%E6%8C%87%E5%AE%9A%E9%A1%B5%E9%9D%A2%E5%9C%A8IE%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD%E6%B8%B2%E6%9F%93%E6%97%B6%E6%89%A7%E8%A1%8C%E7%9A%84%E6%A0%87%E5%87%86%E3%80%82%0A%20%20%20%E6%AD%A4%E5%A4%96%E8%BF%98%E6%9C%89%E4%B8%80%E7%A7%8D%E5%BE%88%E5%B8%B8%E8%A7%81%E7%9A%84%E8%AE%BE%E7%BD%AE%E5%80%BC%EF%BC%8C%E5%8D%B3%3A%0A%20%20%20%3Cmeta%20http-equiv%3D%22X-UA-Compatible%22%20content%3D%22chrome%3D1%22%2F%3E%0A%20%20%20IE%E5%AE%9A%E4%B9%89%E7%9A%84meta%E4%B8%BA%E4%BB%80%E4%B9%88%E4%BC%9A%E5%87%BA%E7%8E%B0chrome%E5%91%A2%EF%BC%9F%E5%85%B6%E5%AE%9E%E8%AE%BE%E7%BD%AE%E4%B8%BAchrome%3D1%E6%97%B6%EF%BC%8C%E5%88%99%E4%BC%9A%E5%9C%A8IE9%E5%8F%8A%E4%BB%A5%E4%B8%8B%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD%E6%BF%80%E6%B4%BBChrome%20Frame%2C%E5%BC%BA%E5%88%B6IE%E4%BD%BF%E7%94%A8Chrome%20Frame%E6%B8%B2%E6%9F%93%E9%A1%B5%E9%9D%A2%E3%80%82%0A</center> </div>  <div class="p-2"></div> <div class="arcinfo my-3 fs-7 text-center"> <a href='/t/etagid49-0.html' class='tagbtn' target='_blank'>前端</a> </div> <div class="p-2"></div> </div> <div class="p-2"></div>  <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle"><h2 class="fs-4">相关</h2></div> <hr> <div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564641.html">Java web开发：从零到 Run 一个现有的 Spring Boot 前后端分离项目（前端Vue）</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-563694.html">nodejs 一个简单的web服务器，用于前端自己快速测试部署</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-563404.html">深入理解前端跨域方法和原理</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-562684.html">【前端单元测试入门04】Karma</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-559591.html">前端MVC Vue2学习总结（六）——axios与跨域HTTP请求、Lodash工具库</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-559642.html">前端MVC Vue2学习总结（二）——Vue的实例、生命周期与Vue脚手架（vue-cli）</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-557320.html">web前端面试题</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-556313.html">箭头流程图--前端实现</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-555882.html">GMTC 2019-前端夜话《聊聊前端工程师的成长和发展》会后简要总结</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-555986.html">第十一章前端基础</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-555313.html">前端性能优化</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-553590.html">前端开发框架Vue之findIndex() 的使用</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div>   </div>  </div> <div class="col-lg-3 col-12 p-0 ps-lg-2">     <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle pb-2"><h2 class="fs-4"><a href="#">标签</a></h2></div> <div class="clearfix"></div> <ul class="m-0 p-0 fs-7 r-tag"> </ul> <div class="clearfix"></div> </div>  </div> </div> </div> </main> <div class="p-2"></div> <footer> <div class="container-fluid p-0 bg-black"> <div class="container p-0 fs-8"> <p class="text-center m-0 py-2 text-white-50">一品网 <a class="text-white-50" href="https://beian.miit.gov.cn/" target="_blank">冀ICP备14022925号-6</a></p> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6e3dd49b5f14d985cc4c6bdb9248f52b"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"></script> </body> </html>