第1章 HTML基础.pptx

1、UI设计,计算机科学与技术系,学 习 目 的,1、掌握HTML基本结构及其标记的应用； 2、掌握CSS的基本语法，创建及应用，灵活运用CSS和DIV完成页面布局； 3、掌握JavaScript脚本语言基本语法，熟练应用JavaScript脚本程序； 4、能熟练地运用所学制作网页页面。,教 材 及 课 时 安 排,教材：Web编程基础，陈矗 任平红 编著 清华大学出版社 本课程共计3学分，56学时。 课时分配如下： 授课时间：5-18周，共14周。 理论讲授：28学时，在机房完成，2学时/每周 操作指导：28学时，在机房完成，2学时/每周,成绩评定,考核方式：采用上机进行考核，期中安排做简单专题

2、网站，时间安排在课余时间，机试安排在期末，时间为2课时。 成绩评定：平时考勤和上机成绩占30%；期中考试占20%；期末考试占50%。 总成绩由以上三部分组成，共计100分。,第0章 UI设计概述,UI设计概述,网页是什么？ 怎样的网页是成功的？ 网站的建设流程是什么？ 网页的构成元素有哪些？ 网页设计原则是什么？,0.1 了解网站UI,1.认识网页与网站 网页：是文件，是按照网页文档规范编写的一个或多个文件，它可以在WWW上传输，并被浏览器翻译成页面显示出来。 首页：（Home page）也可以称之为主页，它是一个单独的网页，和一般网页一样，可以存放各种信息，同时又是一个特殊的网页，作为整个网

3、站的起始点和汇总点，是浏览者访问网站的第一个网页。,0.1 了解网站UI,网站（Website）是指在因特网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。简单地说，网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务。人们可以通过网页浏览器来访问网站，获取自己需要的资讯或者享受网络服务。,网页与网站的区别与联系： 网站是一个文件夹，其中的文件不仅是网页还有网站所需的其他文件或文件夹。网页是一个页面文件，用来发布各种信息。网页是网站的构成要素，是网站信息发布与表现的一种主要形式；网站是网页通过超链接形成的集

4、合。,0.1 了解网站UI,2.网页构成的基本元素 文字 网页中的大多数信息主要以文本方式显示，文字是网页的主体，负责传达信息的功能。 图形图像 目前，用户在网页中使用的图片格式主要包括GIF、JPEG和PNG等，其中使用最广泛的是GIF和JPEG两种格式,动画 动画是动态的图形，添加动画可以使网页更加生动。常用的动画格式包括动态GIF图片和Flash动画 音频和视频 声音是多媒体网页中的重要组成部分 ，主要有MIDI、WAV、MP3和AIF等 表格 在网页中使用表格可以控制网页中信息的结构布局，主要包括两个方面：一是使用行和列的形式来布局文本和图像以及其他的列表化数据；二是精确定位网页元素在

5、页面中出现的位置,0.1 了解网站UI,超级链接 超链接是网页与其他网络资源联系的纽带 ，可以在文本和图片上设置超链接 导航栏 导航栏是用户在规划好站点结构 ，其作用是引导浏览者游历所有站点。 表单 表单是提供交互功能的基本元素，例如问卷调查、信息查询、用户注册及网上订购等，都需要通过表单进行信息的收集工作,0.1 了解网站UI,0.1 了解网站UI,3.网页界面的分类： 根据页面的具体内容可将网页划分为 环境性界面：政治、经济、文化、娱乐等各领域 功能性界面：展示商品和服务的特性及功能，以吸引用户消费 情感性界面：指网页通过配色和版式构建出某种强烈的情感氛围，引起浏览者的认同和共鸣，从而达到

6、预期目的的一种表现手法,0.2 网站建设流程,域名注册 虚拟主机 网页设计 网站建设 网站测试 网站维护,0.2 网站建设流程,域名注册 域名是由一串用点分隔的名字组成的字符串，用于在数据传输时标示计算机的具体位置。 选取域名的时，要遵循两个基本原则 域名应该简明易记，便于输入。 域名要有一定的内涵和意义。 常用域名： .com：商业机构 .pro：医生、会计师 .net：网络服务机构 .org：非营利性组织 .gov：政府机构 .edu：教育机构 ,0.2 网站建设流程,空间申请 网页在本地测试完毕，要想发布到互联网供人浏览，那么就需要在Internet上有一个存放网页的空间，关于网页空间，

