第3章 行级标签1-超链接.ppt

第3章 行级标签 HTML页面中的块和行 HTML标签分类（方便后续的布局设计）： 块级标签：显示为“块”状，前后换行 行级标签：按行逐一显示 分类好处：方便后续的布局设计 块级： 块内包含多行 行级：包括文字、图片等 块级标签： 默认情况下占据一整行（不同的块自动换行） 具有一定的宽度和高度 常用来做容器，容纳其他的块级标签或行级标签。 行级标签： 不独占一行 一般用来组织内容，如文字，图片，超链接等。 3.1.1 超链接的基本概念 URL (Universal Resource Locator，统一资源定位器) ——表示Web上资源的一种方法，通常可以理解为资源的地址 组成 协议代码 装有所需文件的计算机地址 具体的文件路径和文件名。 例如：/forum/index.htm 协议 协议表明应使用何种方法获得所需的信息 超文本传输协议：HTTP(HyperText TransferProtocol)。使用形式：http://webhostname.somedomain/path/filename.htm 文件传输协议：FTP(FileTransferProtocol)。使用形式：ftp://ftphostname.somedomain/path/filename.htm 电子邮件协议：mailto。使用形式：mailto:username@somedomain 3.1 超链接 3.1.1 绝对URL Internet上资源的完整地址，包括完整的协议种类、计算机域名和包含路径的文档名 其形式为：　协议://计算机域名/文档名 例如： /public/HTML/example.htm http表示用来访问文档的协议的名称 表示文档所在计算机的域名 public/HTML/example.htm 表示文档名 如果在网页中需要指定外部Intemet资源，应使用绝对URL 说明 省略了最后部分文件名的URL通常也认为是绝对URL， 因为它能够完全定位资源的位置 例如，就是一个绝对URL 3.1.1 相对URL Internet上资源相对于当前页面的地址，它包含从当前页面指向目的页面位置的路径 例如：public/example.htm 使用相对URL的好处在于 当用户需要移植站点时，只要保持站点中各资源的相对位置不变，就可以确保移植后各页面之间的超链接仍能正常工作。 用户在编写网页时，通常使用的都是相对URL(除非需要引用外部网页) 如果在网页中需要指定内部资源，应使用相对URL 相对URL本身并不能唯一地定位资源，但浏览器会根据当前页面的绝对URL正确地理解相对URL。 说明： 在URL中，总是使用正斜杠(/)作为路径分隔符，而不是使用Windows或DOS中的反斜杠(\)。 在客户端，点击不同类型的链接时，会自动启动相应的客户端软件来访问相应的资源。 句点(.) ——当前目录 双重句点(..)——上一级目录(父目录) 例如 ./image.gif表示当前目录中的image．gif文件，相当于image.gif； ../public/index.htm表示与当前目录同级的public目录下的index.htm文件，也就是当前目录上一级目录下的public目录中的index.htm文件 3.1.2 超链接的应用 1．锚点标签a…/a a href=URL target=打开窗口方式 热点 /a Target属性： _blank 浏览器总在一个新打开、未命名的窗口中载入目标文档。 _self 这个目标的值对所有没有指定目标的 a 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。 3.1 超链接 3.1.2 超链接的应用 【演练3-1】制作网络鞋城页面之间的链接，当前页3-1.html中包含两个链接分别指向注册页和登录页，如图3-1所示。 3.1 超链接 3.1.2 超链接的应用 3．指向书签的链接（锚点链接） 用于对同一网页的不同部分或不同网页的不同部分进行链接 锚点链接必须先定义锚点，然后才能定义链接。 定义锚点 a name=“锚点名 目标文本附近的字符串 /a 定义链接 （1）指向页面内书签的链接 a href=“#锚点名 热点文本 /a 【演练3-2】制作指向页面内书签的链接。 3.1 超链接 3.1.2 超链接的应用 3．指向书签的链接（锚点链接） a name=锚点名 目标文本附近的字符串 /a （2）指向其他页面书签的链接 a href=目标文件名.html #锚点名 热点文本 /a 即单击“热点文本”，将跳转到目标页面“锚点名”开始的网页元素。 【演练3-3】制作