今天要介紹三種常見的元素

列表清單

列表主要分為兩種:有順序跟無順序的，清單內還能放其他清單
<ul> 代表無順序的(unordered list)
<ol>代表有順序的(ordered list)
兩個都會在內層放上<li>配合呈現

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

效果如圖

兩者也可互相搭配

<a> 超連結

這是一段超連結的程式
<a href="https://www.google.com/?hl=zh_TW" target="_blank" title="連到google">google首頁</a>
<a href="https://www.google.com/?hl=zh_TW" target="_blank" title="連到google">google首頁</a>

• <a> </a>：主要就是用來建立超連結，除了文字連結外，當然也可以讓圖片作為連結
• href：用來確定要連到哪裏，也就是目的，沒有輸入的話就不會有反應
• target：當沒有這個屬性時，會發現會在當下的網頁視窗進行變更，當加入 target="_blank"，會另開一個視窗顯示
• title：在滑鼠移到這段文字時，會有一個小視窗顯示設定的文字

<img>圖片

先將下圖儲存並將名稱改成cat.jpg，然後跟html檔放在同一個資料夾

<img src="cat.jpg" alt="貓咪圖片">

• 可以發現程式裡面並沒有</img>，<img>是少數不需要結尾的標籤

• src:放置圖片的連接位置

  • 與 HTML 同樣位置：就是直接連接圖片的名稱 src="cat.jpg"

  • 與 HTML 不同位置：例如圖片很多，額外建立一個 img 資料夾，這時就是要先進入這個資料夾，才能連到這張圖片，所以 src="img/cat.jpg"

  • 直接連結網址：例如直接連到引用的圖片，就是改成 https 的網址，這時 src=" 直接連結網址：例如直接連到引用的圖片，就是改成 https 的網址，這時 src="https://ithelp.ithome.com.tw/static/2020-12th-ironman/event/img/2.jpg"

• alt：是當圖片無法顯示時會出現的文字，因為對 SEO 有幫助，所以一般都會有 alt