网页制作(HTML语言).ppt

《网页制作(HTML语言).ppt》由会员分享，可在线阅读，更多相关《网页制作(HTML语言).ppt（80页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、一、一、网页技术概况网页技术概况 1.1.静态网页静态网页 静态网页是指这个网页不论在何时何地浏览，静态网页是指这个网页不论在何时何地浏览，都将显示相同的画面与内容，且用户仅能浏览，都将显示相同的画面与内容，且用户仅能浏览，而无法提供信息给网站，也不能让网站响应用户而无法提供信息给网站，也不能让网站响应用户的需求。的需求。静态网页通常以静态网页通常以.htmhtm、.html.html、.xml.xml等为后等为后缀名。纯粹缀名。纯粹HTMLHTML格式的网页通常被称为格式的网页通常被称为“静态网静态网页页”。静态网页是相对于动态网页而言，是指没静态网页是相对于动态网页而言，是指没有有后台数据

2、库后台数据库、不含程序和不可交互的网页。、不含程序和不可交互的网页。HTML HTML语言语言 特点：特点：(1)(1)静态网页的文件名以静态网页的文件名以.htmhtm、.html.html、.xml.xml等常见形式为后缀；等常见形式为后缀；(2)(2)静态网页的内容相对稳定，容易被搜索静态网页的内容相对稳定，容易被搜索引擎检索引擎检索;(3)(3)静态网页没有数据库的支持，在网站制静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态大时完全依靠静态网页制作网页制作方式比较困难方式比较困难;(4)(4)静态网

3、页的交互性较差，在功能方面有静态网页的交互性较差，在功能方面有较大的限制。较大的限制。2.2.动态网页动态网页 动态网页是采用动态网页是采用动态网站动态网站技术生成的网页。技术生成的网页。动态网页技术：动态网页技术：PHPPHP：即超文本预处理器即超文本预处理器 (Hypertext(Hypertext Preprocessor)Preprocessor)，它是当今，它是当今InternetInternet上最为火热的上最为火热的脚本脚本语言。它与语言。它与HTMLHTML语言具有非常好的兼容性。语言具有非常好的兼容性。PHPPHP提供了标准的数据库接口，数据库连接方便，提供了标准的数据库接口

4、，数据库连接方便，兼容性强。兼容性强。ASPASP：即即Active Server PagesActive Server Pages，由微软，由微软开发，它没有提供自己专门的编程语言，而是允开发，它没有提供自己专门的编程语言，而是允许用户使用许多已有的脚本语言编写许用户使用许多已有的脚本语言编写ASPASP的的应用程应用程序序。ASPASP是在是在WebWeb服务器端运行，运行后再将运行服务器端运行，运行后再将运行结果以结果以HTMLHTML格式传送至格式传送至客户端客户端的浏览器。因此的浏览器。因此ASPASP与一般的脚本语言相比，要安全得多。与一般的脚本语言相比，要安全得多。ASPASP的

5、最大的最大好处是可以包含好处是可以包含HTMLHTML标签，在程序编制上比较方标签，在程序编制上比较方便且灵活。通过使用便且灵活。通过使用ASPASP的组件和对象技术，用户的组件和对象技术，用户可以直接使用可以直接使用ActiveXActiveX控件，调用对象方法和属性，控件，调用对象方法和属性，以简单的方式实现强大的交互功能。以简单的方式实现强大的交互功能。JSPJSP：即即Java Server PagesJava Server Pages，它是由，它是由Sun Sun MicrosystemMicrosystem公司于公司于19991999年年6 6月推出的新技术，是月推出的新技术，是基

6、于基于Java Java ServletServlet以及整个以及整个JavaJava体系的体系的WebWeb开发技开发技术术。JSPJSP和和ASPASP在技术方面有许多相似之处，不过在技术方面有许多相似之处，不过两者来源于不同的技术规范组织，以至两者来源于不同的技术规范组织，以至 ASPASP一般一般只应用于只应用于Windows NT/2000Windows NT/2000平台，而平台，而JSPJSP则可以在则可以在8585以上的服务器上运行，而且基于以上的服务器上运行，而且基于JSPJSP技术的应技术的应用程序比基于用程序比基于ASPASP的应用程序易于维护和管理，所的应用程序易于维护

