举例讲解HTML中META标签的一些使用技巧
我要评论HTML meta 标签
HTML meta 标签可以用来提供网页内容的信息给浏览器或是搜寻引擎，例如网页内容的描述、网页重要关键字、网页编码等都是常用 meta 来标示的网页信息，另外还有网页作者、网页发布时间、所使用的编辑器等较不重要的信息，也可以透过 META TAG 来标示，META 的功能仅是用来注明这些网页信息，且提供给浏览器或是搜寻引擎，并非是要给写给浏览网页的＂人＂看的内容。
HTML meta 标签写在 head 范例
- <head>
- <title>测试网页</title>
- <meta name="description" content="这里是网页的简短描述">
- <meta name="keywords" content="关键字 1,关键字 2">
- </head>
标准的 <meta> 标签没有结尾，直接将参数写在 <meta> 内即可，一个网页内可以有很多个不同的 <meta> 标签，全部都要写在 head 标签内，范例中的 title 标签是用来标示网页标题用的，可以写在 <meta> 标签之前，也可以写在 <meta> 标签之后。
一、显示及排列中文
- <META http-equiv="Content-Type" content="text/html; charset=big5">
说明：
Content-Type==>文件内容格式
;==>CONTENT内要作的每件事" "，分别以分号区隔
text/html==>纯文字/超文字
charset==>字符组为中文繁体大五码，如用iso-2022-jp是指日文
二、让搜索引擎容易找到您
- <META NAME="KeyWords" CONTENT="计算机教学'网络教学'Linux教学'CSS教学'HTML教学'软件教学'发信教学'SEO教学'交换连结">
- <META NAME="KeyWords" CONTENT="css'HomePage'html'linux'seo">
说明：网页内文关键字，可使用中、英文均可
三、关于网站的内容描述
- <META NAME="Description" CONTENT="这是一个免费学习网页制作的好地方，网络研究所">
说明：Description==>内容的主要描述
四、这个网页的作者是谁
- <META NAME="Author" CONTENT="PCNET">
说明：标注本网页作者姓名等资料
五、这是用何编辑器完成的网页
- <META NAME="Generator" CONTENT="Mozilla/3.0Gold(Win95)[Netscape]">
说明：
标注本网页作者姓名等资料
Generator==>编辑器
Mozilla/3.0Gold(Win95)[Netscape]==>编辑器等版本说明
六、这个网页何时完成
- <META NAME="Creation-Date" CONTENT="01-jan-2003 20:40:01">
说明：
Creation-Date==>创作日期
01-jan-2003 20:40:01==>详细日期时间
七、这个网页有效时期及不被Cache所限制
- <META NAME="Expired" CONTENT="01-jan-2005 00:00:00">
- <META HTTP-EQUIV="Pragma" CONTENT="no_cache">
说明：
Expired==>网页终止期限
01-jan-2005 00:00:00==>已过去的日期时间，也可以用Mon,12 Jan 2007 00:00:00 GMT
no_cache==>不被Cache所限制，也就是网页没有记忆功能。
八、网页作者的网址与信箱
- <link rev="made" href="mailto:pcnettw@yahoo.com.tw">
- <link rev="made" href="http://www.pcnet.idv.tw/">
说明：网页作者信箱或网址陈述
rev==>正向关联
made=>网页制造者
href==>您的信箱或网址
九、使网页能自动换页
- <META HTTP-EQUIV="refresh" CONTENT="15; url=http://www.pcnet.idv.tw/">
说明：
refresh==>更新或重整
15==>15秒后执行下一动作
;==>CONTENT内要作的每件事" "，分别以分号区隔
url=http://www.pcnet.idv.tw/==>指定转换到此网页
十、进入或离开的特效(限IE使用)
- <META http-equiv="指定要换页特效发生的状况" content="特效模式(Duration=特效持续时间,Transition=代替的特效)">
说明：
http-equiv="Page-Enter是进入本页、Page-Exit是离开本页、Site-Enter是进入本站、Site-Exit是离开本站"。
content="revealTrans(指定换页特效)、blendTrans(设定换页特效为"混合")。
Duration=设定特效持续的时间(秒)，建议在3-5秒之间。
Transition=以0-23代替特效(略)。
注：
它必须放于<HEAD>与</HEAD>之间，主要用于本网页的内容说明，以利自己或别人(搜索引擎)使用，另外也可以制造出一些自动翻页等特殊效果。
http-equiv或NAME属性，必须配合content属性使用，两者也可互替使用。
后设语法标签(META description tag)的用法随各搜索引擎设定有所不同。
有无Meta标签，并不影响网页正常显示，其最大目的在于提供网页各种信息及产生特殊效果。
网页运用，建议以本页所述1.2.3.4.8项这些标签为主，其余视况自行增减。
您可使用检视原始码，来看本例实际安排。
更多的报导资料，欢迎莅临讲师(作者)网站查看。
相关文章
- <meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。这篇文章给大家介绍了html中meta标签及用法详解，感兴趣的朋2018-02-23
HTML标签meta总结,HTML5 head meta 属性整理
移动前端开发中添加一些webkit专属的HTML5头部标签，帮助浏览器更好解析HTML代码，更好地将移动web前端页面表现出来。本文整理一些常用的meta标签,需要的朋友可以参考下2017-06-29- 本文给大家介绍了html5中各种头部meta标签功能小结，非常不错，具有参考借鉴价值，需要的的朋友参考下2017-03-13
- 这篇文章给大家查找总结了一些HTML5头部<meta>标签常用的一些信息，文章给出了示例代码与注释，介绍的很详细，感兴趣的朋友们下面来一起看看吧。2016-10-23
- 制作手机版网站的时候，除了页面简洁、操作方便等访问者可以看到的地方以外，就是 Meta 标签的设置，合理设置 Meta 标签 对手机版网站的搜索引擎优化，手机浏览器的渲染展2016-01-06
- 这篇文章主要介绍了HTML5下meta标签的一些应用方法实例,包括在移动前端页面上的一个使用例子,需要的朋友可以参考下2015-12-08
- 标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务2014-12-27
- 这篇文章主要介绍了HTML头标签meta实现refresh重新定向,需要的朋友可以参考下2014-05-02
- 这篇文章主要介绍了HTML中的<meta>标签的使用，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2018-06-05
最新评论