代码:
<html>
<head>
<title>Head First Lounge</title>
</head>
<body>
<h1>Welcome to the New and Improved Head First Lounge</h1>
<img src="images/drinks.gif">
<p>
Join us any evening for refreshing <a href="beverages/elixir.html">elixirs</a>,
conversation and maybe a game or two of
<em>Dance Dance Revolution</em>.
Wireless access is always provided;
BYOWS (Bring Your Own Web Server).
</p>
<h2>Directions</h2>
<p>
You'll find us right in the center of downtown Webville.
If you need help finding us, check out
our <a href="about/directions.html">detailed directions</a>
Come join us!
</p>
</body>
</html>
HT概念
HT(即hypertext的缩写,超文本), 它将引领我们把一个网页链接到其他网页。
- 使用
<a>
元素创建超文本链接到另外一个网页。 <a>
元素中的内容在网页中是可点击的- Href属性告诉浏览器链接的目的地。
属性
- 属性用来指定元素的附加信息
- 属性通常用统一的方法书写:
- 首先是属性名,接下来是等号,然后是用双引号括起来的属性值。
- 注意属性值需要用双引号
相对路径(<a>
中的href属性,<img>
中的src属性)
明确一个概念文件夹是倒树状结构。
- 确认源文件和目的文件。
- 追踪从源文件到目的文件的路径。
- 创建一个href来显示我们经过的路径
备注:
- 上溯一个文件夹用..(两个点号),上溯的上限是到根目录。
- 路径字数的限制,最多255个字符。
- / 斜杠 \ 反斜杠
要点
当你需要从一个网页链接到另个网页时,使用
<a>
元素。<a>
元素中的href属性说明了链接的目的地。<a>
元素中的内容是链接的标签。标签显示在网页上,默认情况下,它会加下划线来说明是可以单击的。链接的标签可以是文字或图像。
当你点击链接时,浏览器装载href中的指定的网页。
可以链接相同文件夹下的文件,也可以是不同文件夹下的。
相对路径是指向网站中其他文件的链接,跟链接的源文件有关。就像地图一样,与终点和起点有关。
使用”..”来链接父目录中的文件。
“..”代表父目录。
记得用“/” 符号分隔路径的各个部门。
当图片的路径有误时,你会在网页上看到损坏的图像。
网站中的文件名或者文件夹名中不能出现空格。
最好在构建的早期组织好你的网站,这样当网站升级时就不用更改一堆路径了。
组织网站的方法有许多,怎么做取决与我们自己。
基于Head First HTML 整理