Html中meta标签的用法及viewport属性简介

最新推荐文章于 2024-09-10 15:45:29 发布

Summer_15

最新推荐文章于 2024-09-10 15:45:29 发布

阅读量2.6k

点赞数

分类专栏：学习总结 HTML 文章标签： html meta viewport

本文链接：https://blog.csdn.net/Summer_15/article/details/67018458

版权

学习总结同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

HTML

4 篇文章 0 订阅

订阅专栏

引：来自于牛客网（https://www.nowcoder.com）的一道习题：

以下位于<head>间的代码片段是做什么用的？

A、使得页面编码符合要求；

B、表示支持响应式设计；

C、支持正常的绘制和缩放；

D、表示针对滚屏进行适当的适配。

一、meta标签的定义

二、meta标签的用法

meta标签是html语言head区的一个辅助性标签，它一般位于<head>标签和<title>标签之间，提供用户不可见的信息。meta标签通常用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie；它可以用于鉴别作者，设定页面格式，标注内容提要和关键字；还可以自动刷新并且指向新的页面，实现网页转换时的动态效果以及控制网页显示的窗口等等。

meta标签的两大属性：HTTP标题信息（HTTP-EQUIV）和页面描述信息（NAME）。下面分别来介绍：

1、HTTP-EQUIV属性

HTTP-EQUIV属性其实就类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。与之对应的时content属性，content中的内容就是各个参数的变量值。meta标签的HTTP-EQUIV属性的语法格式如下：

http-equiv属性的几种常见参数：

（1）content-Type属性（用于显示字符集的设定）

语法：

注：信息参数的取值表示页面所用的编码类型，当你浏览一些国外的站点时，浏览器会提示你要正确显示该页面需要下载xx语支持。这个功能就是通过读取HTML页面META标签的Content-Type属性而得知需要使用哪种字符集显示该页面的。如果系统里没有装相应的字符集，则浏览器就提示下载。常见的几种类型具体如下：

信息参数为GB2312，编码类型是简体中文，

信息参数为BIG5，编码类型是繁体中文，

信息参数为iso-2022-jp，编码类型是日文，

信息参数为iso-8859-1，编码类型是英文，

信息参数为ks_c_5601，编码类型是韩文，

信息参数为UTF-8，编码类型是世界通用的语言编码。

（2）content-language属性（用于显示语言的设定）

语法：

注：常见语言代码类型：zh-cn表示中文，en表示英文，fr表示标准法语，ja表示日语，ko表示朝鲜语等。

（3）content-script-Type属性（用于指明页面中脚本的类型）

语法：

注：W3C网页规范，可以不加，HTML5规定默认脚本类型就是javascript。

（4）Refresh（刷新）

语法：

注：让网页多长时间刷新自己，并指向新的网页，例句中的10是指命令网页十秒后自动刷新至新的URL。

（5）Expires（期限）

语法：

注：用于设定网页在缓存中的过期时间，一旦网页过期，则必须到服务器上重新调阅；必须使用GMT时间格式；也可将content直接设置为0。

（6）Window-target（显示窗口的设定）

语法：

注：该设定用于强制当前窗口以独立页面显示；这个属性是用来防止别人在框架里调用你的页面。

Content选项：_blank、_top、_self、_parent

-blank 在新窗口显示

-top 当前整个窗口显示

-self 当前容器显示，比如框架嵌套

-parent 父容器显示，比如框架嵌套。

（7）Page-Enter、Page-Exit （进入与退出）

在IE5.5及以上版本的浏览器中，增加了页面过渡效果。

语法：

http-equiv 作用很多，这里的值为 Page-Enter 是指在页面进入的时候发生,其他值还有：

Page-Enter：进入页面 Page-Exit：离开页面 Site-Enter：进入网站 Site-Exit：离开网站

content 当然就是内容，这里表示页面过渡的效果设置，这里的两个属性分别表示为：

Duration：过渡速度 Transition：可选项，整数值，设置或检索转换所使用的方式，具体数值代表类型可自行查询

（8）Imagetoolbar（显示图片工具栏）

语法：

注：true表示显示图片工具栏。false表示不显示。

