【精品】html基础（可编辑.ppt

《【精品】html基础（可编辑.ppt》由会员分享，可在线阅读，更多相关《【精品】html基础（可编辑.ppt（91页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、HTML基础Web 服务器客户端客户端向服务器发送页面请求Web 服务器处理请求并返回请求的页面HTTP 负责请求和响应第第1 1章章 HTMLHTML基础基础第第2 2章章 CSSCSS样式表样式表第第3 3章章 JavaScriptJavaScript语言语言第第4 4章章 常用常用WebWeb开发与设计软件开发与设计软件第第5 5章章 WebWeb服务器安装与配置服务器安装与配置第第6 6章章 XMLXML与与AJAXAJAX技术技术本章要点：本章要点：使用HTML各种标记和语法基础 编辑网页文本格式 创建超链接 使用表格 使用列表XHTML 1.0发布于2000年1月26日，是W3C推

2、荐标准，后来经过修订于2002年8月1日重新发布。XHTML 1.1,于2001年5月31日发布(XHTML 2.0,W3C工作草案)现在通用的HTML语言是4.0和4.01版本 HTML HTML 文件必须使用文件必须使用 htm htm 或者或者 html html 作为文件扩作为文件扩展名。展名。HTML HTML 文件可以通过简单的文本编辑器来创建。文件可以通过简单的文本编辑器来创建。第一个实例第一个实例实例开始实例开始:第一步：请启动记事本。第一步：请启动记事本。第二步：键入以下文本：第二步：键入以下文本：Title of pageTitle of pageThis is my fi

3、rst homepage.This text This is my first homepage.This text is boldis bold第三步：将这个文件存为第三步：将这个文件存为 mypage.htmlmypage.html。第四步：启动您的浏览器。在浏览器的文件菜单中选择第四步：启动您的浏览器。在浏览器的文件菜单中选择“打开打开”或者或者“打开页面打开页面”。这时会弹出一个对话框。单击。这时会弹出一个对话框。单击“浏览浏览”或者或者“选择文件选择文件”，找到您刚才创建的文件，找到您刚才创建的文件 -mypage.htmmypage.htm，选定它然后打开，现在您会看到对话框中，选

4、定它然后打开，现在您会看到对话框中有一行地址，比如：有一行地址，比如：C:MyDocumentsmypage.htmC:MyDocumentsmypage.htm。单击。单击确定按钮，浏览器就会显示这个页面。确定按钮，浏览器就会显示这个页面。例子解释：例子解释：HTML HTML 文件中的第一个标签是文件中的第一个标签是 。这个标签告。这个标签告诉浏览器这个诉浏览器这个 HTML HTML 文件的开始点。文件中最后一文件的开始点。文件中最后一个标签是个标签是 。这个标签告诉您的浏览器，这。这个标签告诉您的浏览器，这是是 HTML HTML 文件的结束点。文件的结束点。位于位于 标签和标签和 标

5、签之间的文本是头标签之间的文本是头信息。头信息不会显示在浏览器窗口中。信息。头信息不会显示在浏览器窗口中。标签中的文本是文件的标题。标题会显示标签中的文本是文件的标题。标题会显示在浏览器的标题栏。在浏览器的标题栏。标签中的文本是将被浏览器显示出来的文本。标签中的文本是将被浏览器显示出来的文本。和和 标签中的文本将以粗体显示。标签中的文本将以粗体显示。为什么我们要使用小写的标签？为什么我们要使用小写的标签？我们刚才讲到：我们刚才讲到：HTML HTML 标签对大小写是不敏感的：标签对大小写是不敏感的：和和 的作用的相同的。当您在网上冲浪时，您会的作用的相同的。当您在网上冲浪时，您会发现大多数教程

6、在他们的例子中都使用大写的发现大多数教程在他们的例子中都使用大写的 HTML HTML 标签。标签。而我们总是使用小写。原因何在呢？而我们总是使用小写。原因何在呢？如果您希望为使用下一代如果您希望为使用下一代 HTML HTML 而做好准备，您就应而做好准备，您就应该使用小写标签。万维网联盟该使用小写标签。万维网联盟 (W3C)(W3C)的标准是：建议在的标准是：建议在 HTML 4 HTML 4 中使用小写标签，而在中使用小写标签，而在 XHTMLXHTML（下一代（下一代 HTMLHTML）中，）中，必须使用小写标签。必须使用小写标签。HTM HTM 还是还是 HTML HTML 扩展名？

