a標籤的href屬性的作用:href標籤跳轉

昨天學習了最基礎的文本標籤及屬性,除此之外還有很多其它標籤,今天逐一學習。

一、鏈接標籤(a標籤)

a標籤有一個必不可少的屬性:href。href也就是超鏈接的意思。

下面編寫代碼,其中我每行之間用了兩個換行符(<br/><br/>),為了使頁面看起來相對而言更加美觀些。

HTML學習筆記:各種常用標籤

①href=”#”

作用是跳轉本頁面。

②href=”對應網頁鏈接地址”

作用是跳轉到對應網頁。

③href=”本地主頁”

這個呢是我自己電腦裡面的一個html文件,自己可以訪問,但是別人就沒法訪問了。

②中的是只要網址能打開,所有人都能訪問。

④href=”mailto:對應郵箱地址”

作用是用本地的郵箱客戶端,給填寫的郵箱發送郵件。

⑤target=”_self”

self,自身的意思,作用就是在當前頁面中打開填入的網頁鏈接。

⑥target=”_blank”

blank,空白的意思,作用就是在新窗口中打開填入的網頁鏈接。

⑦title=”劉小愛的博客”

title,又是標題,這裡的作用是:當我們將滑鼠放在當前鏈接上的時候會出現一個標題提示。

代碼編寫完畢,做一個測試:

HTML學習筆記:各種常用標籤

其中有個小常識:

左鍵直接點擊,會在當前頁面中打開對應鏈接。

Ctrl+左鍵點擊,會在新的頁面中打開對應鏈接。

二、圖片標籤和列表標籤

1圖片標籤

image,圖像的意思,簡寫為img,圖片標籤也就是用img來表示。

HTML學習筆記:各種常用標籤

①src=”圖片地址”

如果是本地圖片,寫出圖片所在的路徑即可。

如果是網路圖片,寫出其對應的鏈接即可。

其中width為寬度,height為高度,如果只設置其中一項,高度和寬度是等比例縮放的。

當然也可以寬度高度同時設置不同的值。

②alt=”圖片丟失了啦”

如果圖片丟失了,就會顯示alt裡面的內容。

③title=”我是劉小愛”

同a標籤一樣,當滑鼠放在該圖片上時,會顯示title里的內容。

2列表標籤

list,即列表的意思,其中又分為有序列表和無序列表。

有序列表:ordered list,簡寫就是ol。

HTML學習筆記:各種常用標籤

①type=”1″

數字排序,這也是默認的有序排序規則,所以可以省略不寫。

②type=”a”

使用小寫字母排序,詳情見上圖。

③type=”A”

使用大寫字母排序,詳情見上圖。

④type=”Ⅰ”

使用羅馬字母排序,詳情見上圖。

⑤type=”i”

使用字母i來排序,詳情見上圖。

無序列表:unordered list,簡寫就是 ul。

HTML學習筆記:各種常用標籤

①type=”disc”

disc,唱片、圓盤的意思,這是無序列表的默認屬性,所以可以省略不寫。

②type=”circle”

circle,圓形的意思。

③type=”square”

square,正方形的意思。

三、表格標籤

1基本介紹

table,表格的意思,這在學資料庫時就接觸過。

tr,tablerow的縮寫,表示的是表格中的行。

td,tabledata的縮寫,表示的是表格中的數據。

HTML學習筆記:各種常用標籤

①單元格:cell:細胞的意思,在表格中就表示為一個單元格。

②表格外邊框:border,邊界的意思,用其可以設置外邊框的粗細。

③單元格外間距:cellspacing,用其設定外間距。

④單元格內間距:cellpadding,用其設定內間距。

其中width表示表格的寬度,並且外間距一般都會設定為0,不然都不像是個表格的樣子。

HTML學習筆記:各種常用標籤

①caption標籤

標題的意思,用以說明表格的標題,我這邊還用了一個b標籤將其給加粗了。

②th標籤

table head的簡寫,也就是表格的表頭,它是默認居中加粗的。

當然我們也可以根據align屬性來設定排序位置(居左,居中,居右)。

此外,其中也可以使用thead、tbody、tfoot標籤來劃分表格。

  • thead表示表格的頭部。
  • tbody表示表格的主體。
  • tfoot表示表格的腳部。

這個稍作了解即可,感覺使用這些標籤和不使用這些標籤對表格本身沒有影響。

2表格快速模板設置

HTML學習筆記:各種常用標籤

看到左上角那個黃燈後點擊,選擇Language Injection Settings,最後選擇html即可。

這樣設置後就可以使用表格快速創建模板了。

先輸入table>tr*4>td*4,再加上Tab鍵,即可快速創建一個4*4的表格。

3合併單元格

HTML學習筆記:各種常用標籤

①rowspan

合併行的意思,相同的列不同的行。

「2」的意思就是表示是跨兩行,從第1行開始將第1行和第2行合併起來了。

既然如此,那麼第2行總共也就只需要3列了,所以將其第2行第1列刪除。

②colspan

合併列的意思,相同的行不同的列。

「3」的意思就是表示是跨3列,從第2列開始將第2列第3列和第4列合併起來了。

既然如此,那麼第3行總共也就只需要2列了,所以將第3行中第3列第4列刪除。

原創文章,作者:投稿專員,如若轉載,請註明出處:https://www.506064.com/zh-tw/n/227931.html

(0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
投稿專員的頭像投稿專員
上一篇 2024-12-09 21:25
下一篇 2024-12-09 21:26

相關推薦

發表回復

登錄後才能評論