--- title: 1. VS Code網頁編輯器、HTML基礎教學 tags: JavaScript工程師養成直播班 --- ## 一個網頁最重要的內容會是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> ``` ![](https://i.imgur.com/s114DR6.png) 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 ![](https://i.imgur.com/eZrRW09.png) * ### 呈現方式 ![](https://i.imgur.com/tvoeirM.png) ## 12--撰寫連結功能 位置 body下面 <a href="要連的網址" target=_blank"(表示點進去的網頁會另開分頁) title="點擊該連結時跳出的小框框"> 連到google(連結上的字)</a> ``` <a href="https://www.google.com" target="_blank" title="Googlegogogo">連到Google</a> ``` ![](https://i.imgur.com/CWDQP04.png) ``` <!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> ``` ![](https://i.imgur.com/PNhZ01U.png) ## 14-- 認識 ul li列表標籤 以圖例來說 ul li就是列點跟數字的呈現 ![](https://i.imgur.com/GB8EvwC.png) ### li 呈現的是列點 ### ol 呈現的是數字 ``` <ul> <li>項目一</li> <li>項目二</li> <li>項目三</li> </ul> <ol> <li>數字一</li> <li>數字二</li> <li>數字三</li> </ol> ``` ![](https://i.imgur.com/PUnJWRq.png) ``` <!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> ```