HTML文档与盒子模型

杰拉斯 | 时间：2012-10-15, Mon | 14,413 views
前端开发　

关于HTML

百度百科里是这么说的：超文本标记语言，即HTML（Hypertext Markup Language），是用于描述网页文档的一种标记语言。

为什么叫用于“描述”网页文档的“标记”语言呢？

简单地说，它不像Java，C++等程式语言，而是通过

标记

（也称标签）来表示一个网页的结构与内容，它的语法非常简单，只是由各种不同的标记组合而成，因此这类语言的学习方式主要靠积累，而非程式语言般靠理解来学习。

HTML的构成

HTML文件的结构通常由以下几个部分构成：

文档类型声明（doctype）
网页头部信息（head）
网页主体内容（body）

一个最简单的网页文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>网页标题</title>
</head>
<body>
	网页内容
</body>
</html>

文档类型

如果你了解过HTML，你可能会发现很多网页的头部会有这么一段又臭又长的东西：

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

这到底是什么呢？这就是文档类型的声明了。XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional以及 Frameset，为了兼容性与开发方便，我们一般使用Transitional。

但如果你比较细心，你会发现上面最简单的网页文件代码只使用了这么一小段代码：

	<!DOCTYPE html>

这段代码是HTML5文档类型的声明方式，而且是向后兼容的。自从有了它，妈妈再也不用担心文档类型的声明（哈哈，小小的开个玩笑）~

元素

块元素（block）

div , p , h1~h6 , ul , li , dt , dd , dl , form, section , article , nav , aside...

特点：在文档流中默认占据整行的位置。

内联元素（inline）

span , em , strong , label , a , img , input , button , select , var , del ...

特点：在文档流中默认一行可以展示多个内联元素。

嵌套规则

块元素可以嵌套所有内联元素，内联元素不能嵌套块元素。

错误的写法：

<span><div>内容</div></span>

盒子模型（Box Model）

无论是块元素，还是内敛元素，在HTML中都是一个“盒子”，这个盒子包含了以下属性：

外边距（Margin）
边框（Border）
内边距（Padding）
内容（Content）

可以看出，在W3C标准模式下的CSS盒子模型中，盒子的内容是不包含边框跟内边距的，但在IE的怪异模式（怪异）模式下，盒子的内容包含了边框与内边距，因此相同的代码在不同的浏览器中查看，看到的布局可能的是完全不同的，这也是造成网页

浏览器差异

的一个重要原因。

一种解决方式是，CSS中的padding及border属性不要同width及height属性出现在同一个盒子上，而是将其分解在父子两个元素上，便可以避免实用CSS Hack而解决浏览器之间的差异问题。

另一种解决方式是正确地声明文档类型，以保证IE不会以怪异模式渲染网页。全面的DOCTYPE渲染模式表格如下：

Doctype	Moz	IE6	IE7	IE8b1
HTML 4.01 Trans (No URL)	怪异模式	怪异模式	怪异模式	怪异模式
HTML 4.01 Trans	标准模式	标准模式	标准模式	标准模式
HTML 4.01 Strict	标准模式	标准模式	标准模式	标准模式
XHTML 1.0 Strict	标准模式	标准模式	标准模式	标准模式
XHTML + XML declaration	标准模式	怪异模式	标准模式	标准模式
XHTML + blank lines above	标准模式	未测试	未测试	标准模式
XHTML + comment below	标准模式	标准模式	标准模式	标准模式
XHTML + comment above	标准模式	怪异模式	怪异模式	怪异模式
XHTML + XML declaration + comment above	标准模式	怪异模式	怪异模式	怪异模式
XHTML + XML declaration + comment below	标准模式	怪异模式	怪异模式	怪异模式
HTML5	标准模式	标准模式	标准模式	标准模式

更详细的表格请参见：http://hsivonen.iki.fi/doctype/

如需转载请注明出处：杰拉斯的博客

杰拉斯的博客