--- title: 前端Week2 tags: 前端Brian --- ## 課程內容 1. markdown 介紹 2. 瀏覽器, HTML 介紹 - 標記語言 - 這兩個東西可以 google 「＿＿＿是什麼」找幾篇看得懂的文章看一看 3. HTML tags 本週課程 => https://codesandbox.io/s/holy-fog-wfpj8f - head - body - h1 - p - img - a - ul & li - div ## 作業 1. 上課介紹到的那幾個標籤有什麼功用 - head＿網頁裡的資訊，不會解碼顯示出來 - SEO - 資源: JS, CSS - body＿網頁上看得到的資訊，主要內容 - h1＿標題最大=# ##=h2 ###=h3 - p＿網頁內文（網路上得資訊＿但不知道用途 - `The <p> HTML element represents a paragraph.` - img＿圖片 - a＿超連結（網路資訊＿target 內連 or 外連是什麼意思？ - `anchor` - ul＿無序清單（網路上找的資訊 Unordered List - ol 有序 Ordered Lis - li＿清單（網路上的資訊 清單裡面的項目item - div＿分組用（網路上的資訊 ``` <div> <p>前十大熱門文章</p> <ol> <li>土鳳梨</li> <li>大鳳梨</li> </ol> </div> <p>必吃鳳梨</p> <ul> <li>土鳳梨</li> <li>大鳳梨</li> </ul> ``` 3. 查五個上課沒介紹到的 HTML 標籤(你可以開hackmd檢視模式後，用F12看看有哪些沒看過的標籤，查一下是什麼用途) 4. QA(簡答五十字內，用解釋給小朋友的方式解釋就可以) - 什麼是網頁瀏覽器？ - 就是用戶端與主機端的交互視窗，解碼給用戶端看的軟體 - HTML 是在做什麼的？ - 網頁文字與圖片的基礎架構，告訴瀏覽器要顯示什麼給用戶看 - 從網頁瀏覽器上下載的.html檔，為什麼用網頁瀏覽器才可以看到平常看到的網頁，用文字編輯器打開就是一堆<>< - 因為網路瀏覽器就像是youtube影片，接收封包後解碼給用戶看，而文字編輯器就是未解碼狀態 - 把 <> 符號/tag 解析成看得懂的內容 - `<title>` 在網頁內容中看得到嗎？原因是什麼？ ~~因為這個標示是用在img的表示提示文字~~ 分頁上的標題 (也會被搜尋引擎列出來) - `<body>` 的範圍有多大？ ~~從body到/body~~ 無固定大小 端看內容 ref: - https://hackmd.io/@Heidi-Liu/note-fe101-html 有空可看 - https://medium.com/hulis-blog/frontend-engineer-guide-297821512f4e - https://hulitw.medium.com/learning-tcp-ip-http-via-sending-letter-5d3299203660 - https://hulitw.medium.com/ramen-and-api-6238437dc544 ## 下堂課 - 看一下上一堂課的記得多少複習一下 - 介紹 CSS