第二讲网页设计基础及技术

1、3/6/20223/6/2022. .1 1网页设计与网站建设网页设计与网站建设 3/6/20223/6/2022. .2 2学习目标学习目标 掌握掌握HTMLHTML的基本语法。的基本语法。 掌握简单的掌握简单的HTMLHTML代码编写。代码编写。 掌握数据库的创建方法。掌握数据库的创建方法。 掌握连接数据库的掌握连接数据库的ODBCODBC方法。方法。3/6/20223/6/2022. .3 3v HTMLHTMLv 数据库数据库 本章将介绍本章将介绍HTML语言及其编写，再介绍数据库技术语言及其编写，再介绍数据库技术及其连接方法。及其连接方法。3/6/20223/6/2022. .4 4

2、v HTMLHTMLv 数据库数据库 本章将介绍本章将介绍HTML语言及其编写，再介绍数据库技术语言及其编写，再介绍数据库技术及其连接方法。及其连接方法。3/6/20223/6/2022. .5 51.1 HTML1.1 HTML语言简介语言简介 1.2 HTML1.2 HTML的基本语法的基本语法1.3 HTML1.3 HTML代码的编写代码的编写1.4 1.4 标签选择器标签选择器 HTML是一种网页制作语言，通过是一种网页制作语言，通过标记标记可以将文字、图可以将文字、图像、声音等多媒体素材组合在一起，并且按照一定的格式显像、声音等多媒体素材组合在一起，并且按照一定的格式显示出来。网页基

3、本上都是由示出来。网页基本上都是由HTML语言组成的，万丈高楼语言组成的，万丈高楼平地起，要精通网站建设必须从网页的基本语言学起。平地起，要精通网站建设必须从网页的基本语言学起。 3/6/20223/6/2022. .6 61.1 HTML1.1 HTML语言简介语言简介 1.2 HTML1.2 HTML的基本语法的基本语法1.3 HTML1.3 HTML代码的编写代码的编写1.4 1.4 标签选择器标签选择器 HTML是一种网页制作语言，通过是一种网页制作语言，通过标记标记可以将文字、图可以将文字、图像、声音等多媒体素材组合在一起，并且按照一定的格式显像、声音等多媒体素材组合在一起，并且按照

4、一定的格式显示出来。网页基本上都是由示出来。网页基本上都是由HTML语言组成的，万丈高楼语言组成的，万丈高楼平地起，要精通网站建设必须从网页的基本语言学起。平地起，要精通网站建设必须从网页的基本语言学起。 3/6/20223/6/2022. .7 7 HTMLHTML是英文是英文HyperText Markup LanguageHyperText Markup Language的缩写，的缩写，其含义是其含义是“超文本标记语言超文本标记语言”用它编写的文件扩展名是用它编写的文件扩展名是“.html.html”或或“.htm.htm”，它们都是可供浏览器解释浏览，它们都是可供浏览器解释浏览的文件格

5、式。的文件格式。 在制作网页时，大都采用一些专门的网页制作软件，在制作网页时，大都采用一些专门的网页制作软件，如如FrontPageFrontPage，DreamweaverDreamweaver等。这些软件都是所见即所等。这些软件都是所见即所得的，非常方便。使用这些编辑软件可以像使用得的，非常方便。使用这些编辑软件可以像使用wordword一一样来制作网页，而样来制作网页，而不用编写代码不用编写代码。在不熟悉。在不熟悉HTMLHTML语言的语言的情况下，照样可以制作网页，这是网页编辑软件的最大情况下，照样可以制作网页，这是网页编辑软件的最大成功之处；但它们的最大成功之处；但它们的最大不足不足

6、之处是受软件自身的约束，之处是受软件自身的约束，将产生一些将产生一些垃圾代码垃圾代码，这些垃圾代码将会增大网页体积，这些垃圾代码将会增大网页体积，降低网页的下载速度。降低网页的下载速度。 3/6/20223/6/2022. .8 81.1 HTML1.1 HTML语言简介语言简介 1.2 HTML1.2 HTML的基本语法的基本语法1.3 HTML1.3 HTML代码的编写代码的编写1.4 1.4 标签选择器标签选择器 HTML是一种网页制作语言，通过是一种网页制作语言，通过标记标记可以将文字、图可以将文字、图像、声音等多媒体素材组合在一起，并且按照一定的格式显像、声音等多媒体素材组合在一起，

7、并且按照一定的格式显示出来。网页基本上都是由示出来。网页基本上都是由HTML语言组成的，万丈高楼语言组成的，万丈高楼平地起，要精通网站建设必须从网页的基本语言学起。平地起，要精通网站建设必须从网页的基本语言学起。 3/6/20223/6/2022. .9 9 HTML HTML的任何标记都由的任何标记都由“ ”围起来。围起来。v 单标记单标记只需单独使用就能完整地表达意思，这类标记的语法是：只需单独使用就能完整地表达意思，这类标记的语法是： 最常用的单标记是最常用的单标记是，它表示，它表示换行换行。 v 双标记双标记它由它由“始标记始标记”和和“尾标记尾标记”两部分构成，必须成对使用，始标记两