7、目前主要有以下三种方式 实体主机 主机托管 虚拟主机,0.2 网站建设流程,确定网页设计 收集需要放到页面中的具体信息和内容，将它们合理分类，确定网站的主色调并制作出每个独立的静态页面。 网站建设 利用DIV+CSS样式将静态页面转换为动态页面。 网站测试 为确保网站的各个功能和模块能够正常工作，需对网站进行试运行测试，主要包括功能测试、性能测试、可用性测试、兼容性测试和安全测试。,0.2 网站建设流程,网站维护 服务器软件维护 服务器硬件维护 网站内容更新 网站安全维护 指定维护规定,0.3 网页的设计原则,视觉美观 主题明确 内容与形式统一 表现形式要符合主题的需要 确保每个元素存在的必要

8、性 快速下载 为用户考虑 考虑用户的带宽 考虑用户的浏览器 简化操作流程,0.4 网页设计与制作工具,1.图形图像制作工具Photoshop CS4和Fireworks CS4,0.4 网页设计与制作工具,2.网页动画制作工具Flash CS4,0.4 网页设计与制作工具,3.网页编辑工具Dreamweaver CS6,22,Dreamweaver CS6工作区简介,1、Dreamweaver CS6的工作界面 在启动Dreamweaver CS6时，首先进入的是起始页面，在起始页中，将Dreamweaver CS6能完成的任务都集中地放在了一个页面中，如“打开最近的项目”、“新建”、“主要功

9、能”等。,起始页,在起始页中选择“新建”中的“HTML”，这样便进入了Dreamweaver CS6的工作窗口，并建立起了一个网页页面，其工作界面如图。,工作界面,文档工具栏,文档工具栏给当前编辑的网页文档提供了一系列的便捷操作工具，它位于网页编辑窗口的上部，此工具提供了当前编辑网页的视图切换、文件管理等功能。,插入栏,插入栏中按类别可分为“常用”、“布局”、“表单”、“数据”、Spry、Context Editing、“文本”、“收藏夹”。这样可以通过插入栏“常用”选项完成在文档中插入常用的网页元素、通过“布局”选项完成控制网页布局的元素如Div标签、Spry菜单栏和表格等、通过“数据”选项

10、完成在文档插入Spry数据集、记录集等操作。,属性检查器,属性检查器中以HTML方式显示的属性面板可以设置“格式”、ID、“CSS样式”、“链接”、“文本格式”、“列表”、“编号”、“缩进”、“凸出”和“页面属性”等；以CSS方式显示的属性面板可以直接选择CSS样式的“目录规则”，并可对CSS规则进行编辑，以及快捷打开CSS面板。同时，可以显示已选元素的“字体”、“大小”、“颜色”、“文本格式”和“对齐方式”等，也可以设置页面属性。,29,2020/9/18,面板组,Dreamweaver CS6将各种工具面板集成到面板组中，包括“插入”、“CSS样式”、“行为”、“框架”、“文件”和“历史”

11、等面板。可以在菜单栏中选择“窗口”命令，在弹出的下拉菜单中选择显示或隐藏某项面板。,2. Dreamweaver CS6参数的设置,在Dreamweaver CS6中，所有的环境设置都是通过“首选参数”进行设置。可通过“编辑”、“首选参数”进入参数设置的界面。,建立和管理站点,1.建立站点 在Dreamweaver CS6中设计网站，首要工作就是建立网站站点，然后通过Dreamweaver CS6的相关功能对站点资源按设计者的要求进行组织和管理。,2.管理站点 编辑站点：在Dreamweaver CS6主窗口中，选择“站点” “站点管理”打开站点管理对话框，如图。,新建：可以新建一个站点。 编

