1.2 网页的HTML构成

本节教学录像时间：10分钟

HTML文本是由HTML标记组成的描述性文本，HTML标记可以用于说明文字、图形、动画、声音、表格和链接等。HTML的结构包括头部（Head）和主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。

通常情况下，HTML文档的标记都可嵌套使用，通常由三对基本标记来构成一个HTML，分别是文档标记<HTML>、头部<HEAD>和主体<BODY>，具体结构如下。

        <HTML>............................................. HTML文件开始
        <HEAD>...........................................．文件头开始
        头部信息
        </HEAD>............................................．文件头结束
        <BODY>............................................．文件体开始
        文档主体，正文部分
        </BODY>............................................. 文件体结束
        </HTML>............................................. HTML文件结束

要学习编写一个满意的HTML页面，首先需要学习的是HTML中最基本的顶级标记，包括文档标记、头部标记以及主体标记等。下图所示即为一段HTML代码。

HTML元素（Element）构成了HTML文件，这些元素由HTML标记（tags）所定义。HTML文件是一种包含了很多标记（tags）的纯文本文件，标记告诉浏览器如何去显示页面。

1.2.1 文档标记

基本HTML的页面以<HTML>标记开始，以</HTML>标记结束。HTML文档中的所有内容都应该在这两个标记之间。空结构在IE中的显示是空白的。

<HTML>标记的语法格式如下。

        <HTML>
        ...
        </HTML>

HTML 5设计准则中的第3条即是“化繁为简”，Web页面的文档类型说明（DOCTYPE）被极大地简化。

在使用Dreamweaver CC创建HTML文档时，文档头部的类型说明代码如下。

        <! doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd">

上面为XHTML文档类型说明，可以看出这段代码既烦琐又难记，HTML 5对文档类型进行了简化，简单到15个字符就可以了，代码如下。

        <! doctype html>

1.2.2 头部标记

头部标记（<HEAD>…</HEAD>）包含文档的标题信息，如标题、关键字、说明以及样式等。除了<TITLE>标题外，一般位于头部的内容不会直接显示在浏览器中，而是通过其他的方式显示。

（1）内容

头部标记中可以嵌套多个标记，如<TITLE>、<BASE>、<ISINDEX>和<SCRIPT>等标记，可以添加任意数量的属性，如<SCRIPT>、<STYLE>、<META>或<OBJECT>。除了<TITLE>外，其他的嵌入标记可以使用多个。

（2）位置

在所有的HTML文档中，头部标记都不可或缺，但是其起始和结尾标记可省，在各个HTML版本文档中，头部标记一直紧跟<BODY>标记，但在框架设置文档中，其后跟<FRAMESET>标记。

（3）属性

<HEAD>标记的属性“PROFILE”给出了元数据描写的位置，说明其中的<META>和<LIND>元素的特性，该属性的形式没有严格的格式规定。

1.2.3 主体标记

主体标记（<BODY>…</BODY>）包含了文档的内容，用若干个属性来规定文档中显示的背景和颜色。

主体标记所可能用到的属性如下。

（1）BACKGROUND=URI（文档的背景图像，URL指图像文件的路径）

（2）BGCOLOR=Color（文档的背景色）

（3）TEXT=Color（文本颜色）

（4）LINK=Color（链接颜色）

（5）VLINK=Color（已访问的链接颜色）

（6）ALINK=Color（被选中的链接颜色）

（7）ONLOAD=Script（文档已被加载）

（8）ONUNLOAD=Script（文档已推出）

为该标记添加属性的代码格式如下。

        <BODY BACKGROUNE="URI "BGCOLOR="Color ">
        ............................................
        </BODY>
上一章目录下一章