您的当前位置:首页html的<meta>用法_html/css_WEB-ITnose

html的<meta>用法_html/css_WEB-ITnose

2023-11-27 来源:华拓教育

meta标签提供关于HTML文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。 元素可提供相关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。 标签位于文档的头部,不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。

1, name属性的设置: 1).keywords:告诉搜索引擎,把content属性中填入的内容作为网页的关键字添加到搜索引擎中,content属性中的多个关键字可以使用逗号分隔,例如:

  

2),Description:搜索引擎使用content属性中的设置信息未做对网站的描述 3),Robots:告诉搜索引擎释放的robot或spider,根据content属性中的设置来决定采取什么样的行动方式。 Content的值可以是: Index 可以检索和收录此页,这是默认值。 Noindex 是不让robot/spider检索和收录此页。 Follow 允许robot,spider顺着此页的超级链接往下探找。 Nofollow 是不让robot,spider顺着此页的超级链接往下探找。 All 告诉robot,spider可以检索和收录此页,而且可以顺着此页的超链接往下探找。 None 是既不让检索和收录此页,也不让robot,spider顺着此页顺着探找 4),author :用于说明网页的作者,content中填入网页的作者。 5)copyright:用于版权声明,content中填入你的版权声明。 6)generator:用于说明编辑此页所使用的工具的名称,content填入网页的编辑软件 2, http-equiv属性的设置: 1),content-type用于说明网页内容的MIME类型以及文本内容所使用的字符集编 码。

2)Refresh用于告诉浏览器指定的某一时间段后自动对页面进行刷新,

  时间单位是; 秒 //也可以让浏览器在一定时间后跳到其他网页,时间值与URL之间用分号(;)分隔  

3):Expires用于设定网页的到期时间,超过了content属性中指定的日期浏览器必须到服务器上重新下载该网页。注意content属性中的设置值必须使用GMT时间格式

 CONTENT设置为0,可以禁止浏览器使用缓存页面

4):Windows-Target强制页面在某个窗口中显示。要防止自己的网页别别人当作一个frame页面调用,可以使用

5);Pragma用于设定禁止浏览器在本地计算机上缓存次页面,content属性设置为 no-cache

6)Page-Enter:设置浏览器的特殊显示效果

 Duration表示滤镜特效的持续时间(单位:秒)Transition滤镜类型。表示使用哪种特效,取值为0-23:0 矩形缩小1 矩形扩大2 圆形缩小3 圆形扩大4 下到上刷新5 上到下刷新6 左到右刷新7 右到左刷新8 竖百叶窗9 横百叶窗10 错位横百叶窗11 错位竖百叶窗12 点扩散13 左右到中间刷新14 中间到左右刷新15 中间到上下16 上下到中间17 右下到左上18 右上到左下19 左上到右下20 左下到右上21 横条22 竖条23 以上22种随机选择一种

7):Page-Exit 设置浏览器离开某个网页时,所采取的特殊显示效果

版权声明:本文为博主原创文章,未经博主允许不得转载。

小编还为您整理了以下内容,可能对您也有帮助:

html中怎么<meta>标签里面的属性是什么意思?

<meta name="viewport" content="width=device-width, initial-scale=1.0">

meta是html语言head区的一个辅助性标签,位于文档的头部,不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。

在你的问题

首先 name="viewport" 该属性仅对移动端有效对PC端是无效的

width=device-width

定义该网页的视口大小宽度为:device-width 【用户所使用设备的宽度】

initial-scale=1.0

意思是指视口缩放比例为1.0,也就是不缩放。

视口可以理解为设备或文档对象的逻辑尺寸。

前端ppk大神认为,移动设备上有三个viewport(视口)。

但可以换句话说,可以缩放的浏览器中都具有三个视口概念,分别是 布局视口、视觉视口、理想视口。

但在iphone和ipad上,无论是竖屏还是横屏,device-width宽度都是竖屏时理想视口的宽度。

当只设置width属性值,而不指定initial-scale属性值时,大多数浏览器会自动缩放。

如果width属性值大于理想视口宽度,则视觉视口放大为width的值,计算得到scale小于1.0;

如果width属性值小于理想视口宽度,则视觉视口缩小为width的值,计算得到scale大于1.0;

这么做的目的是让设备屏幕把完整的页面呈现出来(页面横向塞满屏幕,计算得到scale)

设置width而不指定initial-scale时,设置minimum-scale = 1.0会能够阻止浏览器放大视觉视口,设置maximum-scale = 1.0 能够阻止浏览器缩小视觉视口。(这里有点绕,可以联想下放大镜)

这里不做介绍了。可以参看一篇文章网页链接

希望对你有所帮助~记得采纳

html5 里面的meta有什么用

