我觉得有很多人并不了解 URL ( 或 URI )的全貌，一般人对URL的感觉就是「网址」而已，是一个十分不精确的描述，因为 URL 拥有一个很严谨的结构，也有很弹性的表示法，当你弄清楚观念后，开发技巧之间的关係自然可以融会贯通。 我从 RFC 3986: Uniform Resource Identifier (URI): Generic Syntax 的 Syntax Components 章节摘取下图： image 如上图所示，在 URI 中有切分成许多部分，每个部分都有其意义，当你瞭解其意义之后，以后在记忆 URI 的时候就不用死背了。事实上在 URI scheme - Wikipedia 页面中的图示更加完整，如下图： image 以下所列的网址(URL/URI/URN)，全部都是 URI 的格式范例 (注意：并非所有 URI 在浏览器中都可以使用) 连结一般网站 http://blog.miniasp.com/post/2008/01/Useful-tool-grepWin.php#comment 连结需登入的 FTP 网站（直接在网址输入帐号、密码后，连结时浏览器就不会再出现登入视窗了） password@ftp.example.com/upload/">ftp://username:password@ftp.example.com/upload/ 使用 Windows Live Messenger 中附的 LiveCall 工具拨打电话到 +886-2-23222480 livecall:+886-2-23222480 使用 Skype 软体拨打电话到 +886-2-23222480 callto:+886-2-23222480 取得 FTP 上的一个档桉 ftp://ftp.is.co.za/rfc/rfc1808.txt 以 HTTP 通讯协定取得网站上的一个档桉 http://www.ietf.org/rfc/rfc2396.txt 使用 LDAP 通讯协定取得一个物件 ldap://[2001:db8::7]/c=GB?objectClass?one 使用 mailto 协定发送讯息给 John.Doe@example.com John.Doe@example.com 连结到 comp.infosystems.www.servers.unix 新闻群组 news:comp.infosystems.www.servers.unix 拨打电话到 +1-816-555-1212 tel:+1-816-555-1212 使用 telnet 连线到 192.0.2.16:80 telnet://192.0.2.16:80/ 这是 URN 语法 (也是 URI 的一部份） urn:oasis:names:specification:docbook:dtd:xml:4.1.2 以上讲解的都是「绝对路径」的「标准」表示法，在真实的世界里，URI 可以说千变万化，不照标准走的大有人在，而在 URL normalization 这篇文章中有说明如何将 URL 进行「正规化」处理。所幸这类正规化的处理在 Browser 中几乎都先帮我们处理过了，让我们不至于真的要理解这么多技术的细节才能让 Web 正常运作。 在实务开发上，许多人使用「相对路径」来简化 URI 的表示，最后我要讲几个在开发 Web 应用程式时常用的「相对路径」开发技巧： 技巧 1：忽略 scheme 与 authority 部分（见本文第 1 张图示） 这也是一般常见的「相对路径」写法，有时后会包含「路径」的部分，有时后仅包括「档名」： 同目录下的 step2.php 页面 step2.php 网站根目录下的 index.aspx 页面 /index.php 上层目录的 sitemap.aspx 页面 ../sitemap.php 上两层目录的 default.htm 页面 ../../default.htm 上层目录下的 images 目录下的 dot 目录下的 red.gif 档桉 ../images/dot/red.gif 技巧 2：忽略 scheme 与 authority 与 path 部分 我个人常用此技巧。 连 path (含档名) 都忽略的技巧十分好用，也就是当在同一个页面中要指定不同的 QueryString 参数时，我就会用此技巧，范例如下： 跳到第 2 页 <a href="?pageNo=2">第 2 页</a> 变更 sortby 参数的值 <a href="?sortby=filesize">File Size</a> 技巧 3：忽略 scheme 与 authority 与 path 与 query 部分 此技巧也就是所谓的「页内连结」或「书签」，不算是技巧，是一种常见的表示法。最常用的地方就是在页面中加上「回页首」功能，范例如下： <a href="#top">Top</a> 当页面中找不到 top 这个「书籤」时，预设就会跳到本页的最上方。 技巧 4：仅忽略 scheme 的部分 此法比较少见，但十分适用于网站内经常游走于 HTTP 与 HTTPS 之间的网页。 一般较大型的网站，会将网站内的图片、影片、CSS、或 JavaScript 档桉统一放置在不同主机或不同网域下，以缩短网页载入的时间（相关技巧可参照我之前写的 加速前端网页效能的14条规则 文章），通常这类的写法会撰写完整的「绝对路径」，例如 Yahoo! 奇摩 的首页 ( http://tw.yahoo.com/ ) 的 Logo 图档 ( http://l.yimg.com/tw.yimg.com/i/tw/hp/spirit/yahoo_logo.gif ) 就放在不同的网域下。 若我们假设今天 http://tw.yahoo.com/ 网址将改成 https://tw.yahoo.com/ 时，若页面内的图档网址一样是 http:// 开头的网址时，使用者的浏览器就会出现「这个画面同时含有安全性与非安全性的项目。要显示非安全性项目？」的警示讯息，如下图示(以 IE 为例)： 安全性资讯 :: 这个画面同时含有安全性与非安全性的项目。要显示非安全性项目？ 一般较讲究安全的网站，会在进行会员登入、注册、或进行线上刷卡时，特别将网址转向到 https 页面（SSL），这是因为使用 SSL 连线对伺服器会造成一定程度的负担，所以通常只会在传输重要资料时才会进行 SSL 加密连线，但这时网站中的所有图档若不在同一台主机时就可以套用此技巧，如下范例： <img src="//l.yimg.com/tw.yimg.com/i/tw/hp/spirit/yahoo_logo.gif" /> 这时若你连到的网页是 https://tw.yahoo.com/ 时，当读取图档时也会预设採用 https 这个 scheme，这样就不会产生「安全性资讯」的警示讯息了。 若以此范例来说，你的 l.yimg.com 主机当然也要启用 HTTPS 功能以及安装 SSL 凭证，否则还是一样会抓不到图片的。 重点：href 和 src 的定义与区别 href和src是有区别的，而且是不能相互替换的。我们在可替换的元素上使用src，然而把href用于在涉及的文档和外部资源之间建立一个关系。 href (Hypertext Reference)指定网络资源的位置，从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系。当我们写下： <link href="style.css" rel="stylesheet" /> 浏览器明白当前资源是一个样式表，页面解析不会暂停（由于浏览器需要样式规则去画或者渲染页面，渲染过程可能会被被暂停）。这与把css文件内容写在<style>标签里不相同，因此建议使用link标签而不是@import来吧样式表导入到html文档里。 src (Source)属性仅仅 嵌入当前资源到当前文档元素定义的位置。当浏览器找到 <script src="script.js"></script> 在浏览器下载，编译，执行这个文件之前页面的加载和处理会被暂停。这个过程与把js文件放到<script>标签里类似。这也是建议把JS文件放到底部加载的原因。当然，img标签页与此类似。浏览器暂停加载直到提取和加载图像。 与img类似的有更多： replaced elements。 结语 由此可见，网址从最右边的 query 部分一直到 authority 部分都是可以省略的，唯一的限制是不能「跳着省略」，例如说你不能同时省略 scheme 与 path 部分。而省略过的网址就称为「相对网址」。 今天讲「网址」这种超级基础的知识，相信还是有些人会觉得这个「小技巧」很新鲜。我时常跟我带的人说：「拥有实务经验十分重要，但若不懂得技术原理，成长的力道就会受限」。身为一个研发人员，不断进修本来就是我们的宿命，除了平时要经常写 Code 以外，花点时间看书是有必要的！ 常言道：「书到用时方恨少」，所有人都知道这个道理，但又有多少人能够身体力行呢？也许是因为工作忙碌没时间进修，但这真的可以当藉口吗？