css——meta标签

最新推荐文章于 2024-03-16 22:56:24 发布

原创最新推荐文章于 2024-03-16 22:56:24 发布 · 1.4k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

web前端专栏收录该内容

62 篇文章

订阅专栏

本文详细介绍了HTML meta标签的用途和各种属性，包括Name和Http-Equiv属性，如Keywords、Description、Robots等，对于搜索引擎优化和页面控制具有重要意义。同时，文章还提到了移动端设备的viewport设置，帮助开发者更好地适配不同设备。

什么？工作好几年却不能熟练使用meta标签？小贝老师教你全方位了解并使用标签！

首先，这个标签应该出现在哪里呢？
meta是html语言head区的一个辅助性标签，位于文档的头部，不包含任何内容。标签的属性定义了与文档相关联的名称/值对。
meta标签提供关于HTML文档的的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词

上面文字中的关键字 “元信息”指的是什么呢？
元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

标签是一个常见的单标签，有三个属性分别是： 1、name 属性提供了名称/值对中的名称，属性值可以是： 2、http-equiv 属性为名称/值对提供了名称。使用带有 http-equiv 属性的标签时，服务器将把名称/值对添加到发送给浏览器的内容头部 3、contnet属性提供了名称/值对中的值。该值可以是任何有效的字符串。注意：content 属性始终要和 name 属性或 http-equiv 属性一起使用。 4、scheme 属性用于指定要用来翻译属性值的方案。此方案应该在由标签的 profile 属性指定的概况文件中进行了定义

下面我们着重针对前三项进行学习：
Name属性的属性值可以如下：

Keywords (关键字)
说明：告诉搜索引擎你网页的关键字是什么。
用法：
Description (网页描述)
说明：Description用来告诉搜索引擎你的网页主要内容。
用法：
Robots (机器人向导)
说明：Robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。Content的参数有all、none、index、noindex、follow、nofollow。默认是all。
用法：
all：文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；(和 “noindex, no follow” 起相同作用)
index：文件将被检索；（让robot/spider登录）
follow：页面上的链接可以被查询；
noindex：文件将不被检索，但页面上的链接可以被查询；(不让robot/spider登录)
nofollow：文件将不被检索，页面上的链接可以被查询。(不让robot/spider顺着此页的连接往下探找)
Author (作者)
　　说明：标注网页的作者或制作组
　　用法：
　　注意：Content可以是：你或你的制作组的名字,或Email
Copyright (版权)
　　说明：标注版权
　　用法：
Generator (编辑器)
　　说明：编辑器的说明
　　用法：
　　注意：Content=“你所用编辑器”
revisit-after (重访)
说明：通知搜索引擎多少天访问一次
用法：

http-equiv属性值如下：
1．Expires（期限）
说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。
用法：
注意：必须使用GMT的时间格式。
2.Pragma(cache模式）
说明：禁止浏览器从本地计算机的缓存中访问页面内容。
用法：
注意：这样设定，访问者将无法脱机浏览。
3.Refresh（刷新）
说明：自动刷新并转到新页面。
用法：；（注意后面的分号，分别在秒数的前面和网址的后面，URL可为空）
注意：其中的2是指停留2秒钟后自动刷新到URL网址。
4.Set-Cookie(cookie设定）
说明：如果网页过期，那么存盘的cookie将被删除。
用法：
注意：必须使用GMT的时间格式。
5.content-Language（显示语言的设定）
用法： html5直接可这样写：

移动端设备常见写法：

<meta name="viewport" content="width=device-width, 
initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<!—视图窗口设置中 `width=device-width` 会导致
 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边  -->

width：宽度（数值 / device-width）（范围从200 到10,000，默认为980 像素）
height：高度（数值 / device-height）（范围从223 到10,000）
initial-scale：初始的缩放比例（范围从>0 到10）
minimum-scale：允许用户缩放到的最小比例
maximum-scale：允许用户缩放到的最大比例
user-scalable：用户是否可以手动缩 (no,yes)
minimal-ui：可以在页面加载时最小化上下状态栏。（已弃用）
如果有不支持viewport的浏览器，需要我们给具体的name属性具体的content内容