第8章 html制作基础(new)

1、2022-5-151HTML制作制作2022-5-1521 1 HTMLHTML语言概述语言概述 2 2 文档的格式与风格文档的格式与风格 3 3 加入多媒体与超级链接加入多媒体与超级链接 4 4 制作表格制作表格 5 5 制作表单制作表单 6 6 框架结构框架结构 2022-5-153WWWWWW（World Wide WebWorld Wide Web，万维网）拉进了人，万维网）拉进了人们彼此间的距离，使得人与人之间的信息交们彼此间的距离，使得人与人之间的信息交流变得更加简便和快捷。流变得更加简便和快捷。WWWWWW上的信息，大部上的信息，大部分是通过分是通过HTMLHTML语言发布的。语

2、言发布的。HTMLHTML的普遍应用的普遍应用使得用户获取信息时直接可以从一个主题转使得用户获取信息时直接可以从一个主题转入另一个主题，而不是线性地寻找和阅读。入另一个主题，而不是线性地寻找和阅读。本章首页本章首页2022-5-1541.1 HTML1.1 HTML概述概述 HTMLHTML是（是（Hyper Text Markup LanguageHyper Text Markup Language，超文本，超文本标记语言）的缩写，最早源于标记语言）的缩写，最早源于SGMLSGML语言语言。HTMLHTML用来表示网上信息的符号标记语言。在用来表示网上信息的符号标记语言。在WWWWWW上，上

3、，发布信息通常使用发布信息通常使用HTMLHTML，它是，它是WebWeb页面的基础，任何页面的基础，任何一个一个WebWeb页面都离不开页面都离不开HTMLHTML，而且，而且HTMLHTML也是也是WebWeb应用应用开发的基础。开发的基础。 HTMLHTML语言是大多数浏览器都能识别的语言，使用语言是大多数浏览器都能识别的语言，使用HTMLHTML语法规则建立的文本可以运行在不同的操作系语法规则建立的文本可以运行在不同的操作系统平台上，而且能被大多数用户所接受。统平台上，而且能被大多数用户所接受。 2022-5-155为什么要学习为什么要学习HTML?P148HTML?P148微软公司推

4、出的微软公司推出的 Microsoft FrontPage， Adobe公公司推出的司推出的 Adobe Pagemill， Micromedia公司推出的公司推出的Dreamweaver等编辑工具，都被称为等编辑工具，都被称为“所见即所得所见即所得”的网页制作工具。的网页制作工具。这些图形化的开发工具可以直接处理网页，而不这些图形化的开发工具可以直接处理网页，而不用书写费劲的标记。这使得用户在没有用书写费劲的标记。这使得用户在没有HTML语言语言基础的情况下，照样可以编写网页。这时，编写基础的情况下，照样可以编写网页。这时，编写HTML文档的任务由开发工具替你完成了。这是网文档的任务由开发工

5、具替你完成了。这是网页图形编辑工具的最大成功之处，但也是它们的最页图形编辑工具的最大成功之处，但也是它们的最大不足之处。受到图形编辑工具自身的约束，将产大不足之处。受到图形编辑工具自身的约束，将产生大量的垃圾代码。生大量的垃圾代码。2022-5-156为什么要学习为什么要学习HTML?HTML?一个明智的网页编写者应该在掌握图形编一个明智的网页编写者应该在掌握图形编辑工具的基础上进一步学会辑工具的基础上进一步学会HTML语言，从语言，从而知道那些是垃圾代码，这样，我们就可以而知道那些是垃圾代码，这样，我们就可以利用图形化利用图形化HTML开发工具快速成地做出网开发工具快速成地做出网页，又会消除

6、无用的代码，从而达到快速制页，又会消除无用的代码，从而达到快速制作高质量网页的目的。作高质量网页的目的。使用使用IE浏览器的菜单命令浏览器的菜单命令“查看查看”-“”源源文件，就可以看到一个由文件，就可以看到一个由“记事本记事本”打开打开的普通文本文件（的普通文本文件（HTML文档），其中文档），其中没有图形和声音等多媒体的内容，但包没有图形和声音等多媒体的内容，但包含指向这些类型文件的指针或链接。含指向这些类型文件的指针或链接。要创建一个要创建一个HTML文档，只要有两个基文档，只要有两个基本工具：本工具：HTML编辑器和编辑器和WBE浏览器。浏览器。2022-5-1572022-5-158

7、1.2 1.2 文档的结构文档的结构 头部信息头部信息 正文部分正文部分 文件开头和结尾由文件开头和结尾由和和来来标记标记。和和标记头部，用来包含标记头部，用来包含文件的基本信息，如文件的基本信息，如标题；标题；和和标记正文部标记正文部分，是整个文件的主分，是整个文件的主体部分。体部分。 2022-5-159 这是标题部分。这是标题部分。 你好，这是正文部分！你好，这是正文部分！ HTMLHTML的基本概念的基本概念标记：用来控制文字、图形等显示方式标记：用来控制文字、图形等显示方式的符号。的符号。（1）单标记：只需单独使用就能完整地）单标记：只需单独使用就能完整地表达意思的标记。语法：表达意