meta属性在HTML中占据了很重要的位置。如:针对搜索引擎的SEO,文档的字符编码,设置刷新缓存等。虽然一些网页可能没有使用meta,但是作为正规军,我们还是有必要了解一些meta的属性,并且能够熟练使用它们。

1、声明文档使用的字符编码

<meta charset='utf-8'>11

2、声明文档的兼容模式

<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 指示IE以目前可用的最高模式显示内容

<meta http-equiv="X-UA-Compatible" content="IE=Emulate IE7" />指示IE使用 <!DOCTYPE> 指令确定如何呈现内容。标准模式指令以IE7 标准模式显示,而 Quirks 模式指令以 IE5 模式显示。1212

3、SEO 优化

<meta name="description" content="不超过150个字符" />页面描述

<meta name="keywords" content="html5, css3, 关键字"/>页面关键词

<meta name="author" content="魔法小栈" />定义网页作者

<meta name="robots" content="index,follow" />定义网页搜索引擎索引方式,robotterms是一组使用英文逗号「,」分割的值,通常有如下几种取值:none,noindex,nofollow,all,index和follow。12341234

4、为移动设备添加 viewport

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

content 参数解释:

width      viewport 宽度(数值/device-width)

height viewport 高度(数值/device-height)

initial-scale 初始缩放比例

maximum-scale 最大缩放比例

minimum-scale 最小缩放比例

user-scalable 是否允许用户缩放(yes/no)

minimal-ui iOS 7.1 beta 2 中新增属性,可以在页面加载时最小化上下状态栏。这是一个布尔值,可以直接这样写:

<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">1234567891012345678910

5、iOS 设备

<meta name="apple-mobile-web-app-title" content="标题">添加到主屏后的标题(iOS 6 新增)

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

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />设置状态栏的背景颜色

只有在 "apple-mobile-web-app-capable" content="yes" 时生效

content 参数:

default 默认值。

black 状态栏背景是黑色。

black-translucent 状态栏背景是黑色半透明。

设置为 default 或 black ,网页内容从状态栏底部开始。

设置为 black-translucent ,网页内容充满整个屏幕,顶部会被状态栏遮挡。1234567891012345678910

6、iOS 图标 rel 参数

apple-touch-icon 图片自动处理成圆角和高光等效果。

apple-touch-icon-precomposed 禁止系统自动添加效果,直接显示设计原图。

<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" />iPhone 和 iTouch,默认 57x57 像素,必须有

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" />iPad,72x72 像素,可以没有,但推荐有

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" />Retina iPhone 和 Retina iTouch,114x114 像素,可以没有,但推荐有

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" />Retina iPad,144x144 像素,可以没有,推荐大家使用

<meta name="apple-mobile-web-app-title" content="标题">title最好在六个中文长度内,超长的内容会被隐藏,添加到主屏后的标题(iOS 6 新增)12345671234567

7、iOS 启动画面

iPad 的启动画面是不包括状态栏区域的。

iPad 竖屏 768 x 1004(标准分辨率)

<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" />iPad 竖屏 1536x2008(Retina)

<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" />iPad 横屏 1024x748(标准分辨率)

<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" />iPad 横屏 2048x1496(Retina)

<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" />

iPhone 和 iPod touch 的启动画面是包含状态栏区域的。

iPhone/iPod Touch 竖屏 320x480 (标准分辨率)

<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" />iPhone/iPod Touch 竖屏 640x960 (Retina)

<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" />iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)

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

<link rel="apple-touch-startup-image" href="Startup.png" /> 当用户点击主屏图标打开 WebApp 时,系统会展示启动画面,在未设置情况下系统会默认显示该网站的首页截图,当然这个体验不是很好123456789101112123456789101112

8、Windows 8

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

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

9、不常用的

<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />添加 RSS 订阅

<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />添加 favicon icon

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

<meta name="format-detection" content="email=no" />不让android识别邮箱

<meta name="renderer" content="webkit">启用360浏览器的极速模式(webkit)

<meta http-equiv="X-UA-Compatible" content="IE=edge">避免IE使用兼容模式

<meta name="HandheldFriendly" content="true">针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓

<meta name="MobileOptimized" content="320">微软的老式浏览器

<meta name="x5-orientation" content="portrait">QQ强制竖屏

<meta name="full-screen" content="yes">UC强制全屏

<meta name="x5-fullscreen" content="true">QQ强制全屏

<meta name="browsermode" content="application">UC应用模式

<meta name="x5-page-mode" content="app">QQ应用模式

<meta http-equiv="Cache-Control" content="no-siteapp" />禁止百度转码

<meta name="msapplication-tap-highlight" content="no">windows phone 点击无高光

<meta name="keywords" content="" /> 关键字

<meta name="description" content="" /> 描述

