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

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

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

    标准的meta名称包括application-name、author、description、generator等。
        示例代码：
    <meta name="keywords" content="british,typeface,font,fonts"/>

    其中keywords和description这两个名称的使用率最高，是搜索引擎优化的主要手段之一，推荐读者使用。

  • http-equiv属性和content属性组合，设置特定的http指令;
      其中content-type、default-style和refresh已经确定,content-language和set-cookie还未正式确定.
    此类型meta应该谨慎使用。不推荐使用<meta http-equiv="refresh" content="300"/>,某些搜索引擎遇到此meta时会停止解析 页面剩余的部分。<meta http-equiv="default-style">在实际的场景中很少使用

  • charset属性,设置页面字符编码。
    此属性提供了保存和传输文档的编码格式。
    <meta charset="utf-8">
    等价于
    <meta http-equiv='Content-Type' content='Type=text/html; charset=utf-8'>
    但是第一种形式更简洁好记，并且得到了所有主流浏览器的支持，所有不存在浏览器兼容问题。为 了让浏览器能准确识别编码格式，务必在<title>标签之前设置charset,保证标题能正确显示。

    除了W3C定义的规范中定义的这些meta之外，还有大量的自定义meta类型。这些meta类型主要是由互联网公司或者浏览器厂商为了实现特定的功能而定制的。这些自定义的meta不能通过W3C提供的标准校验，但并不是说这些meta不标准。介绍一些常用的meta

    设置IE浏览器的兼容模式
    从IE8浏览器开始支持一种设置页面兼容模式的meta类型，示例代码如下:
    <meta http-equiv="X-UA-Compatible" content="IE=8"/>
    根据html规范，浏览器是按照页面开头定义的文档类型来解析页面的。例如，使用html5的文档类型声明：
    <!DOCTYPE html>
    IE就会以标准模式解析HTML文档。但是某些已有页面由于各种原因不能在最新标准模式下正确显示，只支持特定的标准。针对这种情况，IE浏览器提供了一种兼容的方案，通过设置X-UA-Compatible指定页面在IE浏览器中渲染时执行的标准。
    此外还有一种很常见的设置值，即:
    <meta http-equiv="X-UA-Compatible" content="chrome=1"/>
    IE定义的meta为什么会出现chrome呢？其实设置为chrome=1时，则会在IE9及以下浏览器中激活Chrome Frame,强制IE使用Chrome Frame渲染页面。

%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

Html头部meta标签的更多相关文章

  1. 浏览器兼容html头部<meta>标签主要内容详情

    <!DOCTYPE html> <head> <meta http-equiv="X-UA-Compatible" content="IE= ...

  2. 网页头部meta标签

    <meta http-equiv="content-Type" content="text/html;charset=UTF-8">    //设置 ...

  3. H5各种头部meta标签的功能

    <!DOCTYPE html>  H5标准声明,使用 HTML5 doctype,不区分大小写 <head lang=”en”> 标准的 lang 属性写法 <meta ...

  4. H5各种头部meta标签功能大全

    <!DOCTYPE html>  H5标准声明,使用 HTML5 doctype,不区分大小写 <head lang=”en”> 标准的 lang 属性写法 <meta ...

  5. H5头部meta标签的作用

    <!DOCTYPE html>  H5标准声明,使用 HTML5 doctype,不区分大小写 <head lang=”en”> 标准的 lang 属性写法 <meta ...

  6. html meta标签属性与内容

    meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言, ...

  7. meta标签中的http-equiv属性使用介绍（转载）

    meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言, ...

  8. Meta标签详解(HTML JAVASCRIPT)

    Meta标签详解,在网上转的,希望对大家有用 您的个人网站即使做得再精彩,在“浩瀚如海”的网络空间中,也如一叶扁舟不易为人发现,如何推广 个人网站,人们首先想到的方法无外乎以下几种: ● 在搜索引擎中 ...

  9. 移动web开发—页面头部 META 总结

    meta指元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. 标签位于文档的头部,不包含任何内容. 标签的属性定义了与文档相关联的名称/值对. ...

随机推荐

  1. 从0系统学Android-2.1Activity的使用

    更多精品文章分类 第二章:先从看的到的入手-Activity 上一章成功创建了自己的第一个项目.这一章从页面入手,来进行学习. 2.1 Activity 是什么 Activity 是一种可以包含用户界 ...

  2. tomcat配置通过域名访问项目

    tomcat配置通过域名访问项目,是修改conf/server.xml里面的配置信息实现.具体如下: (1)修改Connector节点的port属性值 <Connector port=" ...

  3. CentOS7使用docker搭建Solo博客

    一.获取最新镜像 docker pull b3log/solo 二.启动容器 使用 MySQL 先手动建库(库名 solo,字符集使用 utf8mb4,排序规则 utf8mb4_general_ci) ...

  4. canopy聚类算法的MATLAB程序

    canopy聚类算法的MATLAB程序 凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 1. canopy聚类算法简介 Canopy聚类算法是一个将对象分组到 ...

  5. phpstudy配置虚拟域名

    之前有一篇使用xampp配置虚拟域名,但是不同公司使用的集成环境不同,(xampp是我自己用的,别误解(><) !)这次使用的phpstudy,相比较而言,phpstudy更简单一点 首先 ...

  6. Jenkins显示reportng测试报告

    在搭建Jenkins自动化测试平台后,我们点击立即构建就可以运行测试用例了,但没有地方查看测试报告,现在写这篇博客总结怎么在Jenkins显示reportng测试报告. 在maven项目配置repor ...

  7. linux shell脚本命令

    sort命令 sort #按照字典序排序 sort -n #以数值来排序,避免10比2小的情况 sort -k #如果文件有多列,指定排序的列 sort -r #逆序排列 uniq 命令 sort t ...

  8. Single-SPA 前端微服务化 动态路由多系统合并

    每日优鲜供应链前端团队微前端改造 动态注册路由,然后根据路由判断加载子项目js资源.子项目webpack需要设置externals,然后用systemjs接管external的包加载 webpack ...

  9. 【2019.8.9 慈溪模拟赛 T2】摘Galo（b）（树上背包）

    树上背包 这应该是一道树上背包裸题吧. 众所周知,树上背包的朴素\(DP\)是\(O(nm^2)\)的. 但对于这种体积全为\(1\)的树上背包,我们可以通过记\(Size\)优化转移时的循环上界,做 ...

  10. 【转】 AOP（面向切面编程）、Filter（过虑器）、Interceptor（拦截器）

    AOP(面向切面编程) 面向切面编程(AOP是Aspect Oriented Program的首字母缩写) ,我们知道,面向对象的特点是继承.多态和封装.而封装就要求将功能分散到不同的对象中去,这在软 ...