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

这段时间找实习看的眼花缭乱的，然后也被拒得落花流水，啊哈哈～还是写博客好玩儿～嘿嘿，下面正题

一、doctype

• 标准模式 (Full Standards Mode)
• 接近标准模式 (Almost Standards Mode)
• 混杂模式 (Quirks Mode)

以上三种模式是浏览器在解析CSS时的三种工作模式，混杂模式是依据旧式的、非标准的CSS规则来渲染网页；标准模式则是遵循W3C标准去解析CSS的，接近标准模式与标准模式实际上差异并不大；关于Firefox中DTD与浏览器工作模式的详细信息可参见 Mozilla‘s_DOCTYPE_sniffing ，关于Opera中DTD与浏览器工作模式的详细信息可参见  DOCTYPE Switches support in Opera Presto 2.10

在编写一个页面时，要使用能够触发浏览器“标准模式”的DTD（Document Type Definition），推荐使用 < !DOCTYPE html > ，并且书写符合规范的代码，这样才能保证页面在各个浏览器中可以最大程度的兼容；

二、HTML结构之标签语义化

• 更容易被搜索引擎收录，与搜索引擎建立起良好的沟通，有利于爬虫抓取更多的有效信息：爬虫依据标签来确定上下文和关键字的权重；
• 便于团队开发和维护，语义化更具有可读性，也是下一步网页的重要动向；遵循W3C标准的团队都遵循这个标准，有利于减少差异性；
• 去掉或丢失样式时能让页面的结构呈现相对清晰；
• 更方便其他设备解析网页内容（如屏幕阅读器、盲人阅读器、移动设备）；

  HTML 语义化标签的几个栗子：

1. <a>标签实现超链接；注意title属性的作用，方便搜索引擎了解链接地址的内容；
2. <p>文章段落
3. <hx>文章标题或者栏目标题
4. <strong>和<em>强调文本，粗体和斜体
5. <q>短文本引用
6. <blockquote>长文本引用
7. <adress>为页面加入地址信息
8. <ul>无序列表
9. <ol>有序列表
10. <caption>为表格添加标题；注意表格的summary属性，和<a>标签的title属性很像；

  HTML5 语义化标签的几个栗子：

1. <article>装载显示一个独立的文章内容；

   例如一篇完整的论坛帖子，一篇新闻、一篇博客文章、一个用户评论等；<article>标签可以嵌套，内层对外层有隶属关系；举个栗子：

   <article>
   <h1>文章标题</h1>
   这是一篇文章
         <article>评论01</article>
         <article>评论02</article>
   </article>

    

2. <section>定义文档中的节，比如文章的章节、页眉、页脚等；举个栗子：

   <section>
         <h1>章节一</h1>
         <p>详细内容</p>
   </section>
   <section>
        <h1>章节二</h1>
        <p>详细内容</p>
   </section>

    

3. <aside>用来装载非正文的内容，比如广告、侧边栏、成组的链接等；

    

4. <hgroup>用于对网页或区段的标题（h1-h6）将行组合；栗子＋1:

   <hgroup>
       <h1>标题一</h2>
       <h1>标题二</h2>
   </hgroup>

    

5. <header>表示一组引导性的帮助，可能包含标题元素，也可以包含比如像logo、分节头部、搜索导航等；
6. <footer>表示最近一个章节内容或者根节点元素的页脚；一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息；
7. <nav>导航链接放在<nav>标签里；
8. <time>用来表示24小时制时间或者公历日期，若表示日期则也可包含时间和时区；此元素意在以机器可读的格式表示日期和时间。 有安排日程表功能的应用可以利用这一点
9. <mark>代表突出显示的文字,例如可以为了标记特定上下文中的文本而使用这个标签；不要把<mark>元素和<strong>元素搞混淆,<strong>元素用来表示文本在上下文的重要型的，而<mark>元素是用来表示上下文的关联性的；
10. <figure>规定独立的流内容（如 图片、图表、照片、代码等），<figure>中的内容应当是与主内容相关的，但是若是删除的话应当是并不会对文档流产生影响的；
11. <figcaption>定义<figure>元素的标题，注意应被置于<figure>元素的第一个或最后一个子元素的位置；

     注：关于语义化标签部分内容来自博客园ToNiQ，以下地址：http://www.cnblogs.com/ToNi/p/4271537.html?utm_source=tuicool&utm_medium=referral

三、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

/******暂时就到这里吧，又饿了，再过一个小时去吃饭**********************/

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

原文：http://www.cnblogs.com/lazychen/p/5258651.html