7、扩展名？当您将一个当您将一个 HTML HTML 文件存盘时，您即可以使用文件存盘时，您即可以使用 HTM HTM 也可以使用也可以使用 HTML HTML 作为扩展名。我们刚才使用了作为扩展名。我们刚才使用了 .htm.htm 作为上面那个例子的扩展名。不过这样做也许是作为上面那个例子的扩展名。不过这样做也许是一个坏习惯，习惯于这样做的人也许是因为使用某些一个坏习惯，习惯于这样做的人也许是因为使用某些过时的软件而养成了这个坏习惯，这些软件只允许三过时的软件而养成了这个坏习惯，这些软件只允许三个字母作为扩展名。个字母作为扩展名。如果您使用新近的软件，我们认为使用如果您使用新近的软件，我们认为使

8、用 .html.html 是是相当安全的做法。相当安全的做法。常见问题（常见问题（FAQFAQ）Q Q：我重新编辑了：我重新编辑了 HTML HTML 文件，但是浏览器的显示没有任何文件，但是浏览器的显示没有任何变化。为什么？变化。为什么？A A：为了不重复读取同一个页面，浏览器要对您的页面进行：为了不重复读取同一个页面，浏览器要对您的页面进行缓存。浏览器不会意识到您已经修改了页面。通过使用刷缓存。浏览器不会意识到您已经修改了页面。通过使用刷新或者重载按钮，您可以使浏览器读取编辑后的页面。新或者重载按钮，您可以使浏览器读取编辑后的页面。Q Q：我应该使用何种浏览器？：我应该使用何种浏览器？A

9、A：您可以使用任何一款通用浏览器进行训练，例如：您可以使用任何一款通用浏览器进行训练，例如 Internet Explorer,Mozilla,Netscape,Internet Explorer,Mozilla,Netscape,或者或者 OperaOpera。不。不过，我们的高级课程中的某些例子需要最新版本的浏览器过，我们的高级课程中的某些例子需要最新版本的浏览器的支持。的支持。Q Q：我的电脑必须运行：我的电脑必须运行 Windows Windows 吗？吗？A A：您可以在非：您可以在非 Windows Windows 系统上进行所有的训练。系统上进行所有的训练。1.1.2 HTML

10、1.1.2 HTML 基本概念基本概念 HTMLHTML的首要三个基本概念：标签、元素、属性的首要三个基本概念：标签、元素、属性 。HTML HTML 文档是由文档是由 HTML HTML 元素构成的文本文件。元素构成的文本文件。HTML HTML 元素是通过使用元素是通过使用 HTML HTML 标签进行定义的。标签进行定义的。1 1、标签、标签 HTMLHTML用于描述功能的符号称为用于描述功能的符号称为“标签标签”。如。如“html”html”、“body”body”、“table”table”等。标签的使用是必等。标签的使用是必须用尖括号须用尖括号“”括起来，而且是成对出现，无斜杠的括

11、起来，而且是成对出现，无斜杠的标记表示该标记的作用开始，标记表示该标记的作用开始，有斜杠的标签表示该标记有斜杠的标签表示该标记的作用结束。如的作用结束。如表示一个表格的开始，表示一个表格的开始，表示一个表格的结束。表示一个表格的结束。2 2、HTML HTML 元素元素还记得上一节中的那个例子吗：还记得上一节中的那个例子吗：这就是一个这就是一个 HTML HTML 元素：元素：此文本是粗体的。此文本是粗体的。这个这个 HTML HTML 元素由起始标签元素由起始标签 开始。这个元素的内容开始。这个元素的内容是：是：“此文本是粗体的。此文本是粗体的。”。这个。这个 HTML HTML 元素由终止

12、标元素由终止标签签 结尾。结尾。标签的作用是定义一个显示为粗体标签的作用是定义一个显示为粗体的的 HTML HTML 元素。元素。页面的标题这是我的第一个页面。此文本是粗体的。3 3、HTML HTML 属性属性在元素的起始标签中，还可以包含在元素的起始标签中，还可以包含“属性属性”来表示元来表示元素的其他特性，它的格式是：素的其他特性，它的格式是：实例一：定义标题的开始。拥有关于对齐方式的附加信息。This is heading 1The heading above is aligned to the center of this page.例子 2:定义 HTML 文档的主体。拥有关于背景