（9）Set-Cookie （cookie设定）

语法：

注：浏览器访问某个页面时会将它存在缓存中，下次再次访问时就可从缓存中读取，以提高速度。当你希望访问者每次都刷新你广告的图标，或每次都刷新你的计数器，就要禁用缓存了。通常HTML文件没有必要禁用缓存，对于ASP等页面，就可以使用禁用缓存，因为每次看到的页面都是在服务器动态生成的，缓存就失去意义。如果网页过期，那么存盘的cookie将被删除。必须使用GMT的时间格式。

（10）Pragma(cache模式)

语法：

注：禁止浏览器从本地机的缓存中调阅页面内容。网页不保存在缓存中，每次访问都要刷新页面。这样设定，访问者将无法脱机浏览。

（11）Cache-Control（指定请求和响应遵循的缓存机制）

Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached，响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。各个消息中的指令含义如下：

Public指示响应可被任何缓存区缓存

Private指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效

no-cache指示请求或响应消息不能缓存

no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。

max-age指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应

min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应

max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。

2、Name属性

name属性主要用于描述网页，与之对应的content属性值指定实际内容，主要是为了搜索引擎机器人查找信息和分类信息所用。

语法：

Name属性的参数主要有以下几种：

（1）Keywords（关键字）

语法：

注：Keywords是用来告诉搜索引擎你的网页的关键词是什么。比如目前所在的这个网页搜索关键词就是：Html，meta标签，viewport等等。

（2）Description (简介)

语法：

注：Description用来告诉搜索引擎你的网页的主要内容。比如当前页面的主要内容就是html中meta标签的属性总结及用法等。

（3）Robots (机器人向导)

语法：

注：Robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。Content的参数有all、none、index、noindex、follow、nofollow。默认是all。许多搜索引擎都通过放出robot/spider搜索来登录网站，这些robot/spider就要用到meta元素的一些特性来决定怎样登录。

具体参数特性如下：

信息参数为all：文件将被检索，且页面上的链接可以被查询；

信息参数为none：文件将不被检索，且页面上的链接不可以被查询；

信息参数为index：文件将被检索；

信息参数为follow：页面上的链接可以被查询；

信息参数为noindex：文件将不被检索，但页面上的链接可以被查询；

信息参数为nofollow：文件将被检索，但页面上的链接不可以被查询；

（4)Author (作者)

语法：

注：标注网页的作者或制作组。Content可以是：你或你的制作组的名字，或是Email。

（5）Copyright (版权)

语法：

注：标注网站的版权信息。

（6）Generator (编辑器)

语法：

注：标注你的网站是采用什么软件制作的。

（7）revisit-after (重访)

语法：

注：Revisit-after代表网页重访，7days代表7天，以此类推。

三、理解viewport

1、viewport的概念

viewport是HTML5新增的tag，它针对于移动端浏览器网页显示有着非常强大的优势。手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。viewport最初是苹果公司为自己移动端的Safari浏览器提出的特性，让网页开发者来控制 viewport 的大小和缩放，后来渐渐体现出其功能的优势性，安卓端和windowsphone端也纷纷效仿，足见viewport的强大功用。

2、viewport的用法

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放，值为“no”或“yes”，也可为“0”或“1”。

注：width和height设置的宽度和高度都是指“layout viewport”的值，而不是“visual viewport”。下面介绍关于两种viewport的重要区别。

3、“layout viewport”&“visual viewport”

layout viewport：它是指网页的所有内容，它可以全部或者部分展示给用户，它的宽度一般是会大于或等于浏览器可视宽度的；

visual viewport：它是指当前显示，你可以拖动或者放大缩小网页，也即浏览器可视区域的大小。

下图可明确说明二者的区别：

（图片来源：http://blog.csdn.net/qq_16339527/article/details/52996316）

所以以下代码：

作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。

需要注意的是，在CSS中的1px并不等于设备的1px，在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。

关于viewport，还有许多值得我们探究的地方，本文由于篇幅限制，仅做基础说明。

综上所述，引题中的正确答案为（C）选项。

参考博文：

http://www.haorooms.com/post/html_meta_ds

http://www.cnblogs.com/2050/p/3877280.html