7、和管理，所以被许多人认为是未来最有发展前途的动态网站以被许多人认为是未来最有发展前途的动态网站技术。技术。3.3.静态网页和动态网页静态网页和动态网页 静态网页，动态网页主要根据静态网页，动态网页主要根据网页制作网页制作的的语言来区分：语言来区分：静态网页使用语言：静态网页使用语言：HTMLHTML；动态网页使用语言：动态网页使用语言：HTMLHTMLASP ASP 或或 HTMLHTMLPHP PHP 或或 HTMLHTMLJSP JSP 等。等。3.3.静态网页和动态网页静态网页和动态网页 程序是否在服务器端运行，是重要标志：程序是否在服务器端运行，是重要标志：在服务器端运行的程序、网页、

8、组件，在服务器端运行的程序、网页、组件，属于动态网页，它们会随不同客户、不同时间，属于动态网页，它们会随不同客户、不同时间，返回不同的网页，例如返回不同的网页，例如ASPASP、PHPPHP、JSPJSP、ASP.netASP.net等；等；运行于运行于客户端客户端的程序、网页、的程序、网页、插件插件、组、组件，属于静态网页，例如件，属于静态网页，例如htmlhtml页、页、FlashFlash、JavaScriptJavaScript、VBScriptVBScript等，它们是永远不变的。等，它们是永远不变的。3.3.静态网页和动态网页静态网页和动态网页 静态网页和动态网页各有特点，网站采用

9、静态网页和动态网页各有特点，网站采用动态网页还是静态网页主要取决于网站的功能需动态网页还是静态网页主要取决于网站的功能需求和网站内容的多少。求和网站内容的多少。如果网站功能比较简单，内容更新量不如果网站功能比较简单，内容更新量不是很大，采用纯静态网页的方式会更简单，反之是很大，采用纯静态网页的方式会更简单，反之一般要采用一般要采用动态网页技术动态网页技术来实现。来实现。二、二、HTMLHTML简介简介 HTMLHTML不是一种程序，它只是一种控制网页中资不是一种程序，它只是一种控制网页中资料显示的标识语言。料显示的标识语言。HTMLHTML中定义了一系列标签。这些标签用于控制中定义了一系列标签