13、颜色的附加信息。Look:Colored Background!注意：属性使用小写 属性和属性值对大小写不敏感。不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值，而 XHTML 要求使用小写属性/属性值。始终为属性值加引号 属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题，但我们不推荐。在某些个别的情况下，比如属性值本身就含有双引号，那么您可以使用特殊字符&apos来代替，例如：name=“John'ShotGun'Nelson”1.2HTML1.2HTML常用元素常用元素1.2.1 1.2.1 基本结构元素基本结构元素 HTML

14、 HTML的基本结构元素主要有的基本结构元素主要有3 3个，它们是个，它们是元素，元素，元素，元素，元素。每个网页文件中一般都包含元素。每个网页文件中一般都包含有这有这3 3个元素，而且它们只能出现一次。个元素，而且它们只能出现一次。1 1、元素元素htmlhtml元素是元素是HTMLHTML文档的最外围的一对标签，它告诉浏文档的最外围的一对标签，它告诉浏览器整个文件是览器整个文件是HTMLHTML格式，并且是从格式，并且是从开始，至开始，至结束。结束。2 2、元素元素 一个网页文档从总体上可分为头和主体两部分。一个网页文档从总体上可分为头和主体两部分。和和定义了定义了HTMLHTML文档的头

15、部分，必须是起始标文档的头部分，必须是起始标签与结束标签成对使用。在此标签对之间可以使用签与结束标签成对使用。在此标签对之间可以使用、等标签对，这些标签等标签对，这些标签对都是描述对都是描述HTMLHTML文档相关信息的标签对。文档相关信息的标签对。标签对之间的内容会显示在浏览器的标签对之间的内容会显示在浏览器的标题栏中，网页标题可以被浏览器用作书签和收藏清单。标题栏中，网页标题可以被浏览器用作书签和收藏清单。标签用于定义客户端脚本，比如标签用于定义客户端脚本，比如 JavaScriptJavaScript。3 3、元素元素 定义了定义了HTMLHTML文档的主体部分，在文档的主体部分，在和和

16、之间放置的是实际要显示的文本内容和之间放置的是实际要显示的文本内容和其他用于控制文本显示方式的标签，如其他用于控制文本显示方式的标签，如、等。对于等。对于标签，有以下标签，有以下一些属性：一些属性：texttext用于设定整个网页中的文字颜色，关于颜色的取用于设定整个网页中的文字颜色，关于颜色的取值，在稍后部分会有详细讲解。值，在稍后部分会有详细讲解。linklink用于设定一般超链接文本的显示颜色。用于设定一般超链接文本的显示颜色。alinkalink用于设定鼠标移动到超链接上并按下鼠标时，超用于设定鼠标移动到超链接上并按下鼠标时，超链接文本的显示颜色。链接文本的显示颜色。vlinkvlin

17、k用于设定访问过的超链接文本的显示颜色。用于设定访问过的超链接文本的显示颜色。backgroundbackground用于设定背景墙纸所用的图像文件。用于设定背景墙纸所用的图像文件。bgcolorbgcolor用于设定背景颜色，当已设定背景墙纸时，这个属用于设定背景颜色，当已设定背景墙纸时，这个属性会失去作用，除非墙纸具有透明部分。性会失去作用，除非墙纸具有透明部分。leftmarginleftmargin设定网页显示画面与浏览器窗口左边沿的间隙，设定网页显示画面与浏览器窗口左边沿的间隙，单位为像素。单位为像素。topmargintopmargin设定网页显示画面与浏览器窗口上边沿的间隙，设定

18、网页显示画面与浏览器窗口上边沿的间隙，单位为像素。单位为像素。元素的属性较为少用，再此只做了解。元素的属性较为少用，再此只做了解。1.2.2 1.2.2 常用元素常用元素（1 1）文本编辑）文本编辑 字体字体 规定文本的展现形式，规定文本的展现形式，HTML 3.2HTML 3.2中引入了中引入了元元素，随着素，随着csscss的兴起，目前的兴起，目前元素在元素在HTML 4.0HTML 4.0中该元素中该元素被标记为逐渐淘汰，并且已经从被标记为逐渐淘汰，并且已经从XHTMLXHTML中移除。但是在该元中移除。但是在该元素短暂的一生中，它获得了大量的使用，如果查看其他人编素短暂的一生中，它获得

