1. VS Code網頁編輯器、HTML基礎教學

一個網頁最重要的內容會是h1
一個網也只會有一個h1

codepen介紹

7–網頁組成元素

html包含：head, body
head裡面的title 就頁面上分頁的名稱
body是網頁內呈現的內容包含h1標題跟p 段落

<!DOCTYPE html>  #表示格式是html5
<html>
    <head>
        <title>Annie's practice</title>
    </head>
    <body>
        <h1>標題</h1>
        <p>段落段落</p>
        <p>段落段落</p>
    </body>
</html>

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

8–
VC code有內建Emmet 可以快速生成html
使用方法

! + enter
! + tab

<!DOCTYPE html> #html file環境：html5
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> #為IE做設計 做更新
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> #針對網頁解析手機ipad做優化
    <title>Yahoo新聞</title>
</head>
<body>
    標題
    #快速創建段落 p*段落數 ＋enter
</body>
</html>

9–加入圖片

img +enter
img是少數html沒有結尾標籤的

<img src="ML.png" alt="ML圖片">
src後是圖片名稱 alt詳細資訊給試唱人士播報軟體觀看

圖片若是在資料夾內

資料夾/圖檔名稱

<img src="img/ML.png" alt="ML圖片">

<!DOCTYPE html> 
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>媁涵練習</title>
</head>
<body>
    <h1>機器學習</h1>
    <p>Machine Learning Picture</p>
    <img src="img/ML.png" alt="ML圖片">
   
</body>
</html>

11–-載入外部圖片：圖片若是在其他網站上

要加入的圖片右鍵利用『複製圖片位置』就不用存在本地端了

示範：加入奇摩logo

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

呈現方式

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

12–撰寫連結功能

位置 body下面
<a href="要連的網址"
target=_blank"(表示點進去的網頁會另開分頁)
title="點擊該連結時跳出的小框框">
連到google(連結上的字)

<a href="https://www.google.com" target="_blank" title="Googlegogogo">連到Google</a>

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

<!DOCTYPE html> 
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>媁涵練習</title>
</head>
<body>
    <h1>機器學習</h1>
    <a href="https://www.google.com" target="_blank" title="Googlegogogo">連到Google</a>
    <a href="https://www.yahoo.com.tw">連到Yahoo</a>
    <p>Machine Learning Picture</p>
    <img src="img/ML.png" alt="ML圖片">
    <img src="https://s.yimg.com/cv/apiv2/twfrontpage/logo/TW_desktop_homerun@2x_new.png" alt="">
   
</body>
</html>

13– 段落p與連結a的混合應用

在p段落要連結的地方使用a
如要在『魚』的地方放超連結

經常使用大豆、<a target="_blank" href= "https://www.yahoo.com.tw">魚</a>

    <p>
        京都大學名譽教授。武庫川女子大學國際健康開發研究所所長。以成功開發腦中風實驗鼠為契機，
        持續在世界各地進行長壽研究調查，為日本長壽研究的第一把交椅。
        從高加索地區帶回進行分析研究的優格，在日本燃起「裏海優格保健飲食風潮」。
    </p>
    <p>
        經常使用大豆、<a target="_blank" href= "https://www.yahoo.com.tw">魚</a>以及海藻的日本傳統飲食，
        已經被證實能有效抑制心臟疾病所導致的死亡。日本女性的平均壽命為 87 歲，是世界最高。
        男性平均壽命為 80 歲，排名第五（根據「2014 世界衛生統計」數據）。
    </p>

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

14– 認識 ul li列表標籤

以圖例來說 ul li就是列點跟數字的呈現

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

li 呈現的是列點

ol 呈現的是數字

<ul>
        <li>項目一</li>
        <li>項目二</li>
        <li>項目三</li>
    </ul>
    <ol>
        <li>數字一</li>
        <li>數字二</li>
        <li>數字三</li>
    </ol>

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

<!DOCTYPE html> 
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>媁涵練習</title>
</head>
<body>
    <h1>標題</h1>
    <ul>
        <li>項目一</li>
        <li>項目二</li>
        <li>項目三</li>
    </ul>
    <ol>
        <li>數字一</li>
        <li>數字二</li>
        <li>數字三</li>
    </ol>
</body>
</html>

階段練習

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>56年來最大乾旱 水庫竟有意外收穫</h1>
    <img src="https://s.yimg.com/ny/api/res/1.2/Aadp_PVpGWQ_MW7VgWurzw--/YXBwaWQ9aGlnaGxhbmRlcjt3PTk2MDtoPTEyNzkuNTc4OTQ3MzY4NDIxO2NmPXdlYnA-/https://s.yimg.com/uu/api/res/1.2/yXupTctq5xsoQblS7YOcsg--~B/aD0xMDEzO3c9NzYwO2FwcGlkPXl0YWNoeW9u/https://media.zenfs.com/ko/setn.com.tw/f26401427f371229bbfd73b700d5bdde" alt="">
    <p>台灣今年遇上56年來最大乾旱，各地水情拉警報，全台水庫的蓄水量引發關注！不過，正當各水庫水位下降導致淤積泥砂裸露，也正是水庫清淤最佳時機，水利署要求各水庫單位把握機會，全力動員機具人力投入清淤，以最大化辦理水庫清淤。</p>
    <p>水利署指出，近年政府十分重視水庫清淤工作，去年清淤量1,440萬立方公尺為歷史最高，約歷年平均值2.6倍。今年因枯旱水庫水位較低，各水庫單位傾全力辦理清淤，經統計今年1~3月清淤量達到357萬立方公尺，較去年同期329萬立方公尺數量增加28萬立方公尺，持續創下歷史最高紀錄，也是近10年平均值179萬立方公尺的2倍，未來將持續投入更多機具人力提升開挖能量，以最大化進行清淤工作。</p>
    <h2>更多三立新聞網報導</h2>
    <ul>
        <li><a href="https://www.setn.com/News.aspx?NewsID=913428&from=y">再給鮭魚一個機會！藍委擬修法增「反悔條款」：可改名4次</a></li>
        <li><a href="https://www.setn.com/News.aspx?NewsID=913367&from=y">AZ疫苗22日開打　侯友宜：新北4責任醫院準備好了！</a></li>
        <li><a href="https://www.setn.com/News.aspx?NewsID=913360&from=y">同鮭魚盡／新北市74人改「鮭」名　侯友宜：唉，無言啦！</a></li>
        <li><a href="https://www.setn.com/News.aspx?NewsID=913331&from=y">石門水庫蓄水量剩42％　漁民：水變少魚都往上游跑了！</a></li>
    </ul>
</body>
</html>

codepen介紹

7–網頁組成元素

9–加入圖片

圖片若是在資料夾內

11–-載入外部圖片：圖片若是在其他網站上

示範：加入奇摩logo

呈現方式

12–撰寫連結功能

13– 段落p與連結a的混合應用

14– 認識 ul li列表標籤

li 呈現的是列點

ol 呈現的是數字

Read more

3.使用CSS變更HTML標籤特性

Javascript學習

2.CSS常用語法

2. let const var 介紹