12、辑：可以选择对话框中的已有站点进行编辑。 复制：可以选择对话框中的已有站点，复制出一个新的站点。 删除：可以选择对话框中的已有站点，删除该站点。 导出：可以选择对话框中的已有站点，其配置文件可以.ste格式保存。 导入：可以将.ste格式的配置文件导入。,站点管理高级设置：通过站点管理对话框的“编辑”按钮，打开“站点设置对象”对话框，打开“高级设置”，可以对站点信息进行设置。,网页文件的基本操作,1.新建、保存和关闭网页 新建网页：在Dreamweaver CS6主窗口中，选择“文件”“新建”命令，打开“新建文档”对话框。选择HTML空白页,保存网页：页面编辑完成后，需要把之前的页面保存下来，

13、选择“文件” “保存”命令或者选择“文件” “另存为”命令，选择保存路径，即可在对应路径中生成HTML文件保存下来。 关闭网页：关闭文档的操作分为两种。 （1）关闭 关闭当前操作文档。选择“文件” “关闭”命令，或使用快捷键Ctrl+W关闭文档。 （2）全部关闭 一次性将所有在工作界面打开的文档全部关闭，选择“文件” “全部关闭”，或使用快捷键Ctrl+Shift+W。,站点的测试与发布,1.测试网页 站点测试主要包括检测站点在各种浏览器中的兼容性，检测站点中是否有断掉的链接。,2.发布网站 设置站点,（1）选择“站点” “管理站点”命令，打开“管理站点”对话框。,（2）根据设计网站设置好“服

14、务器”，设置好相应的“FTP主机”、“登录”、“密码”等。,上传网站 在文件面板中，选择站点的本地根文件夹 通过单击文件面板工具栏上的上传文件蓝色箭头图标。,第1章 HTML基础,内 容 提 要,小结,1.3 HTML常用标签,1.2 HTML文档结构和语法,1.1 概述,概述,WWW是World Wide Web的缩写，简称为Web。 1989年Web诞生于欧洲原子能研究中心（CERN，European Organization for Nuclear Research），CERN的物理学家Tim Berners-Lee提出了一个新的因特网协议，命名为Web，其目的是为了使科学家们可以利用网

15、络共享文档。 1994年，著名的Netscape Navigator浏览器问世。 1995年，由Mosaic衍生而来的IE浏览器诞生。,Web是运行在Internet之上所有的HTTP服务器软件和对象的集合，是一个分布式的超媒体信息系统，Web可以使人们利用网络实现信息资源的共享。 从技术层面上分析，Web主要包括超文本传输协议（HTTP）、统一资源定位符（URL）以及超文本标记语言（HTML）。,1.1.1 超文本传输协议,超文本传输协议（HTTP，HyperText Transfer Protocol）是客户端浏览器或其它程序与Web服务器之间的面向对象的应用层的，可用于实现客户端和服务器

16、端的信息传输。 HTTP由于其简捷、快速等特点，适用于分布式超媒体信息系统。 它允许将超文本标记语言文档从Web服务器传送到客户端浏览器，HTTP工作在TCP/IP协议体系中的TCP协议上。 客户端和服务器端必须都支持HTTP，才能实现客户端和服务器端之间的交互。,HTTP协议的主要特点有： 1支持客户端/服务器端模式； 2简单快速； 3灵活； 4无连接； 5无状态；,1.1.2 统一资源定位符,统一资源定位符（URL，Uniform Resource Locator）是用于完整地描述Internet上网页和其它资源地址的一种标识方法。 Internet上的每一个资源都有一个唯一的名称标识，通

17、常称之为URL地址或者网址，这种地址可以是本地磁盘，也可以是局域网上的某一台计算机，更多的是Internet上的某个站点。 URL可以使客户端访问资源时使用统一的访问方法。,URL一般由协议类型、存放资源的域名或主机IP地址，以及资源文件的路径名三部分组成。其语法格式如下： protocol:/hostname:port/path/;parameters?query#fragment 其中： protocol指定传输所使用的协议类型。 hostname指的是存放资源的服务器名称或者主机的IP地址。 port指的端口号。 path指的是资源的存放路径。 parameters为可选项，可以用于指定

18、特殊参数。 query为查询字符串，可选。,1.1.3 超文本标记语言,超文本标记语言（HTML，Hypertext Markup Language），即HTML语言，是一种用于描述网页文档的标记语言。 所谓超文本，是指用HTML创建的文档，可以加入图片、声音、动画、影视等内容，并且可以实现从一个文件跳转到另一个文件，与世界各地主机的文件连接。它是目前网络上应用最为广泛的语言。,html 到底有什么用？,一个网站是多种技术的组合 ： 1）网站的界面首先需要网站设计师或者美工在 photoshop 之类的软件中设计出来，之后需要通过一些技术把这个界面在网页中写出来！ 2）网站的业务逻辑等与用户交