19、了大量的使用，如果查看其他人编写的代码，可以看到在很多位置都使用了该元素。写的代码，可以看到在很多位置都使用了该元素。元素由元素由构成，其有三个主要的属性：构成，其有三个主要的属性：u color color：文字颜色，不赞成使用。请使用样式取代它。：文字颜色，不赞成使用。请使用样式取代它。u face:face:字体，不赞成使用。请使用样式取代它。字体，不赞成使用。请使用样式取代它。u size size：字号，不赞成使用。请使用样式取代它。：字号，不赞成使用。请使用样式取代它。举例：举例：font color=“red”face=“”size=“30”轻轻的我走了，正如我轻轻的来轻轻的我走

20、了，正如我轻轻的来 在定义字体、颜色和字号的同时，也可以通过标在定义字体、颜色和字号的同时，也可以通过标签定义下划线、加粗和斜体等显示方式。签定义下划线、加粗和斜体等显示方式。标签对显示斜体文本效果。标签对呈现粗体文本效果。标签对显示下划线文本效果举例：举例：font color=“red”face=“size=“30”轻轻的轻轻的我走了，我走了，正如我正如我轻轻的来轻轻的来是还是?是还是?举例：举例：font color=“red”face=“size=“30”轻轻的轻轻的我走了，我走了，正如我轻轻的来正如我轻轻的来后记：后记：HTML HTML对字体使用对字体使用元素，但是目前对网页字元素

21、，但是目前对网页字体的设置是通过体的设置是通过csscss实现的，再此对实现的，再此对元素只做元素只做必要了解，后面会对必要了解，后面会对csscss进行详细学习。进行详细学习。随着随着元素的逐渐淘汰，元素的逐渐淘汰，HTML HTML 中最重要的标中最重要的标签是定义签是定义标题标题、段落段落和和换行换行的标签。的标签。段落段落 元素元素paragraph(段落)的第一个字母简写，元素内一般包含一个段落文字，浏览器将自动在元素前后加一行空行。例子：例子：春晓春晓春眠不觉晓春眠不觉晓处处闻啼鸟处处闻啼鸟 （2 2）标题）标题This is a headingThis is a headingT

22、his is a heading标题类块元素主要有标题类块元素主要有h1h1，h2h2，h3h3，h4h4，h5h5，h6h6。h h是是HeaderHeader（标题）的第一个字母简写，数字（标题）的第一个字母简写，数字1 1至至6 6表示标题表示标题的级别，的级别，h1 h1 定义最大的标题。定义最大的标题。h6 h6 定义最小的标题。定义最小的标题。如下代码如下代码:应该将应该将用作为主标题（最重要的），其后是用作为主标题（最重要的），其后是（次重要的），再其次是（次重要的），再其次是，以此类推。并且浏，以此类推。并且浏览器会自动地在标题的前后添加空行。览器会自动地在标题的前后添加空行。

23、(3)(3)换行换行 当你打算结束一行，而又不想开始一个新段落时，当你打算结束一行，而又不想开始一个新段落时，标签就派上用场了。无论你将它置于何处，标签就派上用场了。无论你将它置于何处，标签都会产生一个强制的换行。标签都会产生一个强制的换行。This is a paragraph with line This is a paragraph with line breaksbreaks 标签是空白标签，由于关闭标签没有任何意标签是空白标签，由于关闭标签没有任何意义，因此它没有类似义，因此它没有类似 的终止标签。的终止标签。还是还是 您会越来越多地发现您会越来越多地发现 与与 很相似。很相似。由于

24、由于 没有结束标签，它也就违反了未来的没有结束标签，它也就违反了未来的 HTML HTML 的规则之一，即所有的元素都必须关闭。把这个标签的规则之一，即所有的元素都必须关闭。把这个标签写为写为 是经得起未来考验的做法，是经得起未来考验的做法，XHTML XHTML 和和 XML XML 都接受在打开的标签内部来关闭标签的做法。都接受在打开的标签内部来关闭标签的做法。(4)(4)元素元素此外，此外，元素可用于分隔内容，可以用元素可用于分隔内容，可以用 标签标签在在 HTML HTML 页面中创建水平线。页面中创建水平线。如下代码如下代码:This is a paragraphThis is a

25、paragraphThis is a paragraphThis is a paragraphThis is a paragraphThis is a paragraph对对 HTML HTML 元素的重新认识元素的重新认识每个每个 HTML HTML 元素都有一个元素名（比如元素都有一个元素名（比如 bodybody、h1h1、p p、brbr）开始标签是被括号包围的元素名开始标签是被括号包围的元素名 结束标签是被括号包围的斜杠和元素名结束标签是被括号包围的斜杠和元素名 元素内容位于开始标签和结束标签之间元素内容位于开始标签和结束标签之间 某些某些 HTML HTML 元素没有内容元素没有内

