HTML meta标签的用法及head中的一些常用标签

meta是用来在HTML文档中模拟HTTP协议的响应头报文。
meta主要为分HTTP标头信息(HTTP-EQUIV)和页面描述信息(NAME)标头信息包括文档类型、字符集、语言等浏览器正确显示网页的信息及处理动作;网页描述如内容的关键字、摘要、作者和定义robots行为等,为搜索引擎索引提供信息。

meta 标签用于网页的<head>与</head>中,meta 标签的用处很多。meta 属性有两种:name和http- equiv。
  name:将content属性与一个名字连接,当请求此名字的数据时,将发送content属性的值
  content:根据http-equiv或name的不同属性值提供相应的值
  lang:指定此meta标记的语言

meta标签的name属性语法格式是:<meta name="参数" content="具体的参数值">

meat标签的http-equiv属性语法格式是:<meta http-equiv="参数" content="参数变量值"> ;

  其中http-equiv属性主要有以下几种参数:http-equiv属性  http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。  

<meta http-equiv="Content-Type" Content="text/html; Charset=utf-8" />
说明网页类型和字符编码信息,W3C建议使用并放在head区的最上面。这是随http头部发送属性值(当然现在的服务器一般不发送)或者由客户端读取。尽管在XHTML标准文档声明部分包含了这些内容,但W3C也建议在meta中设置,以更好的兼容一些浏览器和搜索引擎。

<meta http-equiv="Content-Language" Content="zh-CN" />
说明文档的国字语言代码。在XHTML中,可以在<html>的xml:lang和lang属性中设置,因此可以不使用.

<meta name="Generator" Content="PCDATA|FrontPage" />
用以说明生成工具(如Microsoft FrontPage 4.0)等;

<meta http-equiv="Refresh" Content="5; Url=http://www.cnblogs.com/rsky/p/4815777.html" />
网页5秒后自动转向到url网址。谨慎使用跳转,否则可能会被搜索引擎认为作弊,不利于网站优化。如果使用meta跳转,时间最好大于10秒。

<meta http-equiv="Expires" Content="sat, 26 Feb 1999 06:11:57 GMT" />
指定网页在缓存中的过期时间。注意:必须使用GMT的时间格式或直接设为0

<meta http-equiv="Pragma" Content="No-cach" />
禁止浏览器从本地机的缓存中调阅页面内容

<meta name="Keywords" Content="word1,word2..." />
描述此文档内容的关键词,宜选用稍冷的组合词,六组左右;SE对keyword比较敏感,作用不是很大,如果堆积关键词或名不符实,则可能会被搜索引擎惩罚,所以宁缺勿滥。

<meta name="Description" CONTENT="demo" />
告诉搜索引擎你的站点的主要内容;

<meta name="Author" Content="xx" />
告诉搜索引擎你的站点的制作的作者;

<meta name="Copyright" Content="本页版权归XX所有。All Rights Reserved" />
告诉搜索引擎本页版权归XXXX所有

<meta name="Robots"Content="All|None|Index|Noindex|Follow|Nofollow" />
许多搜索引擎都通过放出robot/spider搜索来登录网站,这些robot/spider就要用到meta元素的一些特性来决定怎样登录,当然有的SE不支持这个属性。Robots用来告诉搜索机器人哪些页面需要索引,是否跟踪链接。Content的参数有all、none、index、 noindex、follow、nofollow。默认是all。
all:文件将被检索,且页面上的链接可以被查询;
none:文件将不被检索,且页面上的链接不可以被查询;(和 "noindex, nofollow" 起相同作用)
index:文件将被检索;(让robot/spider登录)
follow:页面上的链接可以被查询;
noindex:文件将不被检索,但页面上的链接可以被查询;(不让robot/spider登录)
nofollow:文件将不被检索,页面上的链接可以被查询。(不让robot/spider顺着此页的连接往下抓取)
meta robots可以逐页控制对网站的访问,还可在robots.txt文件中声明URL,控制spider对它们的抓取。

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

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

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

