第2章--网页制作基础语言――HTML课件

网页设计与制作教程第二章第二章第二章第二章办公楼办公楼办公楼办公楼509 509 电话：电话：电话：电话：22410704224107042008.102008.102.1 HTML2.1 HTML简介和文档的基本简介和文档的基本简介和文档的基本简介和文档的基本结构结构结构结构2.2 2.2 文本格式应用文本格式应用文本格式应用文本格式应用2.3 2.3 超链接超链接超链接超链接2.4 2.4 多媒体元素应用多媒体元素应用多媒体元素应用多媒体元素应用2.5 2.5 表格表格表格表格2.6 2.6 表单表单表单表单 第第2章章 网页制作基础语言网页制作基础语言HTML HTMLHTML是是是是Hypertext Markup LanguageHypertext Markup Language（超文本标记语言）的缩写，是一种为普通文件（超文本标记语言）的缩写，是一种为普通文件（超文本标记语言）的缩写，是一种为普通文件（超文本标记语言）的缩写，是一种为普通文件中某些字句加上标识的语言，中某些字句加上标识的语言，中某些字句加上标识的语言，中某些字句加上标识的语言，HTMLHTML实质是表示网页的一种规范，它实质是表示网页的一种规范，它实质是表示网页的一种规范，它实质是表示网页的一种规范，它通过标通过标通过标通过标记符定义了网页内容的显示格式记符定义了网页内容的显示格式记符定义了网页内容的显示格式记符定义了网页内容的显示格式。当用户通过浏览器浏览网页上的信息时，服务当用户通过浏览器浏览网页上的信息时，服务当用户通过浏览器浏览网页上的信息时，服务当用户通过浏览器浏览网页上的信息时，服务器会将相关器会将相关器会将相关器会将相关HTMLHTML文档发送到浏览器上，浏览器按文档发送到浏览器上，浏览器按文档发送到浏览器上，浏览器按文档发送到浏览器上，浏览器按照顺序读取照顺序读取照顺序读取照顺序读取HTMLHTML文档的标记，然后解释文档的标记，然后解释文档的标记，然后解释文档的标记，然后解释HTMLHTML标标标标记，同时显示相应的格式。记，同时显示相应的格式。记，同时显示相应的格式。记，同时显示相应的格式。2.1 HTML2.1 HTML简介简介简介简介HTMLHTML文档是一种纯文本格式的文件，文档是一种纯文本格式的文件，文档是一种纯文本格式的文件，文档是一种纯文本格式的文件，HTMLHTML文档的基本结构为：文档的基本结构为：文档的基本结构为：文档的基本结构为：网页的标题网页的标题网页的标题网页的标题 !-网页的内容网页的内容网页的内容网页的内容 !-【例【例【例【例2-12-1】2.1 HTML2.1 HTML文档的基本结构文档的基本结构文档的基本结构文档的基本结构 2.1.2 HTML2.1.2 HTML的基本结构的基本结构的基本结构的基本结构 1.1.标记标记标记标记 HTML HTML文档由标记和被标记的内容组成。标记（文档由标记和被标记的内容组成。标记（文档由标记和被标记的内容组成。标记（文档由标记和被标记的内容组成。标记（tagtag）能产）能产）能产）能产生所需的各种效果。格式为：生所需的各种效果。格式为：生所需的各种效果。格式为：生所需的各种效果。格式为：受标记影响的内容受标记影响的内容受标记影响的内容受标记影响的内容/例如，标题标记例如，标题标记例如，标题标记例如，标题标记表示为：表示为：表示为：表示为：我的第一个网页我的第一个网页我的第一个网页我的第一个网页 注意：标记的规则五点！注意：标记的规则五点！注意：标记的规则五点！注意：标记的规则五点！2.2.标记的属性标记的属性标记的属性标记的属性 标记只是规定这是什么信息，或是文本，或是图片，但怎标记只是规定这是什么信息，或是文本，或是图片，但怎标记只是规定这是什么信息，或是文本，或是图片，但怎标记只是规定这是什么信息，或是文本，或是图片，但怎样显示或控制这些信息，就需要在标记后面加上相关的属性来样显示或控制这些信息，就需要在标记后面加上相关的属性来样显示或控制这些信息，就需要在标记后面加上相关的属性来样显示或控制这些信息，就需要在标记后面加上相关的属性来表示，每个标记有一系列的属性。格式为：表示，每个标记有一系列的属性。格式为：表示，每个标记有一系列的属性。格式为：表示，每个标记有一系列的属性。格式为：2 受影响受影响受影响受影响的内容的内容的内容的内容/例如，字体标记例如，字体标记例如，字体标记例如，字体标记有属性有属性有属性有属性sizesize和和和和colorcolor等。等。等。等。属性示例属性示例属性示例属性示例 注意：属性的语法规则！注意：属性的语法规则！注意：属性的语法规则！注意：属性的语法规则！2.1 HTML2.1 HTML文档的基本结构文档的基本结构文档的基本结构文档的基本结构 2.1.1 2.1.1 标记及其属性标记及其属性标记及其属性标记及其属性标记有很多属性用于设定网页的总体风格：bgcolor设置页面背景色设置页面背景色text设置页面非可链接文字的颜色设置页面非可链接文字的颜色link设置尚未被访问过的超链接的颜色，默认为蓝色设置尚未被访问过的超链接的颜色，默认为蓝色alink设置超链接在被访问瞬间的颜色，默认为蓝色设置超链接在被访问瞬间的颜色，默认为蓝色vlink设置已被访问过的超链接的颜色，默认为蓝设置已被访问过的超链接的颜色，默认为蓝background设置页面的背景图像设置页面的背景图像bgproperties=”FIXED”可使可使背景图像固定背景图像固定leftmargin设置页面左边的空白，单位是像素值设置页面左边的空白，单位是像素值topmargin设置页面上方的空白，单位是像素值设置页面上方的空白，单位是像素值2.1.3 网页文件的创建过程 编辑与保存1打开记事本打开记事本打开记事本打开记事本单击单击单击单击WindowsWindows的的的的“开开开开始始始始”按钮，在按钮，在按钮，在按钮，在“程序程序程序程序”菜菜菜菜单中的单中的单中的单中的“附件附件附件附件”子菜单子菜单子菜单子菜单中单击中单击中单击中单击“记事本记事本记事本记事本”2创建新文件，并按创建新文件，并按创建新文件，并按创建新文件，并按HTMLHTML语言规则编辑语言规则编辑语言规则编辑语言规则编辑在在在在“记事本记事本记事本记事本”窗口中输窗口中输窗口中输窗口中输入入入入HTMLHTML语言，输入语言，输入语言，输入语言，输入的内容的内容的内容的内容3保存网页保存网页保存网页保存网页打开打开打开打开“记事本记事本记事本记事本”的的的的“文件文件文件文件”菜单，选择菜单，选择菜单，选择菜单，选择“保存保存保存保存”。此时将出现此时将出现此时将出现此时将出现“另存为另存为另存为另存为”对话框，在对话框，在对话框，在对话框，在“保存在保存在保存在保存在”下拉列表框中选择文下拉列表框中选择文下拉列表框中选择文下拉列表框中选择文件要存放的路径；件要存放的路径；件要存放的路径；件要存放的路径；2.1.3 网页文件的创建过程 预览1用浏览器打开用浏览器打开用浏览器打开用浏览器打开网页在浏览后会有不满意网页在浏览后会有不满意网页在浏览后会有不满意网页在浏览后会有不满意的地方，此时可重新在的地方，此时可重新在的地方，此时可重新在的地方，此时可重新在“记记记记事本事本事本事本”中打开该中打开该中打开该中打开该.html.html文件文件文件文件修改；或者在浏览器中直修改；或者在浏览器中直修改；或者在浏览器中直修改；或者在浏览器中直接打开源文件接打开源文件接打开源文件接打开源文件2在在在在“Windows“Windows资源管理器资源管理器资源管理器资源管理器”或或或或“我的电脑我的电脑我的电脑我的电脑”中打开中打开中打开中打开 在在在在“Windows“Windows资源管理器资源管理器资源管理器资源管理器”或或或或“我的电脑我的电脑我的电脑我的电脑”中双击要打开中双击要打开中双击要打开中双击要打开的的的的.html.html文件，这时将直接文件，这时将直接文件，这时将直接文件，这时将直接在默认的浏览器中打开该在默认的浏览器中打开该在默认的浏览器中打开该在默认的浏览器中打开该.html.html文件。文件。文件。文件。1.1.注释标记注释标记注释标记注释标记注释标记的格式为：注释标记的格式为：注释标记的格式为：注释标记的格式为：!-注释并不局限于一行，长度不受限制。结束标记与开始标注释并不局限于一行，长度不受限制。结束标记与开始标注释并不局限于一行，长度不受限制。结束标记与开始标注释并不局限于一行，长度不受限制。结束标记与开始标记可以不在一行上。记可以不在一行上。记可以不在一行上。记可以不在一行上。2.2.分段落标记分段落标记分段落标记分段落标记放在一个段落的头尾，用于定义一个段落。放在一个段落的头尾，用于定义一个段落。放在一个段落的头尾，用于定义一个段落。放在一个段落的头尾，用于定义一个段落。.标记不但能使后面的文字换到下一行，标记不但能使后面的文字换到下一行，标记不但能使后面的文字换到下一行，标记不但能使后面的文字换到下一行，还可以使还可以使还可以使还可以使两段之间多一空行，相当于两个两段之间多一空行，相当于两个两段之间多一空行，相当于两个两段之间多一空行，相当于两个标记标记标记标记。段落标记的。段落标记的。段落标记的。段落标记的格式为：格式为：格式为：格式为：文字文字文字文字 其中属性其中属性其中属性其中属性alignalign用来设置段落文字在网页上的对齐方式：用来设置段落文字在网页上的对齐方式：用来设置段落文字在网页上的对齐方式：用来设置段落文字在网页上的对齐方式：leftleft（左对齐）、（左对齐）、（左对齐）、（左对齐）、centercenter（居中）和（居中）和（居中）和（居中）和rightright（右对齐）。缺省时（右对齐）。缺省时（右对齐）。缺省时（右对齐）。缺省时默认为默认为默认为默认为leftleft。格式中的格式中的格式中的格式中的“|”“|”表示表示表示表示“或者或者或者或者”，即多中选一。，即多中选一。，即多中选一。，即多中选一。2.2 2.2 文本格式应用文本格式应用文本格式应用文本格式应用2.2.1 2.2.1 文本段落格式文本段落格式文本段落格式文本段落格式强制换行和不换行标记强制换行和不换行标记强制换行和不换行标记强制换行和不换行标记、.要用要用要用要用HTMLHTML的标记来强制换行、分段。的标记来强制换行、分段。的标记来强制换行、分段。的标记来强制换行、分段。只有开始标只有开始标只有开始标只有开始标记没有结束标记记没有结束标记记没有结束标记记没有结束标记，可以使文字、图片、表格等显示于下一，可以使文字、图片、表格等显示于下一，可以使文字、图片、表格等显示于下一，可以使文字、图片、表格等显示于下一行，而又不会在行与行之间留下空行，即强制文本换行。行，而又不会在行与行之间留下空行，即强制文本换行。行，而又不会在行与行之间留下空行，即强制文本换行。行，而又不会在行与行之间留下空行，即强制文本换行。强制换行标记的格式为：强制换行标记的格式为：强制换行标记的格式为：强制换行标记的格式为：文字文字文字文字 不换行标记可令文字不能因太长使浏览器无法显示而换行，不换行标记可令文字不能因太长使浏览器无法显示而换行，不换行标记可令文字不能因太长使浏览器无法显示而换行，不换行标记可令文字不能因太长使浏览器无法显示而换行，它对住址、数学公式、一行数字等尤其有用。其格式为：它对住址、数学公式、一行数字等尤其有用。其格式为：它对住址、数学公式、一行数字等尤其有用。其格式为：它对住址、数学公式、一行数字等尤其有用。其格式为：文字文字文字文字 【例例例例2-32-3】3.3.换行标记换行标记换行标记换行标记 在页面中，标题是一段文字内容的核心，所以总是用加强在页面中，标题是一段文字内容的核心，所以总是用加强在页面中，标题是一段文字内容的核心，所以总是用加强在页面中，标题是一段文字内容的核心，所以总是用加强的效果来表示。网页中的信息可以分为主要点、次要点，可以的效果来表示。网页中的信息可以分为主要点、次要点，可以的效果来表示。网页中的信息可以分为主要点、次要点，可以的效果来表示。网页中的信息可以分为主要点、次要点，可以通过设置不同大小的标题，为文章增加条理。通过设置不同大小的标题，为文章增加条理。通过设置不同大小的标题，为文章增加条理。通过设置不同大小的标题，为文章增加条理。浏览器会自动将浏览器会自动将浏览器会自动将浏览器会自动将字体解释成字体解释成字体解释成字体解释成“黑体黑体黑体黑体”，同时将内容设置为一个段落，同时将内容设置为一个段落，同时将内容设置为一个段落，同时将内容设置为一个段落,标题文字标标题文字标标题文字标标题文字标记的格式为：记的格式为：记的格式为：记的格式为：标题文字标题文字标题文字标题文字 n n用来指定标题文字的大小，用来指定标题文字的大小，用来指定标题文字的大小，用来指定标题文字的大小，n n取取取取1 16 6的整数值，取的整数值，取的整数值，取的整数值，取1 1时时时时文字最大，文字最大，文字最大，文字最大，6 6时文字最小。时文字最小。时文字最小。时文字最小。属性属性属性属性alignalign设置标题在页面中的对齐方式：设置标题在页面中的对齐方式：设置标题在页面中的对齐方式：设置标题在页面中的对齐方式：leftleft、centercenter或或或或rightright。缺省时默认为。缺省时默认为。缺省时默认为。缺省时默认为leftleft。标记缺省显示宋体，在一个标题行中无标记缺省显示宋体，在一个标题行中无标记缺省显示宋体，在一个标题行中无标记缺省显示宋体，在一个标题行中无法使用不同大小的字体。法使用不同大小的字体。法使用不同大小的字体。法使用不同大小的字体。与用与用与用与用定义的网页标题不同，标题格式定义的网页标题不同，标题格式定义的网页标题不同，标题格式定义的网页标题不同，标题格式显示在浏览器窗口内，而不显示在浏览器的标题栏中。显示在浏览器窗口内，而不显示在浏览器的标题栏中。显示在浏览器窗口内，而不显示在浏览器的标题栏中。显示在浏览器窗口内，而不显示在浏览器的标题栏中。【例【例【例【例2-42-4】4.4.标题文字标记标题文字标记标题文字标记标题文字标记 设定文字、图像、表格的摆放位置。当在许多段落中设定文字、图像、表格的摆放位置。当在许多段落中设定文字、图像、表格的摆放位置。当在许多段落中设定文字、图像、表格的摆放位置。当在许多段落中设置对齐方式时，常使用设置对齐方式时，常使用设置对齐方式时，常使用设置对齐方式时，常使用标记。定位标记标记。定位标记标记。定位标记标记。定位标记的格式为：的格式为：的格式为：的格式为：文本、图像或表文本、图像或表文本、图像或表文本、图像或表格格格格 其中属性其中属性其中属性其中属性alignalign用来设置文本块、一段文字或标题在网用来设置文本块、一段文字或标题在网用来设置文本块、一段文字或标题在网用来设置文本块、一段文字或标题在网页上的对齐方式：页上的对齐方式：页上的对齐方式：页上的对齐方式：leftleft、centercenter和和和和rightright。缺省时默认为。缺省时默认为。缺省时默认为。缺省时默认为leftleft。【例【例【例【例2-52-5】5.5.分节标记分节标记分节标记分节标记 在页面中插入一条水平标尺线，可以使不同功能的文字在页面中插入一条水平标尺线，可以使不同功能的文字在页面中插入一条水平标尺线，可以使不同功能的文字在页面中插入一条水平标尺线，可以使不同功能的文字分隔开，看起来整齐、明了。当浏览器解释到分隔开，看起来整齐、明了。当浏览器解释到分隔开，看起来整齐、明了。当浏览器解释到分隔开，看起来整齐、明了。当浏览器解释到HTMLHTML文档中文档中文档中文档中的的的的标记时，会在此处换行，并加入一条水平线段。线标记时，会在此处换行，并加入一条水平线段。线标记时，会在此处换行，并加入一条水平线段。线标记时，会在此处换行，并加入一条水平线段。线段的样式由标记的参数决定。段的样式由标记的参数决定。段的样式由标记的参数决定。段的样式由标记的参数决定。水平线标记的格式为：水平线标记的格式为：水平线标记的格式为：水平线标记的格式为：hr align=left|center|right size=noshade sizesize设定线条粗细，以像素为单位，默认为设定线条粗细，以像素为单位，默认为设定线条粗细，以像素为单位，默认为设定线条粗细，以像素为单位，默认为2 2。width width设定线段长度，可以是绝对值（以像素为单位）设定线段长度，可以是绝对值（以像素为单位）设定线段长度，可以是绝对值（以像素为单位）设定线段长度，可以是绝对值（以像素为单位）或相对值（相对于当前窗口的百分比）。或相对值（相对于当前窗口的百分比）。或相对值（相对于当前窗口的百分比）。或相对值（相对于当前窗口的百分比）。colorcolor设定线条色彩，默认为黑色。可以采用色彩的名设定线条色彩，默认为黑色。可以采用色彩的名设定线条色彩，默认为黑色。可以采用色彩的名设定线条色彩，默认为黑色。可以采用色彩的名称。色彩可以用相应英文单词或以称。色彩可以用相应英文单词或以称。色彩可以用相应英文单词或以称。色彩可以用相应英文单词或以“#”“#”引导的一个十六进制引导的一个十六进制引导的一个十六进制引导的一个十六进制数代码来表示。数代码来表示。数代码来表示。数代码来表示。【例【例【例【例2-62-6】6.6.水平线标记水平线标记水平线标记水平线标记(Horizontal Rules)7.文字居中标记文字居中标记可以实现文本可以实现文本居中，另外还有居中，另外还有标记也可以！标记也可以！格式为：文本 在网页中为了增强页面的层次，其中的文字可以用不同在网页中为了增强页面的层次，其中的文字可以用不同在网页中为了增强页面的层次，其中的文字可以用不同在网页中为了增强页面的层次，其中的文字可以用不同的大小、字体、字型、色彩。用的大小、字体、字型、色彩。用的大小、字体、字型、色彩。用的大小、字体、字型、色彩。用标记设置字号标记设置字号标记设置字号标记设置字号（被被被被W3CW3C列为不建议使用的标记，以后将学习用列为不建议使用的标记，以后将学习用列为不建议使用的标记，以后将学习用列为不建议使用的标记，以后将学习用CSSCSS来设定字体）。设置文字大小的格式为：来设定字体）。设置文字大小的格式为：来设定字体）。设置文字大小的格式为：来设定字体）。设置文字大小的格式为：font size=被被被被设置的文字设置的文字设置的文字设置的文字 标记可设定文字的字体、字号和色彩。标记可设定文字的字体、字号和色彩。标记可设定文字的字体、字号和色彩。标记可设定文字的字体、字号和色彩。size size用来设置文字的大小。数字的取值范围从用来设置文字的大小。数字的取值范围从用来设置文字的大小。数字的取值范围从用来设置文字的大小。数字的取值范围从1 17 7，sizesize取取取取1 1时最小，取时最小，取时最小，取时最小，取7 7时最大。时最大。时最大。时最大。face face用来设置字体。如黑体、宋体、楷体用来设置字体。如黑体、宋体、楷体用来设置字体。如黑体、宋体、楷体用来设置字体。如黑体、宋体、楷体_GB2312_GB2312、隶、隶、隶、隶书、书、书、书、Times New RomanTimes New Roman等。等。等。等。color color用来设置文字色彩。用来设置文字色彩。用来设置文字色彩。用来设置文字色彩。【例【例2-8】【例【例2-9】【例【例2-10】2.2.2 2.2.2 文字的显示效果文字的显示效果文字的显示效果文字的显示效果1.1.字体标记字体标记字体标记字体标记./font.2.2.2 文字的显示效果文字的显示效果2.字符样式标记字符样式标记网页中的一些特殊字符样式，比如文字显示为网页中的一些特殊字符样式，比如文字显示为粗体或斜体、某些字符需要显示上、下标等，粗体或斜体、某些字符需要显示上、下标等，这就需要使用字符样式标记这就需要使用字符样式标记。比如：。比如：标标记中的记中的b是是bold（粗体）单词的首字母，则（粗体）单词的首字母，则标记表示粗体标记表示粗体 3.转义字符转义字符HTML中，分别用中，分别用“”符号来识别是否是符号来识别是否是HTML标记标记，因此不能直接用因此不能直接用“”符号符号当作文本符号。因此，定义它的转义字符串当作文本符号。因此，定义它的转义字符串【使用时不加“”】2.2.3 列表格式列表格式意义意义：当一个网页中包含多项内容时，可以使用列表格式标记将这些当一个网页中包含多项内容时，可以使用列表格式标记将这些信息进行合理组织信息进行合理组织 1.无序列表标记无序列表标记2.每一个表项前面都是项目符号，如每一个表项前面都是项目符号，如、等符号等符号 无序列表标记无序列表标记（Unordered List）和列表项（和列表项（List Item）标记）标记，格式为：，格式为：第一个列表项第一个列表项第二个列表项第二个列表项必须成对出现，而必须成对出现，而必须写必须写标记之间标记之间，标记中属性用：标记中属性用：type表示表示【例例2-11】2.有序列表标记有序列表标记有序标记有序标记和列表项标记和列表项标记，格式为：，格式为：第一个列表项第一个列表项第二个列表项第二个列表项【例【例2-12】超链接（超链接（超链接（超链接（HyperlinkHyperlink）是网页互相联系的桥梁，超链接）是网页互相联系的桥梁，超链接）是网页互相联系的桥梁，超链接）是网页互相联系的桥梁，超链接可以看作是一个可以看作是一个可以看作是一个可以看作是一个“热点热点热点热点”，它可以从当前网页定义的位置跳转，它可以从当前网页定义的位置跳转，它可以从当前网页定义的位置跳转，它可以从当前网页定义的位置跳转到其他位置，包括当前页的某个位置、到其他位置，包括当前页的某个位置、到其他位置，包括当前页的某个位置、到其他位置，包括当前页的某个位置、InternetInternet或本地硬或本地硬或本地硬或本地硬盘或局域网上的其他文件，甚至跳转到声音、图片等多媒体盘或局域网上的其他文件，甚至跳转到声音、图片等多媒体盘或局域网上的其他文件，甚至跳转到声音、图片等多媒体盘或局域网上的其他文件，甚至跳转到声音、图片等多媒体文件。浏览网页是超链接最普遍的一种应用，通过超链接还文件。浏览网页是超链接最普遍的一种应用，通过超链接还文件。浏览网页是超链接最普遍的一种应用，通过超链接还文件。浏览网页是超链接最普遍的一种应用，通过超链接还可以获得不同形态的服务，如文件传输、资料查询、电子邮可以获得不同形态的服务，如文件传输、资料查询、电子邮可以获得不同形态的服务，如文件传输、资料查询、电子邮可以获得不同形态的服务，如文件传输、资料查询、电子邮件、远程访问等。件、远程访问等。件、远程访问等。件、远程访问等。当网页包含超链接时，网页中的外观形式为彩色（一当网页包含超链接时，网页中的外观形式为彩色（一当网页包含超链接时，网页中的外观形式为彩色（一当网页包含超链接时，网页中的外观形式为彩色（一般为蓝色）且带下划线的文字或图片。单击这些文本或图片，般为蓝色）且带下划线的文字或图片。单击这些文本或图片，般为蓝色）且带下划线的文字或图片。单击这些文本或图片，般为蓝色）且带下划线的文字或图片。单击这些文本或图片，可跳转到相应位置。鼠标指针指向超链接的显示文本或图片可跳转到相应位置。鼠标指针指向超链接的显示文本或图片可跳转到相应位置。鼠标指针指向超链接的显示文本或图片可跳转到相应位置。鼠标指针指向超链接的显示文本或图片时，将变成手形。超文本链接使用锚点标记时，将变成手形。超文本链接使用锚点标记时，将变成手形。超文本链接使用锚点标记时，将变成手形。超文本链接使用锚点标记来定义。来定义。来定义。来定义。2.3 2.3 超链接超链接超链接超链接 锚点（锚点（锚点（锚点（anchoranchor）标记由）标记由）标记由）标记由定义，它在网页定义，它在网页定义，它在网页定义，它在网页上建立超文本链接。通过单击一个词、句或图片，可从此处上建立超文本链接。通过单击一个词、句或图片，可从此处上建立超文本链接。通过单击一个词、句或图片，可从此处上建立超文本链接。通过单击一个词、句或图片，可从此处转到另一个链接资源（目标资源），这个目标资源有惟一的转到另一个链接资源（目标资源），这个目标资源有惟一的转到另一个链接资源（目标资源），这个目标资源有惟一的转到另一个链接资源（目标资源），这个目标资源有惟一的地址（地址（地址（地址（URLURL）。具有以上特点的词、句或图片就称为热点。）。具有以上特点的词、句或图片就称为热点。）。具有以上特点的词、句或图片就称为热点。）。具有以上特点的词、句或图片就称为热点。标记的格式为：标记的格式为：标记的格式为：标记的格式为：a name=热点热点热点热点 href href属性为超文本引用，它的值为一个属性为超文本引用，它的值为一个属性为超文本引用，它的值为一个属性为超文本引用，它的值为一个URLURL，是目标，是目标，是目标，是目标资源的有效地址。如果要创建一个不链接到其他位置的空超资源的有效地址。如果要创建一个不链接到其他位置的空超资源的有效地址。如果要创建一个不链接到其他位置的空超资源的有效地址。如果要创建一个不链接到其他位置的空超链接，可用链接，可用链接，可用链接，可用“#”“#”代替代替代替代替URLURL，即，即，即，即 热点热点热点热点 。target target属性设定链接被单击后结果所要开始窗口的方式。属性设定链接被单击后结果所要开始窗口的方式。属性设定链接被单击后结果所要开始窗口的方式。属性设定链接被单击后结果所要开始窗口的方式。可选值为：可选值为：可选值为：可选值为：_blank_blank，_parent_parent，_self_self，_top_top。2.3 2.3 超链接超链接超链接超链接2.3.1 2.3.1 锚点标记锚点标记锚点标记锚点标记.1.1.链接到同一目录内的网页文件链接到同一目录内的网页文件链接到同一目录内的网页文件链接到同一目录内的网页文件 链接到同一目录内的网页文件的格式为：链接到同一目录内的网页文件的格式为：链接到同一目录内的网页文件的格式为：链接到同一目录内的网页文件的格式为：a href=.html 热点文本热点文本热点文本热点文本 【例【例【例【例2-112-11】2.2.链接到下一级目录中的网页文件链接到下一级目录中的网页文件链接到下一级目录中的网页文件链接到下一级目录中的网页文件 链接到下一级目录中网页文件的格式为：链接到下一级目录中网页文件的格式为：链接到下一级目录中网页文件的格式为：链接到下一级目录中网页文件的格式为：a href=.html 热点文本热点文本热点文本热点文本 3.3.链接到上一级目录中的网页文件链接到上一级目录中的网页文件链接到上一级目录中的网页文件链接到上一级目录中的网页文件 链接到上一级目录中网页文件的格式为：链接到上一级目录中网页文件的格式为：链接到上一级目录中网页文件的格式为：链接到上一级目录中网页文件的格式为：a href=./.html 热点文本热点文本热点文本热点文本 其中其中其中其中“./“./表示退到上一级目录中。表示退到上一级目录中。表示退到上一级目录中。表示退到上一级目录中。4.4.链接到同级目录中的网页文件链接到同级目录中的网页文件链接到同级目录中的网页文件链接到同级目录中的网页文件 链接到同级目录中网页文件的格式为：链接到同级目录中网页文件的格式为：链接到同级目录中网页文件的格式为：链接到同级目录中网页文件的格式为：a href=./.html 热点文本热点文本热点文本热点文本 2.3 2.3 超链接超链接超链接超链接2.3.2 2.3.2 指向其他页面的链接指向其他页面的链接指向其他页面的链接指向其他页面的链接 要在当前页面内实现超链接，需要定义两个标记：一个为要在当前页面内实现超链接，需要定义两个标记：一个为要在当前页面内实现超链接，需要定义两个标记：一个为要在当前页面内实现超链接，需要定义两个标记：一个为超链接标记，另一个为书签标记。超链接标记的格式为：超链接标记，另一个为书签标记。超链接标记的格式为：超链接标记，另一个为书签标记。超链接标记的格式为：超链接标记，另一个为书签标记。超链接标记的格式为：a href=#热点文本热点文本热点文本热点文本 书签就是用书签就是用书签就是用书签就是用标记对该文本作一个记号。格式为：标记对该文本作一个记号。格式为：标记对该文本作一个记号。格式为：标记对该文本作一个记号。格式为：a name=目标文本附近的字符串目标文本附近的字符串目标文本附近的字符串目标文本附近的字符串 【例【例【例【例2-142-14】如果要建立指向其他页面某处的文本，格式为：如果要建立指向其他页面某处的文本，格式为：如果要建立指向其他页面某处的文本，格式为：如果要建立指向其他页面某处的文本，格式为：a href=URL#热点文本热点文本热点文本热点文本 要在跳转到的位置处加上链接标记：要在跳转到的位置处加上链接标记：要在跳转到的位置处加上链接标记：要在跳转到的位置处加上链接标记：a name=文字串文字串文字串文字串 如果链接指向其他文件的某一部分，格式为：如果链接指向其他文件的某一部分，格式为：如果链接指向其他文件的某一部分，格式为：如果链接指向其他文件的某一部分，格式为：a href=热点文本热点文本热点文本热点文本 2.3 2.3 超链接超链接超链接超链接2.3.3 2.3.3 指向本页中的链接指向本页中的链接指向本页中的链接指向本页中的链接 如果链接到的文件不是如果链接到的文件不是如果链接到的文件不是如果链接到的文件不是HTMLHTML文件，则该文件将作为下载文件，则该文件将作为下载文件，则该文件将作为下载文件，则该文件将作为下载文件，其格式为：文件，其格式为：文件，其格式为：文件，其格式为：a href=热点文本热点文本热点文本热点文本 【例【例【例【例2-152-15】2.3.5 2.3.5 指向电子邮件的链接指向电子邮件的链接指向电子邮件的链接指向电子邮件的链接 单击指向电子邮件的链接，将打开缺省的电子邮件程序，单击指向电子邮件的链接，将打开缺省的电子邮件程序，单击指向电子邮件的链接，将打开缺省的电子邮件程序，单击指向电子邮件的链接，将打开缺省的电子邮件程序，如如如如FoxMailFoxMail、Outlook ExpressOutlook Express，并自动填写邮件地址。指向，并自动填写邮件地址。指向，并自动填写邮件地址。指向，并自动填写邮件地址。指向电子邮件链接的格式为：电子邮件链接的格式为：电子邮件链接的格式为：电子邮件链接的格式为：a href=mailto:E-mail 热点文本热点文本热点文本热点文本 例如，例如，例如，例如，E-E-，建立如下链接：，建立如下链接：，建立如下链接：，建立如下链接：免费电话免费电话免费电话免费电话:80012345678:80012345678 信箱信箱信箱信箱:a href=mailto:2.3 2.3 超链接超链接超链接超链接2.3.4 2.3.4 指向下载文件的链接指向下载文件的链接指向下载文件的链接指向下载文件的链接 1.1.设置背景色设置背景色设置背景色设置背景色 格式为：格式为：格式为：格式为：body bgcolor=“色彩值色彩值色彩值色彩值”可以为色彩的英文名或相应十六进制值。可以为色彩的英文名或相应十六进制值。可以为色彩的英文名或相应十六进制值。可以为色彩的英文名或相应十六进制值。2.2.用图片作为背景用图片作为背景用图片作为背景用图片作为背景 使用使用使用使用标记的标记的标记的标记的backgroundbackground属性，可为网页铺上背属性，可为网页铺上背属性，可为网页铺上背属性，可为网页铺上背景图片。格式为：景图片。格式为：景图片。格式为：景图片。格式为：body background=background background取值为一个图片文件名，并且要指出文件取值为一个图片文件名，并且要指出文件取值为一个图片文件名，并且要指出文件取值为一个图片文件名，并且要指出文件存放的路径，可以是相对路径，也可以是绝对路径。图片文件存放的路径，可以是相对路径，也可以是绝对路径。图片文件存放的路径，可以是相对路径，也可以是绝对路径。图片文件存放的路径，可以是相对路径，也可以是绝对路径。图片文件可为可为可为可为GIFGIF格式或格式或格式或格式或JPEGJPEG格式的文件。格式的文件。格式的文件。格式的文件。在浏览器中，作为背景的图片将按原来的大小复制，重复在浏览器中，作为背景的图片将按原来的大小复制，重复在浏览器中，作为背景的图片将按原来的大小复制，重复在浏览器中，作为背景的图片将按原来的大小复制，重复铺满整个网页。铺满整个网页。铺满整个网页。铺满整个网页。【例【例【例【例2-162-16】2.4 2.4 图片图片图片图片2.4.1 2.4.1 网页的背景网页的背景网页的背景网页的背景 使用图片标记，可以把一幅图片加入到网页中。用图片标使用图片标记，可以把一幅图片加入到网页中。用图片标使用图片标记，可以把一幅图片加入到网页中。用图片标使用图片标记，可以把一幅图片加入到网页中。用图片标记还可以设置图片的替代文本、尺寸、布局等属性。图片标记记还可以设置图片的替代文本、尺寸、布局等属性。图片标记记还可以设置图片的替代文本、尺寸、布局等属性。图片标记记还可以设置图片的替代文本、尺寸、布局等属性。图片标记的格式为：的格式为：的格式为：的格式为：img src=如果不设定图片的尺寸，图片将按照其本身的大小显示。如果不设定图片的尺寸，图片将按照其本身的大小显示。如果不设定图片的尺寸，图片将按照其本身的大小显示。如果不设定图片的尺寸，图片将按照其本身的大小显示。可使用可使用可使用可使用标记的标记的标记的标记的widthwidth和和和和heightheight属性来设置图片的大小。属性来设置图片的大小。属性来设置图片的大小。属性来设置图片的大小。widthwidth和和和和heightheight属性的属性值可取像素数，也可取百分数。属性的属性值可取像素数，也可取百分数。属性的属性值可取像素数，也可取百分数。属性的属性值可取像素数，也可取百分数。【例【例【例【例2-172-17】【例【例2-18】2.4 2.4 图片图片图片图片2.4.2 2.4.2 图片标记图片标记图片标记图片标记 如果不设置文本对图片的环绕，图片在页面会占一片空白。如果不设置文本对图片的环绕，图片在页面会占一片空白。如果不设置文本对图片的环绕，图片在页面会占一片空白。如果不设置文本对图片的环绕，图片在页面会占一片空白。利用利用利用利用标记的属性，可以使文本环绕图片。标记的属性，可以使文本环绕图片。标记的属性，可以使文本环绕图片。标记的属性，可以使文本环绕图片。使用该标记设置文本环绕方式后，将一直有效，直到遇使用该标记设置文本环绕方式后，将一直有效，直到遇使用该标记设置文本环绕方式后，将一直有效，直到遇使用该标记设置文本环绕方式后，将一直有效，直到遇到下一个设置标记。如果想取消文本环绕图片，可使用到下一个设置标记。如果想取消文本环绕图片，可使用到下一个设置标记。如果想取消文本环绕图片，可使用到下一个设置标记。如果想取消文本环绕图片，可使用br clear标记，其后的文本将不再环绕图片。格式为：标记，其后的文本将不再环绕图片。格式为：标记，其后的文本将不再环绕图片。格式为：标记，其后的文本将不再环绕图片。格式为：其中其中其中其中clearclear的取值可为：的取值可为：的取值可为：的取值可为：leftleft（解除在图片左侧放置的文（解除在图片左侧放置的文（解除在图片左侧放置的文（解除在图片左侧放置的文本）、本）、本）、本）、rightright（解除在图片右侧放置的文本）或（解除在图片右侧放置的文本）或（解除在图片右侧放置的文本）或（解除在图片右侧放置的文本）或allall（解除在图（解除在图（解除在图（解除在图片左、右侧放置的文本）。片左、右侧放置的文本）。片左、右侧放置的文本）。片左、右侧放置的文本）。【例【例2-19】2.4 2.4 图片图片图片图片2.4.2 2.4.2 图片标记图片标记图片标记图片标记 图片也可作为热点，单击图片则跳转到被链接的文本或其图片也可作为热点，单击图片则跳转到被链接的文本或其图片也可作为热点，单击图片则跳转到被链接的文本或其图片也可作为热点，单击图片则跳转到被链接的文本或其他文件。格式为：他文件。格式为：他文件。格式为：他文件。格式为：img src=例如，下面代码：例如，下面代码：例如，下面代码：例如，下面代码：img src=vb.jpg hspace=10 vspace=5 2.4 2.4 图片图片图片图片2.4.3 2.4.3 用图片作为超链接用图片作为超链接用图片作为超链接用图片作为超链接 最简单的表格仅包括行和列。表格的标记为最简单的表格仅包括行和列。表格的标记为最简单的表格仅包括行和列。表格的标记为最简单的表格仅包括行和列。表格的标记为，行，行，行，行的标记为的标记为的标记为的标记为，表项的标记为，表项的标记为，表项的标记为，表项的标记为。格式为：。格式为：。格式为：。格式为：table border=n width=x|x%height=y|y%cellspacing=i cellpadding=j 表头表头表头表头1 1 表头表头表头表头2 2 表头表头表头表头nn 表项表项表项表项1 1 表项表项表项表项2 2 表项表项表项表项nn 表项表项表项表项1 1 表项表项表项表项2 2 表项表项表项表项nn【例【例【例【例2-242-24】【例【例2-25】2.5 2.5 表格表格表格表格 2.5.1 2.5.1 表格基本结构表格基本结构表格基本结构表格基本结构 2.5 表格表格 2.5.1 2.5.1 表格基本结构表格基本结构表格基本结构表格基本结构表格标记：表格标记：表格标题标记：表格标题标记：表格行标记：表格行标记：表格表头标记：表格表头标记：“黑体黑体”表格单元格标记：表格单元格标记：在默认下，表项居于单元格的左端。可用列、行的属性设在默认下，表项居于单元格的左端。可用列、行的属性设在默认下，表项居于单元格的左端。可用列、行的属性设在默认下，表项居于单元格的左端。可用列、行的属性设置表项数据在单元格中的位置。置表项数据在单元格中的位置。置表项数据在单元格中的位置。置表项数据在单元格中的位置。1.1.水平对齐水平对齐水平对齐水平对齐 表项数据的水平对齐用标记表项数据的水平对齐用标记表项数据的水平对齐用标记表项数据的水平对齐用标记、和和和和的的的的alignalign属性。属性。属性。属性。alignalign的属性值分别为：的属性值分别为：的属性值分别为：的属性值分别为：centercenter（表项数据的居中（表项数据的居中（表项数据的居中（表项数据的居中）、）、）、）、leftleft（左对齐）、（左对齐）、（左对齐）、（左对齐）、rightright（右对齐）或（右对齐）或（右对齐）或（右对齐）或justifyjustify（左右调整）。（左右调整）。（左右调整）。（左右调整）。【例【例【例【例2-262-26】2.2.垂直对齐垂直对齐垂直对齐垂直对齐 表项数据的垂直对齐用标记表项数据的垂直对齐用标记表项数据的垂直对齐用标记表项数据的垂直对齐用标记、和和和和的的的的valignvalign属性。属性。属性。属性。valignvalign的属性值分别为：的属性值分别为：的属性值分别为：的属性值分别为：toptop（靠单元格顶）、（靠单元格顶）、（靠单元格顶）、（靠单元格顶）、bottombottom（靠单元格底）、（靠单元格底）、（靠单元格底）、（靠单元格底）、middlemiddle（靠单元格中）或（靠单元格中）或（靠单元格中）或（靠单元格中）或baselinebaseline（同行单元数据项位置一致）。（同行单元数据项位置一致）。（同行单元数据项位置一致）。（同行单元数据项位置一致）。【例【例【例【例2-272-27】2.5 2.5 表格表格表格表格 2.5.2 2.5.2 表格内文字的对齐方式表格内文字的对齐方式表格内文字的对齐方式表格内文字的对齐方式 前面介绍的是表格中的各个单元格的属性。现在，把表格前面介绍的是表格中的各个单元格的属性。现在，把表格前面介绍的是表格中的各个单元格的属性。现在，把表格前面介绍的是表格中的各个单元格的属性。现在，把表格作为一个整体，介绍表格在页面中的位置及背景的设置。与图作为一个整体，介绍表格在页面中的位置及背景的设置。与图作为一个整体，介绍表格在页面中的位置及背景的设置。与图作为一个整体，介绍表格在页面中的位置及背景的设置。与图片一样，表格在浏览器窗口中的位置也有三种：居左、居中和片一样，表格在浏览器窗口中的位置也有三种：居左、居中和片一样，表格在浏览器窗口中的位置也有三种：居左、居中和片一样，表格在浏览器窗口中的位置也有三种：居左、居中和居右。使用居右。使用居右。使用居右。使用标记的标记的标记的标记的alignalign属性。格式为：属性。格式为：属性。格式为：属性。格式为：当表格位于页面的左侧或右侧时，文本填充在另一侧。当当表格位于页面的左侧或右侧时，文本填充在另一侧。当当表格位于页面的左侧或右侧时，文本填充在另一侧。当当表格位于页面的左侧或右侧时，文本填充在另一侧。当表格居中时，表格两边没有文本。当表格居中时，表格两边没有文本。当表格居中时，表格两边没有文本。当表格居中时，表格两边没有文本。当alignalign属性缺省时，文本属性缺省时，文本属性缺省时，文本属性缺省时，文本在表格的下面。在表格的下面。在表格的下面。在表格的下面。【例【例【例【例2-282-28】2.5.4 不规则表格不规则表格 属性：属性：、rowspan、colspan【例【例【例【例2-292-29】2.5 2.5 表格表格表格表格 2.5.3 2.5.3 表格在页面中的对齐方式表格在页面中的对齐方式表格在页面中的对齐方式表格在页面中的对齐方式 在在在在、标记中，使用下面属标记中，使用下面属标记中，使用下面属标记中，使用下面属性可以改变表格的背景和边框的色彩、添加背景图片，也可以性可以改变表格的背景和边框的色彩、添加背景图片，也可以性可以改变表格的背景和边框的色彩、添加背景图片，也可以性可以改变表格的背景和边框的色彩、添加背景图片，也可以为行和单元格改变色彩、添加背景图片。为行和单元格改变色彩、添加背景图片。为行和单元格改变色彩、添加背景图片。为行和单元格改变色彩、添加背景图片。bgcolor=bgcolor=色彩或色彩值色彩或色彩值色彩或色彩值色彩或色彩值 设置背景色彩设置背景色彩设置背景色彩设置背景色彩 background=background=图片文件名图片文件名图片文件名图片文件名 设置背景图片设置背景图片设置背景图片设置背景图片 bordercolor=bordercolor=色彩色彩色彩色彩 设置表格边框的色彩设置表格边框的色彩设置表格边框的色彩设置表格边框的色彩 bordercolorlight=bordercolorlight=色彩色彩色彩色彩 设置表格边框亮部的色彩设置表格边框亮部的色彩设置表格边框亮部的色彩设置表格边框亮部的色彩 rules=row,cols rules=row,cols或或或或none none 设置表内线的显示方法，设置表内线的显示方法，设置表内线的显示方法，设置表内线的显示方法，nonenone为无内线为无内线为无内线为无内线 如果把属性放到如果把属性放到如果把属性放到如果把属性放到中，其作用范围为整个表格，中，其作用范围为整个表格，中，其作用范围为整个表格，中，其作用范围为整个表格，如果把属性放到如果把属性放到如果把属性放到如果把属性放到中，则作用范围为整个行，如果把属性中，则作用范围为整个行，如果把属性中，则作用范围为整个行，如果把属性中，则作用范围为整个行，如果把属性放到放到放到放到、中，则作用范围为该单元格。中，则作用范围为该单元格。中，则作用范围为该单元格。中，则作用范围为该单元格。【例2-30】2.5 2.5 表格表格表格表格 2.5.5 2.5.5 表格的色彩和图片背景表格的色彩和图片背景表格的色彩和图片背景表格的色彩和图片背景 网页上具有可输入表项及项目选择等控制所组成的栏目称网页上具有可输入表项及项目选择等控制所组成的栏目称网页上具有可输入表项及项目选择等控制所组成的栏目称网页上具有可输入表项及项目选择等控制所组成的栏目称为表单。在网页中，通过表单交流和反馈信息。格式为：为表单。在网页中，通过表单交流和反馈信息。格式为：为表单。在网页中，通过表单交流和反馈信息。格式为：为表单。在网页中，通过表单交流和反馈信息。格式为：form name=method=get|post input type=size=x maxlength=y name name属性属性属性属性:表单的名字，在一个网页中用于惟一识别一表单的名字，在一个网页中用于惟一识别一表单的名字，在一个网页中用于惟一识别一表单的名字，在一个网页中用于惟一识别一个表单个表单个表单个表单 action action属性属性属性属性:表单处理的方式，往往是表单处理的方式，往往是表单处理的方式，往往是表单处理的方式，往往是E-mailE-mail地址或网地址或网地址或网地址或网址址址址 method method属性属性属性属性:表单数据的传送方向，是获得（表单数据的传送方向，是获得（表单数据的传送方向，是获得（表单数据的传送方向，是获得（GETGET）表）表）表）表单还是送出（单还是送出（单还是送出（单还是送出（POSTPOST）表单）表单）表单）表单2.6 表单表单 2.6.1 2.6.1 表单的标记表单的标记表单的标记表单的标记.使用使用使用使用标记的标记的标记的标记的typetype属性，可以在表单中加入表项，属性，可以在表单中加入表项，属性，可以在表单中加入表项，属性，可以在表单中加入表项，并控制表项的风格。并控制表项的风格。并控制表项的风格。并控制表项的风格。typetype属性值为属性值为属性值为属性值为texttext，则输入的文本以标，则输入的文本以标，则输入的文本以标，则输入的文本以标准的字符显示；准的字符显示；准的字符显示；准的字符显示；typetype属性值为属性值为属性值为属性值为passwordpassword，则输入的文本显示，则输入的文本显示，则输入的文本显示，则输入的文本显示为为为为“*”“*”。文本框格式：文本框格式：文本框格式：文本框格式：input type=“text”name=“”密码框格式：密码框格式：密码框格式：密码框格式：input type=“password”name=“”在表项前应加入表项的名称，如在表项前应加入表项的名称，如在表项前应加入表项的名称，如在表项前应加入表项的名称，如“您的姓名您的姓名您的姓名您的姓名”等，以告诉浏等，以告诉浏等，以告诉浏等，以告诉浏览者在随后的表项中输入的内容。览者在随后的表项中输入的内容。览者在随后的表项中输入的内容。览者在随后的表项中输入的内容。【例【例【例【例2-312-31】2.6 2.6 表单表单表单表单 2.6.2 2.6.2 文本框和密码框文本框和密码框文本框和密码框文本框和密码框 如果浏览者想清除输入到表单中的全部内容，可以使用如果浏览者想清除输入到表单中的全部内容，可以使用如果浏览