26、容 某些某些 HTML HTML 元素没有结束标签元素没有结束标签 基本的注意事项基本的注意事项 HTML HTML 会裁掉文本中所有的空格。任何数量的空格都会裁掉文本中所有的空格。任何数量的空格都被按一个空格计数。另外，在被按一个空格计数。另外，在 HTML HTML 中，一个空行也被当中，一个空行也被当作一个空格。作一个空格。使用空的段落标记使用空的段落标记 去插入一个空行是个坏习惯。去插入一个空行是个坏习惯。用用 标签代替它！标签代替它！您也许已经注意到了，在没有结束标签您也许已经注意到了，在没有结束标签 的情况的情况下，下，标签依然可以正常工作。不过不要这样做！下一标签依然可以正常工作

27、。不过不要这样做！下一个版本的个版本的 HTML HTML 将不允许忽略任何的结束标签。将不允许忽略任何的结束标签。HTML HTML 注释注释 注释标签用于在注释标签用于在 HTML HTML 源码中插入注释。注释会被源码中插入注释。注释会被浏览器忽略。您可以使用注释对您的代码进行解释，这浏览器忽略。您可以使用注释对您的代码进行解释，这么做在以后的日子里会对您的代码编辑产生帮助。么做在以后的日子里会对您的代码编辑产生帮助。注意：注意：左括号后需要写一个惊叹号，右括号前就不需要了。左括号后需要写一个惊叹号，右括号前就不需要了。总结：总结：HTML4.0HTML4.0书写规范书写规范1 1、所有

28、的元素都必须有一个相应的结束标签。、所有的元素都必须有一个相应的结束标签。如果是单独不成对的标签，在标签最后添加一如果是单独不成对的标签，在标签最后添加一 个个“/”来关闭，如：来关闭，如：。2 2、所有的、所有的htmlhtml元素都必须合理嵌套。元素都必须合理嵌套。错误错误 正确正确3 3、给所有属性赋一个值。、给所有属性赋一个值。4 4、所有的属性推荐使用、所有的属性推荐使用“”“”，单引号可以使用，单引号可以使用&apos&apos。5 5、所有标签的元素和属性的名字都必须使用小写。、所有标签的元素和属性的名字都必须使用小写。6 6、不要在注释中使用、不要在注释中使用-，使用空格和，使

29、用空格和=来代替。来代替。7 7、嵌套的元素之间应该有缩进。、嵌套的元素之间应该有缩进。知识回顾：知识回顾：uHTMLHTML语言是语言是_语言语言u现在通用的现在通用的HTMLHTML语言是语言是_版本版本u网页文件的基本结构一般都包含有网页文件的基本结构一般都包含有_3_3个元素，个元素，而且它们只能出现一次。而且它们只能出现一次。u以下元素的作用？以下元素的作用？文本编辑：文本编辑：元素元素-元素元素元素元素元素元素（5 5）特殊字符）特殊字符 一些字符在一些字符在 HTML HTML 中拥有特殊的含义，比如小于号中拥有特殊的含义，比如小于号 ()()用于定义用于定义 HTML HTML

30、 标签的开始。如果我们希望浏览器正标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须在确地显示这些字符，我们必须在 HTML HTML 源码中插入字符实源码中插入字符实体。体。字符实体有三部分：一个和号字符实体有三部分：一个和号 (&)(&)，一个实体名称，一个实体名称，或者或者#和一个实体编号，以及一个分号和一个实体编号，以及一个分号 (;)(;)。例如：例如：显示小于号，需要这样写：显示小于号，需要这样写：<<或者或者<<显示空格，如果使用显示空格，如果使用  ，就可以在文档中增加空格。，就可以在文档中增加空格。（6 6）超链接）超链

31、接元素有两个用途：元素有两个用途：一个是产生外部链接（一个是产生外部链接（External LinkExternal Link）；）；另一个是设置连接目的地，即书签，或称为内部链接另一个是设置连接目的地，即书签，或称为内部链接（Internal LinkInternal Link）。）。单击外部链接时，浏览器窗口将显示其它文档的内单击外部链接时，浏览器窗口将显示其它文档的内容。单击内部链接时，访问者将看到网页的其他部分成容。单击内部链接时，访问者将看到网页的其他部分成为当前浏览器窗口的内容。另外，为当前浏览器窗口的内容。另外，HTMLHTML还可以创建指向还可以创建指向邮件地址的链接邮件地址的

