《基础知识HTML文档的基本概念.doc》由会员分享，可在线阅读，更多相关《基础知识HTML文档的基本概念.doc（37页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
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文件的正文体，也就是说它们不是HTML的内容，只是定义这份
4、文件需要特殊处理的一些声明。例如： 1.2.3 文件注解 语法格式：和其他所有程序语言一样，为了让自己或者他人在将来修改、维护网页时方便阅读和理解，一般可以在HTML文件里加上注解，提醒自己或者他人，文件的内容是什么用途、意义以及大体的编写思路。例如： 1.2.4 文件标题 语法格式：这个标签用于说明这份HTML文件的标题，说明这个页面的内容主题。在起始和终止标签内填入主题后，用浏览器观看这个页面的时候，相对应的主题内容就会显示在浏览器最上方的标题栏内。例如：这是我的网页 注意：标签内的文字，还会在前台用户选择添加到收藏夹时，自动显示在弹出对话框中的名称一栏里。如图1-1所示。 图1-1 标签
5、的功能之一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像素。 注意：在表示长度单位的时候，缺省的单位是像素。1.3.1.2 相对长度 例如： 这个例子中的w
8、idth=50%表示这个水平线占据窗口或框架有效范围的50%的宽度。 在HTML文件中的两条水平线分别用绝对长度和相对长度定义，在调整浏览器窗口时，这两条水平线有不同的表现。缩小浏览器窗口之后绝对长度的水平线不会跟随调整，将超过窗口的宽度。1.3.2 颜色单位 和长度单位一样，颜色单位也是描述页面表现形式中应用很广泛的一种数据类型。在制作页面的过程中，需要能定义字体、页面背景、表格背景甚至超链接的颜色，通过利用颜色数据来定义这些对象的颜色属性。颜色单位有三种表达的方式，我们用定义文本的字体颜色属性来说明颜色数据在定义对象时的各种表达方式和效果。1.3.2.1 十六进制颜色代码 语法格式：#RR
9、GGBB十六进制的颜色代码之前一定要有一个“#”号，这种颜色代码表现形式由三个部分组成，其中前两位数字代表红色，中间两位数字代表绿色，后面两位数字代表蓝色。不同的取值决定了不同颜色的表现。它们的取值范围为00FF。例如： 红色字体 1.3.2.2 十进制RGB码 语法格式：RGB(RRR,GGG,BBB)这个表达式的格式中，RGB表示后面括号里的3个数字分别是三种颜色的RGB代码，取值在0到255之间，其中第一个数字代表红色，中间一个数字代表绿色，后面一个数字代表蓝色。每种取值决定了不同颜色的表现。例如：红色字体 注意：在实际中很少使用这种方式，一般都使用十六制颜色代码。1.3.2.3 直接颜
10、色名称在这种形式的颜色代码中可以直接使用颜色的英文名称。例如：红色字体 由于在各种场合对颜色属性的定义基本相同，后面的内容将不再对对象的颜色属性定义作详细说明。大家在编写HTML文件定义各种对象的颜色属性时，除了标签不同之外，都可按上面的方法来实现。1.3.3 URL路径 URL路径是一种互联网地址的表示法。在这个数据里可以包括以何种协议链接、要链接到哪一个地址、链接地址的端口号以及服务器里文件的完整路径和文件名称等信息。由于在互联网中同时支持了多种协议，而且可以链接到不同目录下的不同文件甚至不同段落，所以无法再用传统的IP地址或者域名表示地址信息，只能用包含了众多信息的URL来对地址和文件进
11、行定位。 在HTML文件编写过程中，当对互联网地址或者文件的位置信息进行定义的时候，都需要用URL路径来表示，URL是一种常用的数据类型。1.3.3.1 绝对路径 绝对路径是将服务器上磁盘驱动器名称和完整的路径都写出来，同时也会表现出磁盘上的目录结构。 语法格式：:其中，是某种传输协议，如HTTP、FTP，而则是要链接的位置信息，包括服务器名称、域名、端口号和文件路径等。在HTML文件中，文件路径的表示方法又分为绝对路径和相对路径两种，可以方便的为我们定位所要链接的文件。例如： a href= 1.3.3.2 相对路径 相对路径则是相对于当前的HTML文档所在目录或站点根目录的路径。 语法格式
12、：相对关系/部分路径/文件名根据相对路径的参照点又分为“相对文档的相对路径”和“相对根目录的相对路径”。 1、相对文档的相对路径这种路径的表现形式是根据目标文档所在的目录和当前文档所在目录之间的关系的一种表现形式。符号“./”表示上一级目录，没有“./”的相对路径则表示当前目录。例如：当前文档的路径为：website/html/link/index.htm。我们要找到html目录下images文件夹中的logo.gif。在这个例子中，当前文档是在link目录下，“./”则表示回到link目录的上一级目录html目录，因此这个路径的表现形式就是：“./images/logo.gif” 如果我们需
13、要找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部分的重要组成部分，它包含的内容将显示在浏览器的窗口标题栏中。如果没有TITL
15、E元素，浏览器标题栏将显示本页的文件名。 语法格式：文档标题1.4.2 META元素（附）META元素提供一些非HTML标准的用户不可见的信息。META元素通常用来为搜索引擎定义页面描述以及搜索关键字；或者是定义用户浏览器上的Cookie，还可以设置页面使其可以根据我们定义的时间间隔新页面。值得注意的是“META标签没有结束标签”配对。META标签分两大部分：HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME)。1.4.2.1 HTTP-EQUIVHTTP-EQUIV类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。常用的HTTP-EQUIV
16、类型有：1、Content-Type 说明：设定页面使用的字符集，用以说明主页制作所使用的文字语言，浏览器会根据此来调用相应的字符集显示网页内容。2、Refresh (刷新) 说明：让网页多长时间（秒）刷新自己，或在多长时间后让网页自动链接到其它网页。例如： 注意：其中的5是指停留5秒钟后自动刷新到URL网址1.4.3 LINK元素 LINK元素用于指定当前文档和其他文档之间的链接关系。一个最有用的也是最常用的应用就是外部层叠样式表的定位。注意：很多网站如果你把她保存在收件夹中后，会发现它连带着一个小图标，如果再次点击进入之后还会发现地址栏中也有个小图标。现在只要在你的页头加上这段话，就能轻松
17、实现这一功能。 用来将目前文件与其它 URL 作连结，但不会有连结按钮，用于 标记间。 语法格式： 属性：rel 说明两个文档之间的关系。 Href 说明目标文档名。 下面是一个利用link元素来指定一个外联样式表文件的例子： 1.4.4 BASE元素使用标签最主要的原因，是为了确保文档中所有的相对URL都可以被分解成正确的文档地址，即使在文档本身被移动或重命名的情况下也可以正确解析。 语法格式：属性href指定文档中链接到的所有文件默认的URL地址。在base元素中指定href的属性，所有的相对路径的前面都会加上href属性中的值。例如：我们在base元素中指定href的属性为：，并且在文档
18、中有一个这样的链接： 那么该链接指向的URL地址就是 属性target指定文档中所有链接的默认打开窗口。该属性最常见的应用是在框架Frame页中。1.4.5 SCRIPT元素 标签是用来在页面中插入脚本程序，代码需要放置在起始和结束的标签之中。 语法格式： language属性用来指明脚本语言的种类。因为浏览器可以使用多种脚本语言，所以必须指明语言的种类。1.4.6 STYLE元素 用来指定当前文档的CSS层叠样式表，它非常有用，而且功能灵活，让你轻松指定一些如字体、颜色、背景、边界以及其他在body部分使用标签特征。 语法格式： 样式语句 1.5 BODY部分 这一节我们讲述HTML文档中重
19、要的一部分-body部分，以及大部分body部分中的HTML元素的语法及其各自的属性，这其中主要包括：body元素、标题元素、段落元素、无序列表元素、有序列表元素、链接元素以及图像元素等等。可以说，掌握了这部分内容，我们就能编写出一个具备基本要素的web页面了。1.5.1 BODY元素 在开始编写具体内容之前，我们需要对页面进行一个整体的基本规划和设置，例如页面的背景颜色、背景图案、页面留白以及大部分文字的颜色等等。在HTML中，我们使用元素来定义页面的这些基本属性。语法格式： 在body元素的属性中可以分为三类，第一类为背景属性，包括bgcolor和background；第二类为文字属性，包
20、括text、link、alink和vlink；第三类为留白属性，包括leftmargin和topmargin。 表1-4 BODY元素的属性属性名称含 义bgcolor指定页面的背景色（颜色值）background指定页面的背景图案（图片平铺）（URL值）text非链接文字的颜色（颜色值）link可链接文字的颜色（颜色值）alink正被点击的可链接文字的颜色（颜色值）vlink已经点击（访问）过的可链接文字的颜色（颜色值）leftmargin页面左侧的留白（长度单位）topmargin页面顶部的留白（长度单位）1.5.2 标题元素 一般文件中会有标题，包括主标题、次标题、副标题等形式。我们在编
21、写HTML文件的时候，同样需要考虑把标题突出，让人可以马上看到标题并被标题所吸引。在HTML文件中，可以利用字体大小的变化来达到这个效果，一共有6类标题的标签。语法格式：标题内容 其中：x的取值为1至6之间的一个数字。 表1-5 标题元素的属性属性名称含 义align指定标题元素中文字的对齐方式（默认值left）可选值：left | center | right1.5.3 段落元素段落元素用来描述一个段落，在表现形式上，两个段落之间会插入一个空行。当我们想对整个文档进行整体设置时，可以利用段落标签的属性对整个段落的基本排版形式进行调整。 语法格式： 表1-6 段落元素的属性属性名称含 义ali
22、gn指定段落元素中文字的对齐方式（默认值left）可选值：left | center | right1.5.4 换行标签 换行标签是个单一的标签，不需要终止标签。这个标签可以用来控制文字的换行，是对文字编排的基本标签。 语法格式： 1.5.5 不换行标签 在不换行标签和之间的文字将不会根据浏览器的窗口大小而自动换行，而是一直延伸下去。当窗口宽度不够显示文字内容的时候，可利用水平滚动条来浏览整个文件的内容。 语法格式： 在通常情况下，如果我们不对文字的排版加以控制，文本将会根据浏览器窗口宽度的变化自动换行，自动适应窗口变化达到默认的显示效果。而如果使用了标签后，文本将不会自动换行，将一直延伸下去
23、。这时，我们看到浏览器窗口下方自动出现水平滚动条，可以通过拖动滚动条浏览所有内容。1.5.6 预格式化元素 在对文本的处理中，我们通常会遇到缩进、间隔等一些需要空白的地方，但是浏览器对这些处理的控制上不够灵活，在很多情况下就无法达到我们要求的效果。这个问题就可以用预格式化标签来解决。在和之间的文本在浏览器中生成的效果将会和我们编写时制定的格式一样。 语法格式： 例如： 这是第一行， 这是第二行， 这是第三行。 这时，浏览器中看到的效果就与源文件中的效果一样。1.5.7 列表元素 当我们要表现的信息在页面上是一条一条整齐出现的时候，就要使用到列表标签，它能很容易的让这些信息美观、明显的出现在页面
24、上，并且可以使文章内容看起来更富有条理。列表类元素可分为无序列表、有序列表以及自定义列表。1.5.7.1 无序列表 无序列表就是在每一个列表项前面加上、等符号，所以又称符号列表。 语法格式： 第一个列表项 第二个列表项 表1-7 无序列表的属性属性名称含 义type指定无序列表项前的符号样式。可选值：disc（实心圆点，默认） circle（空心圆点） square（实心方块）1.5.7.2 有序列表 所谓的有序列表元素就是在每一个列表项的前面加上一个编号字符，这个编号字符可以是阿拉伯数字也可以是英文字母。 语法格式： 第一个列表项 第二个列表项 表1-8 有序列表的属性属性名称含 义type
25、指定列表项前面的编号字符。可选值：1（数字编号，默认） a（小写英文字母，如a、b、c） A（大写英文字母，如A、B、C） i（小写罗马字母，如、） I（大写罗马字母，如、）start指定编号的起始序号（必须是数字） 有序列表的起始序号随着元素中的type属性的改变而改变，并且始终是该字符中的第一个字符，如当type属性的值为a时，那么列表序号的起始值也就是a。但我们可以通过元素的start属性来改变列表项的起始序号，如type属性的值为a，而start属性的值为2，那么该列表序号的起始值就是b。1.5.7.3 自定义列表 自定义列表包括3个部分，称为自定义列表标签。用于标示自定义条目，则用以
26、标示自定义内容。 所谓自定义列表就是一种分两层的项目列表，没有符号及数字序号。三个标签都没有常用的属性。而、可以独立使用，只是一些旧的浏览器并不支持，如IE3.0。常用的如标签可用以制造段落第一个字前面的空白。 语法格式： 第一个列表项 第二个列表项 1.5.8 链接元素 前面我们已经讲过HTML语言是一种描述性的标签语言，那么HTML和其他的标签语言有什么区别？这里我们要介绍HTML中最为重要的一个概念-链接，链接是之所以将HTML文档称为超文本以及交互式文档的一个基本原因。 我们可以通过一个链接来调用另一个网络资源，比如，一个图像、一段视频电影或者是一个HTML文档。从某种意义上来说，链接
27、是推动网络蓬勃发展的一个重要力量。 在HTML语言中使用这一对标签来声明一个链接元素。 语法格式：NLP培训 1.5.8.1 href属性用来指定链接的目标地址，该属性的值可以是一个URL地址也可以是一个链接锚点。 语法格式：a href= a href= 当href属性的值为一个URL地址时，即该链接指向一个文档之外的另一个文件，我们称之为“文档外链接”；当href属性的值为一个锚点时，那么该链接则指向文档内该锚点的所在位置，我们称之为“文档内链接”。例如：a href= nlp网站 1.5.8.2 name属性 用于指定一个锚点的名称。在上面我们已经提到了锚点的概念。所谓锚点，指的是文档中的某一个位置。 我们使用元素的name属性给文档中的某一个位置命名，以便于建立一个可以直接转到该位置的链