8、思的标记。语法：（2）双标记：是指由）双标记：是指由“始标记始标记”和和“尾尾标记标记”两部分构成，必须成对使用的标两部分构成，必须成对使用的标记。语法：记。语法： 内容内容；内容；内容是指要被这对标记施加作用的部分。是指要被这对标记施加作用的部分。HTMLHTML的基本概念的基本概念标记属性：始标记内可以包含的一些属标记属性：始标记内可以包含的一些属性，语法：性，语法： 。各属性之间无先后次序，属性也。各属性之间无先后次序，属性也可省略。水平标记可省略。水平标记HTMLHTML的基本概念的基本概念注释语句：格式为注释语句：格式为。文件中。文件中的注释用的注释用“!”标记，标记，“”表示注释结

9、束，中间的所有内容表示注释结束，中间的所有内容表示注释。注释语句可以放在任何地方表示注释。注释语句可以放在任何地方，注释内容不在浏览器中显示出来，仅，注释内容不在浏览器中显示出来，仅供设计人员阅读方便。供设计人员阅读方便。2022-5-15131.3 HTML1.3 HTML标记标记 1HTML文档标记格式：格式：功能：标志文档开始和结尾的标记。功能：标志文档开始和结尾的标记。 2 2HTMLHTML文件头标记文件头标记格式：格式：功能：用于包含文件的基本信息。功能：用于包含文件的基本信息。 是提示网页内容和功能的文字，它将出是提示网页内容和功能的文字，它将出现在浏览器的标题栏中，一个网页只能

10、有一个标题，并且只现在浏览器的标题栏中，一个网页只能有一个标题，并且只能出现在文件的头部。能出现在文件的头部。3 3HTMLHTML文件主体标记文件主体标记格式：格式：功能：文件主体标记。功能：文件主体标记。 2022-5-15141.3 HTML1.3 HTML标记标记 任何任何HTML文档都是由一个文档都是由一个和标记包含的分为和两大部分HTML文件不区分大小写文件不区分大小写HTML文件扩展名可以是文件扩展名可以是.html或或.htm，现在没有，现在没有区别区别HTML语言在书写时并不要求缩进，但是为了程语言在书写时并不要求缩进，但是为了程序的易读性，建议网页设计者使标记的首位对齐，序

11、的易读性，建议网页设计者使标记的首位对齐，内部的内容向右缩进几格。内部的内容向右缩进几格。启动启动“记事本记事本”程序，输入内容后，保程序，输入内容后，保存文件时，先在存文件时，先在“保存类型保存类型”框中选择框中选择“所有文件所有文件”，在，在“文件名文件名”框中输入框中输入hello.htm(不能省略扩展名不能省略扩展名)，之后保存，之后保存，然后启动然后启动IE浏览器，打开保存的浏览器，打开保存的hello.htm，就可以看到一个简单的网页，就可以看到一个简单的网页。HTML是由标志与属性构成，一起用于是由标志与属性构成，一起用于标识各个文档部件，告诉浏览器如何显标识各个文档部件，告诉浏

12、览器如何显示文档。示文档。标记：通过指定某块信息显示为段落或标记：通过指定某块信息显示为段落或图形等来标识文档部件。图形等来标识文档部件。属性：是标志的选项，在标志中修饰或属性：是标志的选项，在标志中修饰或进一步指定信息。如颜色、对齐方式、进一步指定信息。如颜色、对齐方式、高度和宽度等。高度和宽度等。2022-5-1517刚刚接触超文本，遇到的最大的障碍就刚刚接触超文本，遇到的最大的障碍就是一些用是一些用“”括起来的句子，我们括起来的句子，我们称它为标记，是用来分割和标记文本的元称它为标记，是用来分割和标记文本的元素，以形成文本的布局、文字的格式及五素，以形成文本的布局、文字的格式及五彩缤纷的

13、画面。标记都是由尖括号彩缤纷的画面。标记都是由尖括号包围包围的元素构成，尖括号告诉浏览器其中的文的元素构成，尖括号告诉浏览器其中的文本是本是HTML命令。命令。这些标记名称大都为相应的英文单词首这些标记名称大都为相应的英文单词首字母或缩写，如字母或缩写，如Table表示表格（表示表格（Table）、）、IMG表示图像（表示图像（Image）等，很好记忆。）等，很好记忆。2022-5-1518标记的效果差别很大，但总的表示形式标记的效果差别很大，但总的表示形式大同小异，大多数成对出现，格式为：大同小异，大多数成对出现，格式为： 受标记影响的内容受标记影响的内容总结：总结：1 每个标记用每个标记用

14、“”围住，如：围住，如：、等，以表示这是等，以表示这是HTML代码而非普通文代码而非普通文本注意：本注意： “”与标记名之间不能留有空与标记名之间不能留有空格或其他字符。格或其他字符。2022-5-15192 在标记名之前加上符号在标记名之前加上符号“/”便是其结束标记，便是其结束标记，表示这种标记内容的结束，如表示这种标记内容的结束，如。标记也有。标记也有不用不用结尾的，称之为单标记。结尾的，称之为单标记。3 标记字母大小写皆可，没有限制标记字母大小写皆可，没有限制4 对同一段要标记的内容，可以用多个标记来共对同一段要标记的内容，可以用多个标记来共同作用，产生一定的效果。此时，各个标记之间的

15、同作用，产生一定的效果。此时，各个标记之间的顺序也是任意的。顺序也是任意的。font color= 超文本中的标记超文本中的标记2022-5-1520只需单独使用就能完整地表达意思，这只需单独使用就能完整地表达意思，这类标记的语法是：类标记的语法是： 最常用的单标记是最常用的单标记是，它表示换行。，它表示换行。2022-5-1521由由“始标记始标记”和和“尾标记尾标记”两部分构成，必须成两部分构成，必须成对使用，其中始标记告诉对使用，其中始标记告诉Web浏览器从此处开始执浏览器从此处开始执行该标记所表示的功能，而尾标记告诉行该标记所表示的功能，而尾标记告诉Web浏览器浏览器在这里结束该功能。