8、部分构成，必须成对使用，始标记前加一个斜杠（前加一个斜杠（/ /）即成为尾标记。这类标记的语法是：）即成为尾标记。这类标记的语法是： 内容内容/ 其中其中“内容内容” 部分就是要被这对标记施加作用的部分。例如你想部分就是要被这对标记施加作用的部分。例如你想突出突出对某段文字的显示，就将此段文字放在对某段文字的显示，就将此段文字放在 标记中：标记中：第一：第一： 3/6/20223/6/2022. .1010v 标记属性标记属性 许多单标记和双标记的始标记内可以包含一些属性：许多单标记和双标记的始标记内可以包含一些属性： 3 各属性之间无先后次序，属性也可省略（即取默认各属性之间无先后次序，属性

9、也可省略（即取默认值），例如单标记值），例如单标记表示在文档当前位置表示在文档当前位置画一条水画一条水平线平线，一般是从窗口中当前行的最左端一直画到最右，一般是从窗口中当前行的最左端一直画到最右端。带一些属性：端。带一些属性： 其中其中SIZESIZE属性属性定义线定义线的的粗细粗细，属性值取整数，缺为，属性值取整数，缺为1 1；ALIGNALIGN属性表示属性表示对齐方式对齐方式，可取，可取LEFTLEFT（左对齐左对齐），），CENTERCENTER（居中居中），），RIGHTRIGHT（右对齐右对齐）；）；WIDTHWIDTH 属性属性定义定义线线的的长度长度，可取相对值，（由一对，可取

10、相对值，（由一对“”“”号括起来的号括起来的百百分数分数，表示相对于，表示相对于充满整个窗口的百分比充满整个窗口的百分比），也可取），也可取绝对值（用整数表示的绝对值（用整数表示的屏幕像素点屏幕像素点的个数，如的个数，如WIDTH=300WIDTH=300），），缺省值是缺省值是100%100%。3/6/20223/6/2022. .11111.1 HTML1.1 HTML语言简介语言简介 1.2 HTML1.2 HTML的基本语法的基本语法1.3 HTML1.3 HTML代码的编写代码的编写1.4 1.4 标签选择器标签选择器 HTML是一种网页制作语言，通过是一种网页制作语言，通过标记标记

11、可以将文字、图可以将文字、图像、声音等多媒体素材组合在一起，并且按照一定的格式显像、声音等多媒体素材组合在一起，并且按照一定的格式显示出来。网页基本上都是由示出来。网页基本上都是由HTML语言组成的，万丈高楼语言组成的，万丈高楼平地起，要精通网站建设必须从网页的基本语言学起。平地起，要精通网站建设必须从网页的基本语言学起。 3/6/20223/6/2022. .1212HTMLHTML的基本结构分为三部分：的基本结构分为三部分：v HTMLHTML标记标记 标记用于标记用于HTMLHTML文档的最前边，用来标识文档的最前边，用来标识HTMLHTML文档的开始。而文档的开始。而标记恰恰相反，它放

12、在标记恰恰相反，它放在HTMLHTML文档的最后边，用来标识文档的最后边，用来标识HTMLHTML文档的结束，两个文档的结束，两个标记必须一起使用。标记必须一起使用。 事实上，现在事实上，现在常用的常用的WebWeb浏览器都可以自动识别浏览器都可以自动识别HTMLHTML文档，并不要求有文档，并不要求有标签，也不对该标签做标签，也不对该标签做任何操作任何操作。但是，为了提高文档的。但是，为了提高文档的适用性适用性，使编写的，使编写的HTMLHTML文档能适应日新月异的文档能适应日新月异的WebWeb浏览器，还是应该养成浏览器，还是应该养成使用这个标签的习惯。使用这个标签的习惯。3/6/2022

13、3/6/2022. .1313v headhead标记标记 和和构成构成HTMLHTML文档的开头部分，在此文档的开头部分，在此标记对之间可以使用标记对之间可以使用 ， 等标记对，这些标记对，这些标记对都是描等标记对，这些标记对，这些标记对都是描述述HTMLHTML文档相关信息的标记对，两个标记必须一块使文档相关信息的标记对，两个标记必须一块使用。用。v BodyBody标记标记 是是HTMLHTML文档的主体部分，在此标记文档的主体部分，在此标记对之间可包含对之间可包含、 、等众等众多标记，它们所定义的文本、图像等将会在浏览器内多标记，它们所定义的文本、图像等将会在浏览器内显示出来，两个标记

