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

来源:转载

现在我们来学习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>
<div id="header">
</div>
<div id="content">
<div id="leftbar">
</div>
<div id="details">
</div>
</div>
<div id="footer">
</div>

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


分享给朋友:
您可能感兴趣的文章:
随机阅读: