＜a＞元素的简单应用

最新推荐文章于 2024-11-01 15:19:31 发布

Yhid346

最新推荐文章于 2024-11-01 15:19:31 发布

阅读量188

点赞数

文章标签： html

本文链接：https://blog.csdn.net/Yhid346/article/details/118656147

版权

使用<a>元素创建一个超文本链接,链接到另一个Web页面。

<a>元素的内容会成为Web页面中可单击的文本

使用<a>元素内容链接到elixir.html和directions.html两个文件

<!doctype html>
<!-- lounge.html -->
<html>
	<head>
		<title>Head First Lounge</title>
	</head>
	<body>
		<h1>Welcome to the New and Improved Head First Lounge</h1>
		<img src="img02/yl01.jpg" height="300px">
		<p>
			<!-- <a>元素内容链接到elixir.html -->
			Join us any evening for refreshing <a href="elixir.html">elixirs</a>,coversation and maybe 
			a game or two of Dance Dance Revolution,Wireless access is always
			provided;BYOWS(Bring Your Own Web Sever).
		</p>
		
		<h1>Directions</h1>
		<p>
			<!-- <a>元素链接到directions.html -->
			You'll find us right in the center of downtown Webville.If you 
			need help finding us,check out our<a href="directions.html"> detailed directions</a>.Come join 
			us!
		</p>
		
	</body>
</html>

elixir.html文件,链接到原文件,同理;

<!doctype html>
<!-- elicir.html -->
<html>
	<head>
		<title>Head First Lounge Elixir</title>
	</head>
	<body>
		<h1>Our Elixirs</h1>
		
		<h2>Green Tea Cooler</h2>
		<img src="img02/yl01.jpg" height="300px">
		<p>
			Check 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>
		<img src="img02/yl02.jpg" height="300px">
		<p>
			Combining raspberry juice with lemon grass,citrus peel and rosehips,
			this icy drink will make your mind feel clear and crisp.
		</p>
		
	</body>
</html>

directions.html文件

<!doctype html>
<!-- directions.html -->
<html>
	<head><title>Head First Lounge Directions</title></head>
	<body>
		<h1>Directions</h1>
		<p>Take the 305$ 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.0 mi</p>
		<p>Turn right and head toward 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>