HTML+CSS學習筆記（三）

一、建立文本連結

1.頁面內部連結

①使用錨標識網頁中的位置（通俗點講就是，標記點選連結後要返回到的地方）

<a id="end"></a>

id必須在頁面內唯一，並且必須以字母開頭

②連結到錨點位置（即點選連結，頁面將返回到相應的位置）

<a href="#end">Go to end</a>

當然這個頁面有捲軸時，並且錨點和連結點超過一個頁面時，你才能明顯看到頁面跳動

 

2.連結另一個頁面特定部分

前提是知道另一個頁面的那個錨的id

<a href="page2.html#end">Go to page2 end</a>

 

3.連結到郵箱

<a href="mailto:郵箱地址?subject=主題&amp;body=本文">給我發送郵件</a>

mailto後面跟郵箱地址，subject是郵件主題，body是郵件內文，郵箱地址與屬性subject之間用?隔開，屬性subject與body中間用“&”隔開，這裡用“&amp;”代碼錶示。為了防止某些人通過軟體識別mailto來擷取郵箱地址，從而發送大量垃圾郵件，我們用ASCII碼錶示一些字母或符號，如下面我用“&#109;”表示字母“m”

<a href="mailto:&#109;&#106;&#104;qq2012@qq.&#99;om?subject=HTML 學習&amp;body=Hello 小可！">給我發送郵件</a>

 

4.連結到QQ

<a target=blank href=http://wpa.qq.com/msgrd?V=1&Uin=QQ號碼&Site=小可&Menu=yes><img border="0" SRC=http://wpa.qq.com/pa?p=1:QQ號碼:1 alt="點擊這裡給我發訊息"></a>

 第一個QQ號碼錶示要對話的號碼，第二個QQ號碼錶示要驗證其在不線上的號碼，當然這兩處號碼要一致

二、網頁中插入圖片

1.插入圖片
<img / src="cat.jpg" alt="" />
複雜的方法
<img src=“帶圖片類型的圖片地址，也可以是網路中的圖片” alt="圖片不能顯示時，其位置顯示的文字" title="滑鼠放在圖片上顯示的文字" width=“指定映像的寬度” height=“指定映像的高度” />

2.圖片連結
<a href="boy.jpg"><img src="boy_sm.jpg" alt="圖片不能正常顯示" title="點擊放大"  /></a>
一般為了加快網頁顯示速度，網頁中使用的都是小圖片，如果想看更清楚的圖片，點擊小圖片就會開啟大圖。上例中的boy_sm.jpg就是小圖，boy.jpg是大圖

3.映像對齊
除了可以使用<p></p>或者<div></div>中的style="text-align:center"操作，還可以在<img />標籤內添加
環繞對齊：style="float:left"，style="float:right"，圖片在右，文字在左。注意沒有置中環繞
垂直對齊：style="vertical-align:top"，style="vertical-align:bottom"，style="vertical-align:middle"，style="vertical-align:baseline"

最終樣本http://mjh.35free.net/wblj.html

小提示：上一篇講到的列表標籤，我們可以將小型圖片作為項目符號，那樣更漂亮，直接把圖片代碼放到列表標籤當中就行，O(∩_∩)O~