《HTML基础知识：HTML文档的基本概念》由会员分享，可在线阅读，更多相关《HTML基础知识：HTML文档的基本概念（37页珍藏版）》请在金锄头文库上搜索。
1、HTML 基础知识：HTML 文档的基本概念下面我们先来了解一下 HTML 文档中的一些基本概念。1.1.1 标记（标签）HTML 文件是以各种功能的元素所组成的，用于描述这些功能元素的符号称为“标记” ，或者称为“标签” 。如、等。标签在使用时必须用尖括号“”括起来，而且大部分是成对出现，无斜杠的标签表示该标签的作用开始，有斜杠的标签表示该标签的作用结束。如表示一个表格的开始，表示一个表格的结束。在 HTML 中，标签的大小写作用相同，如和都是表示一个表格的开始。其实，这些标签名称大都为相应的英文单词首字母和缩写，非常容易记忆。1.1.2 特殊字符由于尖括号和英文双引号被用来提示 HTML
2、的标签及参数值，那么在网页中要显示尖括号和英文引号只能用其他符号来代替，下面是常见特殊字符所代表的正常字符。表 1-1 HTML 特殊字符书 写 内 容 对 应 字 符 & & 空格1.1.3 语法一个标签，为了明确它的功能，往往用一些属性参数来描述，对这些属性参数的规定就是所谓的语法。基本的语法格式为： 例如：1.1.4 元素元素是 HTML 文件中的一种基本结构单位，一对起始标签和终止标签以及它们之间的所有内容称为一个元素，元素能独立体现一种页面效果或者实现一种功能。从这个定义可以看出，上面的即是一个元素，它定义了后面段落的基本格式。我们可以把元素看作是一个功能模块。1.2 HTML 文档
3、的基本结构1.2.1 声明为 HTML 文件在每一个 HTML 文件的开始，必须加上标签，用来声明以下的文件属于 HTML 文件，以便浏览器辨认。同时，要在文件结尾加上终止标签，以声明这个 HTML 文件的结束。例如： 文件正文体 1.2.2 文件头声明语法格式：从起始标签到终止标签，里面所有的文字都属于 HTML 文件的文件头，并不属于文件正文体。所以，之间的一切文字都是对下面 HTML 文件的说明。后面将要提到的文件标题，以及动态文件链接和动态文字排列标签等文件定义标签，或者是 JavaScript 的程序代码都是放在文件头声明里，因为它们都不属于 HTML 文件的正文体，也就是说它们不是
4、 HTML 的内容，只是定义这份文件需要特殊处理的一些声明。例如：1.2.3 文件注解语法格式：和其他所有程序语言一样，为了让自己或者他人在将来修改、维护网页时方便阅读和理解，一般可以在 HTML 文件里加上注解，提醒自己或者他人，文件的内容是什么用途、意义以及大体的编写思路。例如： 1.2.4 文件标题语法格式：这个标签用于说明这份 HTML 文件的标题，说明这个页面的内容主题。在起始和终止标签内填入主题后，用浏览器观看这个页面的时候，相对应的主题内容就会显示在浏览器最上方的标题栏内。例如：这是我的网页 注意：标签内的文字，还会在前台用户选择添加到收藏夹时，自动显示在弹出对话框中的名称一栏里
5、。如图 1-1 所示。 图 1-1 标签的功能之一1.2.5 声明文件主体语法格式：在这两个起始和终止标签之间的内容就是 HTML 文件的主体，是当前 HTML文件的核心所在。这里仅以基本文字的输出为例，后面的课程将会作详细介绍。例如： 这是我编写的第一个 HTML 文件！ 注意：当编写完源文件时，保存文件的扩展名以 htm 或 html 为后缀，建议大家使用后缀为 html 为文件的扩展名。1.3 HTML 文档的基本单位在编辑 HTML 文件的时候，将会涉及到对各种对象属性的赋值，例如，定义标题的内容、定义文本的格式、定义图像的位置、定义水平线和表格的长宽、定义文字和背景的颜色、定义链接的
6、指向位置等等。我们通常用各种数据来这这些属性赋值。在我们用来定义对象属性的各种数据中，我们可以有很大的自由度来选择和定制，例如我们可以把标题定义为一段文字，也能是一段字母、数字或者标点符号。但有一些数据，不仅在编写的许多场合要用到它们，而且它们的表示方法、代表的含义都有一套比较严格的规则，如果使用错误将导致最终结果出现错误。下面是几种通用性强、使用范围广同时又具有严格定义的数据类型。1.3.1 长度单位长度单位可以用来定义水平线、表格边框、图像等对象的长、宽、高等一系列属性，同时也能用来定义这些对象在页面上的位置等属性，用来描述页面上可能涉及的各种长度。长度的表示有两种方式：绝对长度和相对长度
7、。它们的单位分别为像素和百分比，像素代表屏幕上的每个点，而相对长度代表描述对象占浏览器窗口的比例。一般在网页设计中较少使用绝对长度 。因为浏览器窗口可随时调整大小，如果设置为约对长度很容易造成水平线不协调，而使用相对长度来描述对象则会随浏览器窗口大小变化，适应窗口的改变。下面，我们就以水平线的宽度定义为例，具体说明长度这个数据类型的两种表示方法在定义对象时的表达方式和效果。1.3.1.1 绝对长度例如：标签是在页面上建立水平线的标签。width 是水平线元素中的一种属性，用来表示水平线的宽度。这里的 width=400 即表示这个水平线的宽度为400 像素。注意：在表示长度单位的时候，缺省的单
8、位是像素。1.3.1.2 相对长度例如：这个例子中的 width=50%表示这个水平线占据窗口或框架有效范围的 50%的宽度。在 HTML 文件中的两条水平线分别用绝对长度和相对长度定义，在调整浏览器窗口时，这两条水平线有不同的表现。缩小浏览器窗口之后绝对长度的水平线不会跟随调整，将超过窗口的宽度。1.3.2 颜色单位和长度单位一样，颜色单位也是描述页面表现形式中应用很广泛的一种数据类型。在制作页面的过程中，需要能定义字体、页面背景、表格背景甚至超链接的颜色，通过利用颜色数据来定义这些对象的颜色属性。颜色单位有三种表达的方式，我们用定义文本的字体颜色属性来说明颜色数据在定义对象时的各种表达方式
9、和效果。1.3.2.1 十六进制颜色代码语法格式：#RRGGBB十六进制的颜色代码之前一定要有一个“#”号，这种颜色代码表现形式由三个部分组成，其中前两位数字代表红色，中间两位数字代表绿色，后面两位数字代表蓝色。不同的取值决定了不同颜色的表现。它们的取值范围为 00FF。例如： 红色字体 1.3.2.2 十进制 RGB 码语法格式：RGB(RRR,GGG,BBB)这个表达式的格式中，RGB 表示后面括号里的 3 个数字分别是三种颜色的RGB 代码，取值在 0 到 255 之间，其中第一个数字代表红色，中间一个数字代表绿色，后面一个数字代表蓝色。每种取值决定了不同颜色的表现。例如：红色字体 注意
10、：在实际中很少使用这种方式，一般都使用十六制颜色代码。1.3.2.3 直接颜色名称在这种形式的颜色代码中可以直接使用颜色的英文名称。例如：红色字体 由于在各种场合对颜色属性的定义基本相同，后面的内容将不再对对象的颜色属性定义作详细说明。大家在编写 HTML 文件定义各种对象的颜色属性时，除了标签不同之外，都可按上面的方法来实现。1.3.3 URL 路径URL 路径是一种互联网地址的表示法。在这个数据里可以包括以何种协议链接、要链接到哪一个地址、链接地址的端口号以及服务器里文件的完整路径和文件名称等信息。由于在互联网中同时支持了多种协议，而且可以链接到不同目录下的不同文件甚至不同段落，所以无法再
11、用传统的 IP 地址或者域名表示地址信息，只能用包含了众多信息的 URL 来对地址和文件进行定位。在 HTML 文件编写过程中，当对互联网地址或者文件的位置信息进行定义的时候，都需要用 URL 路径来表示，URL 是一种常用的数据类型。1.3.3.1 绝对路径绝对路径是将服务器上磁盘驱动器名称和完整的路径都写出来，同时也会表现出磁盘上的目录结构。语法格式：:其中，是某种传输协议，如 HTTP、FTP，而则是要链接的位置信息，包括服务器名称、域名、端口号和文件路径等。在 HTML 文件中，文件路径的表示方法又分为绝对路径和相对路径两种，可以方便的为我们定位所要链接的文件。例如： 1.3.3.2
12、相对路径相对路径则是相对于当前的 HTML 文档所在目录或站点根目录的路径。语法格式：相对关系/部分路径/文件名根据相对路径的参照点又分为“相对文档的相对路径”和“相对根目录的相对路径” 。1、相对文档的相对路径这种路径的表现形式是根据目标文档所在的目录和当前文档所在目录之间的关系的一种表现形式。符号“./”表示上一级目录，没有“./”的相对路径则表示当前目录。例如：当前文档的路径为：website/html/link/index.htm。我们要找到html 目录下 images 文件夹中的 logo.gif。在这个例子中，当前文档是在 link目录下， “./”则表示回到 link 目录的上
13、一级目录 html 目录，因此这个路径的表现形式就是：“./images/logo.gif”如果我们需要找 website 目录下的 images 文件夹中的 logo.gif，那个这个路径就是：“././images/logo.gif” 2、相对根目录的相对路径相对根目录的相对路径是根据目标文档相对根目录的关系的一种表现形式。在这种表达式中的第一个字符是“/” ，这个符号表示这个路径是一个相对根目录的表达式。例如：由于相对路径的概念不容易理解，还希望大家在学习的过程中仔细体会。一般来说，我们都把已经编写好的主要的 HTML 文件以及与其相关的其他文件放在同一个目录和这个目录的下级子目录里，这
14、样对管理、修改和维护比较有利。当发生整个网站系统的迁移时，因为所有的文件相对地址来表示，所以对这些文件产生的影响很少，迁移和后续工作相对不容易出错。因此，相对路径应该是我们普遍被采用的方式。1.4 HEAD 部分HEAD 部分由标签组成，是 HTML 文档的首要部分，紧接在的开始标签之后，在标签之前。在这一部分包含着页面的一些重要的设置信息。包含的元素如下：表 1-2 BODY 标签包含的元素元 素 名 称 含 义title 文档标题meta 描述非 HTML 标准的一些文档信息link 描述当前文档与其他文档之间的链接关系base 定义提交时默认的外部资源script 脚本程序内容style 样式表内容1.4.1 TITLE 元素TITLE 元素是 HEAD 部分的重要组成部分，它包含的内容将显示在浏览器的窗口标题栏中。如果没有 TITLE 元素，浏览器标题栏将显示本页的文件名。语法格式：文档标题nt
