理解HT - zilongxuan001/LearnFreecode GitHub Wiki
深入了解HTML的HT
<a>元素可以创建一个超文本链接，链接到另一个Web页面。
<a>元素的内容会成为Web页面中可单击的文本。
- 来源：《Head First HTML 与 CSS》(中文第二版)P49
href属性告诉浏览器链接的目标文件。
href的含义是“超文本引用”（hypertextreference）,是互联网或计算机一个资源的别称，通常这个资源就是Web页面。href也可以指向pdf等各种各样的资源。
为网站选择的文件名和文件夹名中不要使用空格。
- 来源：《Head First HTML 与 CSS》(中文第二版)P53，69
相对路径是在本地文件夹里建立的路径。
形式如下
<a href="子文件夹名/子文件名.文件后缀">
举例,在fruit文件夹下有一个apple文件夹，里面有张apple的gif图片
<a href="apple/apple.gif">apple </a>
形式如下
<a href="../子文件夹名/子文件名.文件后缀">
..表示父文件夹，../就是往上移动一层父文件夹。
举例，在往上两层的父文件夹下，有一个的apple的文件，里面有一个apple的gif图片
<a href="../../apple/apple.gif">apple </a>
-
创建链接
-
链接属性
-
建立文件夹
-
链接的路径
创建三个页面：lounge.html，directions.html，elixir.html。
其中lounge.html为主页，放在lunge文件夹下，directions.html放在about文件夹下，elixir.html放在beverages文件夹下，图片放入images文件夹下。
文档结构如下
- 页面的名称和功能
- 文件夹的名称和功能
- 哪些页面放入什么文件夹中
- 页面如何连接
代码
<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>
浏览显示
代码
<html>
<head>
<title>Head First Lounge Directions</title>
</head>
<body>
<h1>Directions</h1>
<p>Take the 305 S exit to Webville - go 0.4 mi</p>
<p>Continue on 305 - go 12 mi</p>
<p>Turn right at Structure Ave N - go 0.6 mi</p>
<p>Turn right and head toward Structure Ave N - go 0.0 mi</p>
<p>Turn right at Structure Ave N - go 0.7 mi</p>
<p>Continue on Structure Ave S - go 0.2 mi</p>
<p>Turn right at SW Presentation Way - go 0.0 mi</p>
</body>
</html>
浏览器显示
代码
<html>
<head>
<title>Head First Lounge Elixirs</title>
</head>
<body>
<h1>Our Elixirs</h1>
<h2>Green Tea Cooler</h2>
<p>
<img src="../images/green.jpg">
Chock full of vitamins and minerals, this elixir
combines the healthful benefits of green tea with
a twist of chamomile blossoms and ginger root.
</p>
<h2>Raspberry Ice Concentration</h2>
<p>
<img src="../images/lightblue.jpg">
Combining raspberry juice with lemon grass,
citrus peel and rosehips, this icy drink
will make your mind feel clear and crisp.
</p>
<h2>Blueberry Bliss Elixir</h2>
<p>
<img src="../images/blue.jpg">
Blueberries and cherry essence mixed into a base
of elderflower herb tea will put you in a relaxed
state of bliss in no time.
</p>
<h2>Cranberry Antioxidant Blast</h2>
<p>
<img src="../images/red.jpg">
Wake up to the flavors of cranberry and hibiscus
in this vitamin C rich elixir.
</p>
<p>
<a href="../lounge.html">Back to the Lounge</a>
</p>
</body>
</html>
浏览显示
