HTML 5的革新——更简洁的结构

今天我们阐述HTML 5的革新之一：更简洁的结构。

新的文档类型 DOCTYPE

先来解释一下文档类型 DOCTYPE：文档类型位于HTML源文件的第一行，在HTML4的标准中，DOCTYPE在被归在“HTML 标签”一章中，

DOCTYPE由来历史

说说历史吧，其实 DOCTYPE 之所以出现是由于早期的Netscape 4和Explorer 4对css进行解析时，并未遵守W3C标准，这时的解析方式就被我们称之为quirks mode(怪异模式)。而且这个黑色艺术的缔造者就是微软，微软在开发Explorer 5时改进了对W3C标准的支持，以至于旧的一些网页出现了错误的渲染效果（其实是依照规范是正确的，也可以说他们之前制作的网页没有依据规范来）。于是微软想出了一个新奇的方案：在开始渲染页面之前，IE5会先检查DOCTYPE来激活新的标准模式，而老旧的网页一般没有DOCTYPE，Explorer 5就会像老旧浏览器一样渲染它们，所以浏览器就有了两种渲染模式：“怪异模式（quirks mode）”和“标准模式（strict mode）”。

而接着为了激活标准模式呢（顺应大潮么），网页制作者就得在前面加上 DOCTYPE 。后来Mozilla发布1.1版本时，数以万计的网页在Mozilla浏览器上支离破碎，原来是因为，虽然加上DOCTYPE之后虽然以标准模式渲染，但他们实际上仍依赖于某个特定的quirks 模式，于是Mozill公司又创建了“almost strict moede（准标准模式）”。于是就有了三种浏览器模式！

而Mozill公司创建的“almost strict moede（准标准模式）”从字面意思上看与标准模式非常类似，但确实有小的差别。主要体现在对于表格单元格内垂直方向布局渲染差异。IE8 开始、Firefox、Chrome、Safari、Opera 7.5 开始，这些浏览器的标准模式更加严格的遵循了 CSS2.1 规范，故对于在目前看来不太“标准”的以前的标准模式，被赋予了“近似标准模式”的名字。但是在较早的 IE6 IE7 以及 Opera 7.5 之前版本中，浏览器无法严格遵循 CSS2.1 规范，故对于它们来说没有这个近似标准模式，也可以理解为它们的近似标准模式就是标准模式。

其实在大多数浏览器，大多数 DOCTYPE 声明触发的是almost strict mode（准标准模式）。

渲染模式

浏览器的工作模式常被称为“渲染模式”。实际上浏览器不同的工作模式不仅对渲染有影响，对代码的解析以及脚本的行为也同样有影响。你删除了 DOCTYPE 时，以哪种“渲染模式”展示您html页面的权利就完全交给了浏览器，每种浏览器可能都有他们一套渲染模式~这肯定会影响代码验证，而且也决定了浏览器如何显示你的Web文档。

渲染模式向后兼容

IE 的版本号一路从 6.0 升至了目前的 9.0，但若我们不书写 DOCTYPE 或者使用了能够触发混杂模式的 DOCTYPE，那我们所面对的浏览器仍相当于是那个十几年前的老古董 IE5.5。而其他那些浏览器的混杂模式和标准模式之间却没有想 IE 中这么大的差别。所以你只要在页面第一行加入下面代码就不会出现“怪异模式（quirks mode）”（点击quirksmode官网网站了解更多怪异模式信息）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

15个能在所有现代浏览器能触发标准模式的doctype中最常用的一种

看了上面那一大段代码和 DOCTYPE 出现的原因，你是不是觉得 DOCTYPE 本不应该出现，干脆把它去掉。但是我们知道将 DOCTYPE 删除就是将html页面以哪种渲染模式的权利给浏览器。单不说有几种 DOCTYPE ，浏览器就那么多种类在了。

W3C说：别担心，既然不能删除，那我我来简化它！哈哈哈~~~~~

<!DOCTYPE html >

HTML 5的 DOCTYPE

就只需要这15个字符。非常简单，我们再也不需要担心会敲错。而且在 HTML5 草案中，更加明确的规定了那三种模式的定义，所以能触发所有现代浏览器的strict mode（标准模式）。/p>

如果力求最简，则 HTML5 的 DOCTYPE 是最佳选择；如果力求稳妥，则较早的 HTML4.01 Strict 的 DOCTYPE 也是一种好的选择，在各主流浏览器中触发的模式与上面的 HTML5 的完全一致

