基础复习之HTML （meta标签、块级元素与行内元素）

一、meta标签

• SEO
• 如何在不使用JS的情况下刷新页面(http-equiv="refresh" , content="time")
• 设置页面缓存
• 移动端设置
• etc...

一些人容易忽视<meta>标签，但实际上在SEO方面<meta>标签是非常强大有效的，一个好的<meta>标 签设计可以大大地提升网站被搜索到的优先性；<meta>通常可以用来为搜索引擎robots定义页面的主题、或者定义用户浏览器上 cookie、也可以设置页面使其根据你所设置的时   间间隔定时刷新页面、还可以用来鉴别作者、设置页面格式、标注内容提要和关键字等等；下面详细的：

meta标签分为两大部分，http标题信息（http－equiv）和页面描述信息（name）

（一）http－equiv类似于http头部协议，它回应给浏览器一些有效信息以便正确精确地显示网页内容；常见的有以下类型：

1. Content-Type 和 Content-Language 用于设定页面使用的字符集

   <meta http-equiv="Content-Type"  content="text/html;Chartset=UTF-8" />
   <!-- In HTML5 -->
   <meta charset="UTF-8" />
   <meta http-equiv="Content-Language"  content="zh-CN " />

   • Content-Type的Content还可以是：text/xml等文档类型；
   • Charset选项：ISO-8859-1(英文)、BIG5（繁体中文）、UTF-8、SHIFT-Jis、Euc等字符集；
   • Content-Language的Content还可以是：EN、FR等语言代码。
2. Refresh 让网页多长时间刷新自己或者多长时间跳转到其他页面

   <meta http-equiv="Refresh"  content="5" />
   <meta http-equiv="Refresh"  content="5;url=http://www.cnblogs.com/lazychen"  />

   5秒钟后自动刷新／5秒钟后自动刷新到URL；

3. Expires  期限，定义网页在缓存中的过期时间，一旦过期，必须到服务器上重新调阅

   <meta http-equiv="Expires" content="0"/>
   <meta http-equiv="Expires" content="Wed, 26 Feb 1997 08:21:57 GMT"/>

   注意：必须使用GMT格式时间，或者直接设置为0（数字表示时间,0表示永不过期）；

4. Pragma  cath模式，禁止浏览器从本地的缓存中调阅页面

   <mata http-equiv="Pragme" content="no-cach"/>

   网页不保存在缓存中，每次访问都刷新页面，这样设定后用户将无法脱机浏览页面；

5. Set-Cookie   cookie设定；当浏览器访问某个页面时会将其存在缓存中，当再次访问时就可以从缓存中读取，这样可以提高速度；当需要用户每次都刷新你的广告图标活着计数器时，就需要禁用缓存了；通常HTML页面不需要禁用，对于ASP页面就可以，因为每次看到的页面都是从服务器端动态生成的，缓存就失去意义了；当网页过期时，存盘的cookie将会被删除；

   <meta http-equiv="Set-Cookie" content="cookievalue=xxx ; expires=Wednesday,21-Oct-98 16:14:21 GMT; path=" />

   注：时间格式依旧必须是GMT;

6. Window-Target 窗口显示的设定，强制页面在当前窗口以独立页面的形式显示，

   <meta http-equiv="Window-Target" content="_top"/>

   注意：这个属性是用来防止别人在框架里调用你的页面的，其中content的value值可以时：_target 、_top(链接文件全屏显示) 、_self 、_parent(将在当前窗口的父级窗口中打开);