10、。这些标签用于控制网页的文档格式、字符格式及段落格式等，还包括网页的文档格式、字符格式及段落格式等，还包括为达到网页的交互效果而对脚本语言和为达到网页的交互效果而对脚本语言和JavaJava小程序小程序等的支持和调用规则。等的支持和调用规则。因为因为HTMLHTML是一个文本文件，所以可以使用任何一个是一个文本文件，所以可以使用任何一个文本编辑器进行编写文本编辑器进行编写(Windows(Windows记事本记事本)。在保存在保存HTMLHTML文件时，需保存为纯文本文件，并用文件时，需保存为纯文本文件，并用 .html .html或或.htmhtm作为扩展名。作为扩展名。HTMLHTML文件

11、是运行在文件是运行在WebWeb浏览器上的，通过浏览器解浏览器上的，通过浏览器解释执行。释执行。三、三、HTMLHTML的基本结构的基本结构 1 1、HTMLHTML标签标签 一个一个HTMLHTML文件是由一系列的元素和标签组文件是由一系列的元素和标签组成的。成的。元素是元素是HTMLHTML文件的重要组成部分，如：文件的重要组成部分，如：title(title(文件标题文件标题)、imgimg(图像图像)及及table(table(表格表格)等。等。元素名不区分大小写。元素名不区分大小写。HTMLHTML用标签来规定元素的属性和它在文用标签来规定元素的属性和它在文件中的位置。件中的位置。H

12、TMLHTML标签分为单标签和成对标签。标签分为单标签和成对标签。成对标签的语法：成对标签的语法：要控制的元素要控制的元素/例：例：第一个网页第一个网页 该标签用于界定标题元素的范围，即该标签用于界定标题元素的范围，即和和 标签之间的部分是此标签之间的部分是此HTMLHTML文件的标题。文件的标题。单标签语法：单标签语法：例：例：表示在当前位置插入一个换行符。表示在当前位置插入一个换行符。注：注：HTMLHTML标签不区分大小写。标签不区分大小写。标签属性标签属性 一个标签为了明确它的功能，往往用一些属性一个标签为了明确它的功能，往往用一些属性参数来描述。标签属性是用于控制标签中元素的显参数来

13、描述。标签属性是用于控制标签中元素的显示效果，如颜色、对齐方式等。示效果，如颜色、对齐方式等。这些属性位于所建立元素的首标签。这些属性位于所建立元素的首标签。语法：语法：2”要控制的元素要控制的元素 /注：各属性无先后顺序。注：各属性无先后顺序。例如：例如：hr width=“100”size=“5”color=“#ff0000”一个简单的一个简单的HTMLHTML文件：文件：第一个第一个HTMLHTML示例示例 HTML HTML的基本结构的基本结构 文件文件开开始始 文件文件头 文件文件标题 文件体文件体文件文件结束束 2 2、HTMLHTML文件结构文件结构 文件标签文件标签 在任何一个

14、在任何一个HTMLHTML文件中最先出现的标签，文件中最先出现的标签，用于表示该文件是以超文本标识语言用于表示该文件是以超文本标识语言HTMLHTML编写的。编写的。该标签是成对标签，首标签该标签是成对标签，首标签位于文位于文件的最前面，尾标签件的最前面，尾标签位于文件的结尾，文位于文件的结尾，文件中所有文本和件中所有文本和HTMLHTML标签都包含在其中。标签都包含在其中。该标签不带有任何属性。该标签不带有任何属性。文件头部标签文件头部标签 文件头标签部分用来规定该文件的标题，文件头标签部分用来规定该文件的标题，(出现在出现在webweb浏览器窗口的标题栏中浏览器窗口的标题栏中)和文件的一些

15、和文件的一些属性。属性。该标签中可以插入其他标签，如该标签中可以插入其他标签，如、等，这些标等，这些标签用于描述签用于描述htmlhtml文档的相关信息、定义样式或插入文档的相关信息、定义样式或插入脚本语言。脚本语言。该标签可以省略。该标签可以省略。文件标题标签文件标题标签 在浏览器中，文件名称作为窗口名称显示在浏览器中，文件名称作为窗口名称显示在窗口的最上方。在窗口的最上方。该标签应包含在该标签应包含在与与标签之标签之中。中。MetaMeta标签标签 metameta标签的组成：标签的组成：meta meta标签共有两个属性，它们分别是标签共有两个属性，它们分别是 http-equiv ht

16、tp-equiv属性和属性和namename属性，不同的属性又属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同有不同的参数值，这些不同的参数值就实现了不同的网页功能。的网页功能。name name属性属性 namename属性主要用于描述网页，与之对应的属性主要用于描述网页，与之对应的属性值为属性值为contentcontent，contentcontent中的内容主要是便于搜中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。索引擎机器人查找信息和分类信息用的。name name属性主要有以下几种参数：属性主要有以下几种参数：A A、Keywords(Keywords(关键

17、字关键字)说明：说明：keywordskeywords用来告诉搜索引擎你网页用来告诉搜索引擎你网页的关键字是什么。的关键字是什么。举例：举例：meta name=keywords meta name=keywords content=content=关键字关键字 B B、description(description(网站内容描述网站内容描述)说明：说明：descriptiondescription用来告诉搜索引擎你的用来告诉搜索引擎你的网站主要内容。网站主要内容。举例：举例：meta name=description meta name=description content=“conten

18、t=“网页描述网页描述”C C、author(author(作者作者)说明：标注网页的作者说明：标注网页的作者 举例：举例：meta name=author meta name=author content=content=你的名字你的名字 D D、robots(robots(机器人向导机器人向导)说明：说明：robotsrobots用来告诉搜索机器人哪些页面用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。需要索引，哪些页面不需要索引。contentcontent的参数有的参数有all,none,index,all,none,index,noindexnoindex,follow,fo

19、llow,nofollownofollow。默认是。默认是allall。举例：举例：meta name=robots meta name=robots content=“none”content=“none”http-equiv http-equiv属性属性 http-equivhttp-equiv可以向浏览器传回一些有用的可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之信息，以帮助正确和精确地显示网页内容，与之对应的属性值为对应的属性值为contentcontent，contentcontent中的内容其实中的内容其实就是各个参数的变量值。就是各个参数的变量值。meatm

20、eat标签的标签的http-equivhttp-equiv属性语法格式是：属性语法格式是：meta http-equiv=meta http-equiv=参数参数 content=content=参数变量值参数变量值 A A、content-Type(content-Type(显示字符集的设定显示字符集的设定)说明：设定页面使用的字符集。说明：设定页面使用的字符集。举例：举例：meta http-equiv=“content-meta http-equiv=“content-Type”content=“text/html;Type”content=“text/html;charsetchars

21、et=gb2312”=gb2312”B B、Refresh(Refresh(刷新刷新)说明：自动刷新并指向新页面。说明：自动刷新并指向新页面。举例：举例：meta http-equiv=“Refresh”meta http-equiv=“Refresh”content=“2content=“2；URL=http:/URL=http:/”注意：其中的注意：其中的2 2是指停留是指停留2 2秒钟后自动刷新到秒钟后自动刷新到URLURL网址。网址。C C、Expires(Expires(期限期限)说明：可以用于设定网页的到期时间。一旦说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新

22、传输。网页过期，必须到服务器上重新传输。举例：举例：meta http-equiv=“expires”meta http-equiv=“expires”content=“Fri,12 Jan 2001 18:18:18 GMT”content=“Fri,12 Jan 2001 18:18:18 GMT”注意：必须使用注意：必须使用GMTGMT的时间格式。的时间格式。D D、Pragma(cachePragma(cache模式模式)说明：禁止浏览器从本地计算机的缓存中访说明：禁止浏览器从本地计算机的缓存中访问页面内容。问页面内容。举例：举例：meta http-equiv=meta http-e

23、quiv=PragmaPragma content=no-cachecontent=no-cache 注意：这样设定，访问者将无法脱机浏览。注意：这样设定，访问者将无法脱机浏览。E E、Window-target(Window-target(显示窗口的设定显示窗口的设定)说明：强制页面在当前窗口以独立页面显示。说明：强制页面在当前窗口以独立页面显示。举例：举例：meta http-equiv=“Window-meta http-equiv=“Window-target”content=“target”content=“_ _top”top”注意：防止网页被别人作为一个注意：防止网页被别人作为一

24、个FrameFrame调用。调用。ex2-head-httpequiv07.html 标记中的标记中的http-equivhttp-equiv属性用于设属性用于设置一个置一个httphttp的标题域，但确定值由的标题域，但确定值由contentcontent属性属性决定；决定；namename属性用于设置元信息出现的形式，属性用于设置元信息出现的形式，contentcontent属性用于设置元信息出现的内容。属性用于设置元信息出现的内容。F F、实现网页转换时的动画效果、实现网页转换时的动画效果 说明：使用说明：使用metameta标签，我们还可以在进入网页或者标签，我们还可以在进入网页或者离

25、开网页的一刹那实现动画效果，我们只要在页面的离开网页的一刹那实现动画效果，我们只要在页面的 htmlhtml代码中的代码中的headhead/head/head标签之间添加如下代码标签之间添加如下代码就可以了：就可以了：meta http-equiv=“meta http-equiv=“Page-EnterPage-Enter”content=“content=“revealTrans(durationrevealTrans(duration=.,transition=,transition=)”)”meta http-equiv=“meta http-equiv=“Page-ExitPage

26、-Exit”content=“content=“revealTrans(durationrevealTrans(duration=.,transition=,transition=)”)”ex2-head-httpequiv08-exit.html G G、打开一个相对地址、打开一个相对地址 base blank a =./15.html打开一个相对地址打开一个相对地址 文件体标签文件体标签 文件主体部分就是在文件主体部分就是在webweb浏览器窗口的用浏览器窗口的用户区内看到的内容。户区内看到的内容。该标签是成对标签，网页中的内容均写在该标签是成对标签，网页中的内容均写在该标签之间，而该标签

27、包含在该标签之间，而该标签包含在标签内。标签内。在此标签中可以包含众多的标签，如在此标签中可以包含众多的标签，如、等。网页中的所有内容、等。网页中的所有内容、文字、图片、链接以及其他页面元素都包含在此标文字、图片、链接以及其他页面元素都包含在此标签对之间。签对之间。四、四、文字版面的编辑文字版面的编辑 1 1、页面布局、页面布局 换行标签换行标签 换行标签是个单标签。换行标签是个单标签。效果：在效果：在HTMLHTML文件中的任何位置只要使用文件中的任何位置只要使用了了 标签，当文件显示在浏览器中时，该位置之标签，当文件显示在浏览器中时，该位置之后的文字将显示于下一行。后的文字将显示于下一行。

28、作作 业业br.htmlbr.html 强制不换行标签强制不换行标签 不换行标签是个成对标签。不换行标签是个成对标签。效果：使用效果：使用 标签把语句强行放在一标签把语句强行放在一行中。行中。分段控制标签分段控制标签 由由标签所标识的文字代表同一个段落标签所标识的文字代表同一个段落的文字。的文字。效果：在浏览器中不同段落的文字间除了效果：在浏览器中不同段落的文字间除了换行外，还会以一个空白行加以间隔。换行外，还会以一个空白行加以间隔。它可以单独使用，也可以成对使用。它可以单独使用，也可以成对使用。分段控制标签分段控制标签 格式：格式：文字文字 文字文字 p align=文字文字 其中，其中，a

29、lignalign属性有属性有leftleft、centercenter和和rightright三个参数，这三个设置值依次将段落文字的水平对齐方式三个参数，这三个设置值依次将段落文字的水平对齐方式设置为左对齐、居中对齐和右对齐。设置为左对齐、居中对齐和右对齐。作作 业业p.htmlp.html 原样显示文字标签原样显示文字标签 将将HTMLHTML文件中的文字编排方式，通过浏览文件中的文字编排方式，通过浏览器显示时，保留原始的文件排版方式。器显示时，保留原始的文件排版方式。格式：格式：预编排信息预编排信息 作作 业业pre.htmlpre.html 居中对齐标签居中对齐标签 效果：将文字进行居

30、中控制显示。为成对效果：将文字进行居中控制显示。为成对标签。标签。格式：格式：居中文字居中文字 作作 业业center.htmlcenter.html 引文标签引文标签 效果：用来建立一个引文，特别适合较长效果：用来建立一个引文，特别适合较长文本的引用，引文显示时将会自动右移，加以区别。文本的引用，引文显示时将会自动右移，加以区别。格式：格式：引文部分引文部分/水平分割线标签水平分割线标签 效果：换行并在该行下画一条横线，横线效果：换行并在该行下画一条横线，横线的上下端都会留出一定的空白。的上下端都会留出一定的空白。单标签。单标签。给给标签设置一些属性，可以使他具有标签设置一些属性，可以使他具

31、有更强的功能。更强的功能。标签的属性有：标签的属性有：size size 设置水平分隔线的粗细；单位为设置水平分隔线的粗细；单位为pxpx；默认；默认为为2 2 width width 设置水平分隔线的宽度；设置水平分隔线的宽度；单位为单位为pxpx、百分比；、百分比；默认值为默认值为100%100%align align 设置水平分隔线的对齐方式；设置水平分隔线的对齐方式；参数取值为参数取值为left/center/rightleft/center/right；默认值为默认值为center center color color 设置水平分隔线的颜色；默认为黑色设置水平分隔线的颜色；默认为黑色

32、 noshadenoshade 水平分隔线不显示水平分隔线不显示3D3D阴影阴影 署名标签署名标签 署名标签一般用于说明这个网署名标签一般用于说明这个网页是由谁或是由哪个公司编写的，以及其它相关信页是由谁或是由哪个公司编写的，以及其它相关信息。息。效果：在效果：在标签之间的文字显示标签之间的文字显示效果是斜体字。效果是斜体字。特殊字符特殊字符 HTMLHTML常见特殊字符及其代码表常见特殊字符及其代码表 特殊字符字符代码描述>小于号或显示标记&可用于显示其他特殊字符“"引号©版权符®注册符空格 空格符 作作 业业hr-hr-特殊字符特殊字符.h

33、tml.html版版权符符号号 注释标签注释标签 注释标签中的内容主要起说明作用，并且注释标签中的内容主要起说明作用，并且不显示在网页中。不显示在网页中。注释标签的格式：注释标签的格式：!-!设定网页背景和文字的颜色设定网页背景和文字的颜色 设置在设置在标签内的属性，可控制整个标签内的属性，可控制整个页面的显示方式。页面的显示方式。格式：格式：body 3 说明：说明：backgroudbackgroud属性用于设置网页的背景图片属性用于设置网页的背景图片 bgcolorbgcolor属性设置网页的背景颜色，格式为：属性设置网页的背景颜色，格式为：body ”或或 body 其中，其中，“#“

34、#nnnnnnnnnnnn”代表十六进制数，每两位的取值是代表十六进制数，每两位的取值是从从00FF00FF。前两位设置红色的深浅，中间两位设置绿色的深。前两位设置红色的深浅，中间两位设置绿色的深浅，最后两位设置蓝色的深浅。浅，最后两位设置蓝色的深浅。也可采用指定颜色名来设置背景颜色，颜色名即是该也可采用指定颜色名来设置背景颜色，颜色名即是该颜色对应的英文单词。颜色对应的英文单词。例如：指定背景颜色为红色例如：指定背景颜色为红色 body =“Red”或或 body=“#FF0000”texttext属性用于指定网页内文字的颜色。属性用于指定网页内文字的颜色。注注:当当bgcolorbgcol

35、or属性和属性和backgroundbackground属性同时设置了值时，属性同时设置了值时，只取只取 backgroundbackground属性的值。属性的值。颜色代码表颜色代码表 名称颜色名称颜色Black(#000000)黑色Red(#FF3300)红色Gray(#999999)灰色Maroon(#993300)栗色Navy(#0033CC)海军蓝Silver(#CCCCCC)银白色Purple(#660000)紫色Olive(#336633)橄榄绿Aqua(#0066FF)浅蓝绿Yellow(#FFFF00)黄色Green(#66FF00)绿色Blue(#00FFFF)蓝色Whit

36、e(#FFFFFF)白色Fuchsia(#993333)紫红色四、文字版面的编辑四、文字版面的编辑 2 2、字体属性、字体属性 标题文字标签标题文字标签 标签用于设置网页中的标题文字，被设标签用于设置网页中的标题文字，被设置的文字将以黑体或粗体的方式显示在网页中。置的文字将以黑体或粗体的方式显示在网页中。格式格式 标题文字标题文字/说明：说明：标签是成对标签。它总共分为六级，其中，标签是成对标签。它总共分为六级，其中，是第一级标题，最大最粗；是第一级标题，最大最粗；是第六是第六级标题，最小最细。级标题，最小最细。alignalign属性用于设置标题的对齐方式。属性用于设置标题的对齐方式。标题文

37、字具体的大小则因浏览器的不同而不同。标题文字具体的大小则因浏览器的不同而不同。标签本身具有换行的作用，标题总是从新的标签本身具有换行的作用，标题总是从新的一行开始。一行开始。文字格式控制标签文字格式控制标签 标签用于控制文字的字体、大小标签用于控制文字的字体、大小和颜色。控制的方式是通过属性设置得以实现的。和颜色。控制的方式是通过属性设置得以实现的。标题的属性：标题的属性：face face 控制文字字体控制文字字体 size size 控制文字的大小控制文字的大小 color color 控制文字的颜色控制文字的颜色 文字格式控制标签文字格式控制标签 格式：格式：font face=3 文字

38、文字 说明：说明：faceface属性指定的字体名称比如属性指定的字体名称比如:宋体、楷体等。宋体、楷体等。若用户的系统中不存在该字体，则使用默认字体。若用户的系统中不存在该字体，则使用默认字体。sizesize属性的取值为属性的取值为1717，默认值为，默认值为3 3。同时可以用。同时可以用 “+”+”或或“-”-”来设定字号的相对值。来设定字号的相对值。colorcolor属性的格式为属性的格式为 font color=“#”或或 font color=“特定文字样式标签特定文字样式标签 粗体标签粗体标签 文字文字 用于以粗体方式显示标签内的文字。用于以粗体方式显示标签内的文字。斜体标签斜

39、体标签 文字文字 用于以斜体方式显示标签内的文字。用于以斜体方式显示标签内的文字。下划线下划线 文字文字 用于在标签内的文字下加下划线。用于在标签内的文字下加下划线。五、五、建立超链接建立超链接 1 1、超链接的建立、超链接的建立 超链接标签超链接标签 格式：格式：a 超链接文字超链接文字 说明：说明：“超链接的文字超链接的文字”就是超链接的源点。就是超链接的源点。“链接位置链接位置”就是超链接的目标，可使用就是超链接的目标，可使用URLURL指定。指定。URL URL格式：格式：通信协议通信协议:/:/链接地址链接地址/文件位置文件位置/文件名文件名 targettarget属性决定链接到的

40、文件在哪个框架或窗口中属性决定链接到的文件在哪个框架或窗口中显示。默认方式是当前窗口。显示。默认方式是当前窗口。titletitle属性设定在浏览器中鼠标指向链接时显示的属性设定在浏览器中鼠标指向链接时显示的提示文本。提示文本。URLURL有绝对有绝对URLURL和相对和相对URLURL H HTMLTML的超链接主要有三种，分别是：的超链接主要有三种，分别是：在同一个文件中建立链接在同一个文件中建立链接(锚点链接锚点链接/书签书签)；在不同文件之间建立链接；在不同文件之间建立链接；建立建立URL(URL(网址网址)链接。链接。在同一个文件中建立链接在同一个文件中建立链接 语法格式：语法格式：

41、在源链接文件中在源链接文件中 a 链接文字链接文字 在链接目标文件中在链接目标文件中 a name=“#链接文字链接文字 在不同文件之间建立链接在不同文件之间建立链接 语法格式：语法格式：a 链接文字链接文字 注：当对不同文件进行链接时，需要有两个以上的注：当对不同文件进行链接时，需要有两个以上的 HTML HTML文件，应明确哪个是主链接文件，哪个是被链接文件，应明确哪个是主链接文件，哪个是被链接 文件。以上的语句是设置在主链接文件中的。文件。以上的语句是设置在主链接文件中的。同时，文件路径多采用相对路径。同时，文件路径多采用相对路径。链接到其他站点链接到其他站点 语法格式：语法格式：a 链

42、接文字链接文字 注：注：hrefhref中的中的http:/http:/部分不能省略。部分不能省略。说明：说明：target target的几种取值：的几种取值：_blank 在新窗口中显示页面在新窗口中显示页面 _self 在当前窗口中显示页面在当前窗口中显示页面 (课程案例课程案例a链接案例链接案例)2 2、超链接的应用、超链接的应用 更改链接文字的颜色更改链接文字的颜色 格式：格式：body text=“网页内容网页内容 说明：说明：texttext属性：非可链接文字的颜色，默认为属性：非可链接文字的颜色，默认为黑色黑色(black)(black)。linklink属性：可链接文字的颜色

43、，默认为蓝属性：可链接文字的颜色，默认为蓝色色(blue)(blue)。vlinkvlink属性：已经被访问过的可链接文字属性：已经被访问过的可链接文字的颜色，默认为栗色的颜色，默认为栗色(maroon)(maroon)。alinkalink属性：正被单击的可链接文字的颜属性：正被单击的可链接文字的颜色，默认为红色色，默认为红色(red)(red)用链接实现发送邮件用链接实现发送邮件 格式：格式：a 描述文字描述文字 六、图像的处理六、图像的处理 1 1、网页中插入图形、网页中插入图形 标签标签 格式：格式：是单标签是单标签 说明：说明：srcsrc 是用来指定一个图像的文件名或指出是用来指定

44、一个图像的文件名或指出 URLURL的路径名。的路径名。如果图像的显示有问题，应检查以下内容：如果图像的显示有问题，应检查以下内容：文件名是否正确；图像文件是否是文件名是否正确；图像文件是否是bmpbmp、gifgif、jpgjpg格式；格式；文件的路径是否正确。文件的路径是否正确。alt alt 是用来指定图像的替代文字。即当浏览是用来指定图像的替代文字。即当浏览器不能显示图像或找不到图像时，器不能显示图像或找不到图像时，altalt属性中的文属性中的文字将显示在屏幕上，替代无法显示的图像。字将显示在屏幕上，替代无法显示的图像。说明：说明：height/width height/width

45、用来指定图像的高度和宽度，用来指定图像的高度和宽度，两者的单位有两者的单位有“像素像素”或或“百分比百分比”。(默认单位默认单位为像素为像素)borderborder属性可以给图像加一个边框。若属性可以给图像加一个边框。若borderborder项默认或取值为项默认或取值为0 0时，图像没有边框。时，图像没有边框。align align 用来控制图像相对于文字基准线用来控制图像相对于文字基准线(文文字中线字中线)的水平对齐方式。的水平对齐方式。其取值有：其取值有：top(top(上对齐上对齐)、middle(middle(居中对齐居中对齐)、bottom(bottom(下对齐下对齐)、left

46、(left(左对齐左对齐)、right(right(右对齐右对齐)vspace/hspacevspace/hspace 属性能够调整图像与其他文属性能够调整图像与其他文字之间的距离，两者均取值像素。字之间的距离，两者均取值像素。vspacevspace 为调整图像与上下文本的距离；为调整图像与上下文本的距离；hspacehspace为调整图像与左右文本的距离。为调整图像与左右文本的距离。七、七、列表项目列表项目 1 1、无序列表、无序列表 格式：格式：项目符号项目符号 项目符号项目符号 项目符号项目符号 /说明：说明：使用使用typetype属性来控制行的标号，属性来控制行的标号，typety

47、pe属性的取值属性的取值和含义。和含义。TypeType取值取值含义含义 Type=disc设定一个实心圆点的行标号“”，默认项 Type=circle设定一个空心圆点的行标号“”Type=square设定一个方形实心的行标号“”2 2、有序列表、有序列表 格式：格式：2”项目符号项目符号 项目符号项目符号 项目符号项目符号 /说明：说明：顺序编号是由属性顺序编号是由属性typetype和和startstart来设置。来设置。TypeType表表示标号的类型，示标号的类型，startstart属性表示列表清单的标号从属性表示列表清单的标号从第几项开始。第几项开始。TypeType取值取值含义含

48、义Type=1表示列表项用数字标号(1,2,3)，是默认项Type=A表示列表项用大写字母标号(A,B,C)Type=a表示列表项用小写字母标号(a,b,c)Type=I表示列表项用大写罗马数字标号(I,II,III)Type=I表示列表项用小写罗马数字标号(,)3 3、嵌套列表、嵌套列表 将一个列表嵌入另一个列表中，作为另一个列将一个列表嵌入另一个列表中，作为另一个列表的一部分，叫做嵌套列表表的一部分，叫做嵌套列表 八、八、表格表格 1 1、定义表格的基本语法、定义表格的基本语法 (1)(1)定义表格标签定义表格标签 标签用于定义一个表格元素，一个表格标签用于定义一个表格元素，一个表格元素是

49、由多个横行元素是由多个横行 、单元格、单元格和表头单元格和表头单元格 子元素所组成的。子元素所组成的。(2)(2)定义表头标签定义表头标签 标签用于定义表格内的表头单元格，此单标签用于定义表格内的表头单元格，此单元格中的文字将以粗体的方式显示。元格中的文字将以粗体的方式显示。(在一个表格在一个表格的定义语法中叶可以不使用的定义语法中叶可以不使用 标签定义表头单元标签定义表头单元格。格。)(3)(3)定义表格行标签定义表格行标签 标签用于定义表格的一行，在一组标签用于定义表格的一行，在一组 标标签内将建立一行表格，也可以包含多组由签内将建立一行表格，也可以包含多组由 或或 标签所定义的单元格。标签所定义的单元格。(4)(4)定义单元格标签定义单元格标签 标签用于定义表格的单元格。一组标签用于定义表格的单元格。一组标标签内将建立一个单元格。签内将建立一个单元格。标签必须放在标签必须放在 标标签内。签内。在一个最基本的表格元素中，必须包含一组在一个最基本的表格元素中，必须包含一组标签、一组标签、一组 标签和一组标签和一组标签。标签。2 2、表格属性说明、表格属性说明 (1)(1)设置表格边框的尺寸设置表格边框的尺寸 borderborder table border=“(2)(2)定义表头标签定义表头标签