32、链接（1）创建外部链接创建外部链接一个超级连接通常有以下三部分构成：超链接标记符号一个超级连接通常有以下三部分构成：超链接标记符号，属性，属性hrefhref，在超链接中显示的文字。，在超链接中显示的文字。创建外部链接的语法：创建外部链接的语法：网页中显示的文字网页中显示的文字 hrefhref定义了连接所指的地方：定义了连接所指的地方：urlurl。url:url:统一资源定位符（统一资源定位符（URLURL，英语，英语UniformResourceLocatorUniformResourceLocator的缩写）也被称为网页地址，的缩写）也被称为网页地址，例如：例如：http:/http:

33、/ 链接的地址，也称为文件的路径，链接的地址，也称为文件的路径，htmlhtml有两种路有两种路径的写法：绝对路径和相对路径。径的写法：绝对路径和相对路径。绝对路径绝对路径相对于相对路径更好理解，相对于相对路径更好理解，urlurl描述的文件地址就是绝描述的文件地址就是绝对路径，绝对路径表达的文件一般都指在互联网上的文对路径，绝对路径表达的文件一般都指在互联网上的文件，不是放在本地主机上的文件，若只在本机上路径有件，不是放在本地主机上的文件，若只在本机上路径有效则换台主机网页就没有意义了。效则换台主机网页就没有意义了。相对路径相对路径相对路径是指相对当前页面文件而言，被链接的文件相对路径是指相

34、对当前页面文件而言，被链接的文件如何被描述。这个路径有以下三种情况：如何被描述。这个路径有以下三种情况：当前网页文件与被链接文件在一个文件夹中当前网页文件与被链接文件在一个文件夹中 直接写上文件名即可直接写上文件名即可 被链接文件相对处于子文件夹中被链接文件相对处于子文件夹中href=“href=“子目录子目录/文件名文件名.扩展名扩展名”被链接文件处于上层文件夹中被链接文件处于上层文件夹中href=“./href=“./子目录子目录/文件名文件名.扩展名扩展名”通过通过.回到上层目录。回到上层目录。target target属性属性打开超链接的页面有两种方式：打开超链接的页面有两种方式：一、

35、在当前窗口打开；一、在当前窗口打开；二、在新的浏览器窗口打开。二、在新的浏览器窗口打开。targettarget属性控制如何打开超链接的页面，具体语法如下：属性控制如何打开超链接的页面，具体语法如下：a href=“”含有链接的对象含有链接的对象说明：说明：TargetTarget的四种选择：的四种选择：l _self:_self:表示在当前窗口打开新页面，这也是默认选择。表示在当前窗口打开新页面，这也是默认选择。l_blank:_blank:表示开启一个新的浏览器窗口。表示开启一个新的浏览器窗口。l _top _top：表示在最顶层的浏览器窗口打开新页面。：表示在最顶层的浏览器窗口打开新页面

36、。l_parent:_parent:表示在当前浏览器窗口的上一层浏览器窗口打表示在当前浏览器窗口的上一层浏览器窗口打开新页面。开新页面。最常用的取值是：最常用的取值是：_self_self和和_blank_blank。（2 2）内部链接）内部链接 若一个网页内容较多导致页面较长，浏览者需要上若一个网页内容较多导致页面较长，浏览者需要上下翻页浏览页面。在这样的页面中，下翻页浏览页面。在这样的页面中，需要建立内部超级需要建立内部超级链接帮助浏览者定位，也称为建立书签链接。链接帮助浏览者定位，也称为建立书签链接。实现书签链接需要完成两个步骤，一是建立锚点，实现书签链接需要完成两个步骤，一是建立锚点，

37、也就是给网页的确定位置命名；二是也就是给网页的确定位置命名；二是 链接锚点，就是利链接锚点，就是利用超级链接实现对前面锚点的快速定位。用超级链接实现对前面锚点的快速定位。建立锚点建立锚点语法：语法：a name=“”该语句所在页面的位置，被定义为锚点。在该语句所在页面的位置，被定义为锚点。在namename属属性中设置锚点的名称，可以使用字母和数字定义该名称。性中设置锚点的名称，可以使用字母和数字定义该名称。链接锚点：链接锚点：语法：语法：a href=“#”含有链接的对象含有链接的对象 由于锚点链接也是运用超链接标签由于锚点链接也是运用超链接标签，为了让浏览，为了让浏览器明确区别，对器明确区

