首页  新闻动态  文化知识  网络文摘  生活时尚  娱乐休闲  健康频道  外语学习  软件教学  程序设计  独山图片  书店网站 
  程序设计 > Html/Css > 正文
 

meta标签详解

来源:csdn [2023-01-19]   浏览次数:342
描述HTML文档的元数据

<head>
  <meta name="description" content="免费在线教程">
  <meta name="keywords" content="HTML,CSS,XML,JavaScript">
  <meta name="author" content="runoob">
  <meta charset="UTF-8">
</head>


简介
元数据(Metadata)是数据的数据信息
<meta>标签提供了HTML文档的元数据。元数据不会显示在客户端,但是会被浏览器解析。
META元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者及其他元数据。
元数据可以被使用浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他web服务调用。

<meta>标签通常位于head区域内
元数据通常以名称/值对出现
meta有个必须的属性content用于表示需要设置的项的值
如果没有提供name属性,那么名称/值对中的名称会采用http-equiv属性的值
属性
属性 描述
charset charscter_set 定义文档的字符编码(html5新属性)
content text 定义与http-equiv或name属性相关的元信息
http-equiv content-type、default-style、refresh 把content属性关联到http头部
name application-name、author、description、generator、keywords 把content属性关联到一个名称
scheme format/URI html5不支持。定义用于翻译content属性值的格式
这里我们来说一些name、http-equiv属性的值分别有什么作用。

name属性
name属性主要用于描述网页,对应属性是content,以便与搜索引擎机器人查找、分类。

语法
<meta name="参数" content="参数值" />

属性值
Keyword(关键字)
使用:<meta name="keywords" content="meta, html, 标签" />
作用:为搜索引擎提供的关键字列表

Description(简介)
使用:<meta name="description" content="meta标签的介绍和使用讲解" />
作用:description用来告诉搜索引擎你的网站主要内容

robot(机器人向导)
使用:<meta name="robots" content="all | none | index | noindex | follow | nofollow" />
作用:robots告诉搜索引擎哪些页面需要索引,那些页面不需要索引
参数讲解:参数默认为all。

all:文件被检索,且页面上的链接可以被查询
none:文件将不被检索,且页面上的链接不可以被查询
index:文件将被检索
follow:页面上的链接可以被查询
noindex:文件将不被检索,单页面上的链接可以被查询
nofollow:文件将被检索,单页面上的链接不可以被查询
author(作者)
使用:<meta name="author" content="TG, TG@qq.com" />
作用:标注网页的作者

copyright(版权)
使用:<meta name="copyright" content="本网站版权归TG所有"/>
作用:标注版权

generator
使用:<meta name="generator" content="所用的编辑器" />
作用:说明网站采用什么编辑器制作。

revisit-after(重访)
作用:网站重访
使用:<meta name="revisit-after" content="7days"/>

http-equiv
http-equiv类似于HTTP的头部协议,它回应给浏览器一些有用的信息,以帮助正确的精确的显示网页内容。与之对应的属性值为content,content中的内容就是各个参数的变量值。

语法
<meta http-equit="参数" content="参数值" />

属性
expires(期限)
作用:指定网页在缓存中的过期时间。一旦网页过期,必须到服务器上重新传输
使用:<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT"/>
注意:必须使用GMT的时间格式,或者直接设为0(数字表示多久后过期)

Pragma(chche模式)
作用:禁止浏览器从本地计算机的缓存中访问页面内容
使用:<meta http-equiv="Pragma" content="no-cache"/>

Refresh(刷新)
作用:自动刷新并指向新页面
使用:<meta http-equiv="refresh"content="5; url=http://www.baidu.com/" />
5表示5秒后自动刷新,并跳转到指定的URL路径中

window-target(显示窗口的设定)
作用:强制页面在当前窗口以独立页面显示
使用:<meta http-equiv="window-target" content="_top">
可以防止别人在框架里调用你的页面

content-type(显示字符集的设定)
作用:设置页面使用的字符集
使用:<meta http-equiv="content-Type" content="text/html;charset=utf-8"/>

Content-Language(显示语言的设定)
作用:显示语言
使用:<meta http-equiv="Content-Language" content="zh-cn" />

HTML新增属性值
name
viewport
作用:能优化移动浏览器的显示(屏幕的缩放)
使用:<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
参数值:

width viewport的宽度[device-width | pixel_value]width如果直接设置pixel_value数值,大部分的安卓手机不支持,但是ios支持;
height-viewport 的高度 (范围从 223 到 10,000 )
user-scalable [yes | no]是否允许缩放
initial-scale [数值] 初始化比例(范围从 > 0 到 10)
minimum-scale [数值] 允许缩放的最小比例
maximum-scale [数值] 允许缩放的最大比例
apple-mobile-web-app-capable
作用:启动WebApp全屏模式
使用:<meta name="apple-mobile-web-app-capable" content="yes" />
————————————————
版权声明:本文为CSDN博主「庸人°」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/wuxian_wj/article/details/122377019
>>上篇:PHP面向对象详解
>>下篇:已经没有了
 
 
版权所有:独山在线 copyright ©2007-2024 www.dushan.net, All Rights Reserved.
   免责声明:本网转载或链接出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。
   本站为公益性网站,旨在宣传独山,如有侵犯请和我们联系,经查实将及时删除! 工信部备案:黔ICP备07001263号-3