16、始标记前加一个斜杠（在这里结束该功能。始标记前加一个斜杠（/）即成）即成为尾标记。这类标记的语法是：为尾标记。这类标记的语法是： 内内 容容其中其中“内容内容” 部分就是要被这对标记施加作用的部分就是要被这对标记施加作用的部分。例如你想突出对某段文字的显示，就将此段部分。例如你想突出对某段文字的显示，就将此段文字放在一文字放在一 标记中：标记中： 第一：第一：2022-5-1522标记只是规定这是什么信息，或是文本，或是标记只是规定这是什么信息，或是文本，或是图片，但怎样显示或控制这些信息，就需要在标图片，但怎样显示或控制这些信息，就需要在标记后面加上相关的属性来表示，标记就是通过属记后面加上

17、相关的属性来表示，标记就是通过属性来制作出各种效果的。性来制作出各种效果的。语法结构是：语法结构是： 受影响的内容受影响的内容 2022-5-1523并不是所有的标记都有属性，如换行标并不是所有的标记都有属性，如换行标记记就没有属性。就没有属性。根据需要可以选用该标记的所有属性，根据需要可以选用该标记的所有属性，也可只用需要的几个属性，各属性之间无也可只用需要的几个属性，各属性之间无先后次序。先后次序。2022-5-1524例如单标记例如单标记表示在文档当前位置画一条水平线，表示在文档当前位置画一条水平线，一般是从窗口中当前行的最左端一直画到最右端。一般是从窗口中当前行的最左端一直画到最右端。

18、如果带一些属性：如果带一些属性： 其中：其中：SIZE属性定义线的粗细，属性值取整数，缺为属性定义线的粗细，属性值取整数，缺为1；ALIGN属性表示对齐方式，可取属性表示对齐方式，可取LEFT（左对齐，缺（左对齐，缺省值），省值），CENTER（居中），（居中），RIGHT（右对齐）；（右对齐）；WIDTH 属性定义线的长度，可取相对值，（由一对属性定义线的长度，可取相对值，（由一对 号括起来的百分数，表示相对于充满整个窗口的百分号括起来的百分数，表示相对于充满整个窗口的百分比），也可取绝对值（用整数表示的屏幕像素点的个数，比），也可取绝对值（用整数表示的屏幕像素点的个数，如如WIDTH=30

19、0），缺省值是），缺省值是100%。HTML的语法规则的语法规则（1）HTML文件以纯文本形式存放，扩展名文件以纯文本形式存放，扩展名为为.htm或或.html（2）HTML标记不区分大小写标记不区分大小写（3）多数）多数HTML标记可以嵌套，但不可以交标记可以嵌套，但不可以交叉。叉。（4）HTML文件以一行可以写多个标记，一文件以一行可以写多个标记，一个标记可以分多行书写，不用任何续行符号。个标记可以分多行书写，不用任何续行符号。（5）HTML源文件中的换行，回车符和多个源文件中的换行，回车符和多个连续空格连续空格(只显示一个空格只显示一个空格)在显示效果中是无在显示效果中是无效的。显示内容

20、要换行用效的。显示内容要换行用标记，换段用标记，换段用标记，若需要多个空格，可以使用多个标记，若需要多个空格，可以使用多个&nbsp转义符号。转义符号。2022-5-15261.4 1.4 常用常用HTMLHTML编辑工具编辑工具任何一个文档编辑器都是任何一个文档编辑器都是HTMLHTML编辑器编辑器。为了减少网页设计师的工作，使设计网页更加的方为了减少网页设计师的工作，使设计网页更加的方便，很多公司设计了专用的网页编辑器，像便，很多公司设计了专用的网页编辑器，像DreamweaverDreamweaver，FrontPageFrontPage，CutePageCutePage，Qui

21、ckSiteQuickSite等，等，是专门用来制作网页的，利用它们可以很容易的编写是专门用来制作网页的，利用它们可以很容易的编写出精美的网页，具有所见即所得的功能。出精美的网页，具有所见即所得的功能。所谓所见即所得，就是在编辑网页时看到的效果，所谓所见即所得，就是在编辑网页时看到的效果，与使用浏览器时显示的效果基本一致。与使用浏览器时显示的效果基本一致。 2022-5-1527在大多数网页中，文档是核心的内容，只在大多数网页中，文档是核心的内容，只有设置适当的文档格式，才能得到绚丽多彩有设置适当的文档格式，才能得到绚丽多彩的网页。设置文档的格式包括：设置标题和的网页。设置文档的格式包括：设置

22、标题和文字的字体、字号、字型、颜色，段落格式、文字的字体、字号、字型、颜色，段落格式、文本布局等。文本布局等。 本章首页本章首页2022-5-15282.1 2.1 设置设置的属性的属性标记属性标记属性功能功能background=URL设置网页的背景图片设置网页的背景图片bgcolor=colorvalue设置网页的背景颜色，默认为白色设置网页的背景颜色，默认为白色text=colorvalue设置文本的颜色，默认为黑色设置文本的颜色，默认为黑色link=colorvalue设置尚未被访问过的超文本链接的颜色，默认为蓝色设置尚未被访问过的超文本链接的颜色，默认为蓝色vlink=colorva

