当前位置: 代码迷 >> Web前端 >> 【Web前端】HTML文档与匣子模型
  详细解决方案

【Web前端】HTML文档与匣子模型

热度:344   发布时间:2012-10-21 09:00:07.0
【Web前端】HTML文档与盒子模型

关于HTML

百度百科里是这么说的:超文本标记语言,即HTML(Hypertext Markup Language),是用于描述网页文档的一种标记语言。

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

简单地说,它不像Java,C++等程式语言,而是通过标记(也称标签)来表示一个网页的结构与内容,它的语法非常简单,只是由各种不同的标记组合而成,因此这类语言的学习方式主要靠积累,而非程式语言般靠理解来学习。

HTML的构成

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

  • 文档类型声明(doctype)
  • 网页头部信息(head)
  • 网页主体内容(body)

一个最简单的网页文件:

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>网页标题</title>
  6. </head>
  7. <body>
  8.         网页内容
  9. </body>
  10. </html>

文档类型

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

  1. <!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。

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

  1. <!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 ...

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

嵌套规则

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

错误的写法:

  1. <span><div>内容</div></span>

盒子模型(Box Model)

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

  • 外边距(Margin)
  • 边框(Border)
  • 内边距(Padding)
  • 内容(Content)

盒子模型

可以看出,在W3C标准模式下的CSS盒子模型中,盒子的内容是不包含边框跟内边距的,但在IE的Quirks(怪异)模式下,盒子的内容包含了边框与内边距,因此相同的代码在不同的浏览器中查看,看到的布局可能的是完全不同的,这也是造成网页浏览器差异的一个重要原因。

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



=======================签 名 档=======================

原文地址(我的博客):http://www.clanfei.com/2012/10/1656.html
欢迎访问交流,至于我为什么要多弄一个博客,因为我热爱前端,热爱网页,我更希望有一个更加自由、真正属于我自己的小站,或许并不是那么有名气,但至少能够让我为了它而加倍努力。。
=======================签 名 档=======================




  相关解决方案