14、必须一块使用。显示出来，两个标记必须一块使用。3/6/20223/6/2022. .1414从上述讲解中可以看出从上述讲解中可以看出HTMLHTML文档的基本结构如下图所示：文档的基本结构如下图所示：3/6/20223/6/2022. .1515v 区段格式标记区段格式标记 此类标记的主要用途是将此类标记的主要用途是将HTMLHTML文件中得某个区段文件中得某个区段文字，以特定格式显示，增加文件的可看度。主要的文字，以特定格式显示，增加文件的可看度。主要的有：有：.：网页标题网页标题。.：i=1,2,.,6, i=1,2,.,6, 标题标题。：产生：产生水平线水平线。：强迫换行强迫换行。.：文

15、件段落文件段落。.：以原始格式显示以原始格式显示。.：标注联络人：标注联络人姓名姓名、电话电话、地址地址等信息。等信息。.：区段引用标记这部分内：区段引用标记这部分内容表示引用文字，一般每一行会容表示引用文字，一般每一行会向内缩进向内缩进一定的距离。一定的距离。引用可以嵌套使用，造成多层缩进的效果。引用可以嵌套使用，造成多层缩进的效果。3/6/20223/6/2022. .1616v 字符格式标记字符格式标记 用来改变用来改变HTMLHTML文件文字的外观，增加文件的美观程文件文字的外观，增加文件的美观程度。主要有：度。主要有：.：粗体字粗体字。.：斜体字斜体字。：下划线下划线。.：改变：改变

16、字体字体设置。设置。.：居中居中对齐。对齐。.：标记内的文字比前边：标记内的文字比前边大一号大一号的字体显示。的字体显示。.：标记内文字比前边：标记内文字比前边小一号小一号字体显示。字体显示。.：引文引文内容一般用内容一般用斜体斜体表示。表示。和和：上标上标和和下标下标。3/6/20223/6/2022. .1717v 链接标记链接标记 链接可以说是链接可以说是htmlhtml超文本文件的命脉，超文本文件的命脉，htmlhtml通过链接标记来通过链接标记来整合分散在世界各地的图、文、影、音等信息。此类标记的主整合分散在世界各地的图、文、影、音等信息。此类标记的主要用途为标示超文本文件链接：要用

17、途为标示超文本文件链接：.：建立超级链接。：建立超级链接。 本标记对的本标记对的hrefhref属性属性是必不可少的。是必不可少的。hrefhref的值可以是的值可以是URLURL形形式，即网址或相对路径。式，即网址或相对路径。例：例：哈尔滨工程大学哈尔滨工程大学表示点击表示点击“哈尔滨工程大学哈尔滨工程大学”链接则进入链接则进入http:/http:/这个网页中。这个网页中。例：例：a href=.html我的主页我的主页3/6/20223/6/2022. .1818v 多媒体标记多媒体标记此类标记用来显示图像数据。主要有：此类标记用来显示图像数据。主要有：嵌入：嵌入图像图像。：嵌入：嵌入多

18、媒体对象多媒体对象。：背景音乐背景音乐。例：例：img src=baby.JPG alt=height=228altalt：无法显示图片时的替代文字无法显示图片时的替代文字。例：例：embed src= height=700 例：例： bgsound src= .mp3 loop=3 3/6/20223/6/2022. .1919v 表格标记表格标记 最后要讲的是表格，这也是一组十分重要的标记，一方面最后要讲的是表格，这也是一组十分重要的标记，一方面可以制作列表形式的输出，另一方面可用作屏幕区域的划分。可以制作列表形式的输出，另一方面可用作屏幕区域的划分。表格的标记是：表格的标记是：. ：定义

19、表格定义表格. ：表格行表格行. ：表格列表格列标记比较重要的参数有：标记比较重要的参数有：border=border=边框线宽度边框线宽度，可以显示表格边框线。，可以显示表格边框线。width=width=表格宽度表格宽度，如果是一个，如果是一个正整数正整数，表示以，表示以屏幕点数屏幕点数为为单位单位的表的表格宽度；如果是一个格宽度；如果是一个百分数百分数，表示表格宽度占浏览器宽度的，表示表格宽度占浏览器宽度的百百分比分比。3/6/20223/6/2022. .2020 表格标记表格标记 下面是表格标记的示例：下面是表格标记的示例： 左上格左上格 右上格右上格 左下格左下格 右下格右下格 带有带有width、height属性属性3/6/20223/6/2022. .21211.1 HTML1.1 HTML语言简介语言简介 1.2 HTML1.2 HTML的基本语法的基本语法1.3 HTML1.3 HTML代码的编写代码的编写1.4 1.4 标签选择器标签选择器 HTML是一种网页制作语言，通过是一种网页制作语言，通过标记标记可以将文字、图可以将文字、图像、声音等多媒体素材组合在一起，并且按照一定的格式显像、声音等多媒体素材组合在一起