在設計網頁時，經常須要連結到內部及外部的網頁，所以網頁中就必須要設定連結路徑，使網頁能夠連結到指定的位置，所以，今天要說的就是"連結"

連結的標籤為<a></a>，而如果要加上路徑的話，則要改成<a href="xxxx.html">test</a>的表示方式

先來寫一段html吧

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>魚橙的結合</title>


</head>

<body>
<div id="content">
    
    <p> i am a 魚橙的結合</p>

</div>
</body>
</html>

 如果我要把"魚橙的結合"上面加入一段連結，則在"魚橙的結合"左右加入<a>標籤

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>魚橙的結合</title>


</head>

<body>
<div id="content">
    
    <p> i am a <a href="test.html">魚橙的結合</a></p>

</div>
</body>
</html>

 上述中，我將"魚橙的結合"連結到內部網頁"test.html"，連結到內部網頁的時候，須注意你要連結的路徑，如果要連結的網頁並非同個目錄裡面，你就必須加入../ 或/ 等，標示路徑的位置，以下如果例子是表 test.html 是在另外個目錄product中，可如此表示

 

<!doctype html>
<html>
<head>
<metacharset="utf-8">
<title>魚與橙的結合</title>


</head>

<body>
<divid="content">
    
    <p> i am a <a href="product/test.html">魚橙的結合</a></p>

</div>
</body>
</html>

 以上是內部連結的部份，再來說明外部連結的部份，其實和內部連結一樣，只是要加入"http://www.xxx.com.tw"的網址即可！

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>魚橙的結合</title>


</head>

<body>
<div id="content">
    
    <p> i am a <a href="http://www.google.com.tw">魚橙的結合</a></p>

</div>
</body>
</html>

 例子中，我將之改成http://www.google.com.tw，執行後，就可從這個連結，連結到google的首頁了！

2012-07-16_142344  

以上，是連結的基本說明，可以試試看

 

 

arrow
arrow
    文章標籤
    網頁設計
    全站熱搜

    雲橙雨林 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