19、互的功能，需要服务器端的语言（例如 php） 3）网站做好之后需要搜索引擎优化，网站排名竞价等等运营工作！ HTML是用来写网站界面（UI）的，你看到的网站界面几乎都是通过 html 配合 css 表现出来的！,HTML是标准通用标记语言（SGML，Standard Generalized Markup Language）下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。 网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以定义内容的显示样式。,HTML语言虽然简单，但是功能强大，支持不同数据格式的文件嵌入，其主要特点包括： 简单性 可扩展性 平台无关

20、性,1.2 HTML文档结构和语法,使用纯HTML编写的文件扩展名为.html或者.htm，可以使用任意一款文本编辑软件进行开发。 一个基本的HTML文档是由一系列的标签元素组成的，标签元素不区分大小写。 HTML用标签来限定元素在文档中的位置。一个HTML文件包含在一对标签内。 HTML分为文档头和文档体两部分。 文档头通过一对标签定义，用于指定HTML文件的属性。 文档体由一对标签指定，用于指定文档要显示的内容，是文档的主体部分。,hello.html: 第一个HTML文档 这是我的第一个HTML文档 欢迎学习Web编程基础 ,使用IE浏览器打开hello.html文件，显示结果如图所示。

21、,1.2.2 语法,HTML文档由HTML标签和用户定义的内容组成。 HTML标签是已定义好的标记，可用来控制页面显示的内容，例如文字、列表、段落、图像以及动画等。 标签可以看作是HTML的命令，通过指定标签可以定义网页的内容，通过指定标签的属性可以定义网页的内容的样式。,标签可以分为单标签和成对标签两种，单标签单独使用，成对标签成对使用。 有的标签既可以单独使用，也可以成对使用。 成对标签使用起始标签“”和结束标签“”组成。成对标签的作用仅限于这对标签内部的内容。,标签内部可包括标签属性，用于指定标签内容的显示样式，例如标签的color和size属性。属性可作为标签的一部分，一个标签可以包含

22、多个标签属性，标签属性之间使用空格隔开。 例如，成对标签的属性语法格式如下： 内容 ,1.3 HTML常用标签,HTML的常用标签分为meta标签、文本标签、列表标签、分隔线标签、超级链接标签、图像标签等。,1.3.1 meta标签,meta标签是标签的子标签，可以定义HTML文档的相关信息。 meta标签可以分成两大部分，HTTP标签信息（http-equiv）和页面描述信息（name）。,1http-equiv属性指定协议头类型，content属性指定协议头类型的值。其中，常用的http-equiv类型有： content-type：用于定义用户的浏览器或相关设备以何种方式加载数据，或者以

23、何种应用程序打开资源。 content-language：用于指定页面的编码方式。 refresh：指定页面的刷新或跳转的间隔时间和跳转的资源。 expires：用于指定网页缓存的过期时间。,2页面描述信息由name属性和content属性指定。name属性指定要描述的页面信息的类型，content用来描述页面信息的值。常见的页面信息的类型有： keywords：为搜索引擎提供的关键字列表； description：为搜索引擎提供网页的主要内容的描述； author：标明网页的制作者； robots：用以提示搜索机器人哪些页面需要索引，哪些页面不需要索引；,1.3.2 文本,文本、图像、超级链

24、接是网页的三类基本元素。其中，文本是网页发布信息的主要形式。通过设置文本的大小、颜色、字体以及段落和换行等，可以使文本看上去整齐美观，错落有致。,1字体标签,标签用于控制网页上文本的显示外观，例如字体大小，字体类型以及颜色等。可以通过设置相应的标签的属性指定。其语法如下： 文字内容 其中： size用来指定文字大小。 color属性用于指定字体的颜色。 face用于指定字体的类型。,font.html: font标签的使用示例 这是蓝色五号揩体 这是红色四号隶书 ,font.html的显示结果,2标题标签,标题可用来分隔大段文字，概括大段文字的内容，从而吸引读者的注意，起到提示的作用。 HTM

