`

meta元素详解

    博客分类:
  • html
阅读更多

html meta的使用详解

1 介绍:

   meta标记看似是HTML语言HEAD区的一个辅助性标签,其实它的作用很大。META标签共有两个属性,它们分别是Http-equiv属性和Name属性。

 

2 name=viewport

  eg:<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

 

  参数解释:

1)、width : 控制viewport的大小,可以指定一个值,如600, 或者特殊的值,如device-width为设备的宽度(单位为缩放为100%的CSS的像素)

 

2)、height : 和width相对应,指定高度

 

3)、initial-scale : 初始缩放比例,页面第一次加载时的缩放比例

 

4)、maximum-scale : 允许用户缩放到的最大比例,范围从0到10.0

 

5)、minimum-scale : 允许用户缩放到的最小比例,范围从0到10.0

 

6)、user-scalable : 用户是否可以手动缩放,值可以是:①yes、 true允许用户缩放;②no、false不允许用户缩放

 

3 meta中的name属性

  Name属性语法格式是:<meta name="参数" content="具体的参数值">  

  

  <!--用以说明生成工具-->

<meta  name="Generator"  content="">     

 <!--向搜索引擎说明你的网页的关键词 说明:Keywords用来告诉搜索引擎你网页的关键字是什么。-->

<meta  name="Keywords"    content=""> 

<!-- 告诉搜索引擎你的站点的主要内容 说明:Description用来告诉搜索引擎你的网站主要内容。-->

<meta name="Description"  content=""> 

<!-- 告诉搜索引擎你的站点的制作的作者 说明:标注网页的作者-->    

<meta  name="Author"    content="你的姓名">

<!--说明:Robots用来告诉搜索机器人需要索引的页面有哪些。Content的参数有All、None、Index、Noindex、Follow、Nofollow。默认是All。 -->

<meta  name="Robots"    content= "all|none|index|noindex|follow|nofollow">

<!--  

设定为all:文件将被检索,且页面上的链接可以被查询;     

设定为none:文件将不被检索,且页面上的链接不可以被查询;     

设定为index:文件将被检索;     

设定为follow:页面上的链接可以被查询;     

设定为noindex:文件将不被检索,但页面上的链接可以被查询;     

设定为nofollow:文件将不被检索,页面上的链接可以被查询。

-->

 

4  meta中的 http-equiv属性

相当于HTTP的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确显示网页内容.

Http-equiv属性语法格式是:<meta http-equiv="参数" content="参数变量值">  

 

<!--设置字符编码和文件格式 说明:设定页面使用的字符集。-->

<meta http-equiv="Content-Type" content="text/html";charset=utf-8">

<!--设置定时刷新 说明:自动刷新并指向新页面。-->

<meta http-equiv="Refresh"  content="2;url=http://.......> 注意:其中的"2"是指停留2秒钟后自动刷新到URL网址,可以更改,但建议不要改得太大。

 

<!-- 告诉浏览器不要缓存页面 说明:禁止浏览器从本地计算机的缓存中访问页面内容。-->

<meta http-equiv="Pragma"   content="no-cache">

<! -- //告诉浏览器不要缓存页面-->

<meta http-equiv="cache-control" content="no-cache">//告诉浏览器不要缓存页面

<!--禁用浏览器缓存此页面 说明:可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。-->

<meta http-equiv="expires" content="0"> 

<meta http-equiv="expires" content="Fri, 12 Jan 2001 18:18:18 GMT">   注意:必须使用GMT的时间格式。

 

<!--设置ie的文档兼容模式,设置IE7+的浏览器以IE7的兼容模式查看页面-->

<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.

注意:必须显示在网页中除 title 元素和其他 meta 元素以外的所有其他元素之前

 

5  更多的meta和link

<meta charset="UTF-8">

 

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 优先使用IE最新版本和 Chrome -->

<meta name="renderer" content="webkit|ie-comp|ie-stand"> <!-- 360 浏览器内核控制 -->

<!--

content的取值为webkit,ie-comp,ie-stand之一,区分大小写,分别代表用webkit内核,IE兼容内核,IE标准内核。

若页面需默认用极速核,增加标签:<meta name="renderer" content="webkit"> 

若页面需默认用ie兼容内核,增加标签:<meta name="renderer" content="ie-comp"> 

若页面需默认用ie标准内核,增加标签:<meta name="renderer" content="ie-stand">

-->

 

<!-- width=device-width 会导致 iPhone 5 添加到主屏后以 WebAPP 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->

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

 

<meta name="apple-mobile-web-app-title" content="标题"> <!-- 添加到主屏时的标题 -->

 

<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 是否启用 WebAPP 全屏模式 -->

 

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!-- 状态条颜色 -->

 

<meta name="format-detection" content="telephone=no" /> <!-- 屏蔽数字自动识别为电话号码 -->

 

<!-- favicon 图标 -->

<link type="image/x-icon" rel="icon" href="http://static.example.com/favicon.ico"/>

<link type="image/x-icon" rel="shortcut icon" href="http://static.example.com/favicon.ico"/>

<link type="image/x-icon" rel="bookmark" href="http://static.example.com/favicon.ico"/>

 

<!-- iOS 图标 begin -->

<!--默认 57x57 像素-->

<link rel="apple-touch-icon-precomposed" href="http://wanke.etao.com/assets/img/icon/57/apple-touch-icon-57x57-precomposed.png" />

<!--iPad 1 72x72 像素-->

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://wanke.etao.com/assets/img/icon/72/apple-touch-icon-72x72-precomposed.png" />

<!--iPhone 4 114x114 像素-->

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://wanke.etao.com/assets/img/icon/114/apple-touch-icon-114x114-precomposed.png" />

<!-- iOS 图标 end -->

 

<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->

<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->

 

<!-- SEO 优化 -->

<meta name="description" content="" /> <!-- 页面描述 -->

<meta name="keywords" content=""/> <!-- 页面关键词 -->

<title>页面标题</title>

 

<!-- iOS 应用启动界面设置 begin -->

<!-- iPad Landscape – 1024 x 748 -->

<link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash-screen-1024x748.png" />

<!-- iPad Portrait – 768 x 1004 -->

<link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash-screen-768x1004.png" />

<!-- iPhone/iPod Touch Portrait – 320 x 480 (standard resolution) -->

<link rel="apple-touch-startup-image" href="img/splash-screen-320x480.png" />

<!-- iPhone/iPod Touch Portrait – 640 x 960 pixels (high-resolution) -->

<link rel="apple-touch-startup-image" sizes="640x960" href="img/splash-screen-640x960.png" />

<!-- iOS 应用启动界面设置 end -->

 

 

6 国产浏览器高速模式

国内浏览器厂商一般都支持兼容模式(即 IE 内核)和高速模式(即 webkit 内核),不幸的是,所有国产浏览器都是默认使用兼容模式,

这就造成由于低版本 IE (IE8 及以下)内核让基于 Bootstrap 构建的网站展现效果很糟糕的情况。

幸运的是,国内浏览器厂商逐渐意识到了这一点,某些厂商已经开始有所作为了!

 

将下面的 <meta> 标签加入到页面中,可以让部分国产浏览器默认采用高速模式渲染页面:

<meta name="renderer" content="webkit">

目前只有360浏览器支持此 <meta> 标签。希望更多国内浏览器尽快采取行动、尽快进入高速时代!

分享到:
评论

相关推荐

    网页设计中meta详解

    它是 HTML5 文档类型中的一个元素,用于提供关于文档的各种元信息,这些信息包括网页的字符编码、描述、关键词、重定向、刷新等。`&lt;meta&gt;` 标签通常位于 `&lt;head&gt;` 标签内,它不直接向用户展示内容,但对搜索引擎优化...

    iot组态编辑器开发 基于meta2D.js

    `meta2D.js`的核心功能是提供一套API来创建、编辑和管理2D图形元素,如形状、连接线、文本等。开发者可以利用这个库构建可交互的图形界面,例如在IoT场景中设计和配置设备布局、数据流路径等。它支持动态更新、事件...

    meta_insert.rar_meta_insert_meta_insert.rar_zencart

    《ZenCart Meta 插件详解:提升网站SEO与用户体验的关键》 ZenCart 是一款流行的开源电子商务平台,以其灵活的自定义性和丰富的功能受到许多在线商家的青睐。在 ZenCart 的运营中,优化产品页面的元数据(Meta Data...

    JS获取元素多层嵌套思路详解

    如果一段html嵌套过多,在js中获取还是比较麻烦的,我写了...meta charset=UTF-8&gt; &lt;title&gt;元素多层嵌套,JS获取问题&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;span&gt;span &lt;span&gt;span &lt;span&gt;1 &lt;spa

    html中meta标签及用法详解

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

    QML范例详解.doc

    QML(Qt Meta Language or Qt Modeling Language)是一种基于 Qt 框架的declarative programming language,专门为嵌入式设备设计。其主要特点是使用简洁的语法描述用户界面,具有高效、灵活和可扩展性。 在本文中...

    annotation详解

    【标题】:注解(Annotation)详解 注解(Annotation)是Java编程语言中的一个重要特性,自Java 5版本引入,它提供了一种安全的方法来将元数据与代码关联。元数据是关于数据的数据,可以用来提供程序的额外信息,如...

    【JavaScript源代码】JavaScript offsetParent案例详解.docx

    JavaScript offsetParent案例详解  1. offsetParent定义:那么offsetParent就是距离该子元素最近的进行过定位的父元素(position:absolute relative fixed),如果其父元素中不存在定位则offsetParent为:body元 ...

    web前端工程-html5详解.docx

    Web 前端工程 - HTML5 详解 HTML5 是当前 Web 开发的潮流技术之一,它是一种标记语言, used to create structured documents on the web. 作为一名前端工程师,掌握 HTML5 是非常必要的。下面我们将详细介绍 ...

    html5表单及新增的改良元素详解

    XML/HTML Code复制内容到剪贴板 &lt;!... &lt;...  &lt;head&gt;  ...meta charset=UTF-8&gt;...–表单内元素的form属性:为元素指定一个form属性,属性值为该表单的id–&gt;  &lt;form id=testform&gt; 

    meta标签在移动平台开发中的应用详解

    对于桌面平台web布局中大家对meta标签再熟悉不过了,它永远位于 head 元素内部,对做SEO的朋友一定对meta有种特殊的感情吧,今天我们就来说说移动平台的meta标签,在移动平台meta标签究竟有哪些神奇的功效呢?...

    gridster插件详解

    **网格布局系统——Gridster 插件详解** 在前端开发中,尤其是在构建可自定义、响应式的用户界面时,网格布局系统起着至关重要的作用。Gridster 是一款强大的JavaScript插件,它允许开发者创建可拖放的网格布局,...

    Tomcat目录结构配置详解

    **Tomcat目录结构配置详解** Tomcat是一款广泛使用的开源Java Servlet容器,它是Apache软件基金会的Jakarta项目的一部分。深入理解Tomcat的目录结构对于优化服务器性能、管理应用程序以及进行安全配置至关重要。...

    实验1.pdf

    二、HTML 元素详解 1. `&lt;head&gt;` 元素:用于定义 HTML 文档的头部信息,例如 `&lt;title&gt;`、`&lt;meta&gt;` 等。 2. `&lt;body&gt;` 元素:用于定义 HTML 文档的主体内容。 3. `&lt;p&gt;` 元素:用于定义一个段落。 4. `&lt;b&gt;` 元素:用于...

    详解js删除数组中的指定元素

    本篇文章将会给大家介绍两种删除数组中的指定元素的方式,分别为: 1、单独定义一个的函数,通过函数来删除指定数组元素。...meta charset=UTF-8&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=demo

    HTML and CSS 详解

    2. `&lt;head&gt;`:包含元数据,如字符集设置(`&lt;meta charset="UTF-8"&gt;`)和页面标题(`&lt;title&gt;`)。 3. `&lt;body&gt;`:实际的网页内容所在之处。 4. `&lt;h1&gt; to &lt;h6&gt;`:标题标签,分别代表一级到六级的标题。 5. `&lt;p&gt;`:段落...

    css\html语法详解

    3. **头部信息**:`&lt;head&gt;` 包含元信息,如字符集设置`&lt;meta charset="UTF-8"&gt;`。 4. **主体内容**:`&lt;body&gt;` 包含可见的网页内容。 5. **标题**:`&lt;h1&gt;`到`&lt;h6&gt;` 表示不同级别的标题。 6. **段落**:`&lt;p&gt;` 用于创建...

    [Java.Web培训视频]_001.HTML常见标签深入详解

    `&lt;meta&gt;`标签提供元数据,例如字符编码(`charset="UTF-8"`)或描述(`name="description"`)。 3. 内容标签:`&lt;p&gt;`用于创建段落,`&lt;h1&gt;`到`&lt;h6&gt;`表示六级标题,` `插入换行,`&lt;strong&gt;`强调文本,`&lt;em&gt;`表示...

    详解vue添加删除元素的方法

    meta charset="UTF-8"&gt; &lt;title&gt;vue实例:添加删除元素r&lt;/title&gt; &lt;style type="text/css"&gt; .form-group{ margin:10px; } .form-group&gt;label{ display: inline-block; width: 5rem; ...

Global site tag (gtag.js) - Google Analytics