HTML+CSS學習筆記(三)

來源:互聯網
上載者:User

一、建立文本連結

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~

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.