25、L中提供了六级标题，为至。其中，字体最大，字体最小。 标题属于块级元素，浏览器会自动在标题前后加上空行。,head.html: 标题标签的使用示例 这是一级标题 这是二级标题 这是三级标题 这是四级标题 这是五级标题 这是六级标题 ,head.html的显示结果,3换行标签,换行标签是或者。 标签是空标签，没有闭合标签。 在XHTML、XML以及未来的HTML版本中，不允许使用没有闭合标签的HTML元素。因此，即使在浏览器中的显示没有问题，也要尽量使用标签。,br.html: 换行标签的使用 春眠不觉晓处处闻啼鸟夜来风雨声花落知多少 ,br.html的显示结果,4段落标签,段落标签可以使文字排

26、列更加整齐、清晰。 标签既可以成对使用，也可以单独使用。 标签是块级元素，浏览器会自动在标签的前后加上一定的空白。 标签有一个属性align，用来指定文本显示时的对齐方式，可取center、left、right三个值。,p.html: 段落标签使用示例 春晓 春眠不觉晓处处闻啼鸟夜来风雨声花落知多少 ,p.html的显示结果,5特殊字符,转义字符由三部分组成，第一部分是“&”符号；第二部分是实体名字或者是“#”加上实体编号；第三部分是分号，表示转义字符结束。 同一个符号，既可以使用实体名称，例如“<”，也可以使用实体编号，例如“<”，这两种方式都表示符号“”。 详见P9 表1-2 H

27、TML中常用转义字符,specialChar.html: 转义字符的使用示例 在HTML中，常用的特殊字符有： 等。 ,specialChar.html的显示结果,1.3.3 列表,列表是HTML中组织多个段落文本的一种方式，包括无序列表（Unordered List）、有序列表（Ordered List）和定义列表（Definition List）。,1无序列表,1无序列表 无序列表的各个列表项不排列序号，只是使用圆点或者其它的符号进行标记。 无序列表使用标签定义，列表项使用标签定义，列表项的内容位于一对标签之内。 标签的type属性可以定义列表项的标记符。其中： disc是默认值，为实心圆

28、； circle为空心圆； square为实心方块；,ul.html: 无序列表的使用示例 常见的体育运动有： 篮球 排球 乒乓球 足球 ,ul.html的显示结果,2有序列表 标签的type属性可以指定有序列表的项目符号的类型，type属性各个取值的含义如表所示。,ol.html: 有序列表的使用示例 春思 望岳 岱宗夫如何，齐鲁青未了。 造化钟神秀，阴阳割昏晓。 荡胸生层云，决眦入归鸟。 会当凌绝顶，一览众山小。 送别 渭川田家 ,ol.html的显示结果,1.3.4 分隔线,标签可以在HTML页面中创建一条水平线，水平线可以将文档分隔成若干个部分。 基本语法： 其属性及可取值如表所示。,

29、hr.html: 水平分割线的使用示例 水平分割线的应用 在网页设计时，.。 在文本编辑器中按下回车键可以创建一个新的段落， 因此，。 版权所有 某某某 ,hr.html的显示结果,实验要求,1掌握站点的创建 2掌握网页文件的基本操作；页面属性的设置；文本的插入和格式设置,实验1,1建立本地站点 (1)在D盘建立一个名为“mysite”的文件夹。 (2)在文件夹“mysite”基础上建立一个名为“我的个人网站”的站点。,实验1,2. 在“mysite”中创建和设置网站主页文件index.html，要求如下： (1)标题为“我的个人网站”,设置bg.jpg作为背景，上边距和左边距设为0 (2)网

30、页中插入三行文字 1）第一行为“欢迎光临我的个人网站”（格式要求：居中，字体大小为6）,实验1,2）第二行为“这是我做的第一个网页”（格式要求：居左，字体大小为5） 3）第三行为“请多多指教”（格式要求：居右，字体大小为2） (3)在网页适当的位置插入一条水平线，结合网页背景设置水平线的颜色,实验1,2、创建一个HTML文档，网页效果如图所示。其中页面标题为“个人主页”。,实验1,3、创建一个HTML文档，网页效果如图所示。其中页面标题为“文字网页”。,1.3.6 图像,图片是网页中最常用的元素，要想制作漂亮的网页是离不开图片这个元素的。图片在网页中具有画龙点睛的作用，它能装饰网页，表达网站的

