分类目录

统计信息

  • 日志总数:59篇
  • 评论总数:2条
  • 分类总数:9个
  • 标签总数:51个
  • 友情链接:3个
  • 网站运行:2871天

2018 年十月
« 七    
1234567
891011121314
15161718192021
22232425262728
293031  
现在位置:    首页 > 前端开发 > 正文
第2章 链接和导航
前端开发 暂无评论

如何在网站的网页之间建立链接。

如何链接到其他网站。

如何结构化网站的文件夹。

如何链接到网站中网页的特定部分。

2.1 基本链接

2.1.1 链接到其他网页:<a href=””></a>在相同窗口加载,替换当前网页,title特性的值,在鼠标悬停时显示链接位置信息。避免在标签之间使用空格,特别是开头和结尾。

2.1.2 链接到E-mail地址:<a href=”mailto:”></a>,但这样容易被恶意程序搜索到并发送垃圾邮件,因此尽可能用其他方法:使用一个由用户填写的E-mail表单,但是这需要在服务器上运行一个脚本(ASP.net或PHP的),或者用JavaScript将E-mail地址写到网页里。这样自动程序无法读取地址。

2.2 理解目录和目录结构

目录就是网站中文件夹,建立一个优秀的能够适应快速增长需要的目录结构。

2.3 URL简介

http://(模式)www.ibaicheng.net(主机地址)/index.php(文件路径),架构(scheme)标识了文件的传输方式,超文本传输协议(HTTP)网银(https://)下载大型文件ftp://,文件路径以正斜杠(/)开始,如文件路径错误依据web服务器配置出现以下情况:a、查找默认文件并返回;b、提供所在目录中的文件列表;c、显示一条信息表示无法找到。

2.3.1 绝对URL和相对URL:绝对URL标识网络中特定文件所需的全部内容;相对URL指示资源相对于当前网页的位置,a、相同目录;b、子目录;c、父目录;d、根目录。

2.3.2 <base>元素:指定基URL,浏览器遇到相对URL时,将在前面加基URL,两个特性href和id。

2.4 使用<a>元素创建链接

链接的起点源锚点,链接的目的地目标锚点。

2.4.1 使用href特性创建源锚点:<a href=””>源锚点</a>

2.4.2 使用name特性和id特性创建目标锚点(链接到网页的特定部分):

·长网页底部的“返回顶部”链接。

·网页内容的列表,该列表可将用户直接转到网页的相关部分。

·指向脚注或定义的链接。

建立目标锚点<a id=””></a>则源锚点<a href=”#”></a>要确定目标锚点内容不为空。在主标题或内容周围放置目标锚点。如从不同网站链接到特定地方,则需要完整URL+#+id值。在一个网页中name特性和id特性的值必须唯一,并且源锚点必须与相应的目标锚点完全匹配,包括大小写等格式。

2.4.3 <a>元素的其他特性:支持所有通用特性、UI事件及以下特性:

·accesskey特性:用于激活链接的键盘快捷键,值键+Alt键或Ctrl键。

·charset特性:指示URL所指向的文档的字符编码。指向特殊编码的外语网站时非常有用。

·coords特性:当源锚点中包含图像时使用coords特性。建立图像映射,值是一组x,y坐标值,图像不同部分链接到不同网页。

·hreflang特性:指定源链接所指向的网页的语言。主要用于从当前文档链接到不同语言的网页时,该特性的值是两位的语言代码。

·rel特性:用于源锚点,指示当前文档与href特性所指定的资源之间的关系。主要浏览器都不使用该特性。

·rev特性:与rel特性相同,但用于目标锚点,以描述目的地和源之间的关系。主要浏览器都不支持该特性。

·shape特性:用于建立热点区域形状的图像映射。

·tabindex特性:允许用户指定在按下Tab键时链接(或表单控件)获得焦点的顺序,按Tab键能移动到的地方被称为焦点。

·target特性:默认下<a>链接在同一窗口下打开,target=”_blank”在新窗口打开链接。

·title特性:为链接提供提示信息,或在语音浏览器中提供听觉提示。

·type特性:指定链接的MIME类型,类似于文件的扩展名,在不同操作系统通用。

2.5 高级e-mail链接

指定E-mail的附加属性,<a href=”mailto:**@**.com?属性=值(&多个属性)”>。Subject属性添加主题行;body在主体添加一条消息,可以被改变;cc抄送副本,bcc秘密抄送副本。

本文版权归不读书的读书人所有,转载引用请完整注明以下信息:
本文作者:望岳
本文地址:第2章 链接和导航 | 不读书的读书人

【上篇】
【下篇】

发表评论

您必须 [ 登录 ] 才能发表留言!