列表清單 (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 超連結 <a> 標籤 (tag)
• HTML 圖片 <img> 標籤 (tag)

次回

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