31、情调和风格。但在网页上加入的图片越多，浏览的速度就越慢。网页中使用的图片可以是GIF、JPEG、BMP、TIFF、PNG等格式的文件，而目前使用最广泛的主要是GIF、JPEG和PNG三种格式。,1.3.6 图像,在HTML文档中，使用标签在网页中嵌入图像，并设置图像的属性。其格式如下： 其中，src属性和alt属性是必需的。 src属性指的是引用图像的URL，一般使用相对路径； alt指的是图像的替代文本； 具体属性见下表,标签属性,表2-2,1.3.6 图像,1、指定图像的尺寸 默认情况下，在网页中显示的是图像的原始尺寸。如果想在显示图像时更改其尺寸，就需要采用img标记的width和hei

32、ght属性。基本语法： 其中，width和height的单位可以是像素（绝对尺寸），也可以是百分比（相对尺寸）。百分比表示显示图像尺寸为浏览器窗口尺寸的百分比。在width和height属性中，如果只设置了其中一个属性，则另一个属性会根据已设置的属性值按原图等比例显示。如果对两个属性都进行了设置，且其缩放比例和原图尺寸的比例不一致的话，显示的图像会相对于原图变形或失真。,1.3.6 图像,2、指定图像的对齐方式 标记的align属性定义了图像相对于周围元素的水平和垂直对齐方式。基本语法： 其中，HTML和XHTML标准指定了 5 种图像对齐属性值，如下表所示。除此之外，Netscape 又增加

33、了 4 种垂直对齐属性：texttop、absmiddle、baseline和absbottom，Internet Explorer 则增加了center。不同的浏览器以及同一浏览器的不同版本对align属性的某些值的处理方式是不同的。,1.3.6 图像,指定图像的对齐方式,表2-3,1.3.6 图像,3、指定图像的间距 通常情况下，网页中的图像与其周围文字之间默认的是两个像素的距离，对于大多数设计者来说这样的间距有些小。hspace和vspace属性可以给图像一个自由呼吸的空间。通过hspace属性，可以以像素为单位，指定图像的水平间距；而vspace属性则可以指定图像的垂直间距。基本语法：

34、 其中， hspace属性设置图片与相邻元素的水平间距，vspace属性设置图片与相邻元素的垂直间距。属性值为数字，单位是像素。,1.3.6 图像,4、图像的替换文本 所谓图像的替代文本，指图像不能显示时在图像所在位置显示的一段文本，或当图像正常显示时鼠标移到图像上显示的一段文本。基本语法： 其中，标记的alt属性用于对图像信息进行文字描述。在浏览器中当图像无法正常显示时，在图像位置显示一段替换文本，告诉用户该处是一幅什么样的图像。当图像可以正常显示时，把鼠标指针放在图像上面时也可以显示该替换文本。,1.3.6 图像,5、图像的边框 默认情况下，网页中显示的图像没有边框，为了突出显示图像，可以

35、为一幅图像加上边框。基本语法： 其中，border属性的值用数字表示，默认单位为px。图像边框的颜色不可调整，默认为黑色。,1.3.6 图像,img.html: 图像标签使用示例 一幅鲜花图像 ,1.3.6 图像,img.html的显示结果,1.3.5 超级链接,超级链接在本质上属于一个网页的一部分，它是一种允许用户同其他网页或站点之间进行链接的元素。各个网页链接在一起后，才能真正构成一个网站。,什么是超级链接,所谓的超级链接又叫超链接是指从一个网页指向一个目标的链接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是一个应用程序。

36、而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。,超链接类型,根据目标文件的类型和位置的不同，可以将超级链接分为外部链接、内部链接、锚链接、电子邮件链接以及其它链接等。 所谓内部链接，指的是在同一个网站内部，不同的html页面之间的链接关系，在建立网站内部链接的时候，要明确哪个是主链接文件（即当前页），哪个是被链接文件。 所谓外部链接，指的是跳转到当前网站外部，与其它网站中页面或其它元素之间的链接关系。 所谓锚点链接，也称为书签链接，用来标记文档中的特定位置，使用其可以跳转到当前文档或其

