iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 5
1
Modern Web

HTML 與 CSS 學習筆記系列 第 5

Day05 - HTML (3) - 列表、a、img

列表清單 (List)

  • List 標籤:主要分成 2 種,有順序和無順序的,清單內還可以再放其他清單
    • <ul>:代表無順序 (unordered list),在 <ul> 內搭配 <li> 來呈現
    • <ol>:代表有順序 (ordered list),在 <ol> 內搭配 <li> 來呈現
<ul>
    <li>ul1</li>
    <li>ul2</li>
    <li>ul3</li>
</ul>
<ol>
    <li>ol1</li>
    <li>ol2</li>
    <li>ol3</li>
</ol>

顯示結果如下圖

列表可以互相搭配

<ul>
    <li>ul1</li>
    <ol>
        <li>ol1</li>
        <li>ol2</li>
        <li>ol3</li>
    </ol>
    <li>ul2</li>
</ul>

顯示結果如下圖

<a> 連結

可以比較這三段連結有什麼差別

<a href="https://ithelp.ithome.com.tw/2020-12th-ironman" >第 12 屆鐵人賽</a>
<br>
<a href="https://ithelp.ithome.com.tw/2020-12th-ironman" target="_blank">第 12 屆鐵人賽</a>
<br>
<a href="https://ithelp.ithome.com.tw/2020-12th-ironman" target="_blank" title="連到鐵人賽">第 12 屆鐵人賽</a>
<br>
  • <a> </a>:主要就是用來建立超連結,除了文字連結外,當然也可以連圖片等一些連結的功能
  • href:用來確定要連到哪裏,也就是目的,沒有輸入當然不會有變化
  • target:當沒有這個屬性時,會發現會在當下的網頁視窗進行變更,當加入 target="_blank",可以另開一個視窗顯示
  • title:在滑鼠移到這段文字時,會有一個小視窗顯示設定的文字

<img> 圖片

可以先將這張照片存起來,存成 ironman.jpg,然後跟 index.html 放在同一個資料夾裡

架構

  • project
    • index.html
    • ironman.jpg
    • img
      • ironman.jpg
<img src="ironman.jpg" alt="鐵人圖片">
  • 不知道有沒有發現,並沒有結尾的 </img>,沒錯,<img> 是不需要結尾的標籤的
  • src:主要就是要放置圖片的位置連結
    • 與 HTML 同樣位置:就是直接連接圖片的名稱 src="ironman.jpg"
    • 與 HTML 不同位置:例如圖片很多,額外建立一個 img 資料夾,這時就是要先進入這個資料夾,才能連到這張圖片,所以 src="img/ironman.jpg"
    • 直接連結網址:例如直接連到引用的圖片,就是改成 https 的網址,這時 src="https://ithelp.ithome.com.tw/static/2020-12th-ironman/event/img/2.jpg"
  • alt:是當圖片無法顯示時會出現的文字,因為對 SEO 有幫助,所以一般都會有 alt

綜合練習

  • 結合連結與圖片的練習,可以看到移到圖片時會有提示,而且點擊圖片會另開視窗
<a href="https://ithelp.ithome.com.tw/2020-12th-ironman" target="_blank" title="連到鐵人賽">
  <img src="https://ithelp.ithome.com.tw/static/2020-12th-ironman/event/img/2.jpg">
</a>

參考資料

次回

HTML 暫時先告個段落,接下來介紹 CSS


上一篇
Day04 - HTML (2) - head、body
下一篇
Day06 - CSS (1) - Element、位置
系列文
HTML 與 CSS 學習筆記31

尚未有邦友留言

立即登入留言