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来说,这些新的链接很有用。毕竟链接又称锚点对网站的权重有很大影响。

    标签语义化对SEO也有影响。移步HTML 5的革新之一:语义化标签学习。

本文源链接:http://www.html5jscss.com/html5-element.html

转载请注明《HTML 5的革新——更简洁的结构》| html5jscss

评论关闭了.