37、他文档中的标记位置。在网页中加入锚点包括两方面的工作，一是在网页中创建锚点，另一个是为锚点建立链接。 根据创建链接的对象的不同，超级链接分为文本链接、图像链接、表单链接等。,创建超级链接,设置链接的基本标记是，被其包含的对象为被设置为超级链接的对象。基本语法： 超链接名称 其中： href属性用于设置链接的目标。建立链接时，属性“href”定义了这个链接所指的目标地址，也就是路径。属性值为URL，可以是绝对路径也可以是相对路径。,绝对路径与相对路径,在设定超级链接href属性值之前，首先了解网站中的文档路径，文档路径分为绝对路径、根目录相对路径以及文档相对路径等三种类型。,绝对路径与相对路径,

38、1）绝对路径 绝对路径是包含服务器协议（对于网页来说通常是http:/或ftp:/）的完全路径，是精确地址而不用考虑源文件的位置。但是如果目标文件被移动，则链接无效。创建外部超链接时必须使用绝对路径。 绝对路径是指资源的完整地址，包括URL的所有3个部分，形式如下： 协议：/计算机/文档名 例如，,绝对路径与相对路径,绝对路径与相对路径,2）相对路径 相对路径又分为根目录相对的路径与文档相对的路径两种。相对路径适合于创建网站的内部链接，一个相对路径不包括协议和主机信息，因为它的路径与当前文档的访问协议和主机相同，甚至有相同的目录路径，所以通常只包含文件夹名和文件名，有时甚至只有文件名。,绝对路

39、径与相对路径,（1）根目录相对路径：是从当前站点的根目录开始的路径。站点上所有可公开的文件都存放在站点的根目录下。和根目录相对的路径使用斜杠以告诉服务器从根目录开始。 例如，如果一个站点的根目录在D:Program FilesApache Software FoundationTomcat 6.0webappsROOT下，ROOT目录下存在文件31.html文件和子目录part3，在part3下存在子目录1，子目录1下存在文件32.html，文件32.html中有链接访问文件31.html，那么单击该文件的显示的链接就会跳转到文件31.html。,绝对路径与相对路径,（2）文档相对路径：是指和

40、当前文档所在的文件夹相对的路径。这种路径通常是最简单的路径，可以用来链接和当前文档处于同一文件夹下的文档。下面举例说明。 如果链接到同一目录下的文件part3.html，只需要指定链接文件的名称即可href=”part3.html”。 如果要链接上一级目录中的文件part3.html，则要输入“./”然后再输入文件名href=”./part3.html”。 如果要链接上两级目录中的文件part3.html，则要输入“././”然后再输入文件名href=”././part3.html”。 如果链接到当前目录的下一级子目录web下的文件part3.html，则要输入目录名“web/”然后再输入文件

41、名href=”web/part3.html”。,创建超级链接,（2）target用于规定打开链接文档的目标窗口，其属性的默认方式是原窗口，仅在 href 属性存在时使用。如果在一个 标签内包含一个 target 属性，浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。如果这个指定名称或 id 的框架或者窗口不存在，浏览器将打开一个新的窗口，给这个窗口一个指定的标记，然后将新的文档载入这个窗口。语法： ,target属性,target属性值及其含义如下表所示,创建超级链接,name属性用于规定链接的名称。 title属性用于规定有关链接的额外信息，

42、鼠标悬于该链接上方时显示提示。,超级链接的显示效果,默认情况下，超级链接的颜色，未被访问的链接带有下划线而且是蓝色的，已被访问的链接带有下划线而且是紫色的，活动链接带有下划线而且是红色的。要改变链接颜色，可以在中设置，link为未访问过链接颜色，vlink为已访问过的链接颜色，alink为活动链接颜色。,创建超级链接,1文本链接 创建文本链接使用一对标签，其格式如下： 文本 其中，href指文本链接的目标资源的地址，target指在何处打开目标资源。,创建文本链接,href.html: 文本链接示例 常用的门户网站有： 新浪 搜狐 网易 ,href.html的显示结果,创建超级链接,2.锚链接