<meta name="Kyewords" Lang="en" Content="vacation,greece,sunshine" />
<meta name="Kyewords" Lang="FR" Content="vacances,grè:ce,soleil" />
当数个META元素提供文档语言信息时,搜索引擎会使用lang特性来过滤并通过用户的语言优先参照来显示搜索结果。

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

head中一些其他的标签
<meta scheme="ISBN" name="identifier" content="0-14-043205-1" />
网页内容标识

<Link href="favor.ico" rel="Shortcut Icon"/>  
指定收藏小图标,保存在收件夹中后,会发现它连带着一个小图标

<link href="URL" rel="relationship"/>  
<link href="URL" rev="relationship"/>
用来将目前文件与其它 URL 作连结,但不会有连结按钮
  
<base href="http://www.cnblogs.com/" target="_blank"/>  
插入网页基链接属性
注意:你网页上的所有相对路径在链接时都将在前面加上“www.cnblogs.com”。其中target="_blank"是链接文件在新的窗口中打开,你可以做其他设置。将“_blank”改为“_parent”是链接文件将在当前窗口的父级窗口中打开;改为“_self”链接文件在当前窗口(帧)中打开;改为“_top”链接文件全屏显示。  

<meta http-equiv="imagetoolbar" content="false" />
指定是否显示图片工具栏,当为false代表不显示,当为true代表显示。 
  
<meta http-equiv="Content-Script-Type" Content="text/javascript">
W3C网页规范,指明页面中脚本的类型,默认JavaScript

<meta name="revisit-after" CONTENT="5 days" />  
revisit-after代表网站重访,7 days代表5天,依此类推。 

<meta http-equiv="X-UA-Compatible" content="IE=7">
以上代码告诉IE浏览器,无论是否用DTD声明文档标准,IE8/9都会以IE7引擎来渲染页面。

<meta http-equiv="X-UA-Compatible" content="IE=8">
以上代码告诉IE浏览器,IE8/9都会以IE8引擎来渲染页面。

<meta http-equiv="X-UA-Compatible" content="IE=edge">
以上代码告诉IE浏览器,IE8/9及以后的版本都会以最高版本IE来渲染页面。 

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
以上代码IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame.

<meta content="webkit" name="renderer">
360会采用极速模式渲染页面,改用webkit内核渲染

缓存控制
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="Cache-Control" content="max-age=300"/>
下面这行:
<meta http-equiv="Cache-Control" content="max-age=0"/>
与下面一行有相同的效果:
<meta http-equiv="Cache-Control" content="no-cache"/> 某些 WAP 浏览器不支持用 <meta/>
标签来控制缓存, 但它们确实知道 HTTP 头 "Cache-Control: no-cache" 的意思. 这种情况下, 解决方案是在服务器端的 HTTP 响应中设置 HTTP 头.

webkit内核中一些私有的meta标签
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览;

<meta content="yes" name="apple-mobile-web-app-capable">
iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览

<meta content="black" name="apple-mobile-web-app-status-bar-style">
iphone的私有标签,它指定的iphone中safari顶端的状态条的样式

<meta content="telephone=no" name="format-detection">
告诉设备忽略将页面中的数字识别为电话号码

<meta content="email=no" name="format-detection" />
告诉设备忽略将页面中的数字识别为邮箱地址

meta 标签常用的属性就这么多,一个页面最好有的如Content-Type,Keywords,Description,其它根据需要常用的有Robots,Refresh,Window-target。

时间: 2024-10-03 08:19:25

HTML meta标签的用法及head中的一些常用标签的相关文章

HTML超文本标记语言(二)-HTML中几个常用标签及属性

HTML中几个常用标签及其属性 一.HTML链接标签:<a></a> 1.herf属性:创建指向另一个文档的标签(超链接) 语法结构:<a href=url">Link Text</a> 注意: "链接文本"不必一定是文字,图片或其他HTM元素也可以成为链接. 2.name属性:规定锚的名称,用于创建文档内的书签(锚) 语法结构如下. 命名锚:<a name="tip">基本的注意事项-有用的提示

HTML5中新加的标签和属性定义