38、别，对hrefhref属性属性urlurl的设定必须使用的设定必须使用“#”开始。开始。例如：例如：hilink.htmlhilink.html 邮件链接文本例如：邮件链接文本（3 3）创建邮件链接）创建邮件链接邮件链接可使访问者在浏览页面时，只需单击电子邮邮件链接可使访问者在浏览页面时，只需单击电子邮件链接就能够打开默认的邮件编辑窗口，用于向指定的件链接就能够打开默认的邮件编辑窗口，用于向指定的地址发送邮件。电子邮件链接的应用格式如下：地址发送邮件。电子邮件链接的应用格式如下：（7 7）图像）图像 HTML HTML语言也专门提供了语言也专门提供了标签来处理图像的输出。标签来处理图像的输出。

39、本节将介绍通过本节将介绍通过HTMLHTML标签的运用，在网页内插入图像文件、标签的运用，在网页内插入图像文件、图像链接的方法，以及如何改变图像的显示尺寸与对齐方图像链接的方法，以及如何改变图像的显示尺寸与对齐方式等。式等。关于图像：关于图像：大小：使用像素来定义。大小：使用像素来定义。图像的格式：图像的格式：jpegjpeg或者或者jpgjpg，能够表达真彩色的图像，能够表达真彩色的图像 gif gif，只能表达，只能表达256256种颜色，可以表现动画种颜色，可以表现动画 png png（1 1）在网页中插入图像在网页中插入图像在网页中插入图像文件，用户需要使用元素，使用方法如下：src是

40、source（源）英文的缩写，该属性指定希望在网页内显示图像的URL。用户可以使用GIF、JPG和PNG这三种格式的图像文件。设置图像格式与布局设置图像格式与布局:例子例子属性用途src图片来源。width height图片大小，此宽度及高度一般采用 pixels 作单位。hspace vspace设定图片边沿空白，以免文字或其它图片贴近。hspace 是设定图片左右的空间，vspace是设定图片上下的空间，高度采用 pixels 作单位。border图片边框厚度。align调整图片旁边文字的位置，可选值：top，Middle，bottom，left，Right，默认值为 botom。alt若

41、使用的浏览器不能显示该图片时，这些文字将会代替图片被显示。若浏览器显示了该图片，当鼠标移至图片上该文字也会显示。(2)(2)图像链接图像链接如果在网页内创建图像链接，用户也需要使用如果在网页内创建图像链接，用户也需要使用A A标记，标记，并指明链接目标的并指明链接目标的URLURL。与文本链接的区别就是在。与文本链接的区别就是在标记符号之前要使用标记符号之前要使用imgimg标记，图像链接的标记格式如下：标记，图像链接的标记格式如下：其中，其中，URLURL是链接目标的是链接目标的URLURL，picnamepicname是图像文件的是图像文件的URLURL。如果用户不希望图像周围出现黑色边框

42、，可在。如果用户不希望图像周围出现黑色边框，可在标标记符号内添加记符号内添加的属性设置。的属性设置。网页的背景图像网页的背景图像可以为网页设置背景图像，例如可以为网页设置背景图像，例如bodybody元素，可元素，可以通过其以通过其backgroundbackground属性设置背景图。属性设置背景图。语法：语法：body background=“”知识回顾：知识回顾：（1）超链接：）超链接：外部链接：外部链接：我的主页我的主页url:绝对地址绝对地址 ，网址，网址 相对地址相对地址 ，本机其它文件，本机其它文件内部链接：内部链接：1、建立锚点、建立锚点:第一个锚点第一个锚点2、链接锚点、链接