<meta name="title" content="" /> 标题

<meta name="author" content="-06" /> 作者

<meta name="Copyright" content="" /> 公司

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 让IE浏览器用最高级内核渲染页面 还有用 Chrome 框架的页面用webkit 内核

<meta name="apple-mobile-web-app-capable" content="yes"> IOS6全屏

<meta name="mobile-web-app-capable" content="yes"> Chrome高版本全屏

<meta name="renderer" content="webkit"> 让360双核浏览器用webkit内核渲染页面

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> 添加智能 App 广告条 Smart App Banner(iOS 6+ Safari)1234567891011121314151617181920212223242512345678910111213141516171819202122232425

10、sns 社交标签

参考微博API

<meta property="og:type" content="类型" />

<meta property="og:url" content="URL地址" />

<meta property="og:title" content="标题" />

<meta property="og:image" content="图片" />

<meta property="og:description" content="描述" />1234512345

11、条件注释判断IE浏览器

<!--[if IE]>条件注释区分非IE浏览器

<!--[if lt IE 7 ]><html class="oldie ie ie6"> <![endif]-->

<!--[if IE 7 ]><html class="oldie ie ie7"> <![endif]-->

<!--[if IE 8 ]><html class="ie ie8"> <![endif]-->

<!--[if (gte IE 9)|!(IE)]><!--><html> <!--<![endif]-->

<!--[if lt IE 9]> <![endif]-->123456123456

12.如果页面上出现很多http请求会自动转换成https

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />

在HTML语言中Meta是什么意思啊?

简单总结下:描绘自己画像(网站)的“笔”

<meta> 元素可提供有关某个 HTML 元素的元信息 (meta-information)

(这里的元信息指的什么? -->解释该网站的基础信息呀:就像描述人的信息一样: 名字,身高,年龄,而且还会描述很多其它特性如:人是哪里的人,说的是什么语言")

Meta标签描述一个HTML网页文档的基础属性,例如作者、日期和时间、网页描述、关键词、页面刷新等。搜索引擎通过机器人自动查找网页中的meta值来给网站分类

html中的meta标签的name和content作用是什么?

meta是用来在HTML文档中模拟HTTP协议的响应头报文。meta 标签用于网页的<head>与</head>中,meta 标签的用处很多。meta 的属性有两种:name和http- equiv。name属性主要用于描述网页,对应于content(网页内容),以便于搜索引擎机器人查找、分类(目前几乎所有搜索引擎都使用网上机器人自动查找meta值来给网页分类)。这其中最重要的是description(站点在搜索引擎上的描述)和keywords(分类关键词),所以应该给每页加一个meta值。比较常用的有以下几个:

name 属性

1、<meta name="Generator" contect="">用以说明生成工具(如Microsoft FrontPage 4.0)等;

2、<meta name="KEYWords" contect="">向搜索引擎说明你的网页的关键词;

3、<meta name="DEscription" contect="">告诉搜索引擎你的站点的主要内容;

4、<meta name="Author" contect="你的姓名">告诉搜索引擎你的站点的制作的作者;

5、<meta name="Robots" contect= "all|none|index|noindex|follow|nofollow">

其中的属性说明如下:

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

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

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

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

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

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

http-equiv属性

1、<meta http-equiv="Content-Type" contect="text/html";charset=gb_2312-80">

和 <meta http-equiv="Content-Language" contect="zh-CN">用以说明主页制作所使用的文字以及语言;

又如英文是ISO-8859-1字符集,还有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集;

2、<meta http-equiv="Refresh" contect="n;url=http://yourlink">定时让网页在指定的时间n内,跳转到页面http://yourlink;

3、<meta http-equiv="Expires" contect="Mon,12 May 2001 00:20:00 GMT">可以用于设定网页的到期时间,一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式;

4、<meta http-equiv="Pragma" contect="no-cache">是用于设定禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从Cache中再调出;

5、<meta http-equiv="set-cookie" contect="Mon,12 May 2001 00:20:00 GMT">cookie设定,如果网页过期,存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式;

6、<meta http-equiv="Pics-label" contect=""& gt;网页等级评定,在IE的internet选项中有一项内容设置,可以防止浏览一些受的网站,而网站的级别就是br />?过meta属性来设置的;

7、<meta http-equiv="windows-Target" contect="_top">强制页面在当前窗口中以页面显示,可以防止自己的网页被别人当作一个frame页调用;

8、<meta http-equiv="Page-Enter" contect="revealTrans(ration=10,transtion= 50)">和<meta http-equiv="Page-Exit" contect="revealTrans(ration=20,transtion=6)">设定进入和离开页面时的特殊效果,这个功能即FrontPage中的“格式/网页过渡”,不过所加的页面不能够是一个frame页面

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。