---
# System prepended metadata

title: 前端Week2
tags: [前端Brian]

---

---
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