23、lue设置已被访问过的超文本链接的颜色，默认为紫色设置已被访问过的超文本链接的颜色，默认为紫色alink=colorvalue设置超文本链接在被单击的瞬间的颜色，默认为蓝色设置超文本链接在被单击的瞬间的颜色，默认为蓝色bgproperties =fixed设置背景是否随滚动条滚动设置背景是否随滚动条滚动,只有这一个值，表明不滚动，只与只有这一个值，表明不滚动，只与background属性一起使用属性一起使用leftmargin=value设置网页左边的空白，数值或是百分比设置网页左边的空白，数值或是百分比topmargin=value设置网页上方的空白，数值或是百分比设置网页上方的空白，数值或

24、是百分比margingwidth=size设置网页空白的宽度设置网页空白的宽度marginheight =size设置网页空白的高度设置网页空白的高度2022-5-15292.1 2.1 设置设置的属性的属性 网页的内容 2022-5-1530Black = #000000 Silver = #C0C0C0Gray = #808080 White = #FFFFFF Maroon = #800000 Red = #FF0000 Purple = #800080 Fuchsia = #FF00FF Green = #008000 Lime = #00FF00 Olive = #808000 Ye

25、llow = #FFFF00 Navy = #000080 Blue = #0000FF Teal = #008080 Aqua = #00FFFF 2022-5-15312.2 2.2 段落格式化段落格式化1标题标记格式：格式：第一级标题第一级标题第二级标题第二级标题第三级标题第三级标题第四级标题第四级标题第五级标题第五级标题第六级标题第六级标题功能：设置各种大小不同标题的标记。数字越小，功能：设置各种大小不同标题的标记。数字越小，字号越大。字号越大。2022-5-1532的属性的属性align用来设置标题在页面中的对用来设置标题在页面中的对齐方式：齐方式： left：左对齐：左对齐 cen

26、ter：居中对齐：居中对齐 right：右对齐：右对齐格式为：格式为： 标题文字标题文字说明：用该标记实现文章标题的效果有限，通说明：用该标记实现文章标题的效果有限，通常用常用font标记实现文章标题丰富多彩的效果。标记实现文章标题丰富多彩的效果。2022-5-1533标题示例标题示例这是一行普通文字这是一行普通文字 一级标题一级标题 二级标题二级标题 三级标题三级标题 四级标题（居左）四级标题（居左） 五级标题（居中）五级标题（居中） 六级标题（居右）六级标题（居右）2022-5-15342.3 2.3 字符的格式化字符的格式化1 1字体设置标记字体设置标记格式：格式：功能：设置字体格式标记

27、。功能：设置字体格式标记。 标记属性功能size=size设置文字的大小，是1-7之间的整数face=fontstyle设置字体color=colorvalue设置文字的颜色2022-5-1535在网页中为了增强页面的层次，其中的文字可在网页中为了增强页面的层次，其中的文字可以用不同的大小、字体、字型、颜色。用以用不同的大小、字体、字型、颜色。用标记设置字号。标记设置字号。格式为：格式为： 被设置的文字被设置的文字 2022-5-1536标记可以设定文字的字体、字号、颜标记可以设定文字的字体、字号、颜色。其中属性：色。其中属性：size用来设置文字的大小。数字的取值范围为用来设置文字的大小。数

28、字的取值范围为17，取，取1时最小，取时最小，取7时最大。其中缺省值为时最大。其中缺省值为3。我们可以。我们可以SIZE属属性值之前加上性值之前加上“”、“”字符，来指定相对于字号字符，来指定相对于字号初始值的增量或减量。初始值的增量或减量。 若基准字号是若基准字号是3，+3表示表示6号字。号字。face用来设置字体。如黑体、宋体、楷体等。用来设置字体。如黑体、宋体、楷体等。color用来设置文字颜色。用来设置文字颜色。2022-5-1537 这是这是size=7的字体的字体 这是这是size=6的字体的字体 这是这是size=5的字体的字体 这是这是size=4的字体的字体 这是这是size

29、=3的字体的字体 这是这是size=2的字体的字体 这是这是size=1的字体的字体 这是这是size=-1的字体的字体 2022-5-1538HTML4.0提供了定义字体的功能，用提供了定义字体的功能，用face属性来完成这个工作。属性来完成这个工作。face的属性值可的属性值可以是本机上的任一字体类型，但有一点麻以是本机上的任一字体类型，但有一点麻烦的是，只有对方的电脑中装有相同的字烦的是，只有对方的电脑中装有相同的字体才可以在他的浏览器中出现你预先设计体才可以在他的浏览器中出现你预先设计的风格。的风格。 2022-5-1539欢迎光临欢迎光临欢迎光临欢迎光临欢迎光临欢迎光临欢迎光临欢迎光

