meta元素详解

小鱼儿 2022-04-06 03:00 200阅读 0赞

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="">     *

* *

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

**

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

*    *

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

**

*<!--  *

*设定为all：文件将被检索，且页面上的链接可以被查询；     *

*设定为none：文件将不被检索，且页面上的链接不可以被查询；     *

*设定为index：文件将被检索；     *

*设定为follow：页面上的链接可以被查询；     *

*设定为noindex：文件将不被检索，但页面上的链接可以被查询；     *

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

*-->*

**4  meta中的 http-equiv属性**

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

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

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

**

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

<!--

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

\-->

**6 国产浏览器高速模式**

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

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

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

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

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

meta元素详解

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 meta 详解，html5 meta 标签日常设置

相关 HTML meta详解

相关 HTML之——<meta> 元素是什么

相关 html中meta标签详解

相关 Meta http-equiv属性详解

相关 Meta http-equiv属性详解

相关 HTML Meta http-equiv属性详解

相关 meta元素详解

相关 Django模型之Meta选项详解

相关 meta 标签的属性详解