DOCTYPE 开启的的条件

  1. 对于那些浏览器不能识别的doctype声明，浏览器采用quirks mode解析
  2. 在doctype声明中，没有使用DTD声明或者使用HTML4以下（不包括HTML4）的DTD声明时，基本所有的浏览器都是使用quirks mode呈现，其他的则使用strict mode解析（可以这么说，在现有的有doctype声明的网页，绝大多数是采用strict mode进行解析的）。
  3. 在ie6中，如果在doctype声明前有一个xml声明(比如:<?xml version="1.0" encoding="iso-8859-1"?>)，则采用quirks mode解析(这条规则在ie7中已经移除了)。
  4. 不推荐在 DOCTYPE 之前加入任何非空白内容。

根元素

一个页面就好比是一棵树，而HTML元素就是页面里所有元素的根。换句话说，一个HTML页面的根元素始终是html

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

html4的根元素代码

我们可以讨论一下xmlns属性。它的意思是：在这个页面上的元素位于XHTML命名空间http://www.w3.org/1999/xhtml之中。但是HTML 5的元素都是具有这个命名空间的，因此不必再写明了。不管有没有这个属性，HTML 5页面在所有浏览器中将会有一致的表现。而在HTML 5只有lang属性有效，你可以保留xml:lang,但是你得保证它跟lang的属性值相同。好了去掉不要，现在html根元素就是这样了：

<html lang="en">

HTML 5的根元素

head元素

head元素是根元素的第一个元素，它里面的信息是网页本身的信息，而不是网页的本体。（主体在body里）

藏在head里都是好东西特别是对于做seoer来说。

meta元素

meta标签的作用就是知名所用的字符的编码，不指定编码可能会导致安全漏洞

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

HTML 4指定字符编码的代码

又是这么多，现在html5已经把它变成像下面那样。

<meta charset="utf-8"/>

HTML 5指定字符编码的代码

head元素里还有很多元素譬如：title，因为其他属性html5没有重新再定义，所以我就介绍link增加的一些链接关系

链接关系

普通的a只是链接到某个页面，链接关系则提供了一种方式以解释为什么链接到那个页面

这里我们首先来来说rel="stylesheet"，看下图

<link rel="stylesheet" type="text/css" href="style.css"/>

html4样式链接

因为Web中样式就只有CSS，所以html5做了小小的优化，把type去掉了，如下

<link rel="stylesheet" href="style.css"/>

html5样式链接

除了样式链接，html5把js的引入的type也去掉了，因为Web中前端脚本也只有js一种。

<script src="path/to/script.js"></script>

其他链接关系，因为链接能影响权重等，所以还是要了解一下。

    • rel="alternatr"
      HTML5里它的定义已得到澄清，属性值是RSS或者Atom等媒介类型
    • rel="archives"
      表示所引用文档的一组收藏，包括记录、文档或者有历史价值的材料。一个blog的索引页可以使用rel"archives"链接到该blog过去所有发表文章的索引目录
    • rel="author"
      用于链接到页面作者的相关信息，譬如“关于作者”页面。
    • rel="external"
      表示该链接与当前文档不同，并不属于该站点，譬如访客留言所包含的链接就是用上。
    • rel="start"，"prev"，"next"
      表示同一系列的页面之间的关系。
    • rel="icon"
      浏览器标签卡上的小图标。
    • rel="license"
      微格式。
    • rel="nofollow"
      表示链接未经页面的作者或者出版者的认可，或者表示出于对方的商业合作关系才被添加的。经常跟 external 连用
    • rel="noreferrer"
      表示点击这个不回泄漏referrer信息，但是现在很多浏览器不支持这个属性。
    • rel="pingback"
      它的作用是：当被其他网站链接时，网站会自动收到通知，wordpress里实现了这个机制，在写新文章的时候告诉作者你链接了他们。
    • rel="prefetch"
      有些搜索引擎加上这个链接后会给某些搜索结果后面加上rel=”prefetch”，表示这个比其他受欢迎的多。

li>rel="search"
表示所引用的链接页面是搜索文章或者其他文档的，内部搜索页。

    • rel="sidebar"
      表示所引用的文件如果被获取，那么器目的是要显示在次要的浏览范围，就是说点击这个链接，会提示用户创建一个收藏夹项目，但从收藏夹选择该项目时所链接的文档将在浏览器的侧边栏打开。
    • rel="tag"
      表示标签，譬如文章的分类、关键字。

对SEOer来说，这些新的链接很有用。毕竟链接又称锚点对网站的权重有很大影响。

摘自：http://www.html5jscss.com/html5-element-8.html

posted @ 2013-07-12 15:46  momoの前端花园  阅读(393)  评论(0)  编辑  收藏  举报