×

html meta标签有啥用

html meta标签有啥用(HTML中的标签是什么作用)

admin admin 发表于2024-01-16 15:13:34 浏览31 评论0

抢沙发发表评论

本篇文章给大家谈谈html meta标签有啥用,以及HTML中的标签是什么作用对应的知识点,文章可能有点长,但是希望大家可以阅读完,增长自己的知识,最重要的是希望对各位有所帮助,可以解决了您的问题,不要忘了收藏本站喔。

本文目录

HTML中的标签是什么作用

html是用于创建可从一个平台移植到另一平台的超文本文档的一种简单标记语言,经常用来创建web页面。html是制作网页的基础,我们在网络营销中讲的静态网页,就是以html为基础制作的网页。

如何显示或隐藏单个标记标签?

右键单击(在 Mac 上按住 Control 单击)要为其显示或隐藏标记标签的标记,选择“标记标签”,然后选择以下选项之一:

自动 - 选择此选项以打开和关闭标签,具体情况视视图以及“标签”下拉菜单中的设置而定。

始终显示 - 如果选择此选项,即使是隐藏(根据“标签”下拉菜单中的设置)的标记标签也会显示。

从不显示 - 如果选择此选项,即使显示(根据“标签”下拉菜单中的设置)的标记标签也会隐藏。

html5 里面的meta有什么用

meta属性在HTML中占据了很重要的位置。如:针对搜索引擎的SEO,文档的字符编码,设置刷新缓存等。虽然一些网页可能没有使用meta,但是作为正规军,我们还是有必要了解一些meta的属性,并且能够熟练使用它们。 1、声明文档使用的字符编码《meta charset=’utf-8’》112、声明文档的兼容模式***隐藏网址******隐藏网址***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。123412344、为移动设备添加 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"》12345678910123456789105、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 ,网页内容充满整个屏幕,顶部会被状态栏遮挡。12345678910123456789106、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 新增)123456712345677、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 时,系统会展示启动画面,在未设置情况下系统会默认显示该网站的首页截图,当然这个体验不是很好1234567891011121234567891011128、Windows 8《meta name="msapplication-TileColor" content="#000"/》 Windows 8 磁贴颜色《meta name="msapplication-TileImage" content="icon.png"/》Windows 8 磁贴图标12129、不常用的《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 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 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 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)123456789101112131415161718192021222324251234567891011121314151617181920212223242510、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="描述" /》123451234511、条件注释判断IE浏览器《!--》条件注释区分非IE浏览器《!----》 《!----》 《!----》 《!----》 《!----》123456123456***隐藏网址******隐藏网址***

什么是META标签