HTML5 <!DOCTYPE> 标签所有主流浏览器都支持 <!DOCTYPE> 声明.<!DOCTYPE> 声明非常重要,它是一种标准通用标记语言的文档类型声明,通过该标签,浏览器能够了解HTML5文档正在使用的HTML规范,<!DOCTYPE> 声明是HTML5文档的起始点,也就是说它必须位于HTML5文档的第一行!标签定义及使用说明:<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前.<!DO

序列标注中的几种标签方案

标签说明 标签方案中通常都使用一些简短的英文字符[串]来编码. 标签是打在token上的. 对于英文,token可以是一个单词(e.g. awesome),也可以是一个字符(e.g. a). 对于中文,token可以是一个词语(分词后的结果),也可以是单个汉字字符. 为便于说明,以下都将token试作等同于字符. 标签列表如下: B,即Begin,表示开始 I,即Intermediate,表示中间 E,即End,表示结尾 S,即Single,表示单个字符 O,即Other,表示其他,用于标记无关

01: html常用标签

1.1 web开发的三把利器介绍 1. HTML :可以比作一个赤裸裸的人站在这里(就是自身带有一些属性) 1.-- 20个标签 2.-- HTML实质就是浏览器能够认识的规则 3.开发者: -  写html文件(充当模板的作用) -  数据库获取数据,然后替换到html文件指定位置(web框架) 2. CSS :就是=给这个人穿上华丽的衣服 -- 颜色 -- 位置 3. JS :让这个人可以动 1.2 网页头部head标签中几个常用标签 1.Head标签之<meta>标签 1. 页面编码(告

重温HTML之常用标签整理

一.Html介绍 1.Html和CSS的关系 1. HTML是网页内容的载体 2. CSS样式是表现(用来改变内容外观的东西称之为表现) 3. JavaScript是用来实现网页上的特效效果(有动画的,有交互的一般都是用JavaScript来实现的) 2.html标签 <p></p>是段落标签 <img>图片标签 3.标签的语法 1. 标签由英文尖括号<和>括起来 2. html中的标签一般都是成对出现的,分开始标签和结束标签.结束标签比开始标签多了一个/.

HTML5 的知识分享(二):HTML5 的常用标签

经过我的上一篇博客可以让大家简单地了解了一下 HTML5 的基础标签,现在再和大家分享一下 HTML5 的常用标签吧 基础标签与常用标签的主要区别在于:要先有基础标签的基础才可以灵活的使用常用标签. 常用标签主要分为六种: 列表标签 链接标签 表格标签 图像标签 音频标签 视频标签 一.列表标签 (1) <ul> 标签:定义无序列表:要使用样式来定义列表类型. (2) <ol> 标签:定义有序列表:要使用 CSS 来定义列表的类型. (3) <li> 标签:定义列表项目

HTML中META标签一些用法

你的个人网站做得再精彩,在如此庞大的网络空间,被人发现实属不易.那么如何推广个人网站,人们一般会这样做: ● 在搜索引擎中登录自己的个人网站 ● 在知名网站加入你个人网站的链接 ● 在论坛中发帖子宣传你的个人网站 很多人却忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性! META标签分两大部分:HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME). HTTP-EQUIV类似于HTTP的头部协议,它回应给浏览器一些有用的信息,以

好程序员web前端分享html中meta标签及用法详解

好程序员web前端分享html中meta标签及用法详解,这篇文章给大家介绍了html中meta标签及用法详解,感兴趣的朋友一起看看,Html中meta标签一.meta标签 含义 <meta> 元素 可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. <meta> 标签位于文档的头部,不包含任何内容. <meta> 标签的属性定义了与文档相关联的名称/值对.二.meta 中常用属性 charset? (字符集) 说明:规

浅谈struts2标签中的2个很常用的标签的用法(radio和select)

1.如图所示我们需要在前台的页面通过radio和select将对应的数据库中的数据显示到选项当中,这也是我们做项目中经常需要做的,动态的显示,而不是静态的显示. 首先我们需要在页面中导入struts2的标签库<%@ taglib prefix="s" uri="/struts-tags"%>,一般的我们不用struts2写一个radio代码如下: <input type="RADIO" name="sex"