[Web前端]HTML文档与盒子模型

关于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的Quirks（怪异）模式下，盒子的内容包含了边框与内边距，因此相同的代码在不同的浏览器中查看，看到的布局可能的是完全不同的，这也是造成网页浏览器差异的一个重要原因。
一种很简单却实用的解决方式是，CSS中的padding及border属性不要同width及height属性出现在同一个盒子上，而是将其分解在父子两个元素上，便可以避免实用CSS Hack而解决浏览器之间的差异问题。

补充：Web开发 , 其他 ,