43、锚点:链接链接2、元素 相关属性：usrcuwidth heightualtualignuborder3、图像超链接（8 8）列表）列表常用列表元素有三种，常用列表元素有三种，元素，元素，元素，元素，元素。元素。ulul是是unordered list(unordered list(无序列表无序列表)的简写，因此的简写，因此元素所元素所包含的列表项将以粗点的方式显示。包含的列表项将以粗点的方式显示。olol是是ordered list(ordered list(有序列表有序列表)的简写，因此的简写，因此元素所包元素所包含的列表项将以顺序数字的方式显示。含的列表项将以顺序数字的方式显示。lili

44、是是list item(list item(列表项列表项)的简写，的简写，元素被包含在上述元素被包含在上述的的元素或元素或元素中。元素中。（9 9）表格）表格 表格由表格由标签来定义。每个表格均有若干行（由标签来定义。每个表格均有若干行（由标签定义），每行被分割为若干单元格（由标签定义），每行被分割为若干单元格（由标签标签定义）。字母定义）。字母tdtd指表格数据（指表格数据（table datatable data），即数据单元），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。表格可以含有表头，表单、水

45、平线、表格等。表格可以含有表头，表头使用表头使用 标签进行定义标签进行定义.如下实例为基本表格的程序。如下实例为基本表格的程序。设置表格的整体属性设置表格的整体属性l 表格的标题和表头表格的标题和表头标题处于表格上方标题处于表格上方语法：语法：标题标题表头表头表头表头 数据数据 数据数据 信息情况表姓名年龄rose19jack22 关于关于bordercolorbordercolor属性：属性：在在 W3C HTML4 W3C HTML4 属性表中没有找到属性表中没有找到 bordercolor bordercolor 属性，可见这并不是属性，可见这并不是 W3C W3C 规范中规范中的标准属

46、性，各浏览器根据各自的理解实现了该的标准属性，各浏览器根据各自的理解实现了该属性的渲染方式，应避免使用这种非标准属性。属性的渲染方式，应避免使用这种非标准属性。若需要设置表格及单元格的边框，应使用若需要设置表格及单元格的边框，应使用 CSS CSS 的的 border border 系列特性。系列特性。l标签的三类属性：标签的三类属性：表格结构设置：表格结构设置：borderborder边框、边框、cellspacingcellspacing表元素间表元素间隙，隙，cellpaddingcellpadding表元素内空白的设置。表元素内空白的设置。cellspacingcellpaddingc

47、ellpadding表格尺寸设置：表格尺寸设置：widthwidth、heightheight。表格内文字显示设置：表格内文字显示设置：align:leftalign:left、centercenter、rightright。l align align属性，但也不推荐使用。属性，但也不推荐使用。l align align、rowspan(rowspan(跨行跨行)、colspancolspan（跨列）（跨列）举例：如何实现？举例：如何实现？来个复杂的如何来个复杂的如何？表格嵌套：表格嵌套：（1010）表单）表单 在在WebWeb网页中，表单用来给访问者填写信息，使网网页中，表单用来给访问者填写

48、信息，使网页具有交互的功能。一般情况下，将表单设计在一个页具有交互的功能。一般情况下，将表单设计在一个HTMLHTML文档中，当用户填写完信息后提交（文档中，当用户填写完信息后提交（submitsubmit），表），表单的内容就从客户端的浏览器传送到服务器上，经过服单的内容就从客户端的浏览器传送到服务器上，经过服务器上的处理程序处理后，再将用户所需信息传送回客务器上的处理程序处理后，再将用户所需信息传送回客户端的浏览器上。户端的浏览器上。表单的所有功能都是为了与用户进行交互。表单的所有功能都是为了与用户进行交互。表单的基本结构表单的基本结构 网页内的表单由表单标记符号网页内的表单由表单标记符号

49、formform定义，定义，表表示表单的开始，而示表单的开始，而标记符号则意味着表单的结束。标记符号则意味着表单的结束。表单经常用于收集站点访问者的信息，表单标记的基本结表单经常用于收集站点访问者的信息，表单标记的基本结构如下所示：构如下所示：表单中的四个基本元素表单中的四个基本元素 在表单中有四个最基本的元素：在表单中有四个最基本的元素：元素、元素、元素、元素、元素。元素。l 最重要的属性就是action和method。action属性用于指定表单处理程序的url。例如：，当用户提交表单时，服务器将执行名为login.html的程序。method属性用于定义处理站点访问者提供数据的方法，其值

50、有：get、post。还可能会用到的是target属性，指示新窗口弹出的方式。l 是最常用的表单标签之一是最常用的表单标签之一，它可用来定义一个用户输，它可用来定义一个用户输入区。入区。input type=“”name=“”标记共提供了八标记共提供了八种类型的输入区域，种类型的输入区域，typetype属性属性指示输入区域类型，指示输入区域类型，namename指示每指示每一个独立的元素，一个独立的元素，namename值不能重复。值不能重复。typetype可以分为三类：输入类、选择类、按钮类可以分为三类：输入类、选择类、按钮类输入类：输入类：text text 输入框，有三个主要属性：输