43、 锚，也称为书签，用来标记文档中的特定位置，使用其可以跳转到当前文档或其他文档中的标记位置。在网页中加入锚点包括两方面的工作，一是在网页中创建锚点，另一个是为锚点建立链接。 在一些内容很多的网页中，设计者常常在该网页的开始部分以网页内容的小标题作为超链接。当浏览者单击网页开始部分的小标题时，网页将跳到内容中的对应小标题上，免去浏览者翻阅网页寻找信息的麻烦。其实，这是在网页中的小标题添加了锚点，再通过对锚点的链接来实现的。,创建锚链接,基本语法： （1）在同一页面内要使用锚点链接的格式： 链接标题 （2）在不同页面之间要使用锚点链接的格式（在不同页面中链接的前提是需要指定好链接的页面地址和链接的

44、锚点名称）： 链接标题 以上两种书签链接形式，链接到的目标为： 链接内容。,创建锚链接,anchor.html: 锚链接使用示例 至页尾 第1章 第2章 第3章 第4章 第5章 第6章 第7章 第8章 第9章 第10章 第11章 第12章 第13章 第14章 第15章 第16章 至页首 ,anchor.html的显示结果,单击“至页尾”，显示的结果如图所示,创建超级链接,3电子邮件链接 如果希望网页浏览者往某个地址发送E-mail时，只要浏览者单击E-mail链接，就会在浏览端自动打开浏览器默认的E-mail处理程序，收件人的地址将会被E-mail超链接中的指定地址自动装入，无需浏览者输入，这

45、时就需要创建电子邮件链接。 基本语法： 描述文字,创建邮件链接,语法解释： （1）href属性值必须以mailto：开头，表示后面为电子邮件链接，具体的值为电子邮件地址。 （2）E-mail链接只有客户端正确安装了电子邮件软件（如Outlook或Foxmail等）才能正常运行。 （3）链接地址后可以添加多个参数，参数之间用“&”字符分隔。电子邮件地址参数及含义见下表。 （4）多个电子邮件地址之间用“；”分隔。,创建邮件链接,电子邮件链接参数及含义,创建邮件链接, 邮件超级链接 发送电子邮件 ,maillink.html的显示结果,创建超级链接,4. 图像链接 不只是文本可以作为超级链接，也可以

46、指定图像作为超级链接。基本语法： 语法解释： href：图像链接的目标URL。 target：用于指定打开链接的目标窗口。 ：标记img用于指定插入到网页的图像，属性src的值为插入图像的地址。,创建图像链接, 图像超级链接 ,plink.html显示结果,单击图片后显示效果,创建超级链接,5. 下载链接 如果希望制作下载文件的链接，只需在链接地址处输入文件所在的位置即可。当浏览器用户单击链接后，浏览器会自动判断文件的类型，以做出不同情况的处理。基本语法： 链接内容 语法解释： href：下载文件的地址可以是绝对路径或相对路径。 文件的类型可以是zip文件、rar文件、pdf文件、可执行文件。

47、,创建下载链接, 下载超级链接 下载程序压缩包 ,downlink.html显示结果,图像映射,图像既可以作为超链接的源，也可以作为超链接的目标。图像映射是指在同一幅图中定义若干区域，不同区域对应不同的超链接，单击不同区域可跳转到相应页面。其实，图像映射就是将图像内的区域与一系列URL链接起来了，从而单击特定区域就会把用户带到相应的内容。 客户端图像映射和服务器端图像映射相比，其运行速度更快。 如果要建立客户端图像映射包括定义映射图和使用映射图。 定义映射图：标记符和标记符。 使用映射图：。,图像映射,1. 标记符 定义映射区域应使用标记，在之间添加映射区域信息。 语法： name和id属性规定了映射的名称和标识符。 中的 usemap 属性可引用 中的 id 或 name 属性（取决于浏览器），所以应同时向 添加 id 和 name 属性。,图像映射,2. 标记 图像映射指得是带有可点击区域的图像， 标签定义图像映射中的区域。 area 元素总是嵌套在 标签中。 语法： ,图像映射,属性及含义： （1）alt 属性定义此区域的替换文本。 （2）coords 定义可点击区域（对鼠标敏感的区域）的坐标。 （3）href 定义此区域的目标 URL。 （4）shape定义区域的形状，可选值default（全部区域）、