30、临WelcomeWelcome 2022-5-1540设置文字颜色有两种方法设置文字颜色有两种方法1、标记中的标记中的text属性：可以设属性：可以设定整个网页文字的颜色。格式：定整个网页文字的颜色。格式： 文字文字 这里的颜色值可以是一个十六进制数这里的颜色值可以是一个十六进制数(用用“#”作作为前缀为前缀)，也可以是以下，也可以是以下16种颜色名称。种颜色名称。2022-5-15412、标记中的标记中的color属性：可以设属性：可以设定网页、段落、短语、词或字的颜色。格定网页、段落、短语、词或字的颜色。格式：式： 文字文字这里的颜色值可以是一个十六进制数这里的颜色值可以是一个十六进制数(

31、用用“#”作为前缀作为前缀)，也可以是以下，也可以是以下16种颜色名种颜色名称。称。2022-5-1542色彩斑斓的世界色彩斑斓的世界色彩斑斓的世界色彩斑斓的世界 色彩斑斓的世界色彩斑斓的世界色彩斑斓的世界色彩斑斓的世界色彩斑斓的世界色彩斑斓的世界 色彩斑斓的世界色彩斑斓的世界色彩斑斓的世界色彩斑斓的世界2022-5-1543当当与与标记同时对文字标记同时对文字颜色进行定义时，颜色进行定义时，标记优先。标记优先。2022-5-15442段落标记格式：格式：功能：设置段落标记。功能：设置段落标记。 为了排列的整齐、清晰，文字段落之间，我们常为了排列的整齐、清晰，文字段落之间，我们常用用来做标记。

32、文件段落的开始由来做标记。文件段落的开始由来标记，来标记，段落的结束由段落的结束由来标记。来标记。段落标记段落标记 ，与，与不同，不仅使后面的文字不同，不仅使后面的文字换到下一行，而且能使两段之间多一空行。换到下一行，而且能使两段之间多一空行。是可以省略的，因为下一个是可以省略的，因为下一个的开始就意的开始就意味着上一个味着上一个的结束。的结束。标记还有一个属性标记还有一个属性ALIGN，它用来指名字符，它用来指名字符显示时的对齐方式，一般值有显示时的对齐方式，一般值有CENTER、LEFT、RIGHT三种。三种。2022-5-1545段落标签段落标签浣溪沙浣溪沙一曲新词酒一杯，一曲新词酒一杯

33、，去年天气旧亭台，夕阳西下几时回。去年天气旧亭台，夕阳西下几时回。无可奈何花落去，似曾相识无可奈何花落去，似曾相识燕归来。小园香径几徘徊。燕归来。小园香径几徘徊。2022-5-1546段落标签段落标签登鹳雀楼登鹳雀楼白日依山尽，白日依山尽，黄河入海流。黄河入海流。欲穷千里目，欲穷千里目，更上一层楼。更上一层楼。2022-5-15473预定义格式标记格式：格式： 功能：在浏览器中浏览时，按照文档中预先排好的形式显功能：在浏览器中浏览时，按照文档中预先排好的形式显示内容。如果在文本开头加上示内容。如果在文本开头加上，在末尾加上，在末尾加上，那，那么中间就不用加其他标记了，这时中间的回车换行符等就起

34、么中间就不用加其他标记了，这时中间的回车换行符等就起作用了，可以原样显示。作用了，可以原样显示。 预定格式标签使用预定格式标签使用 床前明月光床前明月光 疑是地上霜疑是地上霜 举头望明月举头望明月 低头思故乡低头思故乡 兰陵美酒郁金香兰陵美酒郁金香 玉碗盛来琥珀光玉碗盛来琥珀光 但使主人能醉客但使主人能醉客 不知何处是不知何处是他乡他乡 2022-5-15484分区显示标记/文本堆砌方式标记格式：格式：功能：分区显示标记。可以用来排版大块功能：分区显示标记。可以用来排版大块HTMLHTML段落，也用于格式化表，设置多个段落的文本居中、段落，也用于格式化表，设置多个段落的文本居中、居左、居右。居

35、左、居右。通过通过ALIGN属性可以选择文字或图片的对齐方属性可以选择文字或图片的对齐方式，式，LEFT表示向左对齐，表示向左对齐，RIGHT表示向右对齐，表示向右对齐，CENTER表示居中。基本语法如下：表示居中。基本语法如下： #leftrightcenter2022-5-1549你好你好!你好你好! 你好你好! 2022-5-15505换行标记格式：格式：功能：强制换行。功能：强制换行。放在一行的末尾，可使后面的文字、图片等放在一行的末尾，可使后面的文字、图片等显示于下一行，又不会在行与行之间留下空行。显示于下一行，又不会在行与行之间留下空行。 2022-5-1551换行示例换行示例 登

36、鹳雀楼登鹳雀楼白日依山尽，白日依山尽，黄河入海黄河入海流。流。欲穷千里目，欲穷千里目，更上一层楼。更上一层楼。2022-5-15526 6水平线标记水平线标记格式：格式：功能：插入水平线标记。功能：插入水平线标记。在页面中插入一条水平标尺线，可以使不同功能的在页面中插入一条水平标尺线，可以使不同功能的文字分隔开，看起来整齐、明了。文字分隔开，看起来整齐、明了。当浏览器解释到当浏览器解释到HTML文件中的文件中的标记时，会标记时，会在此处换行，并加入一条水平线段。线段的样式由在此处换行，并加入一条水平线段。线段的样式由标记得参数决定，格式如下：标记得参数决定，格式如下： 2022-5-1553属

37、性属性align设定横线放置的位置，可选择设定横线放置的位置，可选择left、right、center。size设定线条粗细，以像素为设定线条粗细，以像素为单位，默认为，默认为2。width设定线段长度，可以是设定线段长度，可以是绝对值（以像素为单位），也可以是也可以是相对值（相对于当前窗口的百分比）。color设定线条颜色，默认为黑色。可以采用颜色的设定线条颜色，默认为黑色。可以采用颜色的名称。颜色可以用相应的名称。颜色可以用相应的英文单词或以或以“#”引导的一个十六进制数代码来表示。来表示。noshade设定线条为平面显示，默认有立体效果。属设定线条为平面显示，默认有立体效果。属性不用赋值

38、，而是直接加入标记即可使用，它表示加入性不用赋值，而是直接加入标记即可使用，它表示加入一条没有阴影的水平线（不加入此属性水平线有阴影）一条没有阴影的水平线（不加入此属性水平线有阴影）2022-5-15547 7注释标记注释标记格式：格式：!-功能：注释标记。功能：注释标记。 为了给文中不同部分加上说明，方便日后阅读和为了给文中不同部分加上说明，方便日后阅读和修改。修改。注释标记的格式为：注释标记的格式为： -例：例：这是一行普通文字这是一行普通文字 2022-5-1555标记的使用标记的使用三种标记的使用！三种标记的使用！我在中间！我在中间！中间中间我在左边！我在左边！左边左边我在右边！我在右

39、边！右边右边 2022-5-15562.42.4 建立列表建立列表有序列表有序列表无序列表无序列表自定义列表自定义列表2022-5-15572.42.4 建立列表建立列表1 1有序列表有序列表格式：格式： typetype属性：数字（属性：数字（1 1，2 2，）、大写英文字母（）、大写英文字母（A A，B B，）、小写英文字母（）、小写英文字母（a a，b b，）、大写罗马字）、大写罗马字母（母（I I，IIII，）和小写罗马字母（）和小写罗马字母（i i，iiii，），），默认的序号是数字。默认的序号是数字。 这里这里可以省略。可以省略。2022-5-1558type属性指定每个表项左端的

40、符号类型，可为属性指定每个表项左端的符号类型，可为 1 序号为数字序号为数字 A 序号为大写英文字母序号为大写英文字母 a 序号为小写英文字母序号为小写英文字母 序号为大写罗马字母序号为大写罗马字母 序号为小写罗马字母序号为小写罗马字母 设置的方法有两种：设置的方法有两种：1.在在后指定符号的样式后指定符号的样式2.在在后指定符号的样式后指定符号的样式若若同时指定符号样式，先执行同时指定符号样式，先执行指定的符号指定的符号样式。样式。2022-5-1559 电子商务项目管理电子商务项目管理 电子商务顾问电子商务顾问 ERP销售人员销售人员 WAP开发人员开发人员 WEB开发人员开发人员 WEB

41、设计人员设计人员 返回返回2022-5-15602.32.3 建立列表建立列表2 2无序列表无序列表格式：格式： typetype属性：可以为属性：可以为discdisc（实心圆点）、（实心圆点）、circlecircle（空心圆点）、（空心圆点）、squaresquare（方块）和自定义图片，默（方块）和自定义图片，默认为实心圆点。这里认为实心圆点。这里可以省略。可以省略。 2022-5-1561type属性指定每个表项左端的符号类型，可为属性指定每个表项左端的符号类型，可为 disc circle square 设置的方法有两种：设置的方法有两种：1.在在后指定符号的样式后指定符号的样式2

42、.在在后指定符号的样式后指定符号的样式2022-5-1562 电子商务项目管理电子商务项目管理 电子商务顾问电子商务顾问 ERP销售人员销售人员 WAP开发人员开发人员 WEB开发人员开发人员 WEB设计人员设计人员 返回返回2022-5-15632.32.3 建立列表建立列表3 3自定义列表自定义列表格式：格式： 定义列表；定义列表；定义列表项也就是列表条目，项目会定义列表项也就是列表条目，项目会自动换行并左对齐，但项目间没有空行；自动换行并左对齐，但项目间没有空行；用来定义语句，用来定义语句，用来说明文字自动向右缩进。用来说明文字自动向右缩进。及及都可以省略。都可以省略。 2022-5-1

43、564 这是一个定义性列表：这是一个定义性列表： WWW WWW是全球信息网是全球信息网(World wide web)的缩的缩写，也有人称之为写，也有人称之为3W、W3、Web。 Hyper Text Hyper Text是超文本。文件通过超文本，可是超文本。文件通过超文本，可链结到其它地方的数据文件，取得分散在各地的数据。链结到其它地方的数据文件，取得分散在各地的数据。2022-5-15652.4 2.4 字符的格式化字符的格式化2 2其他标记其他标记其他标记格式功能给字符加下划线给字符加下划线给字符上加横线，表示删除给字符上加横线，表示删除给字符加粗给字符加粗将字符设置成斜体将字符设置成

44、斜体 文字移动文字移动 direction=left right down updirection=left right down up #=scroll, slide, alternate #=scroll, slide, alternate 绕圈绕圈走、走一次、来回走走、走一次、来回走.给字符加下划线给字符加下划线给字符上加横线，表示删除给字符上加横线，表示删除给字符加粗给字符加粗将字符设置成斜体将字符设置成斜体:斜体斜体:加粗加粗斜体加粗斜体加粗加粗加粗 啦啦啦，我从右向左移啦啦啦，我从右向左移 啦啦啦，我从左向右移！啦啦啦，我从左向右移！ 啦啦啦，我从上向下移！啦啦啦，我从上向下移！

45、啦啦啦，我从下向上移！啦啦啦，我从下向上移！ 只走一次就歇了！只走一次就歇了！ 来回走来回走一圈一圈绕着走！一圈一圈绕着走！ 2022-5-1570 图像的出现为本来单调乏味的网络世界增图像的出现为本来单调乏味的网络世界增添了一道亮丽的风景线。图像在网页设计中是添了一道亮丽的风景线。图像在网页设计中是必不可少的，所以用户应该掌握在网页中操作必不可少的，所以用户应该掌握在网页中操作图像的方法。图像的方法。本章首页本章首页2022-5-1571插入多媒体的一般形式：插入多媒体的一般形式：格式：格式：功能：在网页中加入图像、视频、动画等。功能：在网页中加入图像、视频、动画等。 2022-5-1572

46、1 1插入图像插入图像标记属性标记属性功能功能srcsrc=URL=URL通过通过URLURL给出图像来源的位置，相对路径或是网址给出图像来源的位置，相对路径或是网址width=size设置图像宽度设置图像宽度height =size设置图像高度设置图像高度alt=txt设置在图像未载入前图片位置显示的文字设置在图像未载入前图片位置显示的文字border=size设置图像边框，缺省为设置图像边框，缺省为0 0align=alignstyle设置对齐方式。取值为：设置对齐方式。取值为：toptop，middlemiddle，bottombottom，leftleft，rightrighthspa

47、ce=size设置图片左右边沿空白设置图片左右边沿空白vspace=size设置图片上下边沿空白设置图片上下边沿空白2022-5-1573使用图片标记，可以把一幅图片加入到网页中。使用图片标记，可以把一幅图片加入到网页中。格式为：格式为： SRC:称为引用图形的源。在指定称为引用图形的源。在指定“源源”时，如果图片时，如果图片文件和文件和HTML文档在同一文件夹中，可以直接用文件名；文档在同一文件夹中，可以直接用文件名；否则要写清楚指向图形文件的地址。否则要写清楚指向图形文件的地址。路径可以是相对路径，也可以是网址。相对路路径可以是相对路径，也可以是网址。相对路径是指所要链接或是嵌入到当前径是

48、指所要链接或是嵌入到当前HTML文档的文档的文件与当前文件的相对位置所形成的路径。文件与当前文件的相对位置所形成的路径。1、HTML文件与图像文件在同一目录下，直文件与图像文件在同一目录下，直接写文件名即可。接写文件名即可。2、图像文件放在当前的、图像文件放在当前的HTML文档所在目录文档所在目录的一个子目录下，则代码为子目录下的文件。的一个子目录下，则代码为子目录下的文件。3、图像文件放在当前的、图像文件放在当前的HTML文档所在目录文档所在目录的上层目录下，则相对路径必须是准网址了，的上层目录下，则相对路径必须是准网址了，即用即用“./”表示网站。表示网站。2022-5-1575 瀑瀑布布

49、 风景风景 2022-5-1576 标签的标签的 align 属性来控制带有文字包围的图像的对齐方式属性来控制带有文字包围的图像的对齐方式 。性值：。性值：left、right、top 、middle 和和 bottom 。注意：。注意：HTML 4.01 不推荐使用不推荐使用 align 属性，属性，XHTML 1.0 Strict DTD 不支持该属性，同时不支持该属性，同时 HTML 5 也也不再支持该属性。不再支持该属性。 风景风景 瀑瀑布布2022-5-15772 2插入视频：在网页中加入视频信息插入视频：在网页中加入视频信息标记属性标记属性功能功能dynsrcdynsrc=URL=

50、URL设置多媒体来源位置设置多媒体来源位置loop=size设置视频播放的次数设置视频播放的次数 size=nloopdelay=time设置两次播放的间隔时间，单位是毫秒设置两次播放的间隔时间，单位是毫秒注：注：src表示设置一幅静态图象的表示设置一幅静态图象的URL地地址，在未载入址，在未载入.AVI文件时，先在文件时，先在.AVI的的播放区域显示该图象。播放区域显示该图象。Height width align属性也可以使用。属性也可以使用。3、插入背景音乐：在网页中加入声音、插入背景音乐：在网页中加入声音格式：格式：属性：属性：src指明声音文件的指明声音文件的URL地址；地址；loop

51、控控制播放次数，取制播放次数，取-1或或INFINITE时，声音将一时，声音将一直播放到浏览者离开该网页为止。直播放到浏览者离开该网页为止。2022-5-15804 4、 加入超级链接加入超级链接格式：格式：功能：在当前页和其他页间建立超链接。功能：在当前页和其他页间建立超链接。标记属性标记属性功能功能hrefhref=URL=URL给定链接目标的位置给定链接目标的位置target=frametarget设置显示链接目标的框架设置显示链接目标的框架name给当前的文档中的一个位置取名，便于长文档的快速给当前的文档中的一个位置取名，便于长文档的快速定位定位title在浏览器中鼠标指向链接时显示的

52、提示文本在浏览器中鼠标指向链接时显示的提示文本2022-5-1581超链接可以看作是一个超链接可以看作是一个“热点热点”，它可，它可以从当前以从当前Web页跳转到其他位置，包括当页跳转到其他位置，包括当前页的某个位置、前页的某个位置、Internet上的某个文件等，上的某个文件等，还可以跳转到声音、图片等多媒体文件。还可以跳转到声音、图片等多媒体文件。超链接使用锚点标记超链接使用锚点标记来定义。来定义。2022-5-1582通过单击一个词、句或图片可以转到另一通过单击一个词、句或图片可以转到另一个地方，这样的词、句或图片称为热点。个地方，这样的词、句或图片称为热点。标记的格式为：标记的格式为：

53、 热点热点 2022-5-1583target设定链接被按后结果要显示的窗口。可选值为：设定链接被按后结果要显示的窗口。可选值为：_blank，_parent，_self，_top，框架名称。，框架名称。target=“_blank”或或target=“new”：将连接的内容开在新的：将连接的内容开在新的浏览器窗口中。浏览器窗口中。target=“_ parent”：将连接的内容显示在直接父框架窗口：将连接的内容显示在直接父框架窗口中。中。target=“_ self”：将连接的内容显示在当前窗口中（默认：将连接的内容显示在当前窗口中（默认值）。值）。target=“_ top”：将连接的内容

54、显示在没有框架的窗口中：将连接的内容显示在没有框架的窗口中（即除去了框架），在整个窗口中打开被链接文档。（即除去了框架），在整个窗口中打开被链接文档。target=“框架名称框架名称”：只运用于框架中，将连接的内容显：只运用于框架中，将连接的内容显示在该框架名称设定的框架窗口中（框架名称要事先定义示在该框架名称设定的框架窗口中（框架名称要事先定义好）。好）。2022-5-1584 案例案例 图片图片 清华大学清华大学 2022-5-1585图片也可以作为热点图片也可以作为热点格式为：格式为： 如：如： 2022-5-1586 表格可以把文字和图片等内容按照行和表格可以把文字和图片等内容按照行和

55、列排列起来，可以用来建立主页的框架，使列排列起来，可以用来建立主页的框架，使得整个网页更加清晰和条理化，有利于信息得整个网页更加清晰和条理化，有利于信息的表达。的表达。生成一个基本表格的步骤：生成一个基本表格的步骤：第 一 ， 设 计 、 生 成 表 格 结 构 。 输 入第 一 ， 设 计 、 生 成 表 格 结 构 。 输 入标志，指定行数，列数和标题。标志，指定行数，列数和标题。第二，在表格单元中输入数据。第二，在表格单元中输入数据。本章首页本章首页2022-5-1587表格的基本结构表格的基本结构 定义表格定义表格 定义表行定义表行 定义表头定义表头 定义表元（表格的具体数据）定义表元

56、（表格的具体数据）2022-5-15884.1 4.1 建立表格建立表格格式：格式： 标记属性标记属性功能功能border=sizeborder=size设置表格边框大小设置表格边框大小width= size设置表格的宽度设置表格的宽度height=size设置表格的高度设置表格的高度cellspacing=size设置单元格间距设置单元格间距cellpadding =size设置单元格的填充距设置单元格的填充距background =URL设置表格背景图片设置表格背景图片bgcolor =colorvalue设置表格背景色设置表格背景色align=alignstyle设置对齐方式设置对齐方式

57、cols =size设置表格的列数设置表格的列数2022-5-15894.2 4.2 定制表格定制表格格式：格式：。功能：定义表格的一行。功能：定义表格的一行。格式：格式：。功能：定义单元格。功能：定义单元格。 标记属性标记属性功能功能bgcolorbgcolor= =colorvalucolorvalue e/background=/background=urlurl设置单元格背景颜色设置单元格背景颜色设置单元格背景图片设置单元格背景图片rowspan=num设置单元格所占的行数设置单元格所占的行数colspan =num设置单元格所占的列数设置单元格所占的列数align =alignsty

58、le设置对齐方式设置对齐方式valign =valignstyle设置单元格垂直对齐方式设置单元格垂直对齐方式width =size设置单元格宽度设置单元格宽度height=size设置单元格高度设置单元格高度2022-5-15904.2 4.2 定制表格定制表格格式：格式：功能：定义表格标题，可以通过功能：定义表格标题，可以通过alignalign属性设置属性设置标题的对齐方式标题的对齐方式. align=left center right top . align=left center right top bottombottom。 2022-5-1591最简单的表格仅包括行和列。格式为：

59、最简单的表格仅包括行和列。格式为： 表头表头1 表头表头n 表项表项1 表项表项n 表项表项1 表项表项n 2022-5-1592表格是一行一行建立的，在每一行中填入该行每一列的表格是一行一行建立的，在每一行中填入该行每一列的表格数据项。把表头看作一行，用表格数据项。把表头看作一行，用标记，文字以标记，文字以粗体显示。粗体显示。表格的整体外观由表格的整体外观由标记的属性决定。标记的属性决定。 border定义表格的边框，单位像素，如省略，则不带边定义表格的边框，单位像素，如省略，则不带边框框 width定义表格的宽度定义表格的宽度 height 定义表格的高度定义表格的高度 cellspaci

60、ng定义表项间隙，单位是像素定义表项间隙，单位是像素 cellpadding=j定义表项内部空白，单位是像素定义表项内部空白，单位是像素 background设置表格的背景图片，取值为图像的设置表格的背景图片，取值为图像的URL地址地址 align对齐方式对齐方式left right center说明：说明：1、定义行，该标记中间的内容显示在一行，此标记对定义行，该标记中间的内容显示在一行，此标记对只能放在只能放在标记对之间使用，而在此标记对之间加标记对之间使用，而在此标记对之间加入文本将是无用的，因为在入文本将是无用的，因为在之间只能紧跟之间只能紧跟标标记对才是有效的语法；记对才是有效的语法； 标记