1.定义

meta元素提供页面的原信息,位于文档头部

2、必须的属性

content属性

该属性提供名称/值对中的值,使用要与http-equiv或name属性一起使用

3、可选的属性

3.1、http-equiv 属性

对应的值有:content-type、expires、refresh、set-cookie

该属性把content属性关联到http头部,提供名称/值对中的名称,指示服务器在发送实际文档之前要传送给浏览器MIME文档头部包含名称/值对

该属性对应的值还有X-UA-Compatible,是ie8新加的一个设置,对于ie8以下的浏览器是不识别的,通过它可以指定网页的兼容模式

<meta http-equiv="X-UA-Compatible" content="IE=7">
#以上代码告诉IE浏览器,无论是否用DTD声明文档标准,IE8/9都会以IE7引擎来渲染页面。
<meta http-equiv="X-UA-Compatible" content="IE=8">
#以上代码告诉IE浏览器,IE8/9都会以IE8引擎来渲染页面。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
#以上代码告诉IE浏览器,IE8/9及以后的版本都会以最高版本IE来渲染页面。
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
<meta http-equiv="X-UA-Compatible" content="IE=7,9">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
#以上代码IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame.

服务器向浏览器发送文档时,至少要发送一个:content-type:text/html,告诉浏览器准备接受一个html文档

3.2、name属性

对应的值有:author、description、keywords、generator、revised、others

该属性把content关联到一个名称,提供名称/值对中的名称

<meta name="keywords" content="HTML,ASP,PHP,SQL">

这样的meta标签有助于搜索引擎对文档进行分类

name的值为viewport时,可以指定用户是否可以缩放web页面

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

width:控制 viewport 的宽度,可以是一个定值,如 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
maximum-scale:允许用户缩放到的最大比例。
minimum-scale:允许用户缩放到的最小比例。
user-scalable:用户是否可以手动缩放 

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

在iPhone 手机上默认值是(电话号码显示为拨号的超链接),若将telephone=no,则手机号码不被显示为拨号链接  

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

网站开启对web app程序的支持

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

在web app应用下状态条(屏幕顶部条)的颜色

默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)

3.3、scheme属性

用于翻译content属性值的格式

html中的meta标签的更多相关文章

  1. HTML中的<meta>标签的使用

    HTML中<meta>标签的使用 在我们制作的网页中,要是想让它能够让更多的人去访问,最好的方法就是通过搜索引擎来找到你的网址,于是需要你的网页可以有关键词能够让搜索引擎来识别,于是HTM ...

  2. 手机页面中的meta标签

    以前看书的时候,觉得meta标签就只有一个charset对于我来说是有用的.前段时间有个学弟让我写个手机版的网页,我才知道原来meta标签有那么多学问. meta指元素可提供有关页面的元信息(meta ...

  3. HTML 中的meta标签中的http-equiv与name属性使用介绍

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

  4. 浅析网站开发中的 meta 标签的作用

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  5. javaWeb学习总结(4)- HTML 关于head中的<meta>标签

    关于<meta> 标签 <meta>标签出现在网页的标题部分,这些信息并不会出现在浏览器页面的显示之中,只会显示在源代码中.也就是在...当中. 主要用途是设置网页语言的编码方 ...

  6. html中的meta标签是什么?有哪些属性?

    meta标签介绍 meta标签是HTML语言head区域的一个辅助性标签,常用于定义页面的说明,关键字,最后修改的日期和其他的元数据.这些元数据将服务于浏览器,搜索引擎和其他网络服务. meta标签的 ...

  7. HTML中的Meta标签详解

    emta标签的组成:meta标签分两大部分:HTTP-EQUIV和NAME变量. HTTP-EQUIV:HTTP-EQUIV类似于HTTP的头部协议,它回应给浏览器一些有用的信息,以帮助正确和精确地显 ...

  8. Android在代码中获取meta标签内容

    最近写SDK需要获取<meta>标签的值,网上资料很多~分享是件好事~我很快就找到了相关资料. 下面贴上代码: ApplicationInfo appInfo = null; String ...

  9. JSP页面中的Meta标签详解

    Meta标签详解 相信大家在平时开发中最常接触的页面就是html和jsp了,可在这两个页面中有一个Meta标签你天天都会看见,可是你真的了解这个标签的一些其他用处吗?今天给大家介绍一些该标签的其他应用 ...

随机推荐

  1. python获取本地时间

    python本地时间 import time # 格式化成2016-03-20 11:45:39形式 now = time.strftime("%Y-%m-%d %H:%M:%S" ...

  2. Jmeter系列-webdriver代码范例

    范例 WDS.sampleResult.sampleStart() try{ //打开博客首页 WDS.browser.get('http://xqtesting.blog.51cto.com') / ...

  3. C# 饼形图

    原文链接:https://www.cnblogs.com/icyJ/archive/2012/10/08/Chart_Pie.html 需要实现的目标是: 1.将数据绑定到pie的后台数据中,自动生成 ...

  4. Java模块化开发

    包配置, 静态资源, 视图解析器, 数据库,

  5. TCP/IP协议与OSI协议

    OSI协议是一个理想化的协议,它把网络传输过程分为七层模型,以达到形象化的理解的效果,在实际应用中没有被使用.TCP/IP协议可以看作是它的简化版,是目前应用最广泛的网络协议,许多协议都是以它为基础而 ...

  6. 【Json】C#格式化JSON字符串

    很多时候我们需要将json字符串以 {     "status": 1,     "sum": 9 }这种方式显示,而从服务端取回来的时候往往是这样 {&quo ...

  7. HTML5可用的css reset

    html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, ci ...

  8. linux文件服务器:samba服务器

    windows上,需要和linux虚拟机进行方便的文件交互,总结一下遇到的问题. 1.samba简介 windows和windows之间共享文件可以用“网上邻居”,linux和linux间共享文件用 ...

  9. windows 架设SVN服务器

    想完整走一遍svn布置及使用流程,试完整理了一下: step 1:下载安装 1.安装SVN服务器,到http://subversion.apache.org/packages.html 上下载wind ...

  10. 三个月死磕Python是种什么样的体验?

    3个月的死磕Python后,参加「 楼+ Python实战 · 第4期 」的学员们感想如何?下面带来他们的真实评价. 作为实验楼的网红课程——「 楼+ Python实战 」已经走过了第四期,经过了三个 ...