HTML文档与盒子模型

标签： html 文档 盒子 | 发表时间：2012-10-15 02:46 | 作者：蓝飞
出处：http://www.clanfei.com/

关于HTML

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

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

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

HTML的构成

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

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

一个最简单的网页文件： 

   
        
  1. <!DOCTYPE html>

    2.     
  2. <html lang="zh-CN">

    3.     
  3. <head>

    4.     
  4. 	<meta charset="UTF-8">

    5.     
  5. 	<title>网页标题</title>

    6.     
  6. </head>

    7.     
  7. <body>

    8.     
  8. 	网页内容

    9.     
  9. </body>

    10.     
  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而解决浏览器之间的差异问题。

相关 [html 文档 盒子] 推荐：

HTML文档与盒子模型

- - 蓝飞技术部落格
百度百科里是这么说的：超文本标记语言，即HTML（Hypertext Markup Language），是用于描述网页文档的一种标记语言. 为什么叫用于“描述”网页文档的“标记”语言呢. 简单地说，它不像Java，C++等程式语言，而是通过 标记（也称标签）来表示一个网页的结构与内容，它的语法非常简单，只是由各种不同的标记组合而成，因此这类语言的学习方式主要靠积累，而非程式语言般靠理解来学习.

使用 jsoup 对 HTML 文档进行解析和操作

- - 互联网旁观者
Java 程序在解析 HTML 文档时，相信大家都接触过 htmlparser 这个开源项目，我曾经在 IBM DW 上发表过两篇关于 htmlparser 的文章，分别是： 从 HTML 中攫取你所需的信息和 扩展 HTMLParser 对自定义标签的处理能力. 但现在我已经不再使用 htmlparser 了，原因是 htmlparser 很少更新，但最重要的是有了 jsoup.

Java实现HTML代码生成PDF文档

- - 企业架构 - ITeye博客
1、IText实现html2pdf，速度快，纠错能力差，支持中文（要求HTML使用unicode编码），但中支持一种中文字体，开源. 2、Flying Sauser实现html2pdf，纠错能力差，支持多种中文字体（部分样式不能识别），开源. 3、PD4ML实现html2pdf，速度快，纠错能力强，支持多种中文字体，商业.

【网络爬虫之JSOUP使用简介】入门：解析和遍历一个HTML文档

- - CSDN博客互联网推荐文章
jsoup 是一款Java 的HTML解析器，可直接解析某个URL地址、HTML文本内容. 它提供了一套非常省力的API，可通过DOM，CSS以及类似于jQuery的操作方法来取出和操作数据. 从一个URL，文件或字符串中解析HTML；. 使用DOM或CSS选择器来查找、取出数据；. 可操作HTML元素、属性、 文本；.

万能盒子，70+文档查看器Free Opener

- gbcwbz - FeedzShare
来自: 软矿 - FeedzShare  . 发布时间:2011年06月20日,  已有 2 人推荐. 不是每一台电脑都安装了各种各样的软件程序以打开相对的文件格式，而且也不能因为要打开某一文档而去安装相对的软件，那样电脑会变得越来越臃肿越来越缓慢. 这对于配置低的电脑（如上网本），那是一种折腾. Free Opener 是一个免费的文档查看器 ，支持打开多种文档 ，包括音频和视频文件，文档，微软Office文件.

HTML 安全列表

- 火锅土豆 - 酷壳 - CoolShell.cn
下面这个网站罗列了，几乎所有的关于HTML 5 在各种主流浏览器上的安全问题，这些安全问题很有可能将会是黑客攻击你的网上的敲门砖，他们几乎都和Javascript都有关系，你就要好好注意了. IE6，7，8，9，和Opera 8.x, 9.x, 10.x 都支持这样的语法. 这个问题会存在于所有的Firefox版本中，可以让用户进行XSS（跨站脚本）攻击.

HTML学习笔记

- - CSDN博客推荐文章
超文本标记语言（ 英文：HyperText Markup Language，HTML）是为“ 网页创建和其它可在 网页浏览器中看到的信息”设计的一种 标记语言. HTML被用来结构化信息——例如标题、段落和列表等等  点击打开链接. w3schools  点击打开链接 {语法大全，超赞.

html嵌套规则

- - Web前端 - ITeye博客
转载: http://www.studyofnet.com/news/412.html. 一、HTML 标签包括 块级元素(block)、内嵌元素（inline）. 一般用来搭建网站架构、布局、承载内容……它包括以下这些标签：. 一般用在网站内容之中的某些细节或部位，用以“强调、区分样式、上标、下标、锚点”等等，下面这些标签都属于内嵌元素：.

Html 转换成PDF

- - 编程语言 - ITeye博客
最近在搞一个关于html转换为pdf的需求，网上找了很多，但是如果批量处理就会出现问题，最后找到了PD4ML，解决了我的问题. String urlstring = "file:///D:/债权转让及受让协议--魏然2014-08-16.html";. 需要在src目录下创建fonts文件夹，并且在文件夹中建立pd4fonts.properties ，配置文件中的内容如下.

HTML+CSS小结 - jessies

- - 博客园_首页
   结构   HTML        .    样式   CSS      .    行为   JavaScript(交互行为).    .    网页标题.    标题.