7. Pics-Lable  网页RSAC等级评定，网站的限制级别可通过此来设定
8. Page-Enter、Page-Exit 页面进入和离开时的特效

   <meta http-equiv="Page-Enter"  content="blendTrans(duration=0.5)" />
   <meta http-equiv="Page-Exie"  content="blendTrans(duration=0.5)" />
   <meta http-equiv="Site-Enter"  content="blendTrans(duration=0.5)" />
   <meta http-equiv="Site-Exie"  content="blendTrans(duration=0.5)" />

   注意：IE下Page-Enter、Page-Exit 页面进入和离开时的特效，Site-Enter、Site-Exit 站点进入和离开时的特效；其中blendTrans只是动态滤镜中的一种，产生渐隐的效果；duration表示滤镜效果持续的时间；还有一种动态滤镜reveaTrans也可以用于页面进入or离开；用法：

   <meta http-equiv="Page-Enter" content="revealTrans(duration=0.5) , transition=x" />
   <meta http-equiv="Page-Exit" content="revealTrans(duration=0.5) , transition=x" />
   <meta http-equiv="Site-Enter" content="revealTrans(duration=0.5) , transition=x" />
   <meta http-equiv="Site-Exit" content="revealTrans(duration=0.5) , transition=x" />

   注意：transition表示滤镜的类型，取值是0-23；见下表:

   0	盒状收缩	12	随意溶解
   1	盒状放射	13	从左右两端向中间展开
   2	圆形收缩	14	从中间向左右两端展开
   3	圆形放射	15	从上下两端向中间展开
   4	由下往上	16	从中间向上下两端展开
   5	由上往下	17	从右上角向左下角展开
   6	从左至右	18	从右下角向左上角展开
   7	从右至左	19	从左上角向右下角展开
   8	垂直百叶窗	20	从左下角向右上角展开
   9	水平百叶窗	21	水平线状展开
   10	水平格状百叶窗	22	垂直线状展开
   11	垂直格状百叶窗	23	随机产生一种过渡方

（二）name包含页面描述信息，name的content指定实际内容；常见的有以下类型：

1. Keywords 为搜索引擎提供关键字列表

   <meta name="Keywords" content="关键词1、关键2、关键词3、…"/>

   搜索站台分为两大类,一类为完全人工登录,比如Yahoo；另一类 为机器人搜索,以机器人搜索的搜索站台会包含更多的内容。meta也常用来描述网页,以供某些搜索站台机器人的使用。搜索引擎robots会搜索网页META标签中所设置的描述关键字,把它们加入到搜索数据库中,用来索引你的网页。注意：多个关键词用逗号分隔开，总字数不得超过13个字；这里有个技巧,你可以重复某一个单词,这样可以提高自己网站的排行位置（？）；

2. Description 告诉搜索引擎网站的主要内容

   <meta name="Dscription" content="这里时主要内容描述">

3. Robots 告诉搜索引擎机器人哪些页面需要索引哪些页面不需要
   

   <meta name="Robots" content="all">
   <!--
   content的value可以有以下值：all\none\index\noindex\follow\nofollow
   默认值是all；
   all:文件将被检索，且页面上的链接可以被查询；
   none：文件将不被检索，且页面上的链接不可以被查询；
   index:文件将被检索；
   noindex:文件将不被检索，但页面上的链接可以被查询
   follow:页面上的链接可以被查询
   nofollow:文件将不被检索，页面上的链接可以被查询
   -->

   
4. Author 、Coptright、 Generator 作者、版权、编辑器

   <meta name="Author" content="">
   <meta name="Copyright" content="">
   <meta name="Generator" content="">

注：关于meta标签部分内容来源  http://www.jb51.net/web/158860.html

（三）btw：

1. 以上是meta标签的一些基本用法，其中最重要的就是：Keywords和Description的设定。为什么呢？因为对搜索引擎 ，对crawler而言，它们显得非常重要，蜘蛛爬行页面时都会有限抓取meta标签里面的内容，检索页面中的Keywords和Description， 并将其加入到自己的数据库，然后再根据关键词的密度将网站排序。
2. 寻找合适关键词的技巧是：到Google、Lycos、Alta等著名搜索引擎，搜索与你的网站内容相仿的网站，查看排名前十位的网站的meta关键字，将它们用在你的网站上，效果可想而知了。
3. 上面提到的关键字密度指的是关键词在页面中出现的次数占页面总文字的百分比，如果在一个页面中出现隐藏或是出现很多的关键词，在搜索引擎的检索中就会被认为你的站点是垃圾站；最好的关键字密度百分比范围是15%—20%；
4. 还有个小窍门：为了增加关键词的密度，可以将关键字隐藏在页面里(将文字颜色定义成与背景颜色一样)；但是不能太多，一篇文章中保证有3—5个关键词出现就可以了。

二、块级元素、行内元素

• 块级：div, ul, li, ol, table, th, tbody, tfoot, tr, pre, fieldset, form, h1-6, p等
• 行内：a, abbr, b, br, code, em, img, input, label, select, textarea, strong等

更多详细信息可参见MDN上的块级元素：Block-level_elements 行内元素： Inline_elemente