iT邦幫忙

2021 iThome 鐵人賽

DAY 7
1
自我挑戰組

網頁前端工程探討系列 第 7

認識HTML(五):建立超連結和清單

  • 分享至 

  • xImage
  •  

www又稱互聯網,也就是網路上的網頁都可以透過超連結互相聯結起來。超連結就是HTML文件中,指向另一個HTML 文件的連結,按下超連結的文字,瀏覽器就會開啟超連結所指的網頁。

  • 建立連線到Ineternent網頁的超連結
    要連到Internent上的網頁,首要條件必須要有欲連結的網址。

在HTML文件中其語法格式如下:
<a herf =〝https://www.google.com.tw/〞google網站</a>

https://ithelp.ithome.com.tw/upload/images/20210922/20141905I96cJsFpq6.png

結果顯示:
https://ithelp.ithome.com.tw/upload/images/20210922/20141905sT7YG2YOR4.png

https://ithelp.ithome.com.tw/upload/images/20210922/20141905aFTp3MFc6o.png


  • 建立清單
    條列式清單的特徵,就是要一列一列的依序列出所有的項目。目的是讓資料更有條理地呈現,讓人一目瞭然,淺顯易懂。

清單分為兩種:

1.無序號的清單:ul (Unordered List)

要建立無序號的清單,需使用ul元素標示清單的位置,
用項目元素li條列出所有項目。

在HTML文件中其語法格式如下:
https://ithelp.ithome.com.tw/upload/images/20210922/20141905uFyJK7GueN.png

程式執行後的結果如下:
https://ithelp.ithome.com.tw/upload/images/20210922/20141905mPf2BpNPfd.png

2.有序號的清單:ol

要建立有編號的清單,需使用ol (Ordered List)元素標示清單的位置,同樣是用項目元素li條列出所有項目的內容。

在HTML文件中其語法格式如下:

https://ithelp.ithome.com.tw/upload/images/20210922/201419050OQg5fCYFH.png

程式執行後的結果如下:

https://ithelp.ithome.com.tw/upload/images/20210922/201419059CJlvaX700.png


上一篇
認識HTML(四):加入圖片
下一篇
認識HTML(六):表格與表單
系列文
網頁前端工程探討30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言