# day 1 認識html基礎標籤 + 開發環境 # 入門打個針 ### 技術價值衡量 全國性質大專競賽: 題目:html、css設計官網 https://www.itsa.org.tw/itsacontest/2025/history.php 104: ![image](https://hackmd.io/_uploads/SyGrpaJHel.png) ![image](https://hackmd.io/_uploads/HJj9T6kSel.png) 外面課程價格: https://hahow.in/courses/56c1e3b3e91d590900234105 https://www.hexschool.com/qa/how-to.html 3~6個月 學習時間 ![image](https://hackmd.io/_uploads/HJ_GRT1Hee.png) 這邊都免 知識哪有這麼貴，網路自學 + AI全部免費 # 開發工具 如果你很牛逼:txt、doc vscode、atom(老人)、sublime(老人2)、cursor(AI) - [vscode](https://code.visualstudio.com/download) ![image](https://hackmd.io/_uploads/rynGsZaExl.png) ![image](https://hackmd.io/_uploads/rk1F3-pNex.png) settings ![image](https://hackmd.io/_uploads/HJ7i3baNge.png) ![image](https://hackmd.io/_uploads/ryB2n-T4lg.png) # HTML是撒小 超文本標記語言（英語：HyperText Markup Language)，簡稱：HTML 瀏覽器可以直接解析並渲染成視覺化的網頁。 ## 常見標籤(tag) - <html></html> 包覆整個html檔 - <head></head> 文件標頭，內容是不渲染得比較像設定檔通常放靜態資源 跟SEO有相關 舉例:title、meta標籤 - <body></body> 渲染內容 - h1 ~ h6 標題 - div 段落(無意義) - span 小擴展(無意義) - a 超連結 - img 圖片 - p 文字 - ul、ol (無序清單、有序清單) - li 清單物件 - section 區塊 - article 文章 - nav 導覽列 - menu 菜單 - header、footer - ... **不用記、過目即可** ## 語意化（Semantic）HTML 什麼是語意化? ans:使用有意義的標籤來建構html 因為機器、爬蟲程式、搜尋引擎、AI看的是標籤(tag)，而不是渲染後的內容，所以**多使用語意化標籤**能夠讓機器更好理解分析你的網站。 - 有助於可存取性（Accessibility，簡寫 a11y） - 幫助 輔助技術（如螢幕閱讀器）理解網頁結構 - 強化無障礙設計，例如：<nav> 可以讓使用者快速跳轉主選單<main> 告訴輔助技術哪裡是網頁主內容 - 增加被搜尋引擎 index(索引)的機會 - 有助於社群預覽: ![image](https://hackmd.io/_uploads/HkW5ffTNlx.png) ## 實作練習 ### 快捷鍵 ! tab -> 快速產生html template lorem tab -> 快速產生假文 ### 即時預覽 (hot reload) 開發好用 讚讚 ![image](https://hackmd.io/_uploads/H17Fwfp4eg.png) # 小練習 ✅ 任務要求： 使用 <html>, <head>, <body> 建立基本結構 設定 title，命名為「名字 - 個人簡介」 使用 a 連結某個網頁 使用 header 放置你的名字與職稱 使用 img 插入一張個人頭像（可用 placeholder） 使用 p 撰寫一段個人簡介 使用 ul 或 ol 寫出 3 個以上的興趣 使用 section 包裝不同內容段落（例如「關於我」、「興趣」、「聯絡我」） 使用 footer 放上聯絡方式（email 或電話） 文字內容可用lorem。 範例 ```html <html> <head> <title>小明 - 個人簡介</title> </head> <body> <header> <h1>小明</h1> <h2>前端學徒</h2> </header> <section> <h3>關於我</h3> <a href="https://pizzanote.dev">連結</a> <img src="https://via.placeholder.com/150" alt="小明的大頭照"> <p>我對網頁設計充滿興趣，目前正在學習 HTML 和 CSS...</p> </section> <section> <h3>我的興趣</h3> <ul> <li>畫畫</li> <li>烘焙</li> <li>寫網頁</li> </ul> </section> <footer> <p>聯絡我：<a href="mailto:xiaoming@example.com">xiaoming@example.com</a></p> </footer> </body> </html> ``` ps:記得提一嘴img src alt設定