分类: 电脑/网络 》》 互联网 解析: 网页制作中META标签的作用- - 引言 您的个人网站即使做得再精彩,在“浩瀚如海”的网络空间中,也如一叶扁舟不易为人发现,如何推广个人网站, 人们首先想到的方法无外乎以下几种: l 在搜索引擎中登录自己的个人网站 l 在知名网站加入你个人网站的链接 l 在论坛中发帖子宣传你的个人网站 很多人却忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性, 有兴趣吗,谁我来重新认识一下META标签吧! META标签,是HTML语言HEAD区的一个辅助性标签。在几乎所有的page里,我们都可以看到类似下面这段代码: <head> <meta -equiv=Content-Type content=text; charset=gb2312> <head> 这就是META标签的典型应用,标识page所采用的编码类型。根据HTML语言标准注释:META标签是对网站发展非常重 要的标签,它可以用于鉴别作者,设定页面格式,标注内容提要和关键字,以及刷新页面等等。 详细介绍 META标签分两大部分:HTTP-EQUIV和NAME变量。 参数HTTP-EQUIV HTTP-EQUIV类似于HTTP的头部协议,它给浏览器回应一些有用的信息,以帮助正确地显示网页内容。常用的HTTP- EQUIV类型有: A. Expires(期限) 说明:可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新调阅。 用法:<META HTTP-EQUIV=expires CONTENT=Wed, 26 Feb 1997 082157 GMT> 注意:必须使用GMT的时间格式。 B. Pragma(cache模式) 说明:禁止浏览器从本地机的缓存中调阅页面内容。 用法:<META HTTP-EQUIV=Pragma CONTENT=no-cache> 注意:这样设定,访问者将无法脱机浏览。 C. Refresh(刷新) 说明:需要定时让网页自动链接到其它网页的话,就用这句了。 用法:<META CONTENT=5;URL=yahoo> 注意:其中的5是指停留5秒钟后自动刷新到URL网址。 D. Set-Cookie(cookie设定) 说明:如果网页过期,那么存盘的cookie将被删除。 用法:<META HTTP-EQUIV=Set-Cookie CONTENT=cookievalue=xxx; expires=Wednesday, 21-Oct-98 161421 GMT; path=> 注意:必须使用GMT的时间格式。 E. Window-target(显示窗口的设定) 说明:强制页面在当前窗口以独立页面显示。 用法:<META HTTP-EQUIV=Window-target CONTENT=_top> 注意:用来防止别人在框架里调用你的页面。 F. Content-Type(显示字符集的设定) 说明:设定页面使用的字符集。 用法:<META -equiv=Content-Type content=text; charset=gb2312> 注意:游览器会根据此来调用相应的字符集显示page内容 G. Pics-label(网页等级评定) 说明:在IE的Inter选项中有一项内容设置,可以防止浏览一些受限制的网站,而网站的限制级别就是通过该参 数来设置的。 用法:<META -equiv=”Pics-label” contect=””> 注意:不要将级别设置的太高。 参数NAME META标签的NAME变量语法格式是: <META NAME=xxx CONTENT=xxxxxxxxxxxxxxxxxx> 其中xxx主要有下面几种参数: 1. Keywords(关键字) 说明:Keywords用来告诉搜索引擎你网页的关键字是什么。 举例:<META NAME =keywords CONTENT=life, universe, mankind, plants, relationships, the meaning of life, science> 2. Description(简介) 说明:Description用来告诉搜索引擎你的网站主要内容。 举例:<META NAME=Description CONTENT=主要介绍程序设计语言JAVA、C等> 3. Robots(机器人向导) 说明:Robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。CONTENT的参数有all、none、index、 noindex、follow、nofollow。默认是all。 举例:<META NAME=Robots CONTENT=none> 4. Author(作者) 说明:标注网页的作者 举例:<META name=AUTHOR content=张三,abc@sina”> 用例分析 以上是META标签的一些基本用法,其中最重要的就是:Keywords和Description的设定。为什么呢? 道理很简单,这两个语句可以让搜索引擎能准确的发现你,吸引更多的人访问你的站点!根据现在流行搜索引擎 (Google,Lycos,AltaVista等)的工作原理,搜索引擎先派机器人自动在WWW上搜索,当发现新的网站时,便检索页 面中的Keywords和Description,并将其加入到自己的数据库,然后再根据关键词的密度将网站排序。 由此看来,我们必须记住添加Keywords和Description的META标签,并尽可能写好关键字和简介。否则,后果就 会是: 2 如果你的页面中根本没有Keywords和Description的META标签,那么机器人是无法将你的站点加入数据库,网 友也就不可能搜索到你的站点。 2 如果你的关键字选的不好,关键字的密度不高,被排列在几十甚至几百万个站点的后面被点击的可能性也是非 常小的。 写好Keywords(关键字)要注意以下几点: l 不要用常见词汇。例如、homepage、、web等。 l 不要用形容词,副词。例如最好的,最大的等。 l 不要用笼统的词汇,要尽量精确。例如“爱立信手机”,改用“T28SC”会更好。 “三人之行,必有我师”,寻找合适关键词的技巧是:到Google、Lycos、Alta等著名搜索引擎,搜索与你的网站 内容相仿的网站,查看排名前十位的网站的META关键字,将它们用在你的网站上,效果可想而知了。 小窍门 为了提高搜索点击率,这里还有一些“捷径”可以帮得到你: ü 为了增加关键词的密度,将关键字隐藏在页面里(将文字颜色定义成与背景颜色一样)。 ü 在图像的ALT注释语句中加入关键字。 如:<IMG SRC=xxx.gif Alt=Keywords> ü 利用HTML的注释语句,在页面代码里加入大量关键字。 用法: <!-- 这里插入关键字 --> 参考文献:cg6038.bokee/viewdiary.***********

什么是META标签META标签在搜索引擎营销中有哪些作用

1、META标签,是在HTML网页源代码中一个重要的html标签。META标签用来描述一个HTML网页文档的属性,例如作者、日期和时间、网页描述、关键词、页面刷新等。

2、作用:META标签的内容设计对于搜索引擎营销来说是至关重要的一个因素,合理利用 Meta 标签的 Description 和Keywords 属性,加入网站的描述或者网页的关键字,可使网站更加贴近用户体验。

扩展资料

在网页的优化上最重要的因素之一就是网页的标题标签。通常在写标题标签时应该考虑几个因素。

1、所有网页都应该有适合自己的独特的Title或Tag。有很多网站所有网页都有同一个标题。可能设计师在设计网页的时候把整个模版来回复制,所以HTML文件里面的头信息也都被复制过去,没有再被改动。

2、标题标签应该对用户的需求有足够的吸引力。网页在搜索引擎结果中列出,网页的标题就是来自于标题标签。

3、标题标签中应该含有关键词。

文章分享结束,html meta标签有啥用和HTML中的标签是什么作用的答案你都知道了吗?欢迎再次光临本站哦!