Web开发学习心得 —— HTML的结构-控件新闻-慧都网

Web开发学习心得 —— HTML的结构

原创|其它|编辑：郝浩|2009-03-19 09:56:25.000|阅读 340 次

概述：如何认识学习关于 WEB 的HTML结构优化。

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

现在我们来学习HTML的结构(我们只讨论严格型的，也包括XHTML)。

首先给出一份严格的HTML的一些常见的规则：

1. 网页总以一个DOCTYPE开始，紧接着，<html>元素必须出现在网页的开头和结尾。

2. 只有<head>、<body>元素可以直接包含于<html>中，其他任何元素都必须包含于<head>或<body>中。

3. 必须给<head>元素一个<title>元素。

4. 只能在<body>中直接放置块元素（如<h1>,<p>,<div>等）。所有内联元素和文本都必须在块元素中才能运行。

5. 只有文本和其他内联元素可以嵌入内联元素中。块元素在任何情况下都不允许包含在内联元素中。

6. 块元素禁止包含于<p>元素中。

这份规则请一定要记住，因为这是良构的HTML最起码的条件。

该规则的第1、2、3点都非常好理解，这里不再赘述，至于第4、5、6点，则必须首先理解什么是块元素，什么是内联元素。

HTML中，<body>内的元素，基本上分为两大类，一类是块元素，一类是内联元素。

所谓块元素，是指独立显示，独占整行，好像前后都有换行的那种元素，如<div>,<p>,<h1>,<ul>,<ol>,<li>等都是块元素。

所谓内联元素，是指在网页中随着文字流出现在行内的那种元素，如<span>,<a>,<em>,<img>等都是内联元素。

不知道大家是否理解了什么是块元素、什么是内联元素，如果还不理解的话，请写几个HTML文件看看它们的表现，或者Google一下吧，相信不难理解。

现在，div+css的布局非常流行，这里的div，就是指块元素<div>。实际上，<div>一点都不神秘，它是division的简称，表示的就是“区域”这样的结构，与普通的<h1>、<p>等没有本质的区别，区别就在于，它表示“区域”，因此，我们可以把一个网页用<div>分隔成好几个区域。比如下面这个文档

我们就把整个body分解为3个区域，分别是“header”、“content”、“footer”。然后，我们还可以在这3个区域中加入嵌套的<div>，就像“content”继续分为“leftbar”与“details”两部分一样，这样就可以把区域逐级往下分，如此，一份结构清晰良好、可读性强的文档就诞生了。当然，该文档不包含任何用于展示的元素，它表示的纯粹是结构。这份文档再搭配上不同的CSS，就会有不同的外观，就好比人穿不同的衣服就有不同的形象一样。div+css，实际上，就是这么简单。