HTML5+CSS3——第5章 HTML5圖片、鏈接及表格標簽

字號+ 編輯: Snake 修訂: SyncLWT 來源: 慕课网 2023-09-08 我要說兩句(0)

本文給大家介紹HTML5如何使用各種標簽爲網頁添加圖片、超鏈接、表格……

5-1 使用<img>標簽爲網頁添加圖片

在網頁的制作中爲使網頁炫麗美觀,肯定是缺少不了圖片,可以使用<img>標簽來插入圖片。

語法:<img src="圖片地址" alt="下載失敗時的替換文本" title = "提示文本">

舉例:

<img src = "myimage.gif" alt = "My Image" title = "My Image" />

1、src:標識圖像的位置;

2、alt:指定圖像的描述性文本,當圖像不可見時(下載不成功時),可看到該屬性指定的文本;

3、title:提供在圖像可見時對圖像的描述(滑鼠滑過圖片時顯示的文本);

4、圖像可以是GIF,PNG,JPEG格式的圖像文档。

 圖片44.jpg圖片45.jpg

5-2 使用<a>標簽爲網頁添加超鏈接

使用<a>標簽可實現超鏈接,在網頁制作中只要有鏈接的地方,就會有這個標簽。

語法:<a  href="目標網址"  title="滑鼠滑過顯示的文本">鏈接顯示的文本</a>

例如:

<a  href="http://www.imooc.com"  title="點擊進入慕課網">click here!</a>

上面例子作用是單擊click here!文字,網頁鏈接到http://www.imooc.com這個網頁。

title屬性的作用,滑鼠滑過鏈接文字時會顯示這個屬性的文本内容。這個屬性在實際網頁開發中作用很大,主要方便搜索引擎了解鏈接地址的内容(語義化更友好),如右側案例代碼(11-13行)。

注意:只要爲文本加入a標簽後,文字的顔色就會自動變爲藍色(被點擊過的文本顔色爲紫色),css樣式可以改變設置(a{color:#000}),後面會詳細講解。

5-3 在新建瀏覽器窗口中打開鏈接

我們這一章節來學習<a>標簽中的target屬性,可以先看一個例子:

圖片46.jpg 

我們要實現這樣的效果,可以輸入以下代碼:

 圖片47.jpg

a標簽有的target屬性,代表打開網頁的方式。可選值爲”_self和_blank”,默認值爲_self,代表在當前頁面打開鏈接,_blank代表在新窗口打開鏈接。

5-4 使用table標簽爲網頁添加表格

在網頁當中添加一些數據,如某公司想展示該公司員工的通信錄,如下表:

 圖片38.jpg

需要用到表格標簽, 這些標簽有什麽特點呢?想要在網頁中實現以上效果,我們可以使用以下代碼:

 圖片39.jpg圖片40.jpg

創建表格的四個元素:table、tr、th、td

1、<table>…</table>:整個表格以<table>標記開始、</table>標記結束。

2、<tr>…</tr>:表格的一行,所以有幾對tr 表格就有幾行。

3、<td>…</td>:表格的一個單元格,一行中包含幾對<td>...</td>,說明一行中就有幾列。

4、<th>…</th>:表格的頭部的一個單元格,表格表頭。

5、表格中列的個數,取決於一行中數據單元格的個數。

6、border屬性可以爲表格添加邊框,屬性值爲數字。

注意:

1、table標簽用來定義整個表格,爲雙標簽,必須有結束標簽。

2、table標簽裡面可以放caption標簽和tr標簽。

3、caption標簽用來定義表格的標題。

4、tr標簽用來設置表格的行,tr裡面只能放th或者td標簽,一組tr標簽代表一行。

5、th用來設置表格的標題,會加粗居中顯示。也就是th標簽中的文本默認爲粗體並且居中顯示。

6、td同來設置表格的列,一組td標簽代表一列。

7、table表格在沒有添加border屬性之前, 在瀏覽器中顯示是沒有表格線的。

5-5 使用thead、tbody、tfoot定義表格

用<table>標簽家族來定義一個表格,使用<tr>標簽來定義表格的行,<th>和<td>來定義表格的列。

接下來用<thead>標簽定義表格頭部,<tbody>標簽來定義表格的内容,<tfoot>來定義表格的底部。

創建表格的三個區域:thead、tbody、tfoot

我們想實現一個成績表,各科成績和總分,效果如下圖:

 圖片41.jpg

表格第一行爲表頭數據,用<thead>標簽包裹,中間的科目和分數爲表格的主體内容,用<tbody>標簽包裹,總分用<tfoot>標簽包裹。

1、<thead> 標簽定義表格的表頭。該標簽用於組合 HTML 表格的表頭内容。

2、<tbody>…</tbody>:如果不加<thead><tbody><tfooter> , table表格加載完後才顯示。加上這些表格結構, tbody包含行的内容下載完優先顯示,不必等待表格結束後在顯示,同時如果表格很長,用tbody分段,可以一部分一部分地顯示。(即table 可以按結構一塊塊的顯示,不再等整個表格加載完後顯示。)

3、<tfoot> 元素用於對 HTML 表格中的表注(頁腳)内容進行分組。

4、thead、tfoot 以及 tbody 元素使您有能力對表格中的行進行分組。創建某個表格時,希望擁有一個標題行,一些帶有數據的行,以及位於底部的一個總計行。這種劃分使瀏覽器有能力支持獨立於表格標題和頁腳的表格正文滾動。當長的表格被列印時,表格的表頭和頁腳可被列印在包含表格數據的每張頁面上。

圖片42.jpg

閲完此文,您的感想如何?
  • 有用

    0

  • 沒用

    0

  • 開心

    0

  • 憤怒

    0

  • 可憐

    0

1.如文章侵犯了您的版權,請發郵件通知本站,該文章將在24小時内刪除;
2.本站標注原創的文章,轉發時煩請注明來源;
3.交流群: 2702237 13835667

相關課文
  • 上傳自定義文档的時候查如何填寫上傳表單中的access, mimeType等字段值

  • HTML5+CSS3——第6章 HTML5表單標簽,與瀏覽者交互

  • HTML5+CSS3——第4章 HTML5列表標簽

  • HTML5+CSS3——第3章 HTML5